Website Design Tips
Some people have strong views about the look of their website while others prefer to leave it up to their designer. Ultimately, you need to like what we create so it's better if we work together! Let's break down the concept of website design into smaller chunks so we can deal with each one. Some generalities first.
How web differs from print
Intuitive website layout, organisation and links
We'll come to the fun stuff later but before we play with colours and pictures, we must acknowledge that a website is there to do a job. It has to sell, inform, persuade, and it won't do this unless your have organised your information in a manner that is intuitive to the user.
Layout refers to the positioning of elements on a page. Organisation describes how information is divided up between pages and presented in a logical order. Navigation and in-page links draw the user across the website to the point of sale or contact.
The layout of a webpage is a fluid, dynamic thing — and has to be, given the variety of screen sizes it must accommodate. Nowadays all Applegreen websites are made ‘responsive’. This mean elements resize and rearrange themselves for different-sized screens (see our Mobiles Tips page for a good explanation. We need to plan how the layout will work in different dimensions and aspect ratios.
An effective layout should draw the eye towards a Call To Action, or CTA. This is marketing speak for the link that incites the visitor to buy a product, get a quote, sign up for a newsletter, contact the website owner or just read on. Attractive CTA buttons can form a visual focus in a website's design.
The layout of a home page is often more complex than that of inner pages (Applegreen's own home page is a good example) because it has a special job to do. It must be attractive yet short, conveying information quickly. It should funnel visitors, via CTA button, towards the pages where they will interact with you. Information pages can be more relaxed but need to be well written. Break up blocks of text with headings, boxes and bullet points to hold the reader's interest.
Think vertically: modern websites are designed for the mobile phone. The design is then enlarged to look good on the larger screens of laptops and desktops. Be prepared for this when we work together.
Website organisation and structure
The information you want to convey needs to be organised across different pages that we have structured to be intuitive to use. This is harder to achieve than it looks, and the real test may only come when the job is nearly finished and users begin interacting with your new website. Organising a website of more than just a few pages is a complex job requiring a good knowledge of your business or subject.
We begin this task by deciding how many pages your website should have, what they should contain, what order they should appear in and how they should be accessed from the home page and from each other. Here are some things to think about, with some examples:
- We believe in short, punchy Home pages that tell the visitor exactly what you do.
- There may be a case for merging Home with About — see Camden Community Nurseries.
- A dedicated Contact page is only needed if you want a contact form, as for Archives Alive. Otherwise your phone number and email address can appear at the top or bottom of every page. The mobile number can be made clickable, so that visitors can touch-dial it from a mobile phone.
- Your navigation menu may have drop-downs sub-menus from each link. In this case the top-level elements need to be chosen and the pages organised to drop down under each one.
If you are offering different services to different types of user, you will need to “segment” your message: this means delivering different messages to different audiences. So if your website provides house swaps, enabling people's homes to be looked after while they are away by house-sitters who want a place to stay for a holiday, you are serving two distinct groups of customers. You must talk differently to each, and lead them to different areas of the site.
There is more information on website content on our Content Tips page.
The best way to test a scheme is to ask a few friends and relations road-test the website when it is nearly done and see if they can complete tasks or locate information easily. Think about all the things that frustrate you when using a website, and make sure you avoid them in yours.
Navigation and in-page links
Navigation is the system of linking website pages so that every one can be accessed from every other. Navigation is integral to website design and is usually enlivened with coloured bars, buttons and hover features.
In-page links are the places in the text (often underlined) that refer the reader to other pages within the site. They guide your visitors to other parts of your website and they help search engines link together related sections. They must not be overused but should occur naturally in the text. Like navigation, they are an essential component of the web that sets it apart from printed material.
Remember that visitors may land on any page of your website. They don't start at the beginning and read everything in the order that you expect. Accept this, and use the internal links to direct them where you want them to go.
Colours for your design — the sky's the limit
There is plenty of advice around on the meaning of colours in website design. Some recommend blue for a clean, professional look, orange for warmth and energy, yellow for intelligence and logic, red for passion etc. There are cultural differences too. I have read that blue is the colour of mourning in Iran while brown discourages sales in Columbia. Perhaps you're not aiming at these countries, but in the end, colour is down to personal taste.
So get choosing. Find colours you like and narrow down to one or two. Use any object to inspire you: a book cover, some towels, a favourite bag — there is no reason why their colours can't be reproduced for a website.
For a stylish result, however, there are a few rules. The mains ones are obvious: avoid too many clashing colours in one website, and make sure your text stands out well against the colour you have chosen as background. Less obvious is the need to cater for the various forms of colour-blindness.
Some colour schemes use different shades of a single colour, or complementary colours found on opposite sides of the spectrum. Avoid using the same intensity if choosing contrasting colours, or you will dilute the focus. Colours either side of the main colour on the spectrum, known as adjacent, can also work together.
Many of Applegreen's website designs feature a white ‘page’ on a tinted background, with strong colours used sparingly for emphasis and attractiveness. But a tinted ‘page’ can work well too (see Kate Chitham Fine Art). In the right circumstances, a black background can look stunning, see Animal Actors. Whites, greys and creams can be used together to great effect, as with Keyhaven Holiday Home.
We love colour at Applegreen and we lookforward to working with your choices.
Fonts — how text looks
There was a time when only a handful of “websafe” fonts would display reliably, but new technology gives web designer access to almost any typeface. From dainty, curly capitals to fat slab letters, most will render as text. Note: text is favoured over images by search engines.
But as with colours, it is good practice to avoid using too many different fonts in a single website design. The usual recommendation is for no more than two unless there is a good reason. This means using one font for small text and another for headings. The text font should be conservative and chosen for readability in small sizes. Avoid serif fonts like Times New Roman that are harder to read on screens. Applegreen's own website uses Verdana, a workhorse font for readability in small text sizes.
For headings, we can embed more imaginative typefaces can into the design. Scotch Thistle Research combines Junction Regular as its main font with Journal Regular for quotes. Applegreen's own page headings are in Maple Black.
One caveat here is that not all fonts are available free on the internet. Some must be purchased and the correct licence sought for embedding as webfonts. We can help with this.
Images: photos and drawings
Yes it's true, they can be worth a thousand words — but only if they are well chosen. Irrelevant images, badly taken or poor-quality photos will do more harm than good in the overall website design.
If you are unable to provide suitable pictures, either engage the services of a professional photographer or speak to us about buying stock images. We can source them, with the right licence, for as little as £10 each. Pictures can be allied with your own message, as we did with on the home page of Naked Foods.
If your business or project is not very “pictorial”, consider buying images that are related but generic enough not to draw undue attention to themselves.
Accessibility: designing with disabled users in mind
Some design features make a website very difficult for disabled users to access. For example, poor contrast makes text hard to read for the partially sighted, and careless use of colour can disable colourblind users. Read more about this on our Accessibility page.
This may appear to limit your choices, but in fact, a design that works for disabled people works for everyone. If your goal is clarity and good communication, you'll find that sensible contrast and colours benefit all your users, and therefore you as well.
Animation — our views
If you're considering using us, it's probably because you like our ethos of simplicity in website design. We tend to frown upon things that flash, spin or wobble, but subtle movement can work well. Slideshows of images that gently blend into each other provide a way to present a set of attractive pictures that quietly convey your message with minimum distraction, unlike those that slide aggressively across the screen. See Animal Actors for a great example.
Some gentle animation can also be applied to navigation tabs or CTA buttons: see Scotch Thistle Research and hover over the navigation links at the top.
One feature of older websites that has fallen out of favour is the splash page. This is a kind of “doorway page” often filled with colour, action and animated bells and whistles, but no explanation or message other than a sign saying “Click to Enter”. Remember those? See Manchester United. In today's fast-moving internet world where every click has to count, your customers are more likely to click away to your competitors. The only exception might be if you have a multilingual site, and your splash page gives readers the option to choose a language. Even then, there are other ways of proceeding.