Accueil > Développement web > Quelques règles de base du design web
935 visites

Quelques règles de base du design web

jeudi 15 mars 2012 (), par Vader[FR]

Certes, je suis développeur et non graphiste ou designer, mais ces quelques règles de bon sens s’imposent, du moins à mon avis.

Il sera question ici de design général, sans (trop) aborder l’aspect technique, qui sera l’objet d’autres rubriques (voir ici et ainsi que divers articles de la rubrique générique Développement web).

L’arrière plan

note : ceci est valable pour l’arrière-plan d’une page tout autant que pour l’arrière-plan d’un bloc.

uni ou dégradé léger utilisant des couleurs similaires, sans quoi il faudra se casser la tête pour les couleurs du texte afin de s’assurer qu’il reste lisible ... ou alors utiliser des calques, dont un sera un "filtre" qui augmentera les contrastes grâce à une couleur de fond + une opacité partielle.

mauvais exemple

Ensuite, à vous de choisir si vous utilisez un fond de page à motifs, et donc des fonds de blocs à couleur(s) unie ou légèrement dégradée(s), ou un fond de page uni ou légèrement dégradé et des fonds de blocs transparents.

A noter pour les écologeeks, un fond noir (éventuellement avec texte gris ou de couleur foncée) ne permet pas de limiter (même un peu) l’énergie électrique consommée par chaque écran qui affichera la page.

Cette économie, réelle sur les écrans à tube cathodique, est très limitée sur les écrans plats, et la plupart de ceux-ci consomment en fait plus avec un fond noir qu’avec un fond blanc.

Or, les nouveaux écrans au marché, depuis déjà 5 ans (au moins), sont des écrans plats, lesquels représenteraient plus de 75% du parc mondial.

Simplement, un fond noir ou sombre sera moins agressif pour les yeux.

Les couleurs de texte

Suite de la règle précédente, choisir des couleurs qui tranchent suffisamment avec le fond pour que cela reste lisible. Prendre en compte les couleurs des liens (normaux, au survol, déjà visités...) pour qu’ils soient différenciés du texte. Voir par exemple ici

Il peut être utile aussi de définir chaque couleur explicitement (dans les feuilles de style) afin de ne pas laisser les "couleurs par défaut" du thème système utilisé sur l’ordinateur du navigateur client.

Si quelques couleurs seulement sont définies, le reste en "couleur thème système client par défaut", il risque d’y avoir des problèmes chez ceux qui ont un thème de couleur différent du standard texte-noir-fond-blanc.

Par exemple, ceux avec texte blanc sur fond noir, sur une page web avec la couleur des titres en bleu foncé, la couleur du texte et de l’arrière plan non définis car "par défaut", la page sera fond noir, texte blanc, texte des titres bleu foncé sur fond noir, ce qui est peu lisible.

Il aurait alors fallu explicitement déclarer la couleur de l’arrière plan et du texte.

Pour les déficients visuels, il existe un moyen de proposer un changement de style, qui appliquera alors un style a contraste élevé, plus lisible mais moins joli.

Les liens

Les liens situés à l’intérieur d’un texte, utilisés comme références (par exemple ceux de cet article) devraient s’ouvrir dans une nouvelle fenêtre ou un nouvel onglet, afin de garder l’article ouvert.

De manière plus générale, il est préférable de faire s’ouvrir tout lien qui mène vers un site externe dans une nouvelle fenêtre ou un nouvel onglet, afin de garder l’utilisateur sur le site. Celui-ci peut de toute façon le fermer quand il le souhaite.

La taille du texte

Pour une résolution fixée de manière absolue, en pixels ou en points, plus l’écran est grand, plus le texte est petit, et donc difficile à lire.
Il est préférable de fixer la taille du texte de manière relative, en em.

Il est souhaitable aussi de prévoir plusieurs jeux de fontes pour laisser au navigateur plus de choix avant qu’il ne se rabatte sur une police système de l’ordinateur, s’il ne dispose pas des polices demandées par la page.

Et comme tout document texte, il est impératif de faire des paragraphes, car un pavé de texte est illisible, ainsi que d’utiliser des outils de mise en forme comme des titres, des listes, du texte souligné, en gras, en italique...

Il est préférable que le texte ne soit pas "justifié", car cela change l’espacement entre les lettres et risque de rendre le texte peu lisible. Un alignement "à gauche" comme aux temps anciens fera amplement l’affaire.

La taille des images

Plus une image est grande, plus le poids du fichier correspondant est important, ce qui implique deux choses :

  • vous pourrez stocker moins d’images
  • la page sera plus longue à se charger

Il est donc préférable de limiter la taille des images mises en ligne, et proposer d’abord des vignettes.
Un maximum de 2000 à 3000 pixels de large et 1500 à 2000 pixels de haut semble un bon compromis.

De même, il faudra éviter ou limiter les images animées, plus lourdes.

Enfin, il serait souhaitable de privilégier le format JPEG au format PNG, qui permet d’avoir une image plus légère au détriment de la qualité. Il faut que la page se charge suffisamment vite pour rester lisible.

La taille des blocs

comme indiqué ici et  :

Malheureusement, la plupart des sites utilisent, pour organiser la structure de leur page, soit des tableaux, soit des blocs de tailles fixes.

Et ces tailles fixes, le sont bien souvent pour des écrans de 800 ou 1024px de large.

Ce qui, sur les "grands" écrans larges, ou du moins sur les "grandes" résolutions d’écran d’aujourd’hui, rend assez moche, le contenu se retrouvant au milieu, et de grandes bandes verticales vides apparaissant sur les côtés.

Cet espace non utilisé aurait pu servir pour afficher du contenu et rendre la page plus lisible, au lieu d’avoir à défiler verticalement sur plusieurs pages.

Il est de fait préférable de mettre des tailles variables pour le contenu.
Les blocs de navigation, d’entête et de pied de page pourront quand à eux avoir des tailles fixes.

Il est également possible de limiter la longueur maximale des lignes de textes afin d’améliorer la lisibilité sur les grands écrans.

La largeur maximale des images dans les blocs sera aussi limitée afin d’éviter les débordements, et de ne pas avoir de barre de défilement horizontale.

De préférence, le contenu sera a taille variable mais fixé à l’intérieur de la page, bordé de blocs menus, navigation, entête/pied de page... de sorte que le bloc contenu pourra posséder une barre de défilement verticale, afin que les autres blocs soient toujours visible.

Pour gagner de la place, il pourra être utile de créer des blocs dépliants.
Par exemple, voir à droite de la page le bloc "articles dans la même rubrique", replié par défaut, qui se déplie au dessus du bloc contenu quand on le survole, et qui se replie lorsque la souris quitte la zone.

là, les mauvais exemples sont tellement nombreux que je ne met que quelques liens.
Par exemple, le lien sous "arrière-plan" en est un. Mais il en est de même pour de "grands" sites comme http://www.impots.gouv.fr/ ou http://www.lemonde.fr/

Si j’ai oublié quelque chose, n’hésitez pas à m’en faire part (voir les liens de contact dans le pied de page).

Répondre à cet article

Total 436367 visites depuis 4631 jours | | SPIP | | Plan du site | Suivre la vie du site RSS 2.0