Web Design 2020, 2021: Major Mistakes

People have a different idea about which web design is good and which is not. But how to understand what is right for you?

People have a different idea about which web design is good and which is not. Some people think that a site should have a cool, ultra-modern design in order to attract attention. Others believe that site design is not so important, and you just need a site that works and performs technical functions. 

Both answers may be correct depending on what kind of business we are talking about. But how to understand what is right for you? And how can you be sure that the designer knows what to do and will not make mistakes? 

This review presents the seven most common and fatal web design errors that you should not make on your site. The good news is that these are fairly simple principles that are easy to follow. Regardless of whether you want a sophisticated and stylish design or not, you still need to know about these principles. In addition, you can use these rules to make sure your web designer knows what he is doing. The fact that a designer is good does not mean that he knows exactly what your sites should be. And the fact that someone develops sites does not mean that he knows which site is needed to give a good conversion in your topic. 

Error 1: small print

The first error is the use of too small fonts. 

The reason is that in the past most sites had small fonts. The standard was somewhere around 12 pixels, and almost all followed it. But over time, people began to realize that 12 px fonts were hard to read from the screen. When the monitor is half a meter away from someone's face, small fonts make reading difficult. 

It also became clear that there is a very limited amount of time to attract the attention of the visitor and to let him know that your site is what he needs. One study even says that the average length of the “attention window” in 2013 was 8 seconds, which is one second less than the memory of a goldfish. The same study says that on average, people read only 28% of the words on a site page. 

A 2013 study showed that the average attention span of people is 8 seconds, one second less than that of a goldfish. Is this even possible? 

To get people's attention right away, you need to do the following:

• Create cool headlines that catch the attention of readers
• Write interesting content that will make them read more than the 28% of the words
• Use a large and noticeable font for headings
• Make sure that the font of the main text is large enough and doesn't make you break your eyes when reading. 

For the reasons mentioned above, font sizes over the past few years have increased to such an extent penalty that now 14 pixels is considered the minimum size, and many sites even use 18 pixels as the main font, especially if you need to read a lot on this site. Here are some examples of exceptional web design with large font sizes:

Headline: 35 px, additional text: 15 px < / p>

Headline: 41 px, additional text: 18 px

Headline: 26 px, additional text: 19 px

 

The purpose of the text on the site is to be read. When you pay good money to a copywriter or diligently fill a site on your own, you must be sure that it is well read and does not annoy visitors with a small print. 

You should also remember that not all fonts are the same size. The Arial font is 16 pixels smaller than the version of another font by 16 pixels. You need to know this when choosing a font size, and therefore it is not worth randomly choosing a font size of 19 px only because it is done on another site (on which the font itself is different). Auxiliary fonts in the basement may be smaller. But if you wrote something that people should read, use at least a 16 px font. If you don't take my word for it, check out Smashing Magazine: they preach the same 16 pixels for the main text. Anything less is a costly mistake. 

Pro tip: To find out the font size you want to use based on your favorite websites, download the WhatFont extension for Google Chrome. This is a Chrome plugin that allows you to simply click on the text to find out what type of font and size is used on the site. 

Error 2: sliders

I still don't I understand why so many sites use sliders. 

Are they effective? Do they convert? Are they the best way to present your information to clients? 

In most cases this is not so. 

We listen to Chris Howard from WiderFunnel and Tim Ashe from SiteTuners who say the following:

We tested rotation offers over and over again and found it to be a poor way to present the contents of the homepage © Chris Goward

Scrolling banners are an absolute evil. You need to immediately abandon them. © Tim Ash

Now let's listen to usability guru Jacob Nielsen. He conducted a survey of visitors to the Siemens website whether they have special offers on washing machines on the site. In reality, they had a proposal (written in font size 98), which stated that customers can get cashback when buying. Unfortunately, users did not see the offer, because it was lost in the moving slider and, as a result, completely disappeared from the field of attention. 

I recall the opinion of conversion specialists who say that sliders cause “banner blindness”, similar to blindness with respect to advertising banners in the sidebar of the site. People are used to side advertising, so they tend to ignore it. This principle seems to apply to sliders. 

Another study was conducted at the University of Notre Dame. They found that only about 1% of visitors clicked on the slider, and 84% of these clicks fell on the first slide. 

ND.eu Click-through Results sliders

What is the point of placing the slider if only 1% of people click on the huge block that takes up the most valuable space on the main page, especially if 84% of these clicks are in any case, only the first element falls? Why annoy people with moving information that's hard to read? Why not leave them one static option, if the majority still clicks on the first item? 

So, why do so many people use sliders, although they seem so ineffective? 

The best theory, which I can think of is that a slider seems to many to be a cool and high-tech function, people see these sliders everywhere and consider them a logical trend. In addition, the slider is very easy to implement for a web developer. Based on these two factors, business owners say: “Oh yes, we definitely need a few automatically moving sliders,” and web designers obey because it's not so difficult to do. 

But website owners should consider whether these sliders are effective and whether they are the best way to transmit information on their website, which Chris Howard, Tim Ash, Jacob Nielsen and many other well-known Internet marketers and designers don't believe at all. 

An example of website design without a slider

To solve this problem, start by asking about how to best present your information, instead of choosing the site you like and copying its design, including the “stylish” slider that is used there on the main page. So, the summary on this part:

