Web Design - Simple Mistakes and Golden Rules

Good web design is something that can be achieved relatively easily by sticking to a small set of guiding principles and avoiding some very common mistakes.

Truly excellent web design skills are born out of years of experience, dedication and plenty of hard-learned mistakes. Fortunately, being truly excellent at web design is not a pre-requisite for building a fantastic website and the lessons learned from those mistakes can be passed on without the hardship.

This article contains some of the principles which I have learned the hard way and the easy way. Each principle is fairly obvious but so many designers ignore them for one reason or another and the consequence is a hard-to-use, poor looking site that is difficult to manage and fails to make the top 1000 in Google. If your website adheres to the principles below it will almost certainly be much healthier, and you and your visitors will reap the benefits.

1. Keep Everything Obvious - Don't Make Me Think
The book entitled Don't Make Me Think!: A Common Sense Approach to Web Usability by Steve Krug is one of the best selling books on the subject of web design and usability. Personally, I think thinking is a good thing but at the same time I don't want to be struggling to figure out how to submit a web form!

Visitors to a website expect certain conventions, breaking these is a great way of losing visitors. People expect to find the navigation at the top of a page or on the left hand side. Logos are mostly found on the top left. Much research has been conducted into how people view and use web pages. The good news is that you do not to know all of this; instead look at how larger companies such as eBay, Amazon, Google, Microsoft structure their pages and the language they use, then emulate them.

2. Limit Colours
A website using too many colours at a time can be overwhelming to many users and can make a website look cheap and tacky. Any users with colour blindness or contrast perception difficulties may even be unable to use the site.

Limiting a palette to 2 or 3 colours will nearly always lead to a slicker looking design and has the added bonus of simplifying your design choices, reducing design time.

Software like Color Wheel Pro can greatly simplify the creation of a pallet by showing which colours sit well together. If you really do not have the eye for design then software like this provides the perfect way of escaping monotone or badly combined colour schemes.

If your site uses blue and yellow together or red and green then it may present problems to anyone suffering with colour blindness. Vischeck.com provide free software that can simulate different types of colour blindness.

3. Be Careful With Fonts
The set of fonts available to all visitors of a website is relatively limited. Add to that the possibility of a user having a visual impairment then the options become even smaller. It is advisable to stick to fonts such as Arial, Verdana, Courier, Times, Geneva and Georgia. They may not be very interesting but your content should be more interesting than your font and if it can't be read, what is the point of having a site?

Black text on a white background is far easier for the majority of people to read than white text on a black background. If you have large amounts of text then a white or pale background is far more user friendly. Always ensure that there is a good contrast between any text and its background. Blue text on a blue background is okay as long as the difference in shade is significant.

Verdana is often cited as being the easiest to read on the screen. Georgia is probably the best option for a serif font.

4. Plan for Change
If you fix the height of your page to 600 pixels will you still be able to add additional menu items without completely redesigning your page?

The ability to add or remove content from a website is fundamental to the ongoing success of it. Having to rewrite the entire web page or website each time you want to make a small change is sure fire way to kill your interest in your own site and will negatively impact your overall design and usability.

Getting a good idea of how your website is likely to grow will clarify how best to structure your layout. For example, a horizontal navigation is often more restrictive than a side navigation unless you use drop down menus; if your navigation is likely to grow and you hate drop down menus then your design choice has been 99% made for you!

Understanding how to use Cascading Style Sheets (CSS), avoiding unconventional layouts and complicated backgrounds will all help enormously.

5. Be Consistent
Again, don't make your visitors think! About how to use your site at least. If your navigation is at the top on your homepage, it should be at the top on all other pages too. If your links are coloured red ensure the the same convention is used on all sections.
By using CSS correctly you can make most of this happen automatically leaving you free to concentrate on the content.

6. Keep it Relevant
A picture is better than a thousand words but if the picture you took on holiday is not relevant to your Used Car Sales website then you should really replace it with something which reflects the content or mood of the page; a photo of a car perhaps!

If you can take something off of your web page without it adversely affecting the message, appearance or legality of your website you should do it without hesitation.

Avoid the need to add images, Flash animations or adverts just because you have space. This wastes bandwidth and obscures the intentions of your website. If you absolutely must fill the space, then exercise your imagination to find something as relevant as possible.

Keeping your content focused will ultimately help your search-engine rankings.

7. Become a CSS Expert
Cascading Style Sheets should be any web designer's best friend. CSS makes it is possible to separate the appearance and layout of your page from the content. This has huge benefits when it comes to updating and maintaining your site, making your site accessible and making your site easy for search engines to read.

CSS at a first glance is very straightforward but is definitely worth investing in one or more books. Two great books are: CSS the Missing Manual by David McFarland and Bulletproof Web Design by Dan Cederholm.

8. Avoid Complexity
Using standard layouts for your web page will save you development time and make your site easier to use. Pushing the boundaries nearly always leads to quirky behaviour, cross-browser problems, confused site visitors and maintenance headaches. Unless you really do like a challenge then avoid complexity wherever possible.

Many standard layouts are freely available online with much of the boring, repetitive work already done for you.
The principles above all border on common sense and are well known to most people, yet so many sites continue to deviate away from them and suffer as a consequence. Following these principles will help you keep away from trouble, although it still doesn't guarantee it!


Paul has worked as a programmer and in Web Design for over 15 years.

---

Bookmark this article: