Un blog qui parle de webdesign, graphisme, méthodologie ...
ARTICLES TROUVES
Article(s) de décembre 2008 :
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.
L’équilibre est un principe fondamental de la composition et donc du langage graphique. Nous allons voir dans cet article différentes façons de mettre en place l’équilibre dans une composition.
Introduction
Pour faire passer un message, il est important d’interpeler et de retenir l’attention du spectateur. Pour y parvenir, le graphiste doit soigner sa composition. Comme nous l’avons déjà vu, la composition d’une création fait appel à plusieurs principes du langage visuel. La notion d’équilibre est l’un de ces principes.
Les éléments présents dans une composition (formes, lignes, textures, couleurs, densités …) ont chacun un poids visuel. Plus le poids visuel d’un élément est important, plus il aura un pouvoir d’attraction fort.
Notre œil étant naturellement à la recherche d’équilibre, proposer au spectateur une composition équilibrée et harmonieuse lui apportera une certaine satisfaction. On s’approche donc ici de la notion d’esthétisme qui reflète le plaisir qu’éprouve l’observateur à regarder une création.
Nous allons distinguer dans cet article deux types d’équilibre. L’équilibre statique basé sur la symétrie et l’équilibre dynamique qui se construit sur une asymétrie.
L’équilibre statique – symétrie
L’équilibre statique est obtenu en mettant en place au centre de votre cadre un axe ou un centre de symétrie autour duquel les éléments se ressemblent et se répartissent en miroir.
Une composition basée sur un équilibre statique satisfait notre œil car elle est harmonieuse, stable et rassurante. En effet, la symétrie fait partie intégrante de notre environnement. On la trouve par exemple dans l’architecture ou dans la nature et plus particulièrement dans la physiologie des êtres vivants. Une composition basée sur la symétrie renvoie une impression de stabilité, de sérénité, d’équilibre qui satisfait notre perception.
On pourra donc utiliser l’équilibre statique pour mettre en place un effet esthétique, une ambiance statique, une atmosphère rassurante et immuable, une beauté froide, une impression d’équilibre, de pérennité, de structure. L’équilibre statique a été abondamment utilisé en peinture classique.
Si l’équilibre statique est séduisant, rassure et favorise l’harmonie; il a en revanche l’inconvénient d’endormir l’intérêt du spectateur. En effet, les forces mises en jeu sont toutes égales, s’opposent entre elles et finalement s’annulent. Les compositions basées sur un équilibre statique, bien que superficiellement attractives, sont finalement trop simples et manquent de tension pour véritablement éveiller notre intérêt de façon significative.
L’équilibre statique peut donc poser un problème d’attention car lorsque vous êtes dans un environnement serein, vous êtes plus disposé à la sieste qu’a vous maintenir dans un état d’alerte.
C’est la raison pour laquelle, l’équilibre statique, n’est pas toujours recherché par les graphistes, surtout si leur objectif est d’attirer et de maintenir l’attention du spectateur. En revanche, si votre objectif est de rassurer, de calmer et d’établir une ambiance sereine, ce type d’équilibre est tout à fait adéquat.
Exemples d’utilisation de l’équilibre statique en webdesign
Site www.ramarek.com
Site www.baselinedc.com
L’équilibre dynamique – asymétrie
L’équilibre dynamique se construit sur une asymétrie. L’équilibre n’est plus obtenu par une répartition et une disposition identiques des éléments de part et d’autre d’un axe de symétrie mais par une compensation du poids des éléments dans la composition.
L’utilisation de l’équilibre dynamique permet au créatif de générer une tension dans son visuel et donc d’attirer davantage l’intérêt du spectateur tout en conservant une certaine harmonie.
Pour établir une composition équilibrée à partir d’éléments disparates, il va falloir jouer sur la disposition des objets dans le cadre et sélectionner des objets dont les caractéristiques vont permettre de compenser le poids visuel de chacun.
Équilibre des tailles
Plus un objet est de grande taille plus son poids visuel augmente. Pour établir un équilibre entre plusieurs objets de tailles différentes, il faudra les répartir de sorte que leur poids respectif se compensent.
Un objet volumineux sera équilibré si on lui oppose plusieurs objets moins volumineux mais dont la somme des poids compense le poids de l’objet de plus grande taille.
Équilibre spatial
On peut également rétablir l’équilibre entre des objets de tailles différentes dans un cadre donné par leur répartition spatiale par rapport au centre du cadre.
Plus un objet est situé près d’un bord du cadre, plus son poids visuel augmente. Un objet de petite taille peut compenser le poids d’un objet de grande taille si sa disposition spatiale est plus proche du bord que l’objet de grande taille.
Équilibre des couleurs
Plus un objet a une teinte saturée, plus son poids visuel augmente. Si le sujet principal de votre composition a une forte présence colorée, vous pouvez équilibrer cette présence en créant plusieurs rappels avec la couleur en question. Vous pouvez aussi équilibrer la composition en compensant le sujet principal par un autre objet dont la teinte est également saturée. Les artistes utilisent souvent les couleurs complémentaires pour équilibrer et contraster leurs compositions.
Équilibre des valeurs
Toute couleur correspond à une valeur de gris. Le principe d’équilibre des valeurs est donc étroitement lié à celui des couleurs.
Ici, j’ai simplement passé l’image en couleur ci-dessus en valeur de gris. On voit bien que chaque teinte selon sa saturation et sa luminosité possède une valeur qui contraste plus ou moins avec son environnement.
Équilibre des espaces négatifs et positifs
Chaque objet possède une forme qui occupe un espace dans la composition. Ces espaces sont appelés espaces positifs. L’espace présent entre les objets (vide) laisse également apparaitre des formes que l’on appelle espaces négatifs.
En déplaçant les formes on modifie et on déplace à la fois les espaces positifs et les espaces négatifs. Par conséquent espace positifs et négatifs sont interactifs et régissent ensemble l’équilibre de la composition.
Dans le premier cadre, les objets sont répartis de manière uniforme. Comme ils possèdent tous la même valeur, la composition semble encombrée et donne une impression d’étouffement.
Dans le second cadre, l’accumulation des objets dans un coin du cadre laisse l’autre partie vide et provoque un déséquilibre.
Dans le troisième cadre, les objets sont répartis dans tous le cadre mais leur différence de valeur et de texture modifie la perception des pleins et des vides. Le triangle dense du bas attire notre attention mais il est équilibré par l’espace qui l’entoure qui parait moins encombré qu’il n’est en réalité.
Équilibre hétérogène
Les différentes caractéristiques d’un objet (taille, couleurs, valeurs, position spatiale …) peuvent participer à l’équilibre d’une composition. Ici, un objet de grande taille est équilibré par un objet de taille inférieure mais dont la valeur est plus contrastée.
L’espace est encombré. L’occupation de l’espace nous donne une sensation de monotonie et d’étouffement.
Exemples d’utilisation de l’équilibre dynamique en webdesign
Sur la page d’accueil de mon blog, j’avais un déséquilibre à gauche avec la présence du logo, de la vignette et de l’encadré du dernier article publié et la liste des articles secondaires. A droite, le menu principal et le menu secondaire, le champ recherche et l’icône de flux rss formaient un ensemble beaucoup moins dense et semblaient flotter dans un vide que l’on ne retrouvait pas à gauche de la page. Pour rééquilibrer l’ensemble, j’ai placé l’illustration du poulpe en haut à droite.
Sur le site www.tarantinocafe.de, l’oeil est attiré à gauche par la photographie du portrait de Tarantino. Cette photographie noir et blanc est contrebalancée par un cadre vert à droite qui est le seul élément coloré de la page et qui contraste sur la page monochrome. Le teinte verte du cadre se retrouve par petites touches dans le logo et le contenu texte. Ce rappel contribue également à équilibrer la composition.
Le point focal du site clandrei.de et l’enfant se situant à droite du cadre. En effet, les êtres vivants et plus particulièrement les humains, attirent toujours notre attention en premier dans une composition. Le site se divise en trois bandes horizontales. Les deux bandes du haut sont d’une teinte peu saturée alors que celle du bas est saturée. L’enfant se situant dans les deux bandes peu saturées, il est équilibré par la bande du bas d’une teinte beaucoup plus vive. On note également la présence d’une grosse typographie qui rééquilibre la présence de l’enfant sur le plan horizontal. Enfin, un rappel de la teinte saturée de la bande du bas est présent dans le T-shirt de l’enfant.
Dernier exemple avec le site www.dr84.com. A première vue, ce site pourrait sembler déséquilibré par la place imposante de la photographie. Mais la bande noire de gauche, grâce à un fort contraste avec le fond beige, rééquilibre horizontalement le poids de la photographie. La présence du menu en haut et le texte de présentation en police large participe aussi au rééquilibrage de la page mais cette fois ci verticalement.
Conclusion
L’équilibre est une notion importante et puissante qu’il faut prendre en compte dans l’élaboration de nos compositions. Utilisé à bon escient, ce principe peut être d’une efficacité redoutable pour exprimer certaines impressions.
Un équilibre statique est adapté pour certains effets esthétiques (réflexions, ressemblance …) ou pour instaurer une atmosphère rassurante et tranquille.
Pour donner un peu plus de « peps » à une composition, on choisira un équilibre dynamique.
Mais la recherche de l’équilibre n’est pas une fin en soi. Tout dépend de ce que vous voulez exprimer. La mise en place d’un déséquilibre peut aussi être recherchée par le graphiste pour exprimer une instabilité, une gêne, un inconfort… Une fois de plus, vos choix dépendront du message que vous voudrez véhiculer dans vos créations.
Sources:
- Ouvrage: L’oeil du photographe et l’art de la composition – Michael Freeman – Pearson Edition
- Ouvrage: Composition – David Präkel – Editions La Compagnie du Livre
- Révision et approfondissement des notions basiques de composition – Arts appliqués, Academie de la réunion