4 key principles of web design

December 14, 2020

If you’ve ever investigated the principles of web design, you’re probably more than acquainted with the following attitude: “These days, web design is just so simple.” Designers hardly need to deal with any of the limitations that formed the early days of the web with lightning-fast internet speed and sophisticated browsers. More than ever, a website is a canvas for a designer.”

From the perspective of someone already familiar with the basics, this may be true enough but if phrases such as “CSS responsive grid system” and “Google Web Fonts” are unfamiliar to you, then it may still seem a daunting proposition to leap into the seemingly “oh-so-easy” world of web design.

In consideration of this with the beginner in mind, we put together a truly simple set of fundamentals of web design. Of course, reviewing the basics is never a bad idea, particularly though you consider yourself to be a wiz.

1. Grid systems

The grid has been deciding how we read since the invention of the codex in the 1st century. Thousands of variants have arisen over time, including various row and column configurations.

Think of the way in books, newspapers and magazines, text and photographs are organized. These are the structures that have been brought over to the web more or less directly, and they function. Word to the wise: in the name of “creativity” many designers have tried to escape the grid; many such websites go unread.

grid-system

The problem of “responsive design”-designs that translate to smaller screen sizes in a seamless and deliberate way-is also paramount in a world where people are more likely to browse the web on phones and tablets than on conventional computers. A large number of pre-fabricated grid systems that are responsive, compliant with major coding languages, and generally free to download have emerged to make our lives easier.

960.gs, Simple Grid and Golden Grid System are some common ones, but the list of good choices is truly immense, with some being more complicated than others. To get you started, here’s a nice article from WebDesignerDepot.

Of course, if you feel ambitious or feel that your project calls for a completely creative solution, then build your own by all means.

2. Visual hierarchy

Basically, it’s a known reality that people read left-to-right and top-down in most cultures. It is however, also a known fact that reading behavior follows a far more complex set of rules within these parameters. This is particularly true on the internet where people “scan” pages a lot more than they “read” them.

In response to these calculated reading patterns, successful web pages are designed by placing essential elements, such as the logo, call to action or a main picture, along the axes that the reader is supposed to search. They take either a “F” or a “Z” form conventionally.

z-pattern

In addition, visual hierarchy is about asking readers what should first be read and what should next be read. This may include techniques such as font size, spacing, direction and typeface pairing after page placement, as well as the use of color highlights.

3. Web-safe fonts

The phrase ‘web-safe fonts’ already sounds like something of an anachronism in 2014. Back in the early days of the internet, browsers supported a very small number of fonts, usually only those that were already installed in the word processing applications of users, and some visitors would simply end up seeing random symbols if you deviated from them.

Today, it is still true that most browsers support some fonts while others do not, but the number of web-safe choices has exploded thanks to the acceptance in most modern browsers of what is known as @font-face embedding. Many artists, indeed, complain of getting too much to choose from.

Typekit, WebINK and Fontspring contain fee-based font services. If you do a little digging through free services like Google Web Fonts, you will find nice free fonts, too. Here is a recent roundup by CreativeBloq of nice free web fonts.

There are only a few general rules to bear in mind now that you know where to look:

  • For headlines, Serif fonts are

Serif fonts are always used for headlines in web design, since they become difficult to read in smaller sizes. Generally, body text should be sans-serif.

  • Holding fonts to a minimum

Keep to a minimum the number of different fonts on a website to minimize clutter. Two or at most three. For more detail, check out our recent article on smart font pairing.

  • Don’t take up too much space,

Note that some font files can be very large, and this might probably slow down a website’s load time.

Serif-font

4. Images and colors

The principles of image and color placement are not especially unique to web design, so we won’t go into too much depth here. The main maxim to keep is: don’t overdo it.

For colors:

  • Keep the color palette to a minimum

Only stick to 2 or 3, like fonts. Of course, they should echo the branding of the host, while serving to highlight significant areas, as noted in the section on “visual hierarchy.”

gmail-homepage

  • Consider color blindness

The fact that something like 5% of the (male) population is colorblind is one other factor worth holding in the back of your mind, so watch out for your color pairings.

For Images:

  • Maintain minimum movement

Avoid pictures which move. Withstand the desire to flash. And .gifs, unless performed with the utmost skill, are highly questionable. Studies indicate, in general, that audiences prefer websites that remain silent.

  • Thoughtfully pick photos

Don’t just use photos as a way to fill space; visitors will quickly pick up on this and can lose interest in your website. Instead, use only photos that convey useful detail, illustrating the accompanying text or explaining something about a specified product. This article on Designinstruct deals more in depth with this issue.

  • Still abide by all limitations on stock picture licensing

Be careful of the copyright requirements relevant to your pictures. Most images are copyrighted, meaning that according to your needs, you or your customer would have to pay to use them.

  • Maintain limited file sizes

Make sure the size of your picture is as small as possible (web resolution is 72 ppi). Photos often account for 60% or more of the size/loading time of a web page.

Looking for the perfect web designer? We’ve got designers for all styles and budgets at DigiVats