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, click-aways 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.
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 🖼
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:
- What’s the story? 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.
- Get your visitors to fall in love with your product. 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.
- Find your inner nerd. 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.
- Use faces. 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.
- Find a style. 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.
Rule Number Three – Create Clear & Easy-to-Use Navigation 🧭
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:
- Easy navigation (94%)
- Product descriptions/visuals (91%)
- Attractive, up-to-date design (83%)
- Social media links (67%)
- Relevant content (50%)
- 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.
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?
- Where’s the navigation bar?! 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.
- There’s Too Much!! 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.
- What’s a Service, or a Product? 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).
- I Hate Drop Downs!! 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.
- I Can’t Find What I Want! The order in which you rank your navigation bar labels is important. The eye pays especial 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 ⚪️
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.
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:
- Purple. Think Cadbury – an established brand offering high quality chocolate treats
- Yellow. Used by Lego and McDonalds – offering sunny optimism and happiness
- Red. Coca-Cola of course – happiness, excitement and sociability
- Brown. UPS feature brown – associated with wood; solid, dependable, traditional values
- White. Nike or Apple – sophisticated, sleek, puts users first
- Blue. NHS and Facebook – caring, always there for you, reassuring
- Green. Land Rover and Greenpeace – different values but both promoting nature
- Orange. Penguin and Orange – adventure, innovation and seeing the world differently
- Black. Chanel, Louis Vuitton – luxury, elegance, hidden depths
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.
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.
How Fast Should a Web Page Load?
To answer this question properly, there are 3 different measures to take into account:
- Rule of Thumb. Most people would agree that 2-3 seconds is the tolerance limit for online searchers.
- TTI (Time to Interactive). This measures the time it takes for interactive features on the page to load. This can take longer.
- FCP (First Contentful Paint). This isn’t as complicated as it sounds; FCP refers to the point at which the content is loaded.
How Can I Monitor My Web Page Speeds?
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.
- 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.
- 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.
- 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. Local SEO is all about optimising your website to ensure that you have the best chance of being found locally. If you want the full story on SEO, the Imagefix team has published The Ultimate Guide. In this section we’re offering a quick guide to make sure you appear in the map when it comes to local searches on Google.
See Rule Number One.
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 📝
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.
Here’s what our checklist looks like:
- Write in Paragraphs. Online visitors to sites tend to be time-poor, which means they don’t have time to commit to reading your content. Instead they’ll scan the text to pick up the information they need. A content writer’s job is to help them to do this. Paragraphs containing around 350 words are bite-sized chunks of text that are much easier to scan than big chunks of text.
- Create Headings. Moving through a piece of content is a journey which you can guide the reader through. Work out a structure of topics, and create headings for each new piece of information. That way readers can quickly navigate through the text and alight on the area that interests them most.
- Draw Visitors’ Eyes to Important Information. Your content should be a collaboration between you and the reader. One task they’ll thank you for is the use of bold type to draw their attention to key pieces of information. This is a job you can do once you’ve finished writing – it’s like creating anchors for the eye as it scans the text.
- Break Up The Text With Images. We’ve already talked about the primacy of the visual for visitors to your website. However compelling your content it will need images to relieve the uniformity of the text. Think of placing these every 500 words at the very least.
- Keep Your Font Simple and Consistent. Remember that your goal is to help the reader take in your content quickly and accurately. Fancy fonts – however nice they look – hinder that goal, as does an overuse of font types. Find a standard font that works well with your website design and use it consistantly.
- Use Bullets or Numbers. Where you’re using lists, or breaking down a task into stages, bullets and numbers are really helpful. Bunching up information in a paragraph can be very confusing if you need to take in information quickly, so look for opportunities to layout your text in a reader-friendly style.
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.
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.
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.
So, that’s 10 rules for web design best practice. Ready to get your website designed for business growth? Call the Imagefix team today on 01525 715608 for an informal chat.
