Web Design - 9 Signs of Good Design
Summary
9 principles to improve new and existing web site designs.
Successful web site design combines compelling content with good design and aligns visitors needs with business needs. Content comes before design every time.
User needs are considered at every step in the design to ensure that great content is professionally presented, logically structured and easy to use.
Design For The Users
Visual Design
Page Layout Design
White Space
Text
Navigation
Consistency
Modular Web Design
Web Design Standards
Footnote
Further Reading
Design for The Users
Without visitors a web site is nothing and people may quickly leave a site that fails to excel in any of the following:
- Easy Navigation - there are roughly 8 types of web page navigation
- Page Loading Time - not everyone has broadband but they may still want your content
- Attractive Visual Appearance - simple and appropriately themed
- Clear Structure - this can visually communicate the your business offerings clearly
- Organised Internal Linking - very helpful to your users AND your search engine credibility
Visual Design
Consistent use of colour, graphics and typography are applied to well structured page layouts.
Conventional layouts are known to work best.
Style Sheets are used for structure and appearance of the layout. They are very powerful in the hands of a designer who uses Cascading Style Sheets (CSS).
Colour, shape, line and typography can all be combined to stunning effect and with great economy - no real need for fancy graphics.
Page Layout Design
Grid layouts make page design easier.
Grids bring order to page layouts and allow users to find things fast.
The human eye and brain is trained to look for order and grid layouts can achieve this.
The BBC web site uses grids to great effect.
White Space
Lack of white space between the boxes on a web page creates tension because the page appears over-crowded and there is nowhere to act as a resting place for the eye as it moves around the page.
When someone views a web page for the first time they will quickly begin scanning for what they came for. If each box is clearly differentiated then this will speed up eye scanning.
White space can also communicate information about the site structure and this help make users feel in control. It also looks professional.
Text
Good contrast between text and the background makes it more readable.
Verdana is perfect for body text and serif fonts like Times and Georgia are good for headlines.
Serif fonts are good for printed materials and headings but not for text passages.
Navigation
Too many layers of navigation confuses users and makes a site appear disorganised.
A primary navigation bar should be visible throughout the site.
A 'three click rule' may be applied so that everything is within 3 clicks of the home page.
In e-commerce systems the checkout process should take 4-6 clicks maximum.
If the site content is categorised into sections, secondary navigation is used within each section.
Secondary navigation in a sidebar is a well followed convention that users know.
Sidebar navigation with left justified text is easier to read.
Consistency
Repetition re-assures visitors that they are moving around in an autonomous environment.
Logo, navigation, header, footer and fonts are used consistently across the site.
Site sections can be differentiated by the judicial use of colour.
Consistency applied to an existing design can greatly greatly improve performance
A unified look across a web site gives it polish and professionalism.
Modular Web Design
Good designs are modular. The items that make up a web site are separated so that the page design is loosely tied to the code that is used for back office processes such as order processing.
This separation makes it easier to change the appearance and layout of a web site quickly without touching the back end. Conversely, you can work on the back end without affecting the design.
A client saves money and frees up the busy designer who has other projects to manage.
Future design changes are also more easily costed and implemented in a modular web site design.
Web Design Standards
Modern web design practices make use of web standards to guarantee quality web pages that consist of mark-up that passes validation tests.
The Web Governing Body - the W3C - provides on-line testing facilities for HTML and CSS mark-up. Anyone can use it to test the quality of the code behind any web page on the internet.
Valid mark-up is clean and works better across web browsers. It is more easily read by search engines, and is thought to improve search engine rankings.
Web Standards offer the opportunity to build quality into a web design from the outset.
If you use standards in your design you also guarantee that your pages will work in future versions of the major browsers. No nasty surprises that will break your site.
Footnote
The points listed above all provoke great debate in the web design community and only hint at the large body of knowledge that is available to people who study user interaction. Some of the links can be followed to sites that have authoritative articles on all aspects of Human Computer Interaction (HCI).
Further Reading
Web Usability articles at Jacob Nielsen's Alertbox
Principles for User Interface Design - A good article by Talin
Well written articles on Interface Design by User Interface Engineering