• You should not blindly add a slider just because everyone else does it (even if your designer recommends doing so)
• Think about the best way fill out the information on the main page without thoughtlessly copying what your competitors are doing
• Choose one important offer for placement at the top of the main page. There will always be other offers that you want to advertise, but you can do this below on the page or in another section of the site. Choose one sentence, make it noticeable, and then do not stop the visitor from climbing your site. 
• And finally: think about the main goal that you are pursuing: what should the user do on your site? Focus on that and add the rest of the calls to action. 

Error 3: Low-contrast fonts

The third huge mistake people make is the use of low-contrast fonts. 

Low contrast means a fairly light font on a light background or a fairly dark font on a dark background. It may sometimes look interesting in the printing industry, but it never worked on the Internet. 

We should strive to make the site content as convenient and easy to read as possible. The Smashing Magazine article mentioned above says that the amount of light penetrating through our eyes at the age of 40 is only half the amount of light penetrating through our eyes at the age of 20. This figure drops to 20% at the age of 60. 

With these statistics in mind, do you really want visitors to have a hard time reading your text, especially after you paid decent money to get them to your site first? 

An example of using low contrast text. So-so-so idea. 

You can solve this problem by always using high-contrast fonts. If the background is dark, the font should be light, and if the background is light, the font should be dark. 

Cases when you need to use some other font color, in addition to black or white, are very rare. Sometimes designers choose a light gray font on a white background or a light blue font on a dark blue background. 

Why? Is it really easier to read, or are they just trying to add “visual appeal”? For some reason, books always use a black font on a white background - and they are easy to read. It would be good for web designers to follow this example. 

Here are some examples of excellent font contrast:

Looks good

Good contrast on the background of the image. This is not easy to achieve. 

Another example

< p> The principle is that fonts should always have high contrast relative to the background behind them. If it is difficult for you to read the text and it seems to you that it should be more contrasting, do not hesitate to inform your designer about it. Your site is not a design portfolio. This is a place to sell and increase conversions. 

Bonus tip: not only high contrast is important, but also the most moderate use of inversion. (Inversion, or inversion is white text on a black (or color) background instead of black text on a white background.)

In fact, David Ogilvy, one of the greatest advertisers of all time, said that advertising never should not be done in inverse. Colin Wildon, editor of Australia's largest automotive publication, decided to test this theory. His findings were astounding. 

The following is a list of perceptual levels for different colors and backgrounds according to the study:

• Black text on white: 70% good, 19% satisfactory, 11% bad
• White text on black: 0% good, 12% satisfactory, 88% bad
• White text on purple: 2% good, 16% satisfactory, 82% bad
• White text on royal blue: 0% good, 4% satisfactory, 96% bad

Isn't that amazing? The results of black text on a white background compared to white text on a colored background are almost the opposite! 

Conclusions:

• Always try to use high-contrast fonts
• Use inversion as little as possible. 
• Sometimes inversion looks good, but it can greatly affect readability and perception. You should use it only for those parts of the site that do not require a lot of reading and are not too important. In general, you should think twice before using inversion. 

Here on the HubSpot main page the inversion looks“ cool ”, but this is hardly the best option in terms of readability and perception, especially in the most important place on the site. 

Error 4: poor lead

Line spacing is often ignored. Even when a client decides to order a turnkey website , many web designers and developers choose a font, choose a size, arbitrarily choose the distance between the lines and end there . 

But the lead has an amazing effect on the overall design and appeal of the site. Selecting the wrong line spacing may cause the text to appear crumpled. This can ruin the whole site design. 

Fortunately, talented web designers are well versed in this and will choose the right line spacing for you. The bad news is that the average web developer does not follow this and often puts the wrong line height. DIY Themes Chris Pearson felt this so strongly that he created a lead calculator using the golden ratio. Here is the definition of the golden ratio:

Google's Golden Ratio Definition

The practical point is that the golden ratio is a proportion that seems aesthetically pleasing. Omitting the details, I'll say that Chris Pearson used this ratio to create a calculator that links the font size and the width of the content to calculate line spacing. The calculator makes the calculation very easy: just plug in your font and you're done. 

Line spacing calculator

Error 5: lines too long

< p> Another mistake that almost everyone makes is to use too long lines of text. 

And what is the optimal line length in general? 

The Baymard Institute published an article stating that it is better to use 50 to 60 textacters per line, max MUM 75 textacters. Line length is so important because lines of text that are too long are hard to read. If the length is too long, some people don't even start reading, because they unconsciously feel from experience: it will be difficult to read. 

On the other hand, if the line length is too short, you need to constantly move your eyes between the end of the last line and the beginning next, and this is annoying. This problem is compounded by the popularity of the rubber design. If you do not pan out the maximum width for the content part of the site, you have no way to specify the length of the line in the text of your blog or any other piece of text, since it will depend on the screen size. 

At the time of writing, the Baimard Institute solved this problem by setting the maximum width of their text to 516 pixels, which is an average of 65 textacters per line with a font size of 18 pixels. It is convenient to read such a text. 

An example of a successful choice of string length

Once again: this is a part that cannot be all designers will pay attention. But now that you understand that long lines of text are hard to read, you can instruct your designer and developer to set the optimal width for the text. 

Error 6: No emphasis on CTA

The following error: lack of accent color. Here's what I mean. 

Good internet marketers know they need off-color to get attention to calls for action. If you ask someone to "Buy now" or "Download a free trial," you must make sure that you use a button color that will attract people's attention.