Le web design : agencement, typographie.(Part 1)

Définition du web design

Le design d’une page web met en œuvre l’inventivité et la création. Alors comment avoir un design efficace ? Tout d’abord, sachez que les professionnels du web savent attirer l’œil par des design attrayants et qu’ils sont de bons conseillers. En effet, ils peuvent remplir les critères d’une charte graphique, et d’un concept ergonomique, afin de rendre votre site attrayant et facile d’utilisation.

Le webdesign est un compromis entre un graphisme à couper le souffle, et une navigation ergonomique permettant à l’utilisateur de trouver facilement ce qu’il cherche. Ces deux concepts (graphisme et navigation) permettent de donner une image de marque et de crédibilité à l’entreprise.

Cet article est divisé en deux parties, l’une sur l’agencement et la typographie de votre site, et la seconde sur le choix des couleurs.

Définition du web design

Le webdesign est un terme désignant la structuration des éléments graphiques d’un site web afin de traduire, dans une dimension esthétique, l’identité visuelle de votre site. Il s’agit alors d’une étape de conception visuelle, par opposition à la conception fonctionnelle (ergonomie, navigation).

Le but du webdesign est de mettre en avant l’image de l’entreprise (ou de l’organisation) grâce à des éléments graphiques ayant pour objectif de renforcer l’identité visuelle de la firme et de procurer un sentiment de confiance à l’utilisateur. Néanmoins, notez qu’en vertu des critères d’ergonomie, un site web doit avant tout répondre aux attentes des utilisateurs et lui permettre de trouver facilement l’information qu’il recherche.

Comment agencer votre page web ?

Cela aboutit généralement à la création de modèles de pages (en anglais « templates »), servant de gabarits pour la création du site web et 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 ;
  • une 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, etc.

Pour garantir un affichage optimal de la page, il faut utiliser plusieurs types de stratégies :

  • Choisissez la plus petite largeur supportée par la majeure partie des internautes (entre 600 et 800 pixels de largeur par exemple) ;
  • Choisissez une page comportant des tableaux invisibles de largeurs variables (définies en pourcentages) ;
  • Détectez la résolution des visiteurs à l’aide d’un script (en javascript par exemple), et redirigez le visiteur vers une page de la bonne largeur. (/!\ Cette méthode nécessite que les visiteurs aient un navigateur avec le Javascript activé et demande de créer autant de pages que de largeurs souhaitées.)

Quelle typographie choisirQuelle typographie choisir ?

Il est fortement contre-indiqué d’utiliser plus de deux polices sur un site web. Les polices stylisées doivent être utilisées avec parcimonie (pour le titre par exemple) et l’essentiel de la page web devra être réalisée avec une police classique (Arial, Verdana, Helvetica, etc.).
Pour une utilisation imprimée traditionnelle, les polices à empattement (serif) facilitent généralement la lecture car les empattements permettent d’accompagner le regard du lecteur. Sur le web, l’utilisation de telles polices est déconseillée car selon la définition de l’écran du visiteur, les empattements peuvent très vite devenir des pattes de mouche gênantes pour la lecture. Ainsi, il est souhaitable d’opter pour des polices sans empattement (sans serif), plus rondes.
Enfin, sachez que les textes utilisant des polices non standard risquent de ne pas apparaître correctement sur les écrans des internautes. Pour créer des titres avec de telles polices, il est néanmoins possible de contourner cette limitation en créant des images transparentes comportant le texte.

Les symboles graphiques à utiliser :

Il est conseillé de faire usage de pictogrammes ou d’icônes afin d’établir une signalisation visuelle. Attention au choix de ces symboles car le sens perçu par l’utilisateur peut être différent de celui qu’on lui attribue, notamment si le site web a une vocation internationale. Les pictogrammes suivants sont ainsi communément utilisés :

  • une loupe symbolise habituellement une fonction de recherche ;
  • une enveloppe signale la possibilité de contacter le webmaster par mail ;
  • un point d’interrogation caractérise une aide en ligne ;
  • une maison représente un lien vers la page d’accueil ;
  • un drapeau signale la langue de la page en cours ou bien la possibilité de changer de langue.

Autres articles:

3 thoughts on “Le web design : agencement, typographie.(Part 1)

  1. Bonjour,
    Oui l’article date de 1999, donc ça commence à faire en terme de temps sur le net, cependant il reste informatif pour les profanes…
    Merci pour votre remarque… Nous allons l’adapter prochainement pour 2014
    Cordialement,
    Michel

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

4 × 3 =