Web Design Best Practice

August 3, 2021 by in category News, Website Design with 0 and 0

Web Design Best Practice

10 Rules for Successful Web Design

Most businesses start out with a website. For 83.4% of businesses (with more than 10 employees) in the UK, the website is their major marketing tool. And with 1.86 billion websites shuffling for attention online, the competition for attracting customers is high. And yet many businesses are unaware of whether or not their websites are successful when it comes to attracting, engaging and retaining online visitors. Which is why we’ve written this guide as an introduction to web design best practice.

Why is it important to know about web design? Because without it you’re defenceless in the face of bounces, clickaways and discarded shopping carts. Your visitors are experts when it comes to web design; they’ll know within 0.05 seconds whether or not to continue, or click onto the next site. Understanding how your website interacts with your visitors is key to improving your sales and growing your business.

At Imagefix it’s often our job to point out how business websites are actively putting customers off buying. The solutions are usually pretty simple, but if you’re unaware of the problem they can prove elusive. To turn this around, our web design team has created 10 rules based on web design best practice.


How to Put Web Design Best Practice to Work

If you don’t already have a web design, we would recommend you work with a professional web designer on your first site. This blog is for businesses that have a website, but don’t feel that it’s doing a particularly good job for them.

The principles at the start of the blog are about the big picture; ideas to keep in mind when making design decisions. The rules are like a checklist – some you’ll know about already; others may be the key you need to unlock your website’s full potential.

6 Principles of Good Web Design

1. Keep Your Website Simple

“The ability to simplify means to eliminate the unnecessary, so that the necessary may speak.”

– Hans Hofmann

Design Task: Always ask of all your marketing materials “What is unnecessary?” and “How can I simplify my message?”

2. Resist Distractions

“Whitespace is like air: it is necessary for design to breathe.”

– Wojciech Zielinski

Design Task: Check each page of your website. Is the white space doing its job of attracting attention to the content?
.

3. Know Your Customers

“A successful website attracts the right kinds of visitors.”

– Mohamed Saad

Design Task: Does your website appeal to the people who buy from you? Check every element. Even the smallest adjustment can make a difference.

4. Be Human, Don’t Hide

“People ignore designs that ignore people.”

– Frank Chimero

Design Task: How ‘human’ is your website? Are there any pictures of you, or your employees? Is there any way that you can use faces to draw attention to your product?

5. Put the Customer Centre Stage

“Make the customer the hero of your story.”

– Ann Handley

Design Task: Tell your story with the customer as the hero. What opportunities for changes to your marketing strategy does it reveal?
.

6. Prioritise What Matters Most

“Success is not delivering a feature, it is learning how to solve a customer’s problem.”

– Eric Ries

Design Task: Does your website help your customers to solve specific and clearly defined problems?



Rule Number One – Bake in Responsiveness 🍞

Responsive websites automatically scale images, site components and content to match the screen they’re being viewed on. This removes the need for anyone viewing on a mobile to have to work hard to access the content.

Business is multi-screen in the UK. Websites that don’t adapt to a range of different screens simply fall by the wayside, because they’re too much like hard work. Nearly 60% of searches now come from mobile devices – so getting responsiveness right matters.

responsive web design

Check whether your site is responsive by searching for it on your mobile. For a wider range of screen options you can use a responsive testing tool such as Responsinator. It’s easy to use and you can see your site on a range of devices.

Responsiveness is best ‘baked in’ to a website during the design stage. If, however, you have a recently designed website that isn’t responsive, it can be retroactively applied. And don’t hesitate to do so. A non-responsive website is useless to you.

If you’re about to have a website designed, remember that web design best practice requires it to have responsiveness ‘baked in’. It’s pretty standard now, but we still come across brand new sites that aren’t.


Rule Number Two – Choose Great Images 🖼

Choose Great Images

Our brains are hard-wired to deal with visual signals first and foremost. That’s why, when we click on a website, our eyes travel automatically to the images. We turn to the text only when our eyes are satisfied. So if the image is poor quality, out of date, or dull, we’ll probably click away rather than focus on the other content the page offers.

What makes a great image for a website? Images don’t have to cost a fortune; they just need to be carefully thought through as part of your design.

Here’s a few approaches you may find useful:

Visitors to your site are likely to scan only 20% of the words on a page, whereas they will remember 65% of the visual content. Imagine text was banned from your website – what’s the image that would sum up the story of what you do? Remember, the visuals have got to do ALL the work.

