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 organization. This is a visual design step rather than a functional design step (ergonomics, navigation).
The goal of webdesign is to enhance a company or organization'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.
Designing a webpage is above all an artistic endeavor 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:
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, colors 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 colors on a website in order to meet the criteria for simplicity. The colors should correspond to the organization's colors (especially those of the logo) and should express a particular feeling.
No matter what colors are chosen, a dominant color should be picked and used as the webpage's main color. One or several more dynamic (brighter) secondary colors should be chosen and used in smaller proportions to underline the page's elements.
Colors possess implicite symbolism. Therefore, it is important to choose them with a goal in mind. Colors influence individual behavior:
|Color||Positive Meanings||Negative Meanings||Areas|
|Blue||calm, trust, authorization, 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 organizations|
|Black||simplicity, luxury, night||death, darkness, sadness, monotony||cinema, art, photography, restriction|
Color composition also influences how volumes are perceived. Color composition can give of a feeling of well-being, both when in a nicely decorated house as well as on a website.
The color circle is a good tool for understanding how colors interact. The color circle is a circular representation of colors. It includes the following colors:
There are universal rules that govern color harmony that are due to the eye's physical properties. When the eye sees one color, it automatically creates a filter of the complementary color around it. This is called "simultaneous contrast". With this, how colors are perceived depends on the surrounding colors. 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 colors 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 colors:
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 color is vital because a poorly chosen background can hamper readability. Good contrast between the foreground color and the dominant background color 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 color 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: