WEBSITE DESIGN GUIDE - CREATING A CLEAN AND PROFESSIONAL VISUAL DESIGN AND LAYOUT
Your website only needs to look ‘good enough’ - a simple layout, consistent and conformist use of colour and text, and a purposeful use of imagery will achieve this.
If you ever find yourself bored and need to kill a little bit of time, go to Google and search for ‘the worst websites ever’. The results will offer a glimpse into what the internet believes to be the biggest digital abominations ever created - and there are indeed some shockers.
Like many things in life, the perceived value of a website is quickly assessed based on its appearance. It often won’t matter how great the content is, or how great the product or service that it is trying to sell is - if the site doesn’t look the part then it makes the visitor think it isn’t worth their time, encouraging them to hit their back button or close their window.
The good news is your website doesn’t need to look like a work of art, or like an item of high-fashion clothing. Your website needs to look...
Good enough that someone won’t look at your website and want to leave straight away. Good enough that a potential customer doesn’t think less of your business as a result of your website’s design choices. Good enough to not really be noticed at all, in fact, instead allowing your content and key messages to take centre stage.
Whole books could be written about this subject, but for simplicity I've boiled it down to three golden rules every site should adhere to.
2. RULE 1: PICK A SIMPLE GRID-BASED DESIGN, LEAVE ENUGH WHITE SPACE AND AVOID CLUTTER
How you structure and lay out your pages is one of the most important design decisions you will have to make. It influences both how your site will feel to navigate, and also how easy, and enjoyable, it is to consume your content. A good layout is perhaps even more critical in web design than in any other written medium, simply because website visitors (typically) don't want to consume all of the content available to them, instead preferring to skim it for the most important bits.
This isn't the case for other formats such as books. The layout of a typical book is less important because there is an innate agreement with the book’s reader that they will start at the beginning of the book or chapter, and work their way down, in a set order, consuming every word along the way. Online, visitors want to (in fact, need to) scan content for the bits that are most relevant to them. It would be a nightmare if you had to read every bit of content on a site before deciding if a product or service was right for you.
In order to facilitate this method of consumption, you need a layout that is organised, clear and clutter free. The most common way of achieving this is with a grid layout.
A grid layout is simply one that is constructed through the use of overlapping (mostly invisible) vertical and horizontal lines, or columns and rows, with blank space (known as alleys as gutters) between elements. Beyond some advantages that professional web designers get quite excited about, grid systems are used as the basis of many sites because of their simplicity. They help a site feel decluttered, ordered and consistent, and hence make it easier for visitors to consume its content.
Take the below as an example. The same content features on both pages, but the page on the right uses a grid system whereas the one on the left does not. Which is easier to navigate, is more visually appealing and makes better use of space?
Given grids are the foundation of the majority of websites, it's highly unlikely you aren't using one already - particularly if you're using a pre-existing template provided to you by a website builder. The greater possibility is that you're neglecting one of the core tenants of grid design; the need to leave white space.
To be clear, ‘white space’ could indeed be white, but it could also be black or blue or luminous yellow (although hopefully not this last one). What's important is to leave certain parts of your page blank. This has a dual effect:
It makes the page look less cluttered and mentally easier to navigate.
It allows key content to better stand out, rather than being buried in amongst lots of other things.
Allowing for white space is a confident design decision. It shows that you understand what's most important to communicate and subconsciously tells the visitor that you respect their time as you’re not forcing them to read things that are less important. So in trying to create white space, avoid the temptation to simply force the content downwards, making your page longer. Really scrutinise whether a piece of content adds value, and cut it if it doesn’t.
As for how much white space to leave; that depends heavily on the page in question. For the homepage I'd recommend leaving about 50% white space (some very good homepages leave even more than this), whereas something like a blog page might see that reduced to 20-30%. As a rule of thumb, if you think a page looks too cluttered, your visitor definitely will.
3. RULE 2: CONSISTENCY AND CONFORMITY IS KEY
Once you've decided on a rough layout, it's time to make some decisions around how the page looks visually through its choice of colours and text.
With an endless choice of colours and thousands of available fonts, it can be difficult to make the right decision. If you don't have design experience (or impeccable natural taste), it's even harder.
Fortunately, there are a number of very simple conventions and tools to help you navigate these decisions.
Picking the right colour is an important decision as humans have been conditioned to feel certain feelings as a result of seeing different ones. Red, for example, suggests danger (many road signs are red) or passion (the colour of many lipsticks). Black has a premium feel, blue sets a calming tone and yellow invokes the feeling of lightheartedness and optimism (unsurprisingly you’ll rarely see a website for a funeral home or a law firm in yellow). Picking a colour that aligns with how you want your visitors to feel when visiting is a good place to start.
Alternatively, you might be guided by brand colours (dictated by a pre-designed set of brand guidelines or from the company logo). This would leads to a website that feels congruous with the brand and doesn't jar with visitors’ expectations of it (it'd be odd to see Apple’s website using red as a primary colour, for example).
You might disregard both of these ideas and just pick some colours you like - that's fine too. Whatever you decide to go with, there are a number of rules you could benefit from following:
1 - Don’t pick too many colours. This is distracting, makes your design look messy and is hard to use in a consistent way. Most good, cohesive colour palettes have a maximum of five colours in them.
2 - Pick a type of colour scheme and use it consistently, colouring similar elements (such as buttons, page headers) in the same way. There are four types of colour schemes that tend to get used the most.
Analogous: a range of different colours that sit close to each other on the colour wheel.
Monochrome: various shades of the same single base colour.
Triadic: three colours chosen by drawing a triangle over the colour wheel, with one point starting at the base colour.
Complementary: based on two colours chosen from opposite points on the colour wheel.
3 - If stuck, use a colour wheel, or a colour palette generator to decide the colours to use. These free tools use maths (rather than personal taste) to pick colours that work for the type of scheme you want. You can even specify a primary colour to get started if you wish. As an example, here are a handful of colour palettes based around the iconic Cadbury’s purple.
4 - Use colour selectively to draw the eye to important parts of your site. CTA buttons, in particular, tend to be coloured in the secondary colour to aid stand-out. Take a look at the difference this makes to stand-out.
Thankfully, the guidelines around text on your website are a lot more straightforward and can really be summarised in two words; legibility and consistency.
These words will help you navigate all the choices you make relating to the use of text on your website, which spans a number of different areas:
Let's start with font. Thanks to sites like Google Fonts, it's never been easier to find a font you like and put it to use, giving you full creative control over how your text looks. However, there are good reasons why you might want to reign your creative urges in a little bit.
The first is that it is incredibly easy to pick a bad font. A bad font is either one that makes your content difficult for visitors to read (‘frilly’ fonts such as Brush Script or fonts with shadowing come to mind) or those that give an impression of your website and company that you'd not be keen to give (it would hard to consider a company to be professional if it were using Comic Sans, for example).
The second is that you run the risk of picking a font that not all your visitors will be able to see. Your visitors’ devices, operating systems and browsers come pre-installed with fonts, but understandably (because there are hundreds of thousands of fonts available now) don’t come with all of them. If you pick a font that your visitor doesn’t have installed, unbeknownst to you their browser instead replaces it with something that is installed on their device - which is completely out of your control. This could have all sorts of ramifications for how your site looks, and you have no way of telling it’s happening.
To avoid this issue, my advice is to stick to using a font that is ‘web safe’ - that is to say one that all operating systems can access. These would include fonts like Arial, Helvetica (a very popular font amongst professional designers), Verdana or Times. The exception, of course, is for any text that you use within image files on your site. For these, you can use any font that you like (as the text will render correctly as part of the image file, rather than having to be rendered by the browser).
One final thing on fonts; avoid using more than one or two different ones. Any more than this and your site will look messy and inconsistent. If you do choose two fonts then decide the purpose of each one and stick to it - for example one font for headers, and one for main body text. Your design will look more purposeful and consistent as a result.
This rule also applies for text sizes - avoid using lots of different ones on a page. Like your use of fonts, decide on a small number and the purpose of text at each of those sizes. Avoid picking anything too small (to help those with visual impairment and to avoid having too much on the page) and too big (it makes your site look ‘shouty’ and in your face).
When thinking about text colour, it might seem obvious, but pick one that contrasts strongly with the background that it’s going to be put over. Ideally this colour would be black or white, but some shades of blue are also permissible. Human eyes are not used to reading large amounts of text in other colours, so avoid using them for main body text. For shorter amounts of text (for example in navigation bars or block coloured headings), pick a colour that fits with your wider colour palette. Using one of the five colours in your palette is desirable as it will keep the overall number of colours you’re using under control.
Adding emphasis to your text is also highly recommended to aid stand-out of important parts of it and allow visitors to scan-read your content and still find those parts. 95% of the time you should be looking to use bold for this purpose. Italics are a little bit more subtle and are sometimes missed by anyone not carefully reading the entirety of your content, so bear that in mind if electing to use them. Finally, but very importantly; never use underlining for emphasis. Online, underlining signifies a clickable link, so it will be frustrating and confusing to your visitor if you use it for any other purpose.
4. RULE 3: ONLY USE IMAGERY PURPOSEFULLY TO ENHANCE THE VISITOR EXPERIENCE
This last set of guidelines concerns the use of imagery. Imagery is incredibly powerful when used correctly, and has a wide number of benefits:
It catches the eye, drawing attention to important messages.
It provides visual interest, livening up the site.
It gives the visitor a break from having to read through blocks of text.
It is powerful at illustrating points and helping explain complex messages.
It aids recall of messages. Memory is a very visual construct and studies have shown that people are much more likely to remember an image than text.
It invokes emotions in us much more effectively than the written word does - and emotions are often key at driving the decision-making process.
It’s unlikely that I need to convince you that using imagery is a good idea, and it’s incredibly rare to come across a website that doesn’t use any at all. The bigger issue is that there’s lots of ways that imagery is incorrectly used. Therefore, when electing to use it, you should remain mindful of the following mistakes:
Using low quality, generic or irrelevant imagery. You should only use images that add something to the visitor experience. If an image offers no benefit by being there, then don’t use it. It’s can be tempting to fill your website with stock imagery, but be incredibly careful when doing this. Bad stock imagery can make your site look cheap and unprofessional, and like you’ve added an image for the sake of it. Ideally you’d use your own imagery as this gives a visual indicator of what you do or sell, and will help communicate what your brand is about. If this isn’t possible, just be doubly discerning that what you are choosing to include has a benefit and relevance.
Using low-resolution imagery. Image ‘resolution’ refers to how many pixels the image is comprised of and, hence, how clearly it renders on your visitor’s device. A balance needs to be struck here; images should be high-enough resolution to look clean and crisp, but low-enough resolution as to not cause loading speed issues on your site (more on this later) and (depending on your hosting plan) not eat up all your bandwidth.
Displaying images at the wrong size. If your image is so small that the viewer won’t be able to make out what’s going on, increase its size or remove it altogether (after all, it won’t be adding any benefit if it can't be seen). Anything too big will take prominence on that page and detract from all the other content. Sometimes that is desirable, but not always.
Using too many images. Unless you’re building a gallery page, excessive use of imagery should be avoided. With every additional image there is a diminishing benefit (is adding the 11th image really worth it?) and visitors might start to question whether you’re using images because you don’t have anything of real value to say.
Using background images or imagery behind other text. Be incredibly careful here as employing either of these techniques could lead your text visibility to suffer. Ensure your text stands out by keeping it large and using a text colour that contrasts with the image. Also, try and keep the amount of text to a minimum as it’s hard to read text over imagery, and do not use images behind the main body of text for this reason. Adjusting the image brightness and contrast might also be worthwhile in some situations.
Not using alt text. Alt text (short for ‘alternative text’) is a property of your image that takes the form of a written description. It’s used for a number of reasons; to improve accessibility (more on this later), as a placeholder should your image fail to load, and also to help search engines to understand your site. All images you use should have a descriptive alt text that communicates 80-90% of what is going on in that image. For example, ‘a black dog that is sleeping by a fire’ (and not just ‘a dog’).
Using icons that visitors don’t understand or can’t interpret. Icons can be a great way to provide a visual indicator or signpost, without the need for further explanation or text. For example, the shopping basket is so commonly used on transactional sites that visitors will understand what it is and what will happen if it’s clicked.
Plenty of other commonly understood icons exist; envelopes (denoting ‘email’), houses (denoting ‘go to homepage’) and magnifying glasses (denoting ‘search’). Just ensure that if you’re using an icon it’s one that the majority of your visitors will understand as an icon is useless if it takes longer to decipher than text could be read.
Autoplaying video files. Video is another fantastic way to communicate messages effectively. All of the above guidelines apply to video, and one extra; never set it to autoplay (a setting that means the video file starts as soon as it appears on the visitor’s screen). Despite some advantages to doing so, it’s incredibly damaging to the visitor experience, it’s distracting and often has visitors scrambling for their audio controls. The use of autoplay is, thankfully, in decline but make sure you’re not part of the lingering problem.
Use a simple grid-based layout where possible.
Don’t be afraid to use white space and scale back on content to avoid over-cluttering your page.
Avoid using too many different colours on your site.
Pick a colour scheme of up to five colours and use them in a consistent way (for example, making all buttons the same colour).
Use a colour wheel or colour palette generator to help pick colours that work well together.
Use colour tactically to draw the eye to key content.
Avoid using custom fonts - pick a ‘web safe’ font instead.
Keep fonts simple and easy to read.
Don’t use more than two fonts, maximum.
Avoid using more than just a handful of different text sizes on any given page.
Always use a text colour that contrasts with the background it is on.
Use bold (rather than italics) to emphasise parts of your content.
Never underline text for emphasis (this text will look like a link when it’s actually not).
Ensure any imagery you use is relevant to your site and the specific page (be careful when using stock imagery for this reason).
Strive to achieve the right balance between image resolution and loading speed.
Avoid imagery that is too small to add any benefit.
Avoid overusing imagery and diluting its overall impact.
Write, and apply, descriptive alt text for all the images you use.
Only use icons that have universally understood meaning.
Prevent any video files from autoplaying.