Basic web design principles

 

 

Whether you plan to design your website yourself or to hire a professional to help

you, it is important to understand the principles of good web design. Even though

a lot of what makes a page attractive is in the eye of the beholder, there are

definite web design principles that your should keep in mind. Remember to tailor

your page to the expectations of your customers.

Keep it simple. A website with a complex navigation, many sidebar links, lots of

text and dozens of images will only confuse and put off your visitors. Keep your

design as simple and neat as possible, and trim away excess content – especially

on your home page. Your visitor should have no doubt about what you want them

to look at and click. If you do need to present a lot of information, make sure it is

extremely well structured and that your navigation is clear.

Prefer minimalism. Web design puts a high value on “white space”, or the empty

places between page elements (which is typically, but not necessarily, white). It is

good to have a lot of white space so that your page looks uncluttered and stylish.

It also helps lead the viewer’s eye to the most important elements – which is part

of a good viewer interface (see section 4.4). This doesn’t mean having a page

that is practically empty; it means that you shouldn’t clutter things and all the

elements of your page should have their own place and be easy to see.

Screen resolution. Screen resolution is the size and shape of the computer

monitor that your page will be viewed on. Most web users have quite a high

screen resolution, though most still use the “square” aspect ratio rather than a “widescreen” one.

Limit your colours and fonts. In line with the philosophy that simple is best, keep

your design to just a few complementary colours and never use more that three

fonts on your website – one is sufficient, as is a standard size. A very important

thing to remember when planning your content is never to make entire words or

sentences capital letters unless it is absolutely necessary – in the online world,

using caps is the equivalent to shouting. Take inspiration from your corporate

identity and existing business designs

Also, make sure that your colours and fonts are “web safe”. Web-safe fonts and

colours are those that anyone using any type of computer and web browser will

be able to view. Never use elements on your page that are not web safe, no

matter how nice they may look: if your customer doesn’t have your obscure font

installed on their computer, they will just see an empty page or a line of gibberish.

Practical considerations. Use your own common sense when you assess your own

page and make adjustments accordingly. Is the text too small or too big? Does

the font and background colour combination make the words hard to read? Is

your heading too big or indistinguishable from the main text? Do your images load

properly, or do they take a long time to appear? Do you have to scroll sideways to

view the whole page? Are there any unnecessary elements cluttering your view?

Are related topics and items grouped together, or is there no discernible order? A

detailed examination of your page will reveal issues like these.

To see more things to watch out for, refer to www.ratz.com/featuresbad.html.

Remember that a website isn’t about its individual elements at the end of the day,

but about what it looks like as a whole – so assess your website as a whole once

you are happy with the elements.

Standardise your style. There is nothing worse than a schizophrenic website with

a new design on every page and a different font and colour for each element.

Make sure that your design stays consistent throughout your website. A good way

to ensure this is to tell your developer to use CSS (which stands for “cascading

style sheet”) when coding your website. This works just like paragraph styles in

Microsoft Word: you can define what “heading 1” or “body text” should look like

by creating a CSS style, and if you ever want to update your page, you can simply

tweak the CSS and the update will be applied to your entire page.