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

La mise en page et la typographie en webdesign sont des critères essentiels lors de la création d’une page web. Mais créer un design efficace et attrayant, une bonne ergonomie et facile d’utilisation, n’est pas simple à réaliser.

En effet, l’activité du web designer est un compromis entre réaliser un graphisme à couper le souffle, et une navigation intuitive. Cela, afin de faciliter les visites et recherches aux internautes. Ces deux concepts (design et navigation) permettent de renforcer l’image de marque et d’apporter plus de crédibilité à l’entreprise.

Cette activité webdesign est présentée sur deux articles. La première sur l’agencement et la typographie web, et le second article sur le choix des couleurs.

Définition du web design

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

Le web designer conçoit l’image d’une marque avec des éléments graphiques. Ainsi, il doit renforcer l’identité visuelle de l’entreprise et procurer un sentiment de confiance aux consommateurs. Néanmoins, notez qu’en vertu des critères d’ergonomie, un site internet devrait avant tout répondre aux attentes des utilisateurs. Puis, 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 des gabarits utilisés dans la création de site internet 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.

Les méthodes d’optimisation du webdesign

• 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 impose aux visiteurs d’avoir un navigateur activé pour le Javascript 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 du web (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. Or, sur le web, l’utilisation de telles polices est déconseillée car selon la définition de l’écran du visiteur. En effet, 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 pour un site web multilingue. Ainsi, l’utilisation des pictogrammes est 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 avec possibilité de changer de langue.

Autres articles :

Le web design et les couleurs du web. (Part 2)

Le design émotionnel une nouvelle tendance !