Suite et fin de notre dossier consacré au design graphique appliqué aux écrans avec cette 3e partie regroupant les 4 derniers principes : utiliser une grille, travailler le contraste, respecter une unité dans l’interface et varier les éléments graphiques.

Si vous venez de découvrir cette série d’articles, sachez que vous pouvez toujours consulter la 1ère partie du dossier en cliquant ici ainsi que la seconde en cliquant là !

Principe #9 : utilisez une grille

Devez-vous toujours utiliser une grille lorsque vous créez un site web ? Pas forcément. Mais jetez un œil sur ceux que vous visitez quotidiennement : il y a fort à parier qu’ils sont tous construits suivant une grille.

Les grilles peuvent être fixes ou modulaires (ou les deux) pour s’adapter aux différents supports numériques utilisés. Dans la plupart des cas, les colonnes délimitent généralement les zones verticales alors que les zones horizontales sont matérialisées par des espaces vides. Par ailleurs, on peut également s’appuyer sur une grille de ligne de base pour forcer l’alignement des textes d’une colonne à l’autre. Par-dessus ce système de grilles, vient s’ajouter un système distinct de zonage par contenu que l’on appelle DIV (en référence aux balises HTML).

Ce site web réalisé par Archrival pour Lone Star Beer place en vedette une bouteille assortie d’une carte géographique afin de mettre l’accent sur le produit ; le contenu secondaire est quant à lui disposé dans le bas de la page, sur trois colonnes.

Principe #10 : contraste, contraste, contraste…

On parle de contraste lorsqu’une différence entre un point et un autre est perceptible, par exemple entre un avant-plan et un arrière-plan, un titre et le corps du texte qui l’accompagne, une zone de contenu et une autre, etc. La couleur de la typographie doit être nettement plus sombre que celle du fond sur lequel elle repose ; l’image principale doit être plus visible que les images secondaires afin d’obtenir l’attention qu’elle mérite.

Dans la section visiteurs de l’University of Texas at Austin, les différences de corps de caractères et le placement des images aident les internautes à trouver rapidement les informations recherchées, tandis qu’un code couleur correspondant au contenu les départage entre la zone du campus (ocre) et la zone de la faculté (pourpre). Le designer Fangman a veillé à placer les textes sur les parties sombres des photos afin d’en optimiser la lisibilité.

Principe #11 : unité dans l’interface

Les designers qui travaillent à développer leur propre présence sur le Web devraient – de manière assez instinctive – développer une identité visuelle homogène où chaque facette de l’interface sera cohérente avec les autres. Une présence en ligne maîtrisée est d’autant plus importante à notre époque, car les designers doivent non seulement maintenir à jour leur propre portfolio, mais aussi leur blog, leur éventuelle boutique en ligne, leur fil Twitter, etc. L’utilisation de la même famille de fontes, d’une palette de couleurs récurrente, d’une structure de grille commune, d’un logo/symbole reconnaissable sont les préliminaires indispensables pour établir une « image de marque » cohérente et bien conçue.

Typographe, illustratrice et designer, Jessica Hische a créé un style graphique homogène pour son blog et sa boutique en ligne qui contribue à donner aux internautes une sensation de cohérence lorsqu’ils passent d’un site à l’autre.

Principe #12 : variété dans l’interface

Une interface graphiquement cohérente ne signifie pas nécessairement qu’elle doit avoir une esthétique austère, avec des fontes et des images dépourvues de rythme et de fantaisie dans leurs tailles et leurs placements. La plupart des sites disposant d’une grande quantité de contenu, les designers doivent donc donner du sens au design afin de faire sentir à l’utilisateur qu’il existe une hiérarchie dans l’information et celui-ci doit immédiatement comprendre par où commencer sa lecture, et comment obtenir de plus amples informations. Veillez surtout à concevoir une interface avec une différenciation visuelle suffisante pour bien servir le contenu, les différents thèmes abordés ainsi que les concepts développés, tout en répondant aux desiderata du client et aux besoins de l’utilisateur.

Ce site web réalisé par Firebelly pour l’Erie Elementary Charter School évoque une ambiance scolaire grâce à un vocabulaire visuel varié : depuis les onglets des dossiers jusqu’au tableau de liège en passant par le papier quadrillé, tout est là pour rappeler l’atmosphère d’une classe d’école.

Extrait de Design graphique pour écrans
Ordinateurs, tablettes, smartphones
Adaptateur : Jason Tselentis
Collection: Hors collection, Dunod
2013 – 256 pages
Voir la fiche détaillée du livre