Introduction to Webdesign

The term "webdesign" refers to the discipline that consists of structuring a website's graphic elements in order to esthetically express the visual identity of a company or organisation. This is a visual design step rather than a functional design step (ergonomics, navigation).

The goal of webdesign is to enhance a company or organisation's image with graphic elements in order to reinforce its visual identity and invoke a feeling of trust in the user. Nevertheless, along with ergonomic criteria, a website must above all meet users' expectations and allow them to easily find the information they are seeking.

Therefore, webdesign involves finding a compromise between a presentation that has amazing graphics and that gives the company credibility and brand image, and a presentation that is simple and plain that allows users to easily find what they are seeking.

By extension, the term web designer refers to the person whose job it is to design websites.

Necessary Inspiration

Designing a webpage is above all an artistic endeavour that combines inventiveness and creativity. The goal of this guide is to list several key elements used to obtain an effective design. However, inspiration can also be found by visiting reference websites, especially professional websites. It is especially interesting to study how each website arranges information, how the menus and blocks of information are presented and, in general, determine what gives a website a "professional" appearance.

Page Layout

Generally, templates are created and used as patterns when designing a website. Templates are "carbon copy" images or webpages that represent the graphic skeleton of a model page.

The traditional structure of a webpage is as follows:

• a logo located in the upper left-hand corner. Most of the time the logo is clickable and sends users back to the home page
• a menu located on the left and/or on the right
• a header that contains the website's name, a navigation banner and an area set aside for a banner (advertisement or otherwise)
• the page's main body, which contains most of the information
• a footer that includes useful information such as the last update, a link to a contact form, a link to a site map, etc.

In the template, the web designer must distinguish between elements that do not change and are identical on every page and elements that vary from one page to another.

Graphic Charter

A "graphic charter" is the comprehensive document that lists the presentation rules for the graphic elements that convey a website's visual identity.

The graphic charter defines a webpage's graphic outfitting, especially the sizes, colours and appearance of text, the site's images and buttons, as well as their position in relation to other objects on the page.

Mock-up

A mock-up is a model or prototype of a website that presents the website's graphics and navigation. Mock-ups allow designers to formalise a website's design and are generally used to validate the design phase before moving to the "fulfillment" phase.

A mock-up includes static pages representing the website's main pages (without content), which are used to simulate navigation. In simulation, dynamic elements such as the search engine may lead to a page presenting made-up results, for example.

Page Sizes

The size of a webpage depends mainly on the user screen definition (not resolution).

In terms of width, it is better to choose a value that is less than most visitors' horizontal definition so that they do not have to scroll the screen with the horizontal scroll bar. A short page allows visitors to easily skim information to find the items that interest them.

Concerning length, it is best to not exceed three to five times the height of the screen. Indeed, excessively long pages run the risk of not being read fully and take longer to load.

There are several strategies that exist to guarantee optimum page display on most visitors' computers:

• Choose the smallest width supported by the largest number of computers (e.g. between 600 and 800 pixels wide)
• Choose a page containing invisible tables with varible width (defined by percentage)
• Use a script (e.g. JavaScript) to detect user resolution and redirect visitors to a page with the proper width. This method requires visitors to use a browser with activated JavaScript and requires the creation of as many pages as widths requested.

The Positioning of Information

How information is positioned is an important element of web design. Given the direction in which users read information (diagonally from the upper left-hand corner down to the lower right-hand corner), information located at the top of the page will have a higher chance of being read by Internet users.

Choice of Colours

It is recommended to use no more than three different colours on a website in order to meet the criteria for simplicity. The colours should correspond to the organisation's colours (especially those of the logo) and should express a particular feeling.

No matter what colours are chosen, a dominant colour should be picked and used as the webpage's main colour. One or several more dynamic (brighter) secondary colours should be chosen and used in smaller proportions to underline the page's elements.

Colours possess implicite symbolism. Therefore, it is important to choose them with a goal in mind. Colours influence individual behaviour:

• physically (appetite, sleep, body temperature, etc.)
• emotionally (feelings of fear, safety, joy, etc.)
• psychologically (energy, concentration, etc.)

The table below lists the meanings that are classically associated with specific colours:

