L’unité consiste à maintenir une certaine cohérence graphique sur l’ensemble d’un site ou d’une application. Nous allons voir dans cet article comment maintenir une unité dans un design web.

Introduction

L’importance de l’unité dans un design web est parfois sous-estimée, c’est pourtant un principe simple à mettre en place. Même si votre site web comporte de nombreuses rubriques qui doivent se distinguer les unes des autres, toutes ces rubriques, sous-rubriques, pages, appartiennent à un même ensemble. Pour que votre internaute sache qu’il se trouve toujours dans cet ensemble, il est important de lui fournir des indices visuels qui baliseront sa navigation. Cette cohérence visuelle, non seulement rassurera votre utilisateur, mais participera aussi à l’harmonie de votre design.

Mettre en place de l’unité dans votre design

Mettre en place de l’unité dans votre design consiste à répéter dans l’ensemble de votre site certaines caractéristiques. Cela donnera un style, une personnalité à vos créations tout en unifiant l’ensemble de vos pages. Cette cohérence participe à l’esthétisme du site, au plaisir d’utilisation de l’interface et permet de donner la sensation à l’utilisateur de naviguer en terrain connu.

Cette unité apparait souvent dans les détails. Pour la mettre en place, vous pouvez jouer sur un ou plusieurs éléments de la composition :

La typographie

Utilisez peu de typographies différentes dans vos créations. Une, deux voire trois sont grandement suffisantes dans la plupart des cas. Si vous choisissez d’utiliser plusieurs typographies, il est préférable que l’une d’entre elles soit la typographie dominante que l’on retrouvera sur toutes les pages du site. Pour apporter de la variation, vous pourrez jouer sur la taille de la police, sur son style, sa couleur ou sa casse.

Si on observe la page d’accueil du blog www.alistapart.com on remarque que le nombre de polices utilisé est faible. Probablement deux, une police bâton pour le texte principal et une police à empattement pour les titres, sous-titres, le menu et le logo. L’unité s’observe donc dans la constance de l’utilisation de deux polices pour des éléments précis avec toujours la même règle d’usage (ex: les titres et sous-titres sont toujours affichés avec la même police à empattement). Malgré un nombre réduit de polices, le webdesigner a su varier les effets typographiques en jouant sur la casse, la justification, la taille, la couleur, le style du texte.

Les images

Grâce aux images, vous pouvez facilement mettre en place une unité de style. Vous pouvez par exemple choisir de n’utiliser que des photographies noir et blanc. Vous pouvez également choisir judicieusement vos images de sorte que certaines lignes ou formes se répètent ou se retrouvent dans l’image d’arrière plan de vos pages. Vous pouvez aussi utiliser des icônes sur toutes vos pages qui seront dessinées dans le même style graphique.

On retrouve dans l’image de la page « About us » du site www.savethetrees.co.uk (un oiseau posé sur une branche) des lignes (diagonales) et des couleurs (le vert) qui rappellent celles qui sont dessinées dans l’image d’arrière-plan.

Les couleurs

Maintenir une palette graphique sur l’ensemble de son design participe beaucoup au style que vous allez instaurer et à la mise en place d’une unité graphique. Rien ne vous empêche par exemple de choisir plusieurs couleurs pour identifier et distinguer différentes rubriques, mais cette typologie chromatique doit s’insérer dans une cohérence colorimétrique plus large pour unifier l’ensemble. L’unité chromatique peut également se retrouver dans la typographie : par exemple en choisissant une seule couleur pour les liens hypertextes, une seule couleur pour les titres de niveau H2, une seule couleur pour le contenu texte…


Nous avons ici, la copie d’écran de deux pages différentes du site www.multimediahaam.com. L’unité des couleurs est respectée sur l’ensemble du site: le texte principal est blanc, les titres vert pomme, le fond texte en noir …

Les formes

Dans un design web, vous retrouvez des formes dans les photographies, le logo, les boutons, les cadres de contenu … Si vous décidez de dessiner des cadres de contenu d’une certaine manière, garder cette cohérence sur toutes vos pages afin de maintenir une unité sur l’ensemble de votre site.

Le site www.exprimo.it a choisi de baser son graphisme sur des formes arrondies en goutte d’eau. Pour rester cohérent avec ce choix, les formes arrondies se retrouvent sur plusieurs éléments comme le logo, le cadre de contenu principal, les cadres de contenus texte à l’intérieur des pages, les vignettes.

Textures/motifs

Comme les images, les textures ou les motifs peuvent être un moyen de maintenir l’unité sur les différentes pages. L’exemple le plus simple est de conserver un unique arrière-plan texturé sur toutes les pages du site.


Le site www.incandescence.com utilise abondamment des motifs géométriques dans le design de ses pages. Bien que le motif ne soit pas exactement le même sur toutes les pages, son utilisation est constante et constitue le principal effet visuel du site.

La mise en page

La façon de disposer certains éléments ou de construire votre mise en page peut être utilisée de manière redondante pour créer de l’unité. Par exemple, garder certains éléments toujours à la même place quelle que soit la page (logo, menu, pied de page, fil d’Ariane …). Maintenir certaines marges constantes de façon à ce que des éléments clés apparaissent toujours de la même manière quelque soit la page. Pour vous aider dans cette démarche, l’utilisation d’une grille de mise en page est fortement conseillée.

La mise en page et la disposition diagonale des pages du site www.angryretail.com est audacieuse mais donne un style bien particulier au site. Ce choix de la mise en page reste constant sur l’ensemble du site.

Conclusion

L’unité est un principe simple à mettre en place. Il permet à la fois de donner de la cohérence au design, ce qui rassure l’utilisateur, et de favoriser l’harmonie visuelle de la composition donc l’esthétisme.

Pour mettre en place de l’unité dans vos design, vous pouvez jouer sur de nombreux éléments. Mais il ne faut pas tomber dans un excès d’unité au risque de produire un visuel trop monotone. A vous de sentir le bon dosage entre variété et unité pour concevoir un design cohérent mais qui éveille suffisamment l’intérêt de l’internaute.