Most common web design mistakes

Typical web design mistakes made by website owners

We are writing 'by website owners' because we believe that the mistakes listed below are not made by professional web designers. Well, there are some cases when they are indeed commited by a web designer, but only because the designer does exactly what the client insist on. Of course, the "client is always right", but sometimes the result is not the best one, let's admit. So to avoid typical mistakes, it's always recommended to listen to the professionals, even if you don't like what they say.

If you are browsing in this topic for a few minutes, you'll find enormous lists in which everything but the kitchen sink is associated with 'design'. Some professionals mention a lot of different technical issues as if they were 'design' mistakes. Here - true to the title - we are writing only about those things which really belong to web design. We don't just describe the mistake itself - we also write about the reasons and the underlying motivations that lead to those mistakes.

Why are these mistakes made in general?

There are many big and famous website building solutions for non-professionals, and they are very often advertised by giving the impression that you can create your own great website without any special preparation and pre-education. These are either online website builders or CMS: Squarespace, Wix, Wordpress, Joomla, just to mention a few. Their technicality is really amazing, however, the result is quite often not 100% satisfactory. Never forget that you do need to know how these systems work, and even if they are relatively easy to use, you can't make a good website without having a solid technical and visual education.

Of course, if someone takes time and puts energy into learning, it will alleviate the chance of making basic mistakes. (It's still possible to make a lot of further mistakes, but those will be related to SEO, UX, website speed and other issues rather than web design mistakes.)

Let's have a look at typical web design mistakes - and the reason behind them. If you know the source of the problem, you'll be able to amend it.

Web design mistakes ordered by how often we encounter them

---

The content is hard to skim

Perhaps this is one of the most typical mistakes. Website visitors spend just a few seconds on a website before they make a decision whether to stay or leave it. The website should show a clear and easily skimmable view to deliver its message. To create a clear picture, we need to use the headings (H1, H2, H3, etc.) properly, use easily legible font size, well-structured paragraphs, lovely images. Visitors would stay on the site if they got what they were looking for. If by skimming, they found something they need, the mission of the page is completed.

Why don't website owners focus on this area? Because they are so deeply involved in the details of their business that they can't pick the most vital points of it.

Poor use of whitespace

We are asked by website owners quite often to reduce the space between text lines/paragraphs/images/sections. Interestingly, when the same business owner takes a look at another website making use of more whitespace, they always like what they see. But when it comes to their website, they always try to squeeze the content in. Why? It's just pure psychology. They try to deliver a very 'compressed' information package to the website visitor, hoping that the more information they give at a glance, the more chance they have to get a new client. Obviously, this approach is wrong.

Just like in a conversation, people add gestures, space, extra time to their speech. Website content is quite similar. It needs space, time and' gestures'. That's why whitespace is essential.

10-15 years ago, whitespace wasn't mentioned very often. This happened not because the 'rules' of legibility or aesthetics have changed since. But there is such intense competition that websites need to be more and more sophisticated in terms of quality and precision.

Apple is a nice example of using whitespace beautifully:

Small font size, buttons and/or links

This is readability and user experience (UX) issue. When an average website visitor has the impression that they would need a magnifying glass to read your site, they clearly won't bother and just leave. Small font size is effortless to fix, but you have to deal with this issue right at the beginning. Advice: Always think of legibility. Even if you believe that the font size is right, it doesn't necessarily mean that it's easily readable by everyone. Website owners often don't know that this issue has an impact on SEO as well.

TEXT IN ALL CAPS

NON-PROFESSIONALS TEND TO THINK THAT WRITING EVERYTHING WITH CAPITALISED FONT WILL ATTRACT MORE ATTENTION. It's definitely not true. Why do people make this mistake? Because they believe capitalised text will bring more awareness and as a result, more business. This issue is called 'shouting in writing'.

Text with too much colour

Is it an excellent way to emphasise? We don't think so. It will confuse your website visitors. You will have many colours on your site anyway. Be consistent and use colours wisely, having a clear concept. Following this rule, your website visitors will always recognise the links, headings, paragraphs on the website; hence, they will get a clear website experience.

Badly chosen stock photography

Yes, we know how expensive a professional photoshoot can be. So, if you can't afford to hire a photographer, you can use stock photos. However, pay attention to avoid cliches. Instead of hiring a professional photographer, ask a designer to make tweaks and changes on your photos to make them as unique as possible.

Irrelevant images

Although there are hundreds and thousands of stock images, it's not easy to find the proper ones. Website owners tend to get lazy and pick something just because they are fed up with searching. It undeniably takes time to find pictures that will spice up the website, but it's really worth it.

Favicon is missing

It's a small but essential issue. it can be mentioned in the SEO section as well as in the web design section. A favicon helps the visitor to find your website's tab when many tabs are already open in the browser. It's also crucial for SEO because on mobile devices Google shows the websites' favicon in the list of search results.

Choosing an unclear font

When using a website template, you have less chance to use an obscure font. However, many systems allow users to select from a large variety of font families.
Why do website owners choose a font that they shouldn't? Because they'd like to make the website 'stand out'. Of course, the website has to stand out, but in a different way.

Using too many fonts

It's not a very common mistake, but it still happens. Bear in mind, one single font family with all its size options, with bold and italic variations gives so many different versions that it's already much more than you need. Using more fonts has a negative impact on page speed because it takes time for every single font file to download. Unless there's a specific reason to use more than one font family, it is recommended to avoid using more fonts.

The reason behind this mistake is similar to having less whitespace than needed. Website owners tend to think that using more fonts will make the website more 'interesting'. Yes, it will. But not in a proper way.

A few other web design-related issues which might generate debates:

Changing the colour of visited links
Some designers think that websites have to mark visited links with a different colour. We don't believe this is the case. It is true that many years ago, all website links were blue, and when you clicked, they turned to purple. Perhaps many of you still remember it. The technology was far from today's advanced solutions, and website visitors were much less experienced. And of course, websites were much simplistic, used only the default colours of the Internet. As a point of interest, here is the world's first website, which is still working. 
Nowadays, however, very few sites change the colours of the links you visited. Visitors need to deal with a lot of visual information anyway. In our opinion, changing the links' colour could make the website visitors confused.
Of course, there are websites where this solution is useful, but this is less frequent. So, in most cases, do not set a different colour for the visited links.

Logos in the top-centre position
Sometimes, website owners like to see the company logo in the centre. Unfortunately, it's better to avoid. People use the logo as a navigation element. Due to this research, we know that it's six times better to put the logo on the top left of the screen. However, on mobile devices, the logo is in the centre quite often, because of lack of space.

Avoid using 'invisible' navigation menus
Using hidden navigation menus is a somewhat controversial issue. Of course, the so-called 'hamburger' menu is standard on mobile devices. In our opinion, on desktop computers, it should definitely be avoided. However, according to the latest trends, it is fashionable to use the same menu on desktop devices. More and more websites are using this solution. We are a bit 'Luddite' in this question, and we prefer the traditional, visible menu on a desktop screen.

Let's have a look at other mistakes.

There are many websites and blogs writing titles such as 'x typical web design mistakes', but we found many of these sites confusing. We don't mean that these websites write anything wrong or unprofessional. All the mistakes they mention are real mistakes and problems which are recommended to avoid.

We just think that the information they give is not categorised in a clear structure. Unquestionably, website development and web design is such a vast topic that it's challenging to put one issue into one single category.

Having said that, here is a bunch of so-called 'web design mistakes' which we think definitely belong to other areas.

Other 'misinterpreted' website issues which belong to communication, marketing and other concept issues:

• It's not clear right away what the website is about.
• No contact information available easily.
• No clear 'call to action'.
• Brand messaging is not clear
• Social media icons at the top of the website
• 'Carousel' on the home page

Further technical issues

• "Your website doesn't work with all modern browsers"
  Well, we slightly disagree with this. As a matter of fact, there can be technical issues when one of the modern browsers doesn’t show what we expect it to display. But the more significant challenge is just the opposite: Building a website which works well on the older browsers as well. Although there is only a small percentage of browsers which don’t comply with new requirements, we still have to think about them and be able to solve the compatibility problem when it occurs.
  

---

Finally, let's have a look at 'mistakes' mentioned by other websites that we believe are not mistakes.

What can be considered to be a mistake by definition? 1) When someone wanted to do something well, but got it wrong due to lack of expertise; 2) The concept is faulty.
However, if something is missing beacuse the person has not yet dealt with the issue, is - in our view - not a mistake. It's an 'incompleteness'.

