 |
| Webmastering Website Design Realisation |
| Web Hosting Marketing Visitor Loyalty Measuring Traffic Exploitation See also : |
|---|
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.
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.
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:
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.
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.
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.
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:
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.
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:
| 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:
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:
Finally, on the whole, objects in warm colours will appear larger than objects in cool colours.
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.
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.
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.
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:
