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.

Interface et charte graphique d’une page web

Habituellement, les web designers créent ou utilisent des templates pour créer une interface et une charte graphique. A savoir, c’est un modèle de page web qui sert à réaliser la charte graphique. En fait, une technique souvent utilisée dans la création de site internet. Voici, la structure traditionnelle d’une page web :

• 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. Le web designer devrait utiliser les polices stylisées avec parcimonie. Par exemple pour le titre mais, il devra réaliser l’essentiel de la page  avec une police classique. Soit des polices (Arial, Verdana, Helvetica, etc.).
A savoir les imprimeurs utilisent traditionnellement, les polices à empattement (serif) ce qui facilite la lecture car les empattements permettent d’accompagner le regard du lecteur. Cependant, le web designer, ne peut pas utiliser ces polices, en raison des différentes résolution d’écran. En effet, les empattements peuvent très vite devenir des pattes de mouche gênantes pour la lecture. Ainsi, le web designer intègrent des polices sans empattement (sans serif), soit plus rondes.

Les polices non standards

A savoir, les textes qui présentent 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 des 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 l’administrateur du site web. 
• 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 !