Website Design Tutorial
After you have decided which will be the theme of your site, what type of visitors will you be trying to attract, and some other topics that conform the planning stage, it comes the moment of designing your site. The design stage consists in specifying exactly what will be the look of the site.
When designing your website, you must follow some overall rules. Remember that you want to create a good impression so that your visitors will not leave as soon as they arrive. Therefore, you must present a site that is neat and well organized, with a professional look. Avoid the display of too many brightly coloured elements, as they create an amateurish effect.
You must begin by pretending that you are a visitor and answering the fundamental question such a visitor will make, "What can I gain from here?" Visitors will not be impressed by the advanced features of your product unless it satisfies one or more of their needs. If you are not selling a product, then your site should offer entertainment, information, advice, tips, or allow the possibility of contacting with other people or being directed to other interesting sites.
If yours is a business site, then it must allow quick access to the products or services sold by the firm, and a fast way to purchase them. It should also provide information about the firm, its goals, and policies.
A common error is to design a site that takes forever to download. Statistics show that the average surfer cancels the opening of a site when it takes more than seven seconds. According to your target, and the presumable connection speed they have, you should calculate how much material you might include in your home page to not exceed this limit. Big graphics and lengthy animations should be reserved for inner pages. Any way, it is not good to overwhelm visitors by putting too much information in the home page.
Every graphical element should help to present the main idea of the site. Avoid including graphics just for the sake of them, because graphics load slowly so they must be used efficiently. The type of images you use is also important: do not use funny pictures if you are trying to create a business-like site. Flash animations that were an absolute no-go in earlier times may be now considered as connections are faster, but keep in mind that many people reject them.
You may also want to take into account the colors you use if you are trying to provoke some kind of feeling. A broad division can be made between warm and cold colours. Warm colours are orange and red, while cold colours are blue and green. Warm colours tend to stimulate emotions, while cold ones tend to calm them. Choose the right colors for the effect that you want to create.
The layout of the elements in the page is also of importance. The placing of navigation bars and menus should match their importance. Occidental people are used to read from left to right and so text and images that follow an order must be arranged in this way. If you are of the exacting type, you will want also that pictures are setup according to what they represent: persons and cars should be facing the centre of the page; roads will go from the top and the left to the bottom and the right, etc.
For better readability, use dark text on light background and avoid the opposite. Also, use much white space and prefer text arranged in two or more columns rather than only one wide column with a very large line width. Choose fonts that are widely available like Arial and Times Roman, and avoid exotic fonts that few people have in their computers. Instead of using text in a fancy font, make a picture with the text.
If you have pages with large portions of text, try to divide it using headings. Be consistent with the style of your headings, using two, or at most three, styles for headings, sub-headings, and sub-sub-headings. All the headings must be set in bold type, with the lower-level one the same size that normal text. Break the text between headings in paragraphs of about the same length. Write the headings carefully so to attract the attention of the reader. Sparingly use bold or italic type to highlight important points. You can use also a color change to the same effect. Do not use more than two or three font families in a page.
All the design decisions that you took can be condensed in a template page that you use once and again all over your place. This has two neat advantages, one for you, and one for your visitor. Once you have made a template, you can reuse it all the time without thinking any longer. The visitor finds that it is easier to navigate through your site and find the information he wants when all the pages have a similar structure.
Some considerations apply exclusively to corporate sites. In this type of sites, great care must be taken in reassuring your visitors about the confidentiality of the information that is collected from them. Privacy policies should be detailed in a page on its own. The details of how orders are processed can also be considered to be of interest for potential buyers, and should consequently be informed.
A final point that is often neglected is the quality of the written part of the site with respect to spelling and grammar. At the very least, you should use a spelling and grammar corrector on the text before publishing it. Text with spelling errors and poor grammar gives a bad impression of the owner of the site. If you are not confident with your writing, hire a person to check it or even to write the pages for you.
Some devices help to be sure that your visitors find what they are looking for. Some of them are easier to implement than the others are, so each one must evaluate the effort that is ready to spend in this achievement. A site map is an easy thing to prepare; all you have to do is to make a list of links to all the pages in your site, using the title of the page as the descriptive text.
A facility to search the contents of your site for a given word or phrase is also very helpful, and nowadays is easy to implement if you are an affiliate to Google's AdSense. In that case, you only have to think where to place the search box for maximum efficiency. I suggest dedicating a page for the search box and its explanation, and link to it from the site's main menu. If you cannot get a search box through an affiliation, you will need to use a CGI script, which makes things a little harder.
You may also provide an alphabetical index of your site's contents. While this option requires a little more maintenance than the search box, it needs not to be a demanding task if you limit yourself to the main topics. This index can be helped by placing at the top of your home page prominent links to topics that you judge that are the most popular ones. You will usually know this if, as it should be, you usually review your site's statistics.
An assignment that most beginners do not fulfill is to provide a customized 404 page. Today this can be done just as you make any other page or through the use of the control panel that is provided by your hosting company. Its function is to help the visitor to find an alternative to a page that is missing. While in mostly static sites this is not a concern, a 404 page should not be missing in a rather dynamic site.
In every page, you must include the title of the site and, if you use it, the logo of your company or site. In addition, in the home page you must include a brief description of the site and of the benefits derived from using it. To be satisfied, you must answer affirmatively to the question of whether a new user, just arrived to your home page, can easily work out what the site is about.
Take into consideration that as much as 50% of the visitors supplied by the search engines will leave your site after reading the home page. For some topics, the percentage of bounces can be as high as 80%. This is because they are searching for other thing than what you are offering them. It can also be that they are searching exactly what you have, but you did not manage to make that explicit at a first glance. It is your duty to make this number as low as possible.
Other common causes for a "bouncing" visitor are that the home page, as mentioned before, takes too long to download, or that the page requires a plug-in (such as the Macromedia Flash one) that the visitor does not have or dislike. You have to take care when you share links with another sites that the text in the link accurately describes your site's theme.
If you are really concerned with visitors bouncing off your home page, you may try some forcible methods to retain them or, at least, to keep them coming. Providing news updates on the home page will keep people coming back, even if they do not go any further. A timely pop-up ad when the visitor has pressed the "Back" hotkey, may decide him to stay. You may even offer something for free if he visits the inner pages of the site.
Previous | Contents | Next
|