5 Common Web Design Errors

In this post I’ll explore 5 common web design mistakes that could be cluttering up your site, and then show how you can address them head on to improve your site’s performance, readability and overall visual appeal.

 

Going overboard with typefaces

Web fonts can drastically improve the visual characteristics of your website and in many cases improve user engagement. Thanks to services such as Google Fonts, Font Squirrel and Adobe’s Typekit, it’s easier than ever before to add custom fonts to your website. However, common overuse can leave designs cluttered and distract from the important stuff – and nobody wants that.

It’s not just the aesthetics and readability which suffer from excessive typeface use; for each font variant that’s not available locally (weight, style etc) the browser has to make an additional resource request and download the font from a server. This can result in slower page load speeds, if loaded synchronously, as well as a lag in the correct display of your typefaces. This slower perceived load time can disengage your users and cause them to leave – so be cautious and use web fonts sparingly.

As a rule of thumb, aim to use no more than three different typefaces in your design – remember, less is more. Some designers argue this is still too many, but either way bear in mind the effect your choice can have and attempt to limit the number of fonts you incorporate into your design.

Not making use of a grid framework

Website layouts which are structured, consistent and organised are often quicker to develop, simpler to maintain and more aesthetically pleasing on the eye. Tools like the 960 Grid System or Skeleton are simple yet effective frameworks which have been built from scratch for designers to use as the backbone of their site.

Based on the concept of rows and columns, a grid framework is extremely useful for dividing up the page, spacing content and ensuring fluidity with consistent breakpoints when building a responsive website. There is no one fits all solution, so it’s worth researching and playing with each grid to see which is best for you. With browser support improving, you may also want to consider new layout solutions such as flexbox, which provides greater control when it comes to directional flow and content ordering.

Forgetting whitespace is your friend

The importance of whitespace in your design shouldn’t be underestimated. By introducing whitespace between and around elements you’ll significantly improve the readability and focus of your site. Users don’t read, they scan, and if used effectively whitespace can guide users attention, helping you to prioritise and emphasise key messages and actions. Whitespace has other benefits too. It shouts elegance, sophistication and simplicity, and using it throughout every aspect of your design can help successfully portray your brand.

Overlooking readability

Some sites, depending on purpose and complexity need a lot of text. While the length and detail of the information needed is completely contextual, the importance lies in how that text is displayed. Research by the Nielsen Norman group, suggests that readers read casually, skimming over text – reading focal words and sentences here and there to gain an overall idea of the content. There are a couple of tactics you can use to facilitate this reading pattern and ensure your content is being digested.

When it comes to readability, bear in mind the optimal number of characters per line. Aim for somewhere between 45/70 characters (including whitespace and punctuation.) And, for large blocks of text break it up with subheadings, bullet points or numbers.

Not investing time into selecting a colour palette

A poorly selected colour palette isn’t for the faint hearted. It can be an eyesore, look amateur, and in an instance spark an undesired reaction from your visitors. Despite this, many overlook the significance of the colours they chose for their site. It’s more than just choosing colours that you like and that go, a key part of colour selection is choosing a colour that enhance your branding, business and helps evoke the emotions you want from visitors.

After researching the colour psychology of your primary colour, it boils down to devising a complementary palette and using it correctly. There are hundreds of free online tools to help you devise a complimentary colour palette, we recommend coolors.co. As for using your colours correctly, follow basic design rules – make sure there’s a sufficient contrast between your background and text colour and use strong colours to draw attention to certain areas of your site.