The following list contains items others often mention as 'mistakes'. Although we don't think of them as design mistakes (rather part of a technical / UX / SEO to-do-list), no doubt, you should deal with them as well:

Technical issues

• Lack of Search Engine Optimisation (SEO)
• No Analytics installed
• Speed issues
• Slow web server response time
• Bad image sizing and scaling
• Missing metadata
• You've become overly dependent on JavaScript
• There's no image or file compression
• There's no browser caching
• CSS, HTML, and JavaScript haven't been minified

UX, SEO issues

• Outdated content
• Typos
• Small font size, buttons and/or links (see above in 'website mistakes' section)
• No 'https'
• Generic 404 pages

Last but not least, many blogs mention the following 'mistake':

The website is not mobile-friendly.

We strongly agree, having a responsive website is an essential requirement nowadays. However, if we see a non-responsive website, we know it's not a 'mistake'. It's just how the website was built many years ago. We haven't seen a recently made website which isn't mobile-friendly.

An example: If you have a classic car without catalytic converter in it, can you say that the manufacturer made a 'mistake' 40 years ago?... 

No doubt, if your website is not mobile-friendly, it's time to rebuild it.

Summary

Web design, web development, SEO, copywriting, content, mobile-friendly technology all go hand in hand, and each has an impact on the others.