You’re used to what you sell, but your visitors aren’t. How can you make what you do look stunning, exciting and desirable for your customers? If you make things, use videos to show the process. If you solve problems, show people’s reactions to having their problems solved.

There’s no need to use poor quality, lacklustre photos. Take a look at the images your competitors are using and compare them with yours. Better? About the same? Strive for the best – your visitors will notice the difference immediately.

When we see faces – even ones we don’t know – we immediately make an empathic connection. We prepare ourselves to stand in their shoes and feel what they feel. Using faces to guide visitors’ line of sight, relate to your product, or understand the problem it solves is a powerful marketing strategy.

Wherever you source your images from, ensure that you achieve a consistent style across the site. This can be achieved through the use of a colour palette, a filter, or the quality of light employed.


If you know the one thing that’s make or break for online searchers, wouldn’t you go the extra mile to get it right on your website? Not always.

Recent research into the top features users look for in a website came up with the following ranking:

  1. Easy navigation (94%)
  2. Product descriptions/visuals (91%)
  3. Attractive, up-to-date design (83%)
  4. Social media links (67%)
  5. Relevant content (50%)
  6. Company blogs (50%)

Navigation is the out and out winner here and yet it’s rarely given the time and consideration appropriate to its importance.

clear website navigation

Golden Rule for Website Navigation: Don’t make visitors to your site think.

Web design best practice makes navigating a site feel like common sense. The moment a visitor has to think about what they’re doing, your website is failing them.

So, what are the things that are likely to trip up your visitors?

There are standard places that people look for the navigation bar. It should appear across the top of the page, or down the side. Putting it anywhere else may feel innovative but it will simply frustrate your visitors. Don’t mess with positioning; put it where people expect to find it.

Remember those pub menus that took you half an hour to get through but didn’t seem to have anything you fancied? A crowded navigation bar is like that. Short term memory has a ‘magic 7’ slots it can fill. Keep cramming beyond that and the brain will short circuit. Give yourself a rule – ‘No more than 5’ – then work out what matters most to your customers.

Generic labelling in the navigation bar does little to help out your visitors. A good starting point for labelling is to consider the language your customers would use when describing those pages. If your website is about actions; use actions (Join Us). If it’s about objects, use objects (Electrical, Software etc).

Many users do hate drop downs because they don’t work how our minds work. They’re more like call centre menus. So just when you’ve decided to click through, your action is averted by a drop down list and you have to think. Many drop downs also require 1 click, or a click and another drop down, which leaves the user out of sync with the site.

The order in which you rank your navigation bar labels is important. The eye pays special importance to the first label, and the last label. Not so much in-between. Ever wondered why ‘Contact’ always comes at the end? Because it’s a prime position. Don’t put your most important items in the middle. Decide what you’ll prioritise and work from left to right.


Rule Number Four – Don’t Fill All the White Space ⚪️

vintage newspaper
news online

Readers of websites scan, rather than read for the most part. They’re time-poor so they’ll scroll quickly and scan what catches their eye. If the layout is too busy and the eye is forced to negotiate too many elements, they will give up and move elsewhere.

Early newspapers filled every spare inch of space with text – reflecting a more contemplative age when there was plenty of time to sit and read each article in detail. For contemporary readers, though, the white space is essential. It’s clean space that provides clarity and focus for people who have limited time and need help to scan the content.

A considered use of white space helps visitors to navigate your website more easily, understand your content more quickly, and respond to CTAs more efficiently. Research carried out by Human Factors International found:

  • “White space around the highlighted items tends to increase their prominence”
  • “Use of white space between paragraphs and in the left and right margins increased comprehension by almost 20%”

Two further benefits derive from design that uses white space:

  • We tend to associate white space with sophistication, and clutter with cheapness
  • White space provides a place for the eyes to rest, before returning refreshed to the content.

choosing a website colour

Rule Number Five – Make Colour Choices and Stick to Them 🎨

Colours matter when it comes to web design best practice, but don’t let finding the ‘perfect’ colour combination become an obsession. At Imagefix we take our clients through a simple 3 step process when they’re deciding which colours are right for their brand.

Step One: Primary Colour

Choose your primary colour. In some cases this is easy; products associated with health tend to use NHS blue, those associated with sustainability go for green. Most brands, though, aren’t so easy to categorise. We use a simple colour card for our clients, based on the choices that have already been tried and tested by successful brands:

We ask: “What’s the colour that feels right for your brand?” and we warn against over-thinking!

