We all know that ‘content is king’ and creating compelling articles to engage your audience is a key part of being an affiliate. But if content is king, who is queen?That would be design. She is bold, beautiful and plays a very important role in supporting your content. It’s all well and good writing an amazing article and driving lots of traffic to your site. But if a visitor lands on your page and can’t navigate to that article, is distracted by clashing bold colours or simply can’t read the text because the font used is too small, then all the hard work you put into crafting your post has pretty much gone to waste. Find out here how to ensure your website design supports and compliments your content, instead of overpowering it. 

Navigation

A visual hierarchy is the placement of elements on your page in chronological order of importance. You don’t want the first thing a visitor sees to be the least important piece of information on your website, so you need to consider where you display each element of your content. Write a list of key points you want visitors to see or read, then list which is seen first, second, third and so on. You can then compare these lists to see if you have displayed content in the order of its importance. If you find your content is not placed in order, consider reorganising the layout to define a clear hierarchy.

It’s encouraged to be original and think outside of the box, but if you try to be too different with your website design, visitors may not understand what to do and will simply leave because your layout confused them. Take the example in the image below. When we visit a website it is standard practice to see a menu bar across the top of the page.

This website has a menu bar at the bottom of the page which is hidden until you hover over it with the mouse. When you first land on the page there doesn’t appear to be any other content or pages available and there is no clear indication of what to do next.

Content is King, Design is Queen

The F pattern is the most common eye scanning pattern when reading website content. There have been studies which show users first reading horizontally (typically across the top menu bar), then moving down the page and scanning horizontally for the main content and finally scanning vertically to the left of the page where you will often find further tabs and links or, on many e-commerce stores, filters for search results.

As a proven method, it’s advisable to mirror your website design to this scanning pattern. This way you know visitors are likely to view the content you want them to by placing the key elements of your page across the top, middle and left-hand side of your page.

The F pattern is the most common eye scanning pattern when reading website content

 

Layout

Your content should be well organised, easy to read and tell the user exactly what your site is about within a few seconds. Avoid overloading your page with heavy text, garish graphics and more links than you know what to do with. A busy layout can be overwhelming and makes it difficult for users to navigate around your site.

Take the examples below; website one evokes feelings of stress and anxiety. There is too much going on and it’s unclear what you are going to find there. But website two is calming and inviting; the stripped back design makes it easy to take in the key points and you know what you are going to find there within a matter of seconds.

Website design comparison

 

Utilise the white space on your page to achieve a neat, clean and minimalistic design. ‘White space’ is the areas of your page which has no content. This helps the user focus on what’s important so keep any white space a neutral colour. For example, a bright yellow background would be extremely distracting despite there being lots of ‘white space’.

Avoid using flashing images or an overload of banner ads that will distract the user from your main content. You should place your ads strategically, alongside relevant content so they are useful rather than annoying.

You also need to optimise the layout of your content to ensure that the high-quality article you spent hours crafting can be easily digested by readers. Choose a font that’s simple to read, opt for a sans serif font (no strokes at the end of letters), as serif fonts can be difficult to read. Stick to using serif fonts for titles and short snippets of text rather than a whole article.

You can also break up large chunks of text by using sub-headings to highlight different sections in the text and, where you are able to, use bullet points for lists and key points which you want your reader to pick out of the text.

Colour Scheme

When designing your website you should decide on a set colour scheme which you will use throughout your site. It’s important that you choose complimentary colours and avoid clashing colours or too many bolds as they will make your page look too busy and unappealing to the eye.

Each colour can represent something entirely different and you should consider what emotions your colour scheme is likely to provoke and whether that fits in with your website. For example, warm colours such as red, orange and yellow can be used to represent stress, anger and urgency. You will often see sale messaging and limited time offers in bright, bold reds and yellows as they grab the user’s attention and urge them to act fast. On the other hand, cool colours such as blue, purple and green can be calming, professional and inviting. These colours can help to simplify your website design and create a relaxed feel as your user begins their journey.

You can use colour.adobe.com to help select a colour scheme. It will recommend colours that work well together and show you a range of shades and tones. In the example below I have chosen a calming green and purple colour scheme. There are light and dark shades within the colour pallet and as you can see, they complement each other well.

Designing your website is an important step in becoming a successful affiliate. Don’t overcomplicate things and try to think about what you like or dislike on websites you regularly visit. If you’re unsure how effective your layout is or you want a second opinion on your website design, get in touch with your affiliate mentor and they will be able to give you further guidance.