Le webdesign et l’agencement, typographie. (Part 1)

L’agencement et la typographie en webdesign sont des critères essentiels lors de la création d’une page web. Mais comment créer un design efficace ?  Créez des interfaces attrayantes et une bonne ergonomie pour rendre votre site web attrayant et facile d’utilisation.

La définition du webdesign c’est un compromis entre un graphisme à couper le souffle, et une navigation intuitive. Afin d’accéder facilement aux recherches des internautes. Ces deux concepts (design et navigation) permettent de renforcer l’image de marque et plus de crédibilité à l’entreprise.

Ce sujet webdesign est présenté sur deux articles. La première sur l’agencement et la typographie de votre site, et le second article 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 web designer créer l’image d’une marque avec des éléments graphiques. Cela pour renforcer l’identité visuelle de l’entreprise et 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 permettre aux utilisateurs de trouver facilement l’information qu’ils recherchent.

Agencement et typographie de votre page web

Cela aboutit généralement à la création de modèles de pages (en anglais « templates »), sont de gabarits utilisés dans la création de site web ils représentent la charte graphique d’un site internet. La structure traditionnelle d’une page web est la suivante :

• Logo situé en haut à gauche (souvent le logo est cliquable et mène à la page d’accueil) ;
• Zone de navigation (menu), située à gauche et/ou à droite ;
• En-tête contenant le nom du site, un bandeau de navigation et une zone prévue pour une bannière (publicitaire ou non) ;
• Corps de page, contenant l’essentiel de l’information ;
• 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 webdesign optimal de la page, il faut utiliser plusieurs méthodes

• 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 code javascript par exemple). Puis redirigez-les 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 choisir en webdesign

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 en webdesign

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. L’utilisation des pictogrammes suivants est ainsi assez commune :

• 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 :

Le Web Design émotionnel une nouvelle tendance !