5 principles of good design

Typography

Communication within the web design context frequently means text. Oliver Reichenstein, who is an information director and founder of Information Architect, conducted a mini-research project and discovered that 95% of web design is made up of typography. The typography in a good design should have a minimum number of fonts, an appropriate line length, an optimal line spacing, and a well-viewed structure. Now we will focus on each of these factors in sequence.

The minimum number of typefaces is necessary to keep the composition clear and avoid any chaos in it. The best decision is to use fonts that belong to the same font family or have common characteristics. Then they will come together more harmoniously.

The appropriate length of the line is the key to the text reading on a site. There must be a golden mean because when the length is too short the dynamics of the text are lost and the reader must continuously interrupt their reading to take up another line. But if it is too long, it will take a lot of time to focus on what is learned. The width of the line should contain up to 60 symbols. This is the amount that the Baymard Institute recommends for the most comfortable use of the site by the user.

Optimal line spacing, or as it is also called line height, contributes to the text readability. According to the rules, the line spacing is supposed to be 30% more than the height of the symbol, if we are talking about a paragraph. When it comes to a couple of text lines, the leading indicators should be less so that the text does not fall apart.

The structure of the typography is its final design. When a person sees in front of them nothing but letters, it becomes complicated to understand the meaning of this chaos. If it is split into words, sentences, and meaningful blocks, it seems real to understand the content. The task can be facilitated if the text is structured, the headers are stripped with a different size, the style is changed, and quotes are highlighted. Afterward, the text can be read much easier and faster.

Minimalism — keep it simple

What is commonly described as multitasking, in fact, is a quick switching between tasks. People at high speed turn from one object to another, only changing the focus of attention. For this, an intense concentration of attention and great intellectual work is required.
The principle “keep it simple” is based on the first law of usability – the web page should be visible. It also has such advantages as simple navigation, fast resource loading, consistency and focuses on content.

Simple navigation is achieved by the absence of unnecessary elements and simple structure, respectively, with download speed being top. The less a user needs to wonder about the purpose of their actions, the better their impression of the site — it is the essential usability principle. Due to minimalism, it is getting right to refocus the visitor’s attention on the essential features.

Test early, test often

Testing is essential because it provides you with the opportunity to assess the work accurately and take a look at what might go wrong with it. We discussed how important the testing process is in the MVP article. It also assists in the correcting of gaps and examining what is suitable for the users and what is not.

Firstly, testing is far more effective if it is conducted with a live target audience. It is also worth recalling Weinberg’s Law, which states that developers are not able to test their code, which also applies to designers. You must admit that it is not always possible to accurately assess what you are doing. And if you turned an “I am an artist, that’s how I see it” mode on, you can generally start to fight back against someone else’s criticism.

And, secondly, testing should be started as early as possible. Thus the team saves time and lowers their budget. You don’t need to edit the mistakes as they can be prevented, and corrected something during the early stages. This is far cheaper than with a final product.

Principle of contrast

The contrast is significant in design: it draws attention to the necessary details, makes the appearance more attractive and exciting to the user, and also creates a visual hierarchy. We will consider the role of size and color contrast.

Through size contrast, you can emphasize more significant features or text headings/subheadings. This is performed in the following manner: we place two elements of the structure next to each other and the attention primarily is focused on the bigger object.

Comfortability with the background color contrast speeds up the reading of the text. Before choosing a color scheme for your site, it’s worth initially drawing the attention to the foreground and background contrast. There are aspects to this, for example, the characteristics of contrast in non-textual content (video or animation), differ from the text. There are various tools to verify the level of the contrast, but for this, it is necessary to familiarize yourself with the indicators. For example, AA is the minimum contrast, AAA is improved, and Fail when the contrast is insufficient.

Composition

The composition is the location of objects when they are in harmony with each other. It is through composition we can balance the features, that have different characteristics: color, shape, size, and significance. Accordingly, the aim of the composition is its balance. Curiously, elements that are closer to the central axis weigh more from those that are remote from the center. We will consider the importance of the color in a composition, the rule of thirds, and how both through composition a visual hierarchy is created.

Color in the composition plays an emotional component and attracts attention. Color contrast we’ve already discussed, now let’s talk about emotions. Depending on the saturation and hue of a particular color, it depends on how a person will perceive the product as a whole. If the colors are bright, then they will invigorate; if muffled, they will relax. Choose the emotion that you want to send to your visitor and the right color or its subtone.

The rule of thirds provides a better understanding of what and where to place. For use the rule of thirds, you need in your mind to divide the page into nine equal parts, visually by holding a couple of horizontal and vertical lines. According to psychology, people pay attention to the intersection of these lines, respectively – they are the most advantageous. This should be taken into account during the arrangement of the details in the composition.

It is simple to control the user’s view — you need to create a visual hierarchy. A lot of psychological research has been done on this subject, and it’s worth remembering that people scan the screen with the letter Z. This information should be used to arrange the details on the page in the correct order and draw attention to particular elements.

Let us get this straight

While designing the site, it is worth remembering the users for whom you create it. Clear text, logical structure, appropriate contrast, minimalism and proper testing are the guarantee to good design and its underlying principles.