Principles of good web design: what you need to know

Has it ever happened to you that you saw something out of the corner of your eye and thought it was a pen or some other object, only to realize it was just a shadow? It's something people with severely impaired vision struggle with: the brain automatically interprets shapes and makes us believe we see an object where there actually is nothing.

This is called "perception". And the field of research and the basic principles of perception are called perceptual psychology.

It is particularly interesting for marketing, as colors, sequences, fonts, images and much more are also interpreted and thus determine whether a supermarket, a flyer or a website is perceived as "pleasant", interesting and easy to read or not.

For websites, the time factor is crucial: users should be able to find all the information they need at a glance, without scrolling. Furthermore, the content should be compelling and encourage readers to make a purchase.

Coupled with the right calls to action, this should lead to success.

The next most important factor, however, is the naturalness of the reading flow and the ease with which a text can be understood. This is achieved by carefully considering the structure of text, web pages, and images within the overall concept of the website, in order to create a natural and engaging reading experience.

If a website is not perceived as pleasant and "natural", then users will not stay on it for long and consequently cannot be converted into paying customers.

Designing this reading flow determines how the eye is guided through the design. It involves deciding where it looks first, where it is directed next, where it pauses, and how long it lingers there.

This is done based on knowledge of perceptual psychology and how users typically read.

In fact, every element of a website has a visual weight that attracts the user's eye to a greater or lesser degree. This can be used to give the website a "visual direction." For example, red has a higher visual weight than blue. Larger, darker, and more regular elements also have a higher visual weight.

Elements in the foreground appear more important than those in the background. And vertical elements are lighter than horizontal or diagonal elements. Furthermore, the further one moves away from the center of a composition, the greater the perceived weight of the elements becomes.

All of this can be used to guide the eyes from focal point to focal point and to have a natural flow in the website.

Naturally, this flow also depends on the language. English is read from left to right. For Arabic, the flow would have to be adjusted from right to left.

The Gutenberg diagram.

Studies have been conducted on the precise eye movements when reading newspapers or websites, and it has been found that there are a total of 3 patterns when content is evenly distributed.

• The Gutenberg diagram: In this pattern, the eye moves from the top left to the bottom right, passing through the center of the page. This means the top right corner and especially the bottom left corner receive less attention.
• The F-pattern: In this pattern, the eyes look from the top left to the top right and then slightly further down, repeating the same pattern. This gives the pattern the shape of an F.
• The Z-pattern: The eyes look from top left to top right and then move diagonally to bottom left before the movement is repeated.

Therefore, if a website has a lot of text, it's worth following the patterns mentioned above. The Z-pattern is typically used for storytelling.

However, when design elements are used, these patterns disappear, and the principle of visual weight applies. Nevertheless, important information can be positioned in such a way that the eye is automatically and naturally drawn to it.

Designing the reading flow

To achieve optimal storytelling on the website, it is worthwhile to design the website accordingly and arrange the information in the correct sequence.

To create a good flow on the website, it is important to combine the principles of visual weight and reading direction.

The reading flow typically begins with the most prominent element. Elements can then be used strategically to guide this flow.

Elements used to guide the reading direction include:

• Repetitions
• Diagonal lines
• Directional lines and arrows
• Perspektive
• Color gradations, etc.

The primary function of lines is to guide the eye. However, they can also be used to interrupt movement in a particular direction, thus stopping or redirecting the reading flow.

Therefore, use elements and lines to guide the reading direction or to stop the movement.

Logic of the sequence

For the website to flow smoothly, it's also important that the sequence appears logical. For example, the "Search" button should be to the right of the input field, since the automatic reading and action process proceeds from left to right.

Design and flow

When designing websites, dominant elements and focal points should be used to guide the eye. Furthermore, patterns and sequences can be created through similarities and contrasts, which also facilitate reading the website.

examples

Here are some examples of past projects to illustrate the principles mentioned above. We are happy to discuss this further. MIC Group Team in Zurich at your disposal to look at further examples with you and advise you on all possibilities:

MK Technik AG

When looking at the MK Technik AG website, one's eye is immediately drawn to the red color in the Logo and then, due to the linear boundary, on to the menu.

From there, the eye automatically moves to the focal point, the house, and then slightly downwards to the title and slogan. Next, you see the "About Us" section with the image, and then the emerging red dots guide you to the content on the right.

Restaurant Da Leone

The Da Leone restaurant website features a strong horizontal flow. The logo is the first thing that catches the eye.

The eye is then drawn by the bar to the right, across the menu – attracted by the white box containing the welcome text. This is the website's standout element, explaining in three sentences what visitors will find on the site, how the restaurant distinguishes itself from others, and how it values ​​its guests.

Glas Oberland GmbH

Glas Oberland GmbH also used a header to guide the eye from the logo in the top left corner through the menu.

The red color naturally draws the eye downwards, where it naturally sweeps over the company's title and slogan. Contrasts were also used to create a flow across the website. For more information, please visit the company's website at http://glasoberland.ch/.

Summary

As we've established above, you have a great deal of influence over how users read and perceive your website. Take advantage of this! Simply contact us for a free consultation – we'd be happy to help.