Website design tips
Some people have strong views about website design 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
Visitors may enter your site from any page, not just the home page. How did you reach this one? Web users like to skim-read. Headings, bullet points and short pieces of text help keep the readers’ interest and guide their reading. Modern web usage requires the accommodation of vastly different screen sizes.
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 or persuade, and it won’t do any of 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 we divide up information between pages in order to present them in a logical order. Navigation and in-page links draw the user across the website to the point of sale or contact.
Page layout
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 ‘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 as long as you write them carefully. Break up blocks of text with headings, boxes and bullet points to hold the reader’s interest.
Think vertically: modern websites are designed with mobile phones in mind. We then enlarge the design to look good on the larger screens of laptops and desktops.
Website organisation and structure
Use the structure to organise your information 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. If your website provides house swaps, you will be serving two distinct groups of customers – those letting out their house while on holiday, and those house-sitting for them while having a holiday themselves. You must talk differently to each group and lead them to different areas of the site.
Try asking a few friends road-test your website when it is near completion. Check how easily then can complete tasks or locate information. Think about all the things that frustrate you when using a website, and make sure you avoid them in yours.
There is more information on website content on our Content Tips page.
Navigation, in-page links and website design
Navigation is the system of linking website pages so that every one can be accessed from every other. It enlivents the website design 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. Don’t overuse them, they 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 website 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 in website design 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 when looking for inspiration for your website design.
But there are some rules…
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 in a website design
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. We love fonts too and are always adding new ones to our collection!
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.
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.
Search engines favour text over images, so consider this when adding complex logos.
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, we recommend that you 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 £15 each. The right picture can really enhance your core message, as you can see with Borrowed Time.
If your business or project is not very “pictorial”, consider buying images that are generic enough to decorate your website without drawing 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. Use sliding images for more movement and dynamism.
Navigation tabs, CTA buttons and scrolling can have some gentle animation applied to them. This can make them change colour slowly instead of instantly, or scroll smoothly instead of jumping around.
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? In today’s fast-moving internet world where every click has to count, your customers are more likely to click away from your splach page to your competitors. One 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.
And now?
See more information about working together on our Terms & Conditions page, or contact us to discuss your design ideas.
Category: FAQs & Tips
← Previous post: WordPress website content management
→ Next post: Writing your website's privacy policy