[3/8] Start your own website: Design

Part 1: Intro
Part 2: Content Management Systems

Apart from the content, the design is the most important part of your website. It will make your website stand out in the crowd, navigate your visitors through the website and provide the desired look and feel of your website.

Navigation

Of course you want your website to be cool, flashy and state of the art, but the most important function of design is structuring your website in such a way a visitor can find what he needs in an efficient and convenient way. To do this, a theoretical background is needed. According to eye-tracking studies, most readers read a website in an F shape. This means, they scan the top of the website and then look at the left side of the site. This has resulted in the fact that most navigational menu's are situated at the top or the left side of the website. Do not go deeper than 3 levels in the menu and make sure there is a breadcrumb path on each page, so visitors know where they are in the structure of your website.

Eye-tracking studies show that visitors read a website in an F shape

Contrast

This may sound obvious, but key to a good comprehension and visibility of text is a good contrast between the background and the text. As you can see on various Hyves profiles, where users can design their own profile, a good contrast is not as obvious as you might think. Many people use light text on a light background or dark text on a dark background. Playing with the contrast can also distinguish important objects from unimportant objects.

Recently I made a website for Sports Institute Dale Tan. The goal of this website was to make visitors sign up for a free lesson. As you can see in the screenshot below I made a large sign up button which is highly visible on the site. This button is large and in a color which is not used elsewhere on the site. The font is large as well. As you can see, at the bottom of the site the copyright text is in a lighter color, because it is not as important as the main text.

Screenshot of www.daletan.nl

Text/visual ratio

Nothing is as boring as a website full of text without any visuals. Depending on the target group it is wise to add visuals to the text. It will make the text more inviting and - if well done - can give a structured feel to the text. As you can see on this page about karate, the page has a good amount of photographs and video's to complement the text.

Templates

If you are using a CMS, there is a good chance that you can find decent design templates for your website. Many templates are available freely and more professional templates can be bought. In both Wordpress and Joomla it is easy to install a new template and have a completely new design without having to do anything in the code. If you are using a template, you might want to customize it to your needs. This can be done by adding a new header (which you have to create yourself in Photoshop), changing background or font colors or adding borders to specific areas. For Wordpress there is a very good template called Weaver. It is an extension of the basic Twenty Ten template, which is provided with the original Wordpress package. Weaver offers you more control over the design of your website without having to change anything in the code. However, if you are planning to build your own website, I can advise you to learn the basics of HTML and PHP coding. There are numerous tutorials and "coding schools" online to get you started.

Next article will be about plugins to extend the functionality of your website.