Colour	Positive Meanings	Negative Meanings	Areas
Blue	calm, trust, authorisation, appeasement, serenity, protection, seriousness, mysticism, kindness, water, space, peace	cold, sleep	sailing, new technologies, IT, medicine
Purple	delicacy, passion, discretion, modesty, religion	melancholy, sadness, grief, dissatisfaction	culture, politics
Pink	charm, intimacy, woman, beauty	naivety	private journal, women
Red	heat, strength, courage, dynamism, triumph, love, enthousiasm	violence, anger, danger, urgency, restriction, blood, hell	luxury, fashion, sports, marketing, media
Orange	lukewarmness, comfort, glory, happiness, wealth, pleasure, fruit, smell, energy, vitality	fire, warning	entertainment, sports, travel
Yellow	light, cheerfulness, sun, life, power, dignity, gold, wealth, immortality	deceit, selfishness, jealousy, pride, warning	tourism
Green	nature, plant life, help, balance, faith, appeasement, rest, trust, tolerance, hope, pride, youth, charity		discovery, nature, travel, education
Brown	calmness, philosophy, countryside	filth	environment
White	purity, innocence, snow, cleanliness, freshness, wealth		fashion, news
Grey	neutrality, respect		design, associations, not-for-profit organisations
Black	simplicity, luxury, night	death, darkness, sadness, monotony	cinema, art, photography, restriction

Colour composition also influences how volumes are perceived. Colour composition can give of a feeling of well-being, both when in a nicely decorated house as well as on a website.

The colour circle is a good tool for understanding how colours interact. The colour circle is a circular representation of colours. It includes the following colours:

• The primary colours (red, blue, green) or "pure" colours, which cannot be obtained by mixing other colours
• The secondary colours (cyan, magenta, yellow), which are obtained by mixing equal parts of two adjacent primary colours. Secondary colours are diametrically opposed to their complementary (subtractive) colour on the colour circle
• Tertiary colours, which are obtained by mixing a primary colour and a secondary color

Colours are also divided up into "warm" colours (with tones closer to red) and "cool" colours (with tones closer to blue).

There are universal rules that govern colour harmony that are due to the eye's physical properties. When the eye sees one colour, it automatically creates a filter of the complementary colour around it. This is called "simultaneous contrast". With this, how colours are perceived depends on the surrounding colours. Thus, yellow will appear more orangish when it is grouped with blue and the blue will appear more purple. Blue next to red will appear more green, etc.

Moreover, neighboring colours on the chromaticity diagram create a feeling of balance for the eye because of the absence of contrast; this is called "color harmony".

Generally there are two ways of choosing harmonising colours:

• by choosing nuances of the same colour, either colours of the same shade with similar tones
• by mixing complimentary colours (warm and cool), i.e. colours that are far from each other on the chromaticity diagram. For two colours, complementary, diametrically opposed colours should be chosen; for three colours, the colours must form a equilateral triangle, etc.

Finally, on the whole, objects in warm colours will appear larger than objects in cool colours.

Choosing Images

Images help to liven up a website and make it more cheery. That said, misused images can disturb visual comfort as well as page loading.

Novice webmasters like to liven up their website with fun animated images picked up on the web. However, this should be avoided as much as possible because such images can annoy readers and give a website an amateur feel.

Background Colour

Correctly choosing a background colour is vital because a poorly chosen background can hamper readability. Good contrast between the foreground colour and the dominant background colour is essential. For this reason, it is better not to choose a graphic background because it can hinder readability and project a general feeling of amateurism. Generally, the background colour should be rather pale.

Typography

It is strongly recommended that no more than two types of font be used on a website. Stylised fonts should be used sparingly (e.g. for a title) and most of the webpage should use a classic font (Arial, Verdana, Helvetica, etc.)

For traditional printed texts, serif fonts generally facilitate reading because the serifs help readers to follow the text.

Using serifs on the Internet is not recommended because, depending on the user's screen definition, serifs can easily become a spidery scrawl that hinder reading. It is better to opt for rounder, sans-serif fonts.

Finally, please note that texts with non-standard fonts run the risk of not displaying correctly on some screens. In order to create titles that use these fonts, this limitation can be avoided by creating transparent images that contain the text.

Graphic Symbols

Using pictogrammes and icons to establish visual signs is highly recommended. Be careful though when choosing symbols because users may misinterpret them, especially in the case of international websites. The following pictogrammes are commonly used:

• a magnifying glass typically symbolises a search function
• a envelope symbolises the possibility to contact the webmaster by email
• a question mark symbolises online help
• a house represents a link to the home page
• a flag symbolises the language of the current page or the possibility to change to a different language