Web Design Tips & Principles (Part 1)

In this mini-series, we want to quickly cover some basic do's and don'ts of effective web design. A lot of these are common sense, and some are just 'netiquette'. Others are standardised ways of doing things and will be what visitors 'expect' to see. By keeping to certain norms, you'll help create an intuitive environment where visitors feel welcome and at home.

All these tips exist, not to hinder your creativity, but to give you the short-cuts to years of experience and commercial understanding!

Consistency, Consistency, Consistency...

Consistency is absolutely essential, not only from the site branding perspective, but also from a usability standpoint. If the site doesn't look consistent from page to page then it can confuse people where to find things. Also, you want visitors to remember your site, and if you use too much variation, you're limiting their ability to create and keep a mental picture.

Establish your layout style, font and colour set - and then stick to it. CSS is useful here, and will really help you imprint on your visitors memory. Too much use of varied colour will make your site gaudy and will detract from the overall theme. Generally it's advisable to stick to a single font throughout the entire site, although sometimes a different font can be used for the headings - as long as it fits the style of the main font.

Try to finalise your basic look, layout and design before you start creating too many pages. Get it right on a couple of pages, and then use it throughout the rest of the site. Otherwise, whenever you make a change you have to make it on every page. Of course, CSS helps hugely here too; as a change in the CSS file will affect the entire site - but this won't work where you've made structural or positional changes etc.

CSS can also be used to control the look of your hyperlinks. Ensure this is consistent throughout the entire site so that your visitors know what can be clicked on. It's acceptable to use different hyperlink styling in headers, sidebars and footers, as long as it's consistent for that area throughout the site.

Navigation

People normally expect a home-page button and direct links to the main sections of your website from every page. Navigation links are usually best placed near the top of the page or on one side (a side-bar). Your main navigation block should be in the same place on every page.

'Privacy Policy' and 'Site Terms & Conditions' should generally be placed in the footer - as you don't want to waste your main navigation area on these. Contact links can also be placed in the footer if this is not part of your strategy - and you want to play it down. Many businesses will want to make contact a high priority though.

Remember that underlined blue text is traditionally seen as a hyperlink, so avoid creating your own blue underlined text unless it's a hyperlink. Generally, it's better to avoid underlining altogether - because of its association with hyperlinks. It's very frustrating for a visitor to click on what they think is a link, and have nothing happen.

Navigation should 'make sense' and flow contextually through your pages. For instance, if you have three articles which run consecutively, you should have 'next' and 'previous' type buttons to indicate the link; you shouldn't have to keep returning to a main menu to select the next one.

Similarly, you should be able to return back to the subcategory or category heading page from any individual page. Think of it like a tree structure, with your home-page representing the trunk. The first set of branches build out from here, with each page also possibly being a junction for more branches to break out. And it should always be simple to get back to the previous branch, as this feels intuitive.

Avoid using Adobe Flash for fancy menus, as any browser that doesn't run Adobe Flash won't then allow navigation between pages. With JavaScript and CSS providing so many available options these days, it's pointless using Adobe Flash anyway. All the major browsers have JavaScript built in, and virtually everyone leaves it turned on - as so many modern sites won't function without it.

Use hyperlinks between your pages wherever the content 'overlaps', so that visitors can move between related content with ease. Avoid using too many hyperlinks in your main body copy though, as the site can become disjointed and users can feel overwhelmed.

Always remember that people may arrive at your site via any page, and not just the homepage. Therefore, every page must contain clear navigation to the rest of the site and other appropriate special pages. The term 'landing page' is often used in conjunction with the web, and indicates a web page that's been specifically designed to pull a visitor into the site. These are the pages that will often act as 'adverts' for your site, and will be the ones promoted through the search engines.

Continued...