Introduction au webdesign

Le « webdesign » consiste à structurer les éléments graphiques d'un site web afin de valoriser, à travers une dimension esthétique, l'image de la société ou de l'organisation. Il s'agit d'une étape de conception visuelle, par opposition à la conception fonctionnelle (ergonomie, navigation) et la conception technique (programmation, base de données).

Un site web doit avant tout répondre aux attentes des utilisateurs en permettant de trouver facilement l'information cherchée, mais il doit aussi procurer un sentiment de confiance.

Le webdesign est donc un acte artistique respectant un compromis entre une présentation graphique agréable et une navigation simple.

Agencement de la page

La création des pages modèles (en anglais templates), est la fondation d’un site web.
Les templates sont des images créées sous forme de calques ou pages web représentant le squelette graphique d'une page type.

La structure traditionnelle d'une page web est la suivante :

• Un logo situé en haut à gauche. La plupart du temps le logo est cliquable et mène à la page d'accueil.
• Une zone de navigation (menu), située à gauche et/ou à droite.
• Un en-tête contenant le nom du site, un bandeau de navigation et une zone prévue pour une bannière (publicitaire ou non).
• Un corps de page contenant l'essentiel de l'information.
• Un pied de page regroupant des informations utiles telles que la date de mise à jour, un lien vers un formulaire de contact, un plan d'accès…

Il est essentiel de distinguer dans le template ce qui relève d'éléments communs à toutes les pages des éléments variables d'une page à l'autre.

Charte graphique

La charte graphique est le document synthétique récapitulant les règles de présentation  et d'habillement graphique de la page, notamment les tailles des caractères, les couleurs, les images, les boutons, la position des objets dans la page…
Certaines règles de design à respecter :

• Position des informations : l'information située en haut de page aura plus de chances d'être lue par les internautes.
• Choix des couleurs : ne pas utiliser plus de trois couleurs différentes dans un site web afin de respecter le critère de sobriété.

Dimension des pages : opter pour une taille inférieure à la définition utilisée par la majorité des visiteurs afin de ne pas les contraindre à faire défiler l'écran avec l'ascenseur. Une page courte permet au visiteur de survoler facilement l'information. Il est souhaitable de ne pas dépasser trois hauteurs d'écran.

Maquette

Une maquette est un prototype de site web présentant le graphisme du site et sa navigation. La maquette permet de formaliser la conception du site et constitue généralement une étape de validation avant de passer à la phase de réalisation.