Redeveloping Your Website: The Design
The process of laying out your site consumes much of the wireframing process but it is also important to mention here. The most common layout for corporate sites – lead-generation sites in particular – is the three column structure, which features a bold header or banner, above three columns of content, with a navigation bar running along the top of the page. Possibly inspired by newspapers, this layout is popular because it allows for a range of content to be included on a single page, without it looking too cluttered. For example, a site in this structure would allow ample space for body text and images, with a column down the side for contact forms, social media links, news segments, adverts. The column structure allows the site to shift down into one column for mobile devices and their smaller screens, but more on that soon.
With lead-generation sites sitting in the hypothetical middle, at either end of the spectrum are e-commerce sites and branding sites. Because of the features an e-commerce site must show; such as product departments, shopping baskets, displaying items clearly and more; the layouts tend to be more complex; often featuring navigation bars vertically as well as horizontally and with products displayed in up to maybe five columns. Branding websites, on the other hand, tend to be more basic: using simple, sleek navigation bars and images spanning the full screen width to show off the brand or product.
Next, onto the colours. There’s a lot of psychology to the use of colours in branding. It is suggested that red is passionate and promotes an active response – which is why it is used for sale posters – and that green is calming and associates a brand with nature. However, what is most important here is that your site is consistent with your company’s branding and that you stick to two or three key colours. You should also make sure the colours are ‘web-safe’ as browsers can render colours differently, meaning that you might not end up with exactly what you wanted.
When it comes to text, it is important to note that the colour must contrast the background in order for your audience to be able read it clearly.
Similarly to colours, fonts should be consistent with your branding and you shouldn’t use more than two or three of them in order to maintain a professional image. It is also important that the fonts are supported by browsers, using standard fonts is an easy way to accomplish this. To help the reader, we also advise using sans-serif fonts for body text, as the lack of serif ‘flicks’ makes the text clearer on screen.
Illustrating your pages is vital. Images make the page more visual and help engage the audience but it’s no good just putting any old photo or clipart on your pages. They must be suitable for the purpose and audience and they must be relevant to your business or the content of a particular page.
Images should be clear, bold and of a good quality, otherwise they will be ignored or else tarnish the professionalism of your brand image. However, the file size of the images shouldn’t be unnecessarily large, as this will make the page load slowly.
One of the secrets of the trade is that images of people and faces build trust but don’t get this confused with filler/stock images, as they are are often ignored by audiences because they’re just too dull and uniform. And for those with products or services to promote, be sure to make them as informative as possible. Images can explain more about a product in a second than a whole paragraph of text can.
With your website designed and configured to your business’ specifications, you can use the CMS to update pages on your site. This is especially useful for those wanting to update their own news/blog content quickly and simply. WordPress, for example, has an easy-to-use interface, meaning that anyone can upload content to bespoke websites.
So now you know how to design a site that’s effective and achieves your SMART goals, but have you considered how, when and where it will be viewed? Next week we are looking at the importance of creating a responsive website.
Until then, have a great weekend and I will speak to you again Friday!
The other topics in this series:
Part 7: Redeveloping Your Website: Responsive
Part 5: Redeveloping Your Website: Template vs. Bespoke
Part 4: Redeveloping Your Website: Building Your Site
Part 3: Redeveloping Your Website: Know Your Audience
Part 2: Redeveloping Your Website: Start with Purpose
Part 1: An Introduction to Redeveloping Your Website