Step Two: Complementary Colour

Once you have a primary colour you can select its complementary colours. You should limit your choice to one or two in order to avoid your colour range becoming ‘loud’ and distracting. Complementary colours are those which make your primary colour ‘pop’. When you get it right, your primary colour will seem brighter and more attractive, thanks to the complementary colours.

Thankfully, there’s quite a bit of science involved in choosing which colours will go well together. Professional web designers tend to know intuitively how to put colours together to create the best effect. If you’re a comparative novice, there’s plenty of help online. The design platform Canva has an excellent resource which both explains colour theory, and does a lot of the work for you.

Once you know what your complementary colours are, you can use them for calls-to-action, highlights, or emphasis.

Step Three: Background Colour

Thankfully this is a pretty simple choice to make. White space creates focus and areas on the page for the eyes to rest. Light grey does a similar job.


Rule Number Six – Monitor Your Page Loading Speed ⏱

We’ve all experienced waiting for a web page to load. You drum your fingers, click on the link, refresh and repeat – then you’ll probably click away. Importantly though, you’ll remember the wait as a negative experience and be less likely to click back to the website in the future.

So why does an extended wait happen so often? Because website owners rarely click on their own website, and users click away rather than feeding back. You could, therefore, be losing a substantial number of prospective customers without even knowing there’s a problem.

site loading speed

It’s not just online searchers that get frustrated by slow loading pages – so does Google. The world’s fastest search engine doesn’t want to deliver sub-standard goods to its searchers, so websites that are slow to load don’t rank well.

To answer this question properly, there are 3 different measures to take into account:

  1. Rule of Thumb. Most people would agree that 2-3 seconds is the tolerance limit for online searchers.
  2.  TTI (Time to Interactive). This measures the time it takes for interactive features on the page to load. This can take longer.
  3.  FCP (First Contentful Paint). This isn’t as complicated as it sounds; FCP refers to the point at which the content is loaded.

Use the Google Page Speed Insights tool to regularly check your page speed. It’s free and the results include a list of issues that are slowing down your website, as well as ways of resolving them.

We can’t guarantee that these 3 fixes will give you a 2 second page speed, but they will certainly improve the situation and they’re not scary to do. If your speed is still slow, you may need to get a professional website designer or developer to take a look.

  1. Check Out Your Hosting. Often the problem lies with a slow server. This can be down to sharing a server with others, which means that resources are stretched. Or your server may be located on the other side of the world, which means delays on server requests. If your server is delivering slow speeds, it’s worth changing your hosting to get better results.
  2. Reduce Large Images and Files. Your website has to load each element separately. Smaller items will be first to load, whilst larger ones will take much longer. Compressing your images and files will immediately improve your speed. There’s a number of compression resources available such as Tinify for PNG and JPEG compression.
  3. Use YouTube or Vimeo for Video. If you have a ‘how to’ animation on your site, it probably gets clicked on regularly, and it could be slowing down your site. Videos hosted on a site server slow down your site massively. Much better – and faster – to use an external platform.

Rule Number Seven – Optimise for SEO 📈

If you haven’t come across the term SEO before, it stands for Search Engine Optimisation. SEO is how Google matches up online search queries with relevant content. Local SEO is all about optimising your website to ensure that Google ranks you highly in the area your business is located. If you want the full story on SEO, the Imagefix team has published How to Get Found in Google – The Ultimate Guide. What follows is a quick intro to give you an idea how it works.

Optimise website for SEO

Getting seen on Google:

Assume people will want to phone you or message you, and make it easy for them. You should make sure that your phone number (at least) is available on every page, prominently displayed.

Google wants to know where you are, so they can deliver up your site to people searching locally. It’s useful to use the town, city or area for some page titles, and the county for others.

So you’re a florist? Tell us about the same day deliveries you offer, the wedding bouquets you create, the everyday flowers that brighten people’s lives. Then Google can match you up with searches for those services.

If you’re offering plastering services in 4 or 5 different areas, don’t lump them all together. Create a unique landing page, so when Google ‘crawls’ your site it knows the areas you’re working in.

When you doing a Google Search, you’ll see a page of titles and brief descriptions. The brief descriptions are the ‘meta description’ and you can write them for each of your website pages – always include your location.

Using Google Maps lets visitors to your website know what your location is; it also provides important information for Google. Without Google Maps you won’t come up in local searches.

It’s free and it gives you the opportunity to catch the eye of potential customers. You get a business profile and map view which come up in a separate pane on the right-hand side of Google Search

How will people know how great your product is if there’s no reviews telling them? 93% of online shoppers check out reviews before buying and 91% of younger shoppers say they’re the equivalent of a friend’s recommendation.

Got a blog? Then talk about local issues and events. Business that blog can count on getting twice as much email as those that don’t, and local content will catch the eye of people you want to sell to.

People expect to be able to link from your website to your social media accounts. Taking a look at your Facebook page or Instagram posts gives your visitors a more rounded impression of who you are as a business.

Probably the most helpful thing you can do is to take a look at other businesses’ sites. You don’t want to offer exactly the same as your established rival, so what don’t they do that you could create as a niche offering?


Rule Number Eight – Set Rules For Your Content 📝

Set Rules For Your Content

Writing content for a web page, or a blog, can be really scary. Which is why it’s usually a good idea to write a rough draft first. The draft is all about getting your ideas down on paper without worrying about what the content looks like, or whether it’s readable.

Once you’ve got your rough draft out, you can take some time to organise what you’re wanting to say. Is it easy to understand? Will your reader follow it without getting confused? Is there anything missing that ought to be included?

Finally, once you’re happy with what you have written, you can make it readable. And that’s the easy part; it’s all about following a set of rules that you create for yourself. All you have to do is work through the list and once it’s done, you’re ready to publish it onto your website.

Why rules? Because there are a number of tried and tested techniques that make reading online easier. Your aim is to make it as easy as possible for your visitor, so that all your hard work makes an impact.


Rule Number Nine – Reflect Your Brand 🪞

Brand is a huge topic for discussion, but as far as your website design is concerned it will come down to 3 things:

  • Logo
  • Colours
  • Style

A website that consistently reflects its brand is one that establishes a format with the home page, and provides iterations of that format throughout. The Logo should always appear in the top left-hand corner. Colours should remain constant on each page. Style should be recognisable whatever page you’re on.

A successful website is one that is distinctive to visitors after a first visit, so returning to it gives a sense of ‘coming home’. There’s nothing mystical about this; it’s simply that you’re providing a design that is constant, repeatable, and trustworthy.


Rule Number Ten – Restrict Choices 🙅‍♂️

Every day the world threatens to drown us in choices. From the multiplicity of streaming choices, to the range of takeaway options, to the number of websites selling what you’re looking for – CHOICE IS EVERYWHERE.

Having lots of options is often presented as a luxury but it doesn’t always feel like that. For people with limited time to make a decision, masses of choice can feel like an added stress. The result can end up being rejection of everything, rather than a delighted selection of just what you want.

Restrict web design Choices

Web design best practice requires you to resist the temptation to give your website users all the options they might possibly want, therefore, and restrict the choices you offer to the ones that are most useful to them. This is particularly the case when it comes to navigation menus, ways of paying, or responses to the fact you use cookies on your site.


imagefix web design agency bedfordshire

Want to Work With Imagefix on Your Website Design?

The aim of this blog is to allow online businesses to cast a critical eye over their website. If you can see obvious problems with the design, hopefully we’ve given you a few tips on how to improve it.

Or you may decide that it’s time for a whole new design…

If that’s the case, take a look at what Imagefix can offer. Our award-winning design team works with all kinds of businesses, from start-ups to SMEs to corporates. So, whether you want an E-Commerce online shop, a simple information-based web presence, or a brochure style website, we can offer your web design best practice as a basis for your site.

We design all our websites in WordPress because we believe it offers the best value to our clients. The benefits of a WordPress design include:

  • Post handover, clients can make changes themselves using the WordPress dashboard.
  • WordPress provides thousands of free and paid ‘Plugins’ that allow you to do just about anything you want with your website.
  • SEO is key to getting found on Google, and WordPress is extremely SEO-friendly.
  • As your business grows, it’s simple to grow your site in response.

Finally, the Imagefix team enjoys working with businesses to grow their sales. We start every web design with a detailed conversation about your business, and we’re happy to have clients involved at every stage. Throughout the design process we’re always available by phone to talk through feedback, or ideas. Every website we design is thoroughly tested before handover, and we offer clients a tutorial so you can navigate the WordPress back-end to make changes.


Ready to get your website designed for business growth? Call the Imagefix team today on 01525 715608 for an informal chat.

© 2021 Imagefix - Web Design Bedford. All rights reserved. ~ Imagefix Ltd is registered in England and Wales | Registered No: 09419892 | VAT No: 289 9803 27