Webmastering - Webdesign
Ask a questionIntroduction 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 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.
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 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.
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, colors 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 Colors
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:
- physically (appetite, sleep, body temperature, etc.)
- emotionally (feelings of fear, safety, joy, etc.)
- psychologically (energy, concentration, etc.)
| 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:
- The primary colors (red, blue, green) or "pure" colors, which cannot be obtained by mixing other colors
- The secondary colors (cyan, magenta, yellow), which are obtained by mixing equal parts of two adjacent primary colors. Secondary colors are diametrically opposed to their complementary (subtractive) color on the color circle
- Tertiary colors, which are obtained by mixing a primary color and a secondary color
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:
- by choosing nuances of the same color, either colors of the same shade with similar tones
- by mixing complimentary colors (warm and cool), i.e. colors that are far from each other on the chromaticity diagram. For two colors, complementary, diametrically opposed colors should be chosen; for three colors, the colors must form a equilateral triangle, etc.
Finally, on the whole, objects in warm colors will appear larger than objects in cool colors.
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 Color
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.
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
Jean-François Pillou - Founder of CCM
Better known as Jeff, Jean-François Pillou is the founder of CommentCaMarche.net. He is also CEO of CCM Benchmark and digital director at the Figaro Group.