Introduction

Le contraste correspond à une opposition marquée, une différence de propriété (taille, orientation, forme, valeur, couleur …) entre deux ou plusieurs éléments. Le contraste est très utile pour le designer car il permet d’attirer l’attention du spectateur vers un sujet particulier et donc d’orienter son regard. En peinture, le sujet principal est souvent beaucoup plus contrasté que les éléments secondaires de la composition.

Dans le domaine de la couleur, Johannes Itten a distingué sept contrastes de couleurs. Les connaitre permet au peintre ou au designer d’accentuer, d’atténuer ou de supprimer ces contrastes afin d’apporter à ses créations plus de force expressive.

Pour mieux comprendre cet article, il est conseillé de maitriser la classification des couleurs sur le cercle chromatique. Si vous avez besoin d’une piqûre de rappel, je vous invite à lire l’article « L’harmonie des couleurs »

Les sept contrastes d’Itten

Contraste de la couleur en soi

Ce type de contraste est le plus significatif lorsqu’il fait intervenir des couleurs qui n’ont rien à voir entre elles et qui sont pures, lumineuses, dans leur intensité la plus forte. Le plus fort contraste de couleur en soi que l’on puisse obtenir est donc celui des trois couleurs primaires Jaune / Bleu Cyan / Rouge Magenta (synthèse soustractive), Vert / Bleu / Rouge (synthèse additive).

On obtient le même type de contraste mais avec une intensité moindre lorsqu’on utilise une juxtaposition des trois couleurs secondaires. Ce type de contraste sera encore plus faible avec trois couleurs tertiaires (que l’on obtient avec les 3 pointes d’un triangle équilatéral inscrit dans la roue chromatique). En effet ces couleurs ont des points communs. Par exemple l’orange et le vert contiennent du jaune, l’orange et le violet contiennent du rouge, le vert et le violet contiennent du bleu. Ceci a tendance à les rapprocher et donc à diminuer le contraste.

Le résultat sera coloré, franc, intense et net avec les couleurs primaires. Mais la force d’expression diminuera au fur et à mesure que les couleurs employées s’éloigneront des ces trois couleurs primaires.

On notera que lorsque les différentes couleurs sont séparées par des contours noirs ou blancs, cela accentue leurs caractères particuliers.

Exemple : Henri Matisse – Stanza Rossa

Contraste clair obscur

Ce contraste s’obtient en jouant sur les différences de valeurs des couleurs.

Chaque couleur possède une luminosité entre le sombre et le clair. Le noir est la valeur sombre absolue alors que le blanc possède la plus grande luminosité. Le plus fort contraste clair obscur est donc obtenu en juxtaposant du noir à coté du blanc.

Entre le noir et le blanc s’étend tout une gamme de tons colorés mais aussi de valeurs de gris.

Le gris moyen est la couleur la plus neutre. Il ne reçoit de la vie que par la proximité des autres couleurs. Sa perception est très changeante selon les couleurs qu’il côtoie :
- Il peut se teinter de la complémentaire de la couleur environnante.
- Il affaiblit et adoucit les couleurs qui l’approchent.
- Il peut lier par sa neutralité un ensemble de fortes oppositions de couleurs.

Une couleur à laquelle on rajoute du noir ou du blanc perd de son intensité.

Exemple : Rembrandt – La Ronde de Nuit

Contraste chaud-froid

Les couleurs nous suggèrent le chaud ou le froid selon les symboles auxquels elles sont rattachées dans notre expérience. Les couleurs chaudes sont les rouges, les oranges, les jaunes (braise, flamme, soleil …) et les couleurs froides sont les bleus, violets, turquoises et les verts (eau, glace, ciel, végétaux …).

On peut définir le caractère des couleurs froides et chaudes selon d’autres critères :
- Chaud / froid
- Ombragé / ensoleillé
- Apaisant / excitant
- Fin / épais
- Aérien / terreux
- Lointain / proche
- Léger / lourd
- Humide / sec

L’aspect chaud ou froid d’une couleur est versatile et va être influencé par les couleurs environnantes.

Par exemple un gris neutre paraîtra plus chaud s’il est entouré d’une couleur chaude comme le rouge, inversement il paraîtra plus froid entouré d’une couleur froide comme le bleu.

Une couleur quelconque paraîtra plus chaude entourée de couleurs plus froides qu’elle (même si cette couleur est considérée comme une couleur froide) et inversement une couleur quelconque paraitra plus froide entourée de couleurs plus chaudes qu’elle (même si cette couleur est considérée comme une couleur chaude).

Exemple : Pierre Auguste Renoir – Le Bal du Moulin de la Galette

Contraste de complémentaires

Un contraste de complémentaires est obtenu, comme son nom l’indique, en juxtaposant une couleur à sa complémentaire (couleurs opposées sur le cercle chromatique).

Lorsque deux couleurs complémentaires sont mises côte à côte, cela avive leur intensité alors que leur mélange les désature pour tendre vers le gris. Un mélange en quantité égale de deux couleurs complémentaires donne un gris pur. Cependant le mélange en quantités différentes permet d’obtenir des tons de couleur d’une grande subtilité et toujours harmonieux.

Chaque couple de couleurs complémentaires a ses particularités :
- Jaune-violet : C’est aussi le contraste clair-obscur maximum.
- Rouge-orangé – Bleu-vert : C’est aussi le contraste chaud-froid maximum
- Rouge-vert : Complémentaires d’égale clarté et de rayonnement égaux.

On notera également que notre oeil, lorsqu’il regarde une couleur, a tendance à rechercher sa complémentaire et, si elle n’est pas donnée, à la produire lui-même.

Exemple : Jan Van Eyck – Les époux Arnolfini

Contraste de quantité

Ce contraste est basé sur des rapports de grandeur beaucoup/peu (quantité) ou grand/petit (surface) qu’occupent deux ou plusieurs couleurs dans une composition.

Matisse disait : « Un mètre carré de bleu est plus bleu qu’un centimètre carré de bleu. »

Pour mettre en place un équilibre harmonieux des couleurs basé sur la quantité, il faut évaluer le rapport de couleurs à utiliser c’est à dire la quantité de chacune des couleurs les unes par rapport aux autres.

Cela peut être évalué intuitivement, cependant Goethe a mis en place une méthode plus objective basée sur les longueurs d’ondes des rayons lumineux c’est à dire les valeurs de luminosité des couleurs. Il a ainsi attribué les valeurs numériques suivantes aux différentes couleurs.

Jaune/orange/rouge/violet/bleu/vert correspondent à 9 / 8 / 6 / 3 / 4 / 6

Vous noterez la similitude avec l’échelle des valeurs vue ci-dessus. Plus une couleur est lumineuse, plus le chiffre qui lui est attribué est grand.

Rapport des complémentaires pour équilibrer harmonieusement une composition :

- Jaune / violet > 9:3= 3:1= 3/4 – 1/4 (le jaune est trois fois plus lumineux que le violet).
Il faut donc mettre 3 fois plus de violet en surface que de jaune pour équilibrer la composition harmonieusement.

- Orange / bleu > 8:4= 2:1= 2/3 – 1/3 (le orange est deux fois plus lumineux que le bleu)
Il faut donc mettre 2 fois plus de bleu en surface que de orange pour équilibrer la composition harmonieusement.

- Rouge / vert > 6:6= 1:1= 1/2 – 1/2 (le rouge est aussi lumineux que le vert)
Il faut donc mettre autant de rouge en surface que de vert pour équilibrer la composition harmonieusement (regardez le tableau de Jan Van Eyck – Les époux Arnolfini).

L’emploi de rapports équilibrés élimine le contraste de quantité. Par contre, lorsqu’une couleur domine, on réalise un effet expressif.

Exemple : Pieter Bruege l’Ancien – La Chute d’Icare

Contraste de qualité

Le contraste de qualité est obtenu en juxtaposant des couleurs vives, intenses, saturées et des couleurs ternes, désaturées.

Il y a différentes manières de ternir une couleur vive :
- En l’assombrissant (ajout de noir = rabattre une couleur) ou en l’éclaircissant (ajout de blanc = rabattre une couleur)
- En ajoutant de sa couleur complémentaire (désaturation = rompre une couleur)
- En ajoutant du gris

Exemple : Paul Klee – L’enchantement des poissons

Contraste simultané

C’est peut être le contraste le moins évident à appréhender. Ce contraste se définit comme le phénomène qui fait que notre œil pour une couleur donnée exige en même temps (simultanément) sa complémentaire et qu’il la crée lui-même si elle n’est pas donnée. La couleur complémentaire engendrée n’existe pas réellement, mais est produite par un phénomène physiologique.

Donc notre oeil, lorsqu’il regarde une couleur, génère automatiquement sa couleur complémentaire et projette cette image rémanente sur les objets environnants. On comprend pourquoi la juxtaposition de deux couleurs complémentaires fait ressortir chacune d’elle de façon si particulière.

- Le rouge crée le vert
- Le vert crée le rouge
- L’orange crée le bleu
- Le bleu crée l’orange
- Le jaune crée le pourpre
- Le pourpre crée le jaune

C’est à cause de ce phénomène que l’on dit que les couleurs s’influencent entre elles. Chaque couleur emprunte quelque chose à la couleur opposée qui lui correspond. Ce contraste est d’autant plus fort que la couleur est lumineuse.

L’effet de contraste simultané se produit :
- entre deux couleurs pures qui ne sont pas exactement complémentaires
- entre une couleur et un gris

Par exemple, la juxtaposition du bleu et du rouge produit dans notre oeil du vert (complémentaire du rouge) qui vient influencer notre perception du bleu.
Une surface grise placée sur une grande surface verte de même valeur apparaîtra teintée de rouge (complémentaire du vert).

Lorsqu’une couleur cherche à repousser l’autre du côté de sa complémentaire, les couleurs paraissent dans un état d’excitation dynamique. Leur stabilité disparaît et elles vibrent.

Comment accentuer ou éliminer le contraste simultané :

Entre une couleur et un gris :
- On peut le renforcer en teintant le gris avec la complémentaire de la couleur à laquelle il est associé .
- On l’atténue en teintant le gris avec la couleur associée.

Entre deux couleurs :
On peut l’accentuer en utilisant une couleur donnée, juxtaposée à l’une des voisines de sa complémentaire sur le cercle chromatique.
(Rouge+bleu-vert / Rouge+jaune-vert / Vert+rouge-orangé / Vert+rouge-violet)

Exemple : Vincent Van Gogh – La terrasse de café

Conclusion

Le contraste permet de dynamiser nos compositions et guide notre regard vers l’essentiel. Tout élément, dont les caractéristiques dénotent de celles des autres éléments, contraste. Il peut s’agir de la position, de l’orientation, du sens, de la taille, de la couleur …

Rien qu’en utilisant la couleur, Johannes Itten a défini sept façons de créer du contraste. Nous possédons donc, avec les couleurs, un outil puissant pour améliorer l’expressivité de nos créations.

D’ailleurs, les plus grands peintres utilisent ces techniques depuis des siècles, il n’y a donc pas de raisons pour que les graphistes web n’en fassent pas autant.

Sources :

• - Site Crayon.be : Les sept contrastes d’Itten
• - Site pedagogie2 : Les contrastes selon Johannes Itten
• - Site peintre analyse : La couleur

Introduction

Avant de parler de la simplicité comme mode de communication dans le design et en guise d’introduction, je souhaiterais rappeler quelques définitions issues du dictionnaire (Larousse 2003)

Simplicité

« Qui suffit à soi seul, qui n’a besoin de rien d’autre pour produire l’effet attendu. Qui est constitué d’un petit nombre d’éléments qui s’organisent de manière claire. »

La simplicité s’oppose à la complexité.

Simpliste

« D’une simplicité exagérée, qui ne considère qu’un aspect des choses. »

Quelque chose de simpliste est incomplet, il y a un manque, un oublie volontaire ou involontaire.

Minimalisme

« Recherche de solutions requérant le minimum de moyens. »

Le minimalisme est aussi un mouvement artistique où les formes sont simplifiés à l’extrême et les éléments orchestrés dans la simplicité la plus radicale.

Complexité

« Qui se compose d’éléments différents, combinés d’une manière qui n’est pas immédiatement saisissable. »

Ordre

« Ensemble d’éléments organisés, rangés, classés, disposés de manière logique. »

A l’ordre s’oppose le chaos.

Chaos

« Ensemble d’éléments désordonnés, confus. »

A la lumière des ces définitions, nous voyons qu’il ne faux pas confondre le terme « simple » qui exprime le dépouillement de tout superflu avec le terme « simpliste » qui exprime le fait de ne donner qu’une vision incomplète des choses. A la simplicité s’oppose la complexité mais qui n’a rien à voir avec le chaos. La complexité exprime une notion de quantité alors que le chaos exprime le désordre et la confusion.

Les questions auxquelles je vais essayer de répondre dans cet article sont : « Comment simplifier et pourquoi simplifier ? »

Comment simplifier

La simplicité n’est pas une formule magique qui répond à tous les problèmes de design. Un site web complexe peu sembler difficile à designer, la tentation de le simplifier pour résoudre nos problèmes de design est une fausse solution. Si un certain nombre de contenu (une certaine complexité) est nécessaire, la réponse graphique est davantage dans l’organisation de ce contenu plutôt que dans l’élimination d’éléments. Vous trouverez sur le site de Andy Rutledge , un article intitulé « Complex Order, Simple Chaos » qui décrit bien cette réflexion.

Pour organiser un contenu, je vous renvoie aux articles de ce blog consacrés aux « Grilles », à la « Gestalt », à la « Hiérarchisation de l’information » …

La simplicité est souvent préconisée par les ergonomes, les architectes d’information, certains designer. Cependant, elle ne s’applique pas systématiquement à tous les cas de figure.

Parfois, la complexité ou le chaos sont des effets recherchés. Par exemple pour exprimer certains affects, pour laisser le spectateur se perdre dans un arrangement ou il va explorer et examiner une multitude de sujets ou pour faire vivre une expérience particulière à l’utilisateur dans un contexte bien précis (publicité, expérimentation, innovation …).

Simplifier un design consiste essentiellement à réduire le nombre d’éléments mais aussi à organiser les éléments et utiliser des éléments connus.

Simplifier en réduisant

Comme nous l’avons vue en introduction, la simplification consiste à éliminer tout ce qui semble ne pas être absolument nécessaire. A première vue, cela peut sembler facile à faire mais il n’en ait rien, la simplicité n’est pas simple !

En effet, éliminer des éléments, que se soit des fonctionnalités ou des objets graphiques, se fait sur la base d’une décision subjective. Cette décision comporte un risque, celui de tomber dans une conception trop simpliste, c’est à dire où il manque finalement des éléments. On se rend donc compte que entre simplicité et simplisme, existe une frontière ténue difficile à percevoir mais facile à franchir.

Pour nous aider, Jacob Nielsen, ergonome Américain, préconise avant d’ajouter un élément conceptuel sur un site, de se poser deux questions :

1- « Cet élément simplifie t’il la tâche de l’utilisateur ? »
2- « Cet élément apporte t’il une valeur ajoutée ? »

… si la réponse est « non » éliminez le.

Donc si vous êtes dans une démarche de simplification par la réduction, avant d’ajouter un élément graphique dans votre design, demandez-vous si cet élément rempli un objectif ou participe à communiquer un message. Penser en terme d’objectifs est un bon moyen d’éviter de tomber dans le piège du simplisme.

Simplifier en organisant

Organiser les éléments d’une composition graphique ou d’une mise en page favorise la simplification. Souvenez-vous de notre définition de la simplicité : « Qui est constitué d’un petit nombre d’éléments qui s’organisent de manière claire. » , on y parle bien d’organisation.

Ce qui est organisé devient plus simple à percevoir et plus simple à comprendre parce que notre cerveau a besoin de cet ordre pour analyser plus rapidement son environnement.

Simplifier par la connaissance

Ce qui est connu devient plus simple. En effet, notre cerveau analyse sans cesse ce qu’il perçoit. Toute nouveauté lui demande un effort cognitif intense.

Lorsqu’une situation a déjà été rencontrée, analysée, pratiquée et enregistrée, le cerveau fournit beaucoup moins d’efforts que face à une situation nouvelle. C’est pourquoi les choses connus nous paraissent plus simples. Il est beaucoup plus simple pour un expert en physique quantique de vous expliquer la théorie du Big-Bang que pour un débutant.

Lorsque vous concevez le design d’une interface, vous rendrez la tâche de l’utilisateur beaucoup plus simple si vous faites appel à des références que celui-ci connait. Par exemple si vous utilisez une icône représentant un caddie pour symboliser le panier d’un site e-commerce, l’utilisateur le reconnaitra comme tel parce qu’il connait le sens associé à cette icône.

Pourquoi simplifier

J’ai cherché les raisons qui pourraient motiver un graphiste à se lancer dans une démarche de simplification de ses design. En voici quelques unes, mais il se peut que j’en ai oublié certaines. Si vous en trouvez d’autres, n’hésitez pas à en discuter dans les commentaires de cet article.

Parce que nous avons naturellement besoin de simplicité

La Gestalt (psychologie de la forme) a observé à travers la loi de Prägnanz que notre cerveau recherche toujours la simplicité. Lorsque des choses se présentent à nous de façon ambigüe de sorte qu’elles peuvent être interprétées de différentes manières, notre cerveau choisira toujours l’interprétation la plus simple.

L’exemple le plus évocateur est notre tendance à voir des visages humains partout. Prenez un smileys ce n’est qu’une succession de caractères spéciaux qui n’a aucun sens et ne fait référence à aucune règle (grammaire ou autre…). Ce groupement de caractères peut donc sembler ambigüe. Notre cerveau y cherche une logique, une interprétation, un sens. Il va regarder dans sa « base de données » (la mémoire) pour faire des comparaisons avec des informations connues. Et naturellement, il va identifier un visage et ne retenir que cela à notre attention plutôt que de se dire : « il s’agit d’un point virgule suivie d’un tiret lui même suivi d’une parenthèse fermante ». Pourquoi ? parce que c’est plus simple pour notre cerveau de voir le monde à notre image (chose que nous connaissons bien) que de le voir tel qu’il est dans sa réalité froide et dénuée de sens.

Cette aptitude naturelle à la simplification pourrait aussi s’expliquer par notre instinct de conservation. Dans un environnement hostile et nouveau, notre cerveau réptilien (qui gère notre instinct de survie) à besoin d’identifier le plus rapidement possible ce qui l’entoure pour y distinguer un éventuel danger et prendre la décision de fuir sans perdre de temps. En généralisant un ensemble complexe, nous gagnons du temps.

Imaginez le temps qu’il nous faudrait à identifier une pelouse si nous devions pour cela voir chaque brun d’herbe individuellement. Si un prédateur se trouve dans les parages, il n’attendra pas que vous ayez terminé d’observer tous ces bruns d’herbes.

Donc, lorsque vous simplifiez un design, vous soulagez l’effort cognitif de l’observateur, vous facilitez son travaille de réflexion. Car naturellement, le cerveau humain aime qu’on lui mâche le travaille. Attention cependant, tomber dans la facilité n’est pas toujours heureux car vous risquez de basculer dans l’ennui et le désintérêt.

Mettre en valeur

L’architecte Allemand Ludwig Mies van der Rohe (1886 – 1969) s’est rendu célèbre par ses réalisations mais également par ses formules choques sur le design. Il est l’auteur du fameux « Less is more », « Moins c’est plus ».

Cette formule signifie que moins vous mettez d’éléments, plus ceux qui restent sont mis en valeur. En effet, les éléments d’une composition rentrent en compétitions les uns par rapport aux autres et cela génère ce qu’on appel du « bruit visuel ». Moins il y a de compétiteurs en liste, plus ceux qui restent ont de chance de gagner… l’attention du spectateur.

Cela est également bien exprimé par le dessinateur de BD Scott McCloud, qui dans son livre « L’art de l’invisible » dit en parlant du dessin humoristique :  » Quand [...] nous faisons tendre une image vers l’abstraction, nous éliminons des détails mais par contre nous en mettons d’autres en valeurs. En épurant une image pour n’en garder que sa signification essentielle, le dessinateur humoristique amplifie cette signification … »

Donc simplifier un design (par élimination) peut servir à mettre l’accent sur certains éléments considérés comme essentiels. Si on ne voit qu’eux par ce que les autres éléments sont tout simplement absents, notre attention n’a d’autre choix que de se focaliser sur ceux qui existent. Il s’agit donc ici de renforcer la portée d’un visuel en le dépouillant de détails accessoires.

L’attention de l’observateur peut également être obtenu en hiérarchisant le contenu par des procédés graphiques. Mais vous n’obtiendrez jamais l’efficacité qu’apporte la simplification. Si vous considérez que certains éléments sont superflus, éliminez les (simplification) dans le cas contraire, organisez-les (hiérarchisation, grille …).

Faire gagner du temps

Dans un monde où tout va plus vite, où de plus en plus de choses s’offrent à nous, où le temps disponible est précieux; gagner du temps devient appréciable.

Internet est un lieux d’abondance ou l’internaute doit trier et faire des choix parmi une multitude de sites web pour trouver ce qu’il cherche. Comme il manque de temps, l’internaute privilégie les sites claires qui lui permettent de trouver plus facilement l’objet de ses recherches.

Plus un site sera simple, plus il sera claire, plus son confort augmentera et plus rapidement l’internaute trouvera ce qu’il cherche.

Engager le spectateur

Dans l’art Zen, les Japonais pensent que si tout est exprimé, l’intérêt de l’observateur disparaît.

En décrivant les choses de manière la plus dépouillée possible, vous réduisez leur description à leur stricte minimum. Cela permet d’éveiller l’intérêt et l’imagination de l’observateur en lui laissant une marge d’interprétation.

En effet, en ne révélant pas tout, en permettant à l’observateur de se projeter dans votre univers, en lui laissant la liberté d’imaginer une histoire, vous engagez le spectateur dans votre design.

La simplicité en se concentrant sur l’essentiel fourni cette liberté d’interprétation à l’observateur.

Une forme d’esthétisme

La simplicité est une forme d’esthétisme très prisée par certaines cultures. L’art Zen Japonnais en ai le meilleur représentant. A l’opposé, d’autres cultures (Occidentales, Arabes …) ont, à certaines époques, plutôt privilégié l’abondance regorgeant de beautés (jardins à la Française, ornementations baroques, ornementations des mosquées …) saturant d’informations visuelles l’observateur. Cette abondance de beauté était certes un témoignage de richesse et de beauté mais trop de sollicitation ne nous fait il pas passer à côté de l’essentiel ?

Tout cela n’est qu’une histoire de gouts, d’objectifs et de mentalité, là n’est pas la question. Ce qui est intéressant, c’est de comprendre ce que la simplicité peut apporter à l’esthétisme.

La simplicité permet d’apporter le maximum d’impact avec un minimum de choses. C’est une manière d’atteindre une forme de grâce, d’élégance c’est à dire de beauté par la retenue. La simplicité est esthétique parce qu’elle apporte de la subtilité, du raffinement, de l’élégance, de la sérénité et de la suggestivité aux choses auxquelles elle s’applique.

Simplicité et webdesign

Je vais vous présenter quelques exemples de sites web ayant appliqués la simplicité dans leur design.

Voici le site de Almeter Design, une agence de design qui propose des identités visuelles pour les marques. J’ai rarement vue un design web où la simplicité a été poussée à ce point. Tout est réduit à sa plus simple expression, pas de textures, d’aplats, d’ornementations ou de couleurs ostentatoires. Même le logo de l’agence est d’une extrême simplicité.

Page d’accueil :

Page « Contact » :

Page « About » :

Page « Work » :

Prenons maintenant un site de commerce qui à priori est plus complexe qu’un site corporate. Le site Crate & Barrel est un bon exemple. Bien qu’un site e-commerce nécessite de nombreuses fonctionnalités, un catalogue, un système de caddie … vous pouvez, en organisant le design et en retirant les gadgets, aboutir à des pages simples et claires. En voici la preuve :

Page d’accueil :

Une des pages du catalogue :

La encore, rien d’ostentatoire. Les fonctionnalités sont réduites au strict minimum. Pas d’images ou d’effets graphiques gratuits, de l’espace, de l’organisation et de l’alignement.

Dernière exemple avec le site 3Rings. Voici un site au design un peu plus coloré et élaboré. On retrouve bien dans ce design une esthétique épurée, élégante et raffinée. De simples aplats de couleurs, un contenu bien hiérarchisé et aligné, des espaces qui laisse respirer la composition.

Conclusion

Nous avons vue dans cet article que la simplification consiste à réduire (voir masquer), organiser et utiliser des références connues.

La simplification améliore la clarté d’un message ou d’une mise en page et facilite l’effort cognitif de l’observateur tout en l’impliquant dans votre design. La simplicité a donc beaucoup d’avantages et répond a un besoin naturel chez l’observateur.

Simplifier n’est pas un acte aisé, il requiert de la pratique, de la réflexion et de la vigilance. Ce n’est pas une démarche a appliquer systématiquement, surtout si votre objectif n’est pas de clarifié un ensemble d’éléments et d’informations ou d’inciter l’observateur à imaginer ce qui n’est pas montré.

Réfléchissez toujours à vos objectifs et vous saurez alors si vous devez utiliser la simplification ou pas.

Sources :

• - Ouvrage « Site web : priorité à la simplicité » de Jakob Nielsen et Hoa Loranger – CampusPress
• - Ouvrage « Les mouvements dans le peinture » P. Fride R. -Carrassat et I. Marcadé – Larousse
• - Ouvrage « Présentation zen de Garr Reynolds – Pearson
• - Ouvrage « Loeil du photographe et l’art de la composition de Michael Freeman – Pearson

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.

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éunionL’é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

Nous connaissons tous le sens du mot « hiérarchie » puisqu’il fait référence à une notion qui s’exerce dans de nombreux domaines de notre vie sociale et professionnelle. Mais savez-vous de quoi il s’agit lorsque l’on parle de « hiérarchie » en design web ?

Le mot « hiérarchie » désigne le fait d’instaurer, par différents procédés graphiques, un classement par ordre d’importance des éléments d’une page web. C’est un outil précieux du langage graphique qui permet de classer et d’organiser le contenu. La mise en place d’une hiérarchie visuelle met en évidence des points d’ancrage sur lesquels l’utilisateur va pouvoir s’appuyer pour scanner rapidement la page et comprendre de quoi il s’agit. Cela va contribuer à contrôler la transmission et l’impact du message. Sans hiérarchie visuelle, le contenu devient fade et difficile à parcourir.

Hiérarchisation du contenu web

Sur une page web on peut avoir besoin de placer beaucoup de choses: un logo, un menu de navigation, des menus secondaires, des informations de contact, des liens hypertextes, des titres, des sous-titres, des paragraphes de textes, des fonctionnalités diverses (moteur de recherche, pannier e-commerce, formulaires …). Imaginez comment tous ces éléments peuvent avoir du sens pour l’utilisateur si tout est traité de la même manière visuelle (même police, même taille, même couleur …). Comment retrouver une information dans une pile d’informations uniformes ?

Grâce à la hiérarchisation de l’information, vous allez pouvoir mettre en place une distinction entre les différents éléments de la page ou au contraire exprimer une similarité entre plusieurs d’entre eux. Vous allez également pouvoir transmettre la relative importance des éléments les uns par rapport aux autres. En opérant ainsi vous allez commencer à donner du sens à votre contenu et faciliter la lecture de la page.

Illustrons nos propos avec un exercice simple. Recherchez dans ces deux présentations, dont le contenu est strictement identique, l’information suivante: quelles sont les trois couleurs primaires du système additif ?

Dans laquelle de ces deux présentations avez vous trouvé l’information le plus facilement et le plus rapidement ?

Contraste et hiérarchisation

Tout est une histoire de contraste. L’école Allemande de design Bauhaus du début du siècle (1919) préconisait déjà l’utilisation du contraste pour capturer et retenir l’attention de l’observateur.

Pour établir une hiérarchie visuelle dans une composition, il faut jouer avec des techniques graphiques qui vous permettent de mettre en place du contraste entre les éléments. La mise en place de contraste va déterminer l’ordre dans lequel les utilisateurs vont percevoir et donc appréhender l’information visuelle.

Comme nous l’avons vue dans les exemples précédents, si tous les éléments sont similaires, il n’y a pas de progression logique du regard à travers le contenu et vous parcourez ce contenu de façon confuse. Si par contre des éléments plus larges que les autres se distinguent de la masse, votre attention est tout de suite attiré par ces éléments.

Pour qu’un élément soit remarquable, il faut qu’il se distingue des autres. Cela ne peut se faire que si une partie des autres éléments restent relativement neutres. En effet, si le graphiste cherche à rendre remarquable tous les éléments, le résultat donnera l’effet inverse.

Voici, à travers des exemples, différentes manières de créer du contraste pour mettre en place une hiérarchie visuelle dans votre composition:

La taille

Les tailles du logo et de l’encadré de gauche sont telles qu’elles attirent immédiatement notre attention. Ces deux éléments prennent une position dominante dans la hiérarchisation de la mise en page.

La texture

Pour distinguer le menu actif, le graphiste a utilisé dans cet exemple un contraste de texture.

La forme

La forme des rectangles qui contient les items du menu principal est la même pour tous les items sauf pour celui de la rubrique active. Ce contraste de forme permet à l’internaute de savoir immédiatement dans quel rubrique il se trouve.

La couleur

Ce menu latéral est traité avec trois couleurs différentes. Un seul item est rouge. Cet item rouge est le plus important hiérarchiquement car il indique le thème de la page courante.

La position

En décalant le paragraphe vers la droite, le graphiste créer un contraste de position qui le détache du reste du texte.

L’orientation

L’ensemble des textes de cette page sont horizontaux sauf le libellé « SERVICES » qui est orienté verticalement. La lecture verticale est généralement déconseillée par les recommandations ergonomiques mais ici, la taille du texte est suffisamment grande pour offrir une lisibilité du mot acceptable. Cette particularité dans la page retient notre attention sur le mot « Services ».

La valeur

Même avec une palette de couleur monochrome, vous pouvez créer de l’emphase en jouant sur les valeurs de gris. Le mot « LABEL » ressort ici parfaitement du menu.

La saturation

Cette page est une mosaïque de vignettes sur lesquelles il est possible de cliquer. Toutes les vignettes sont complètement désaturées. Au passage de la souris, la vignette devient colorée et se distingue alors des autres. En passant la souris sur une vignette, celle-ci devient un cours instant la vignette hiérarchiquement la plus importante puisque vous êtes susceptible de cliquer dessus.

La netteté

Le graphiste a voulu ici attirer notre attention sur le carré central en rendant les autres carrés flous.

Hiérarchisation et parcours de lecture

Voici une page web utilisant plusieurs types de contrastes (couleur, taille, valeur …) pour hiérarchiser l’information contenu dans sa mise en page. Nous voyons bien que certains éléments attirent plus notre attention que d’autres. Par exemple le header possède un arrière plan texturé, un logo de grande taille avec une typographie de couleur rouge, couleur que l’on retrouve dans l’onglet actif du menu. Ces caractéristiques jouent un rôle sur la façon dont nous allons scanner cette page. Nous somme davantage attiré par le contenu du header au premier regard que par le contenu texte des paragraphes situés plus bas.

Cette hiérarchisation des éléments nous conduit à appréhender les informations de cette page dans un certain ordre et selon un parcours visuelle bien définie que j’ai tracé ci-après en bleu et numéroté par ordre de progression.

Conclusion

Les préoccupations de hiérarchisation interviennent dès les premières phases de conception du site. Par exemple lors du zoning, il est important de déterminer quelles seront les zones de contenu et les grandes fonctionnalités qui devront prendre de l’importance dans la mise en page. Il faudra penser à placer ces éléments au dessus de la ligne de fold (ligne virtuelle en dessous de laquelle il est nécessaire de scroller pour voir le contenu de la page), ensuite le graphiste devra mettre du contraste sur ces éléments pour qu’ils se distinguent dans la composition.

De cette manière, vous proposez au visiteur une espèce de « visite guidée » censé l’aider à scanner la page pour trouver ce qu’il cherche.

Introduction

Pour rentrer dans le vif du sujet, voici une définition courte du mot « affordance »: l’affordance est la qualité d’un objet à suggérer son utilisation. L’ergonome, Amélie Boucher, définit l’affordance comme étant les possibilités d’action suggérées par les caractéristiques d’un objet. Ce qui signifie, dans d’autres termes, la même chose.

L’affordance est une notion importante en ergonomie car elle facilite le travail cognitif des internautes. Plus un élément est affordant, plus l’internaute peut anticiper son comportement et son utilité.

Quel rapport avec le webdesign me direz-vous ?

Sur le web, les objets sont virtuels, ils sont représentés graphiquement. Le graphiste peut donc directement intervenir sur l’affordance d’un élément web. En effet, l’apparence des objets va participer à son affordance en jouant sur différentes dimensions tel que la forme, la couleur, sa localisation dans l’interface, la présence d’éléments indiçant la présence d’un lien, sa mise en évidence pour faciliter son repérage. Il faut aussi s’intéresser au comportement de l’objet lorsqu’il est sollicité car cela participe également au renforcement de son affordance.

Graphisme et affordance

Les éléments qui ont besoin d’une affordance forte dans une interface web sont les éléments avec lesquels l’internaute va interagir. On peut donc citer: les boutons, les liens hypertextes, les menus, les éléments de formulaire et plus généralement tous ce qui est cliquable.

Lorsqu’un internaute arrive sur un site qu’il n’a jamais vu, comment sait-il ce qu’il doit faire pour répondre le plus rapidement possible au besoin qui l’a amené sur ce site ?

Tous simplement en reconnaissant, grâce à son expérience du monde réel, des indices qui l’informeront sur l’utilisation des objets présents dans l’interface.

Les facteurs qui vont permettre à l’internaute de percevoir l’affordance d’un objet sont :

• - Le contexte: l’environnement dans lequel l’objet est représenté.
• - La culture de l’internaute: l’influence des normes sociétales sur la compréhension de l’utilisation de l’objet.
• - L’instinct: une association inconsciente entre l’objet et son utilité liée aux caractéristiques physique de l’objet.
• - Le mental: la compréhension et les attentes de l’internaute sur son interaction avec l’objet.

Tous ces facteurs pourront être influencés par le traitement graphique de l’objet et c’est là que le travail du graphiste intervient.

Exemple

Prenons un exemple simple, le traitement graphique d’un formulaire de contact. Nous le représenterons par quatre champs textes « nom-prénom(obligatoire) », « e-mail (obligatoire) », « téléphone », « sujet », un champ textarea « votre texte » et un bouton « envoyer le message ».

Voici un formulaire exagérément et volontairement peu affordant:

J’ai un peu forcé le trait et il y a peu de chance que vous trouviez, dans la réalité, un formulaire de contact aussi mal conçu. Mais si j’ai dessiné un formulaire à ce point « mal foutu » c’est pour mieux mettre en évidence les changements subtiles qui peuvent améliorer l’utilisabilité.

Alors, comment améliorer l’affordance de ce formulaire par un traitement graphique ?

(Quand je parle ici de traitement graphique, je pense au dessin des éléments du formulaire mais aussi à sa mise en page et à la mise en place d’éléments qui favorisent la perception de son utilisabilité.)

Voici ma proposition graphique:

Comme vous le constatez, l’utilisabilité de ce formulaire est davantage intuitif pour l’internaute que le précédant. Énumérons les changements graphiques qui ont permis cela:

La mise en page

Pour la mise en page, j’ai utilisé une grille afin d’aligner les éléments qui constituent le formulaire. Ces alignements structurent le visuel et facilite la lecture des informations. Un formulaire est typiquement le genre d’interface qui nécessite un peu de rigueur dans sa présentation pour favoriser son utilisabilité. En travaillant à partir d’une grille, j’applique le principe de continuité de la théorie de la Gestalt. Comme vous le verrez plus loin, d’autres principes de cette théorie seront appliqués dans le design de ce formulaire.

Les formes

Certains éléments sont traités, graphiquement, de manière similaire. Cela permet d’établir un lien entre ces éléments pour indiquer à l’internaute que les objets qui se ressemblent ont probablement une fonction similaire où une importance hiérarchique équivalente. Il s’agit ni plus ni moins d’appliquer le principe de similarité de la théorie de la Gestalt.

En travaillant sur des formes connues, j’augmente l’affordance des éléments. Un bouton est souvent représenté rectangle. Si je le dessine en forme d’étoile, son utilisation sera perçue de manière moins évidente par l’internaute. Cela peut paraitre contraignant pour la créativité mais le design web n’est pas toujours un acte de création pur. Le web design doit s’inscrire dans un contexte et des contraintes d’ergonomie et d’utilisabilité. Le design web doit donc savoir jongler entre esthétisme et normes d’usages.

La taille

La taille des champs de formulaire doivent être suffisante pour suggérer leur utilité. Si le champs est trop court, l’utilisateur se demandera si il correspond bien à l’idée qu’il se fait de son utilité. Par exemple, si un champ « téléphone » fait une taille équivalente à la saisie visible de 4 caractères alors qu’un numéro de téléphone en occupe au minimum 10, le doute s’installera.

Vous aurez aussi remarqué la taille importante du bouton « Envoyer le message ». Je l’ai un peu exagéré ici mais c’était pour illustrer la loi de Fitts qui dit que « Une cible est d’autant plus rapide et facile à atteindre que celle ci est proche et grande. » Il convient donc aussi, pour faciliter le clique de l’internaute, de placer ce bouton suffisamment proche du dernier champs à priori saisi, le textarea « Votre texte ».

Enfin la taille du texte doit permettre une lecture aisée. Plus l’information a de l’importance, plus la taille du texte sera grande. Jouer sur ce facteur est une des solutions (il y en a d’autres) pour établir une hiérarchisation de l’information.

Les couleurs

Le couleurs sont porteuses de sens. Lorsque j’utilise le rouge et le jaune pour le message d’erreur, c’est parce que ces couleurs sont remarquables et associées dans notre imaginaire au danger et aux objets de signalétique.

Les arrières plans doivent être de préférence de couleurs neutres (éviter les couleurs trop saturées) pour ne pas rentrer en compétition avec les éléments importants de l’interface. Gardez les couleurs vives pour attirer l’attention de l’utilisateur (messages d’erreur, titres …).

Les indices

Vous pouvez aider la compréhension du message en utilisant des éléments qui serviront d’indices. Il peut s’agir de puces, de flèches ou d’icônes. Ici j’utilise une lentille jaune avec un point d’exclamation pour indiquer à l’internaute que le message affiché réclame toute son attention.

Les exemples du format de saisi des champs du formulaire (ex: champ téléphone) peuvent être de précieux indices pour éviter à l’internaute de se tromper et de recommencer sa saisie.

Les libellés

Les libellés textes doivent être explicites sans être trop longs. Sur le plan graphique, la couleur du texte doit être lisible en établissement un rapport de contraste suffisant avec son arrière plan.

Le contraste

L’utilisation du contraste permet de faire ressortir certains éléments. Dans mon exemple, j’ai utilisé le contraste pour attirer l’attention de l’internaute sur les titres qui jouent un véritable rôle de panneau indicateur. Cela permet de répondre rapidement aux questions: Ou suis-je ? de quoi s’agit-il ?

Ici, j’ai essentiellement créé du contraste en jouant sur la couleur et la taille des éléments.

La profondeur

Des simulations 3D par des effets de dégradés et d’ombres portées font ressortir les cadres et le bouton.

En donnant du volume au bouton, j’augmente son affordance car j’incite l’internaute à cliquer dessus. En effet, nous avons tendance à appuyer ou à toucher tout ce qui est proéminent. (Attention, votre imaginaire s’égare !)

Les espaces

En laissant respirer la composition par la présence d’espaces, je facilite la lecture du formulaire. Cela me permet aussi d’appliquer le principe de proximité de la théorie de la Gestalt. Par exemple, les libellés des champs sont proches des espaces de saisies qui leur correspondent. Chacun des binômes « libellé-champs de saisi » sont suffisamment espacés les uns des autres pour ne pas apporter d’ambigüité lors de la prise d’information visuelle.

Conclusion

Comme vous l’aurez probablement remarqué, tous ces principes graphiques sont d’une évidence et d’une simplicité déconcertante.

Alors, pourquoi en parler ?

Parce que, malgrès ce constat, il arrive encore de trouver des pages web dont le design ne tient pas compte de ces évidences.

Pour pouvoir les mettre en œuvre, encore faut-il y penser au moment de la réalisation des maquettes graphiques. Et pour penser à ces principes simples, il faut commencer par les connaitre pour en prendre conscience dans vos futures créations.

Sources:

- Ouvrage « Ergonomie web. Pour des sites web efficaces » – Amélie Boucher – Edition Eyrolles
- Sur le site web Motive, l’article: Perceived affordance

Introduction

Pour faire simple, la Gestalt est une théorie, une école de pensée, qui étudie comment les humains perçoivent les choses. Les théoriciens de la Gestalt prêchent que notre perception ne se concentre pas sur des « points isolés », mais par une vision du « tous ».

Lorsqu’un observateur regarde une composition graphique, il a tendance à ordonner les éléments de cette composition afin de faciliter et clarifier leur lecture. Notre cerveau organise, interprète et classe les éléments afin de simplifier la complexité visuelle de notre environnement. Cette simplification s’effectue en regroupant les entités qui présentent des caractéristiques communes.

La Gestalt s’intéresse à la façon dont ces groupes sont formés et comment ceci affecte notre perception. En connaissant certaines lois de la Gestalt, le graphiste va être en mesure de comprendre et d’appliquer ces principes pour créer l’unité, la variété ou l’équilibre dans ses visuels.

Les lois de la Gestalt

Simplicité

Devant un problème visuel notre cerveau cherchera toujours la solution la plus simple parce que le monde est visuellement si complexe qu’il n’est tout simplement pas possible d’en extraire toute l’information sans une simplification préalable. Notre esprit a donc tendance à exclure la complexité au profit de la simplification afin de reconnaître des formes simples et à les relier.

Ce penchant vient probablement de l’urgence à différencier les situations dangereuses des situations bénignes. Le raccourci nous fait alors gagner un temps précieux pour réagir à une situation si celle-ci le nécessite.

En utilisant le concept de simplicité nous pouvons assembler des éléments identiques pour créer une unité. Par exemple, une surface rempli d’un motif composé de carrés identiques, sera perçue par notre cerveau comme une surface unitaire et non comme une multitude de plusieurs petits carrés. Dans la même idée, lorsque vous regardez un parc, vous voyez une pelouse verte et non tous les brins d’herbes individuellement.

Principe de proximité

Le cerveau a tendance à regrouper des éléments qui sont placés à proximité pour former un ensemble cohérent. Des éléments placés côte à côte sont perçues comme des éléments ayant un rapport entre eux. Ils forment dans notre esprit des sous-ensembles qui vont alors fonctionner comme un tout.

Illustration du principe de proximité

Application du principe de proximité en webdesign

Lorsque vous composez une page web, certains éléments ont des liens entre eux. Une manière efficace de le montrer est d’appliquer ce principe de proximité. Pour illustrer cela, observons des exemples pris sur le web.

Voici le programme ciné d’un grand groupe de cinéma Français. Le titre des films est placé à égale distance des paragraphes de contenus texte se trouvant au dessus et en dessous. Cela ne facilite pas la lisibilité du programme car l’œil hésite à associer ce titre à l’élément du bas ou ou à l’élément du haut.

En établissant une proximité entre le titre et son contenu texte on aide l’observateur à faire des regroupements qui facilite la lecture du programme ciné.

Principe de similarité

Le cerveau a tendance à regrouper des éléments qui se ressemblent. Si par exemple tous les éléments d’une composition sont à égales distances, le critère de regroupements se fera sur la ressemblance des éléments. Cette ressemblance peut être une ressemblance de forme, de couleurs, de texture, de taille …

Illustration du principe de similarité

Application du principe de similarité en webdesign

Sur cette copie d’écran, les 3 éléments réunis sous le titre « How to use Product Planner » sont traités de façon similaire sur le plan graphique. Cela permet à notre esprit de regrouper ces 3 éléments comme faisant partie du même groupe. Ces trois encadrés ayant un lien (ils se rattachent tous les 3 au thème « How to use Product Planner »), le graphiste a joué sur le principe de similarité (même traitement graphique) pour le communiquer à l’observateur.

Sur cette page web du site d’Apple, le principe de similarité a également été appliqué. Il nous permet de distinguer 6 groupes distincts que j’ai numéroté en rouge.

A noter que lorsque les principes de proximité et de similarité sont appliqués en même temps, l’effet de regroupement est renforcé.

Principe de continuité

On parle aussi de principe d’alignement pour parler du principe de continuité.

Si des éléments d’une composition présentent un ordonnancement formant un parcours régulier et directionnel, le cerveau tracera une ligne optique imaginaire qui reliera ces éléments entre eux. Notre regard a tendance à suivre un chemin régulier pour mettre en rapport des formes présentent dans une composition. Si un élément majeur s’interpose entre des éléments contigus, la ligne optique est rompue.

Cela permet par exemple de diriger l’attention de l’observateur d’un point de la composition vers un autre. En effet, une fois que notre œil regarde dans une direction, il aura tendance à suivre cette direction jusqu’à ce qu’il rencontre un élément significatif. En photographie, on parle de lignes de forces et de points focales. Le photographe utilise souvent des alignements dans sa composition (routes, rivières, lignes électriques, rangée d’arbre …) pour guider le regard vers le sujet principal.

Illustration du principe de continuité

Application du principe de continuité en webdesign

Cette copie d’écran présente la page d’accueil d’un site pour un restaurant. Quoi de plus important pour un restaurant que de montrer ses spécialités culinaires ? Ici, le designer à mis en évidence la photographie d’un plat de la carte du restaurant en choisissant un arrière plan neutre (photographie noir et blanc) sur lequel la photographie en couleur se détache bien. L’attention de l’observateur sur cette photo de plat est renforcé par un principe de continuité. En effet, l’alignement des chaises et des tables (flèche blanche) de la photo d’arrière plan dessine dans notre esprit une ligne optique virtuelle qui conduit le regard vers la photographie du plat.

Sur le site de Mark Boulton, j’ai dessiné à l’aide de lignes rouges, l’alignement des éléments. Ces alignements ont probablement été mis en place par l’utilisation d’une grille de mise en page. En glissant le long de ces lignes virtuelles, les alignements aident le regard a circuler facilement dans la page.

Principe de fermeture

Le cerveau aime regrouper des formes de façon à constituer des ensembles visuels fermés et cohérents. Le cerveau est capable de reconnaitre un sujet avec seulement quelques lignes bien esquissées.

En dessin stylisé l’artiste ne trace que quelques lignes et courbes, pourtant nous sommes capables de reconnaitre de quoi il s’agit. C’est de cette manière que l’artiste implique l’observateur dans son œuvre, en incitant son regard à imaginer ce qui manque pour reconstituer le sujet.

Retenez que ce n’est pas la quantité mais la qualité des informations visuelles qui vous permet de lire une composition graphique.

Illustration du principe de fermeture

Application du principe de fermeture en webdesign

Ce site à pour thème le golf. Le tracé en arc de cercle de l’arrière plan évoque facilement une balle car notre regard complète le dessin pour visualiser un cercle complet.

Sur le site Amaztype, une animation Flash construit progressivement un mot avec une accumulation d’images. Ici le mot suggéré est le mot « TASCHEN ». Bien que le mot ne soit pas achevé, nous n’avons aucun mal à reconnaitre et à lire ce mot. Ce phénomène est possible grâce au principe de fermeture.

Principe de la prégnance

La prégnance ou principe de la « bonne forme » est le principe selon lequel les éléments s’organisent en une forme plutôt qu’en une autre. Étant habitué aux figures géométriques, nous auront tendances à regrouper sous une même forme plusieurs objets disparates s’ils sont placés de manière suffisamment évocatrices. C’est cet effet qui nous permet par exemple de voir dans les étoiles, des triangles, des trapèzes …

Illustration du principe de la prégnance

Application du principe de la prégnance en webdesign

En webdesign, le principe de la prégnance peut être appliqué pour aider l’internaute à distinguer l’essentiel du superflu dans une masse d’informations visuelles denses. Pour mettre en avant l’essentiel, le graphiste utilise généralement toutes les manières de générer du contraste. Il peut aussi structurer sa composition pour créer un ordre visuel. Cet ordre visuel peut être obtenu en disposant les éléments de manière a former des formes géométriques simples (cercle, carré, rectangle, triangle).

Sur le site de la journaliste Anja Medau, Notre regard est d’abord attiré par le portrait de la jeune femme, puis il glisse sur son nom, le menu du site et enfin sur la liste des différentes interventions de la journaliste.

L’ensemble du texte s’inscrit dans un triangle (figure que j’ai tracé en blanc) et facilite notre lecture. Nous aurions pu commencer notre lecture par la droite de l’image mais la photographie de la journaliste nous attire pour que nous commencions l’exploration de la page par la gauche. Le triangle nous ouvre ensuite le chemin de son sommet vers sa base tout naturellement. Grâce à ce stratagème, le graphiste a su mettre en place un flux de lecture qui va de l’élément le plus important (nom prénom de la journaliste) au plus générale (expérience de la journaliste).

Principe de l’expérience passée

Le principe de l’expérience passée se réfère, comme son nom l’indique, à l’expérience déjà acquise (dans le passé…) et permet à l’observateur une reconstitution visuelle d’objets reconnaissable par regroupement de formes.

Ce principe s’applique lorsque vous reconnaissez des objets en observant les nuages. D’un individu à l’autre, pour un même groupe de nuages, l’objet reconnu ne sera pas forcément le même. En effet, il y a quelque chose de très personnel et subjectif dans cette reconstitution, car elle fait référence à nos expériences qui sont uniques pour chaque individu.

Illustration du principe de l’expérience passée

Application du principe de l’expérience passée en webdesign

Sur cet exemple, l’arrière plan est occupé par une photographie représentant une portion d’un personnage. Nous savons qu’il s’agit d’un jeune adolescent qui pratique une figure de skate. Pourtant, nous ne voyons que 1/6 du personnage. Notre expérience passée nous permet pourtant d’être quasiment sûr de nous. Nous avons déjà vu des jeunes ados pratiquer le skate dans la rue où dans des vidéos. Nous savons à quoi ressemble un skate car nous avons nous même pratiqué ce loisir. Bref, toutes nos expériences personnelles nous permettent d’imaginer ce qui manque dans cette photo en ayant la certitude de ne pas nous tromper.

Sur cette magnifique photographie de Mehmet Ozgur, on peut reconnaitre le corps d’une femme dans une volute de fumée. Si vous avez fait vœux de chasteté, peut être aurez-vous un peu plus de mal à reconnaitre le corps dont je parle. En tout cas, cette image est une belle illustration de notre capacité à appliquer le principe de l’expérience passée.

Conclusion

Les lois de la Gestalt sont des principes simples à comprendre mais fondamentaux pour tous les graphistes qui souhaitent réussir une composition harmonieuse et porteuse de sens.

Un site web qui ne respecte pas les grands principes énoncés par la Gestalt sera souvent confus pour l’internaute sans que celui-ci ne sache consciemment pourquoi. La raison est que son cerveau aura du mal à effectuer des opérations de simplification.

A contrario, un site qui respecte ces principes paraitra plus professionnel, plus facile à décrypter et votre message visuel passera beaucoup mieux favorisant l’expérience utilisateur.

Tous les principes vues ci-dessus créent de l’unité mais vous pouvez aussi créer de la variété en ne respectant pas ces principes. L’unité structure et harmonise les mises en page mais trop d’unité peut aussi lasser et ennuyer l’observateur. A l’opposé, la variété destructure les mises en page et apporte du chaos à vos compositions. Cela éveille l’intérêt de l’observateur mais trop de chaos nuit au déchiffrage du message.

Il faut donc veiller à trouver un équilibre entre unité et variété. Cela s’obtient par un subtil mélange des deux effets pour que la composition graphique soit facile à appréhender tout en ayant une certaine forme d’intérêt.

Il faut aussi apprendre à adapter ses choix graphiques au contexte. Un site au contenu texte dense aura besoin de plus d’unité que de variété. L’illustration d’une publicité de produit pourra offrir beaucoup de variété pour attirer l’attention du client à condition que cette variété n’éclipse pas le produit lui même.

Sources :

- Ouvrage: « Graphisme et ergonomie des sites web » – Cristina Barroca – Edition Dunod
- Site http://www.desenvolvimentoparaweb.com
- Article « Gesalt » du site http://daphne.palomar.edu

Introduction

Le langage visuel est un mode de communication qui pourrait se définir par le sens qu’une image est capable de transmettre à celui qui la regarde. Lorsque nous observons une image, notre cerveau la perçoit grâce à notre vision mais déclenche également tout un processus de reconnaissance basé sur nos expériences antérieures. La vision déclenche donc des pensées qui aboutissent à des émotions, des réflexions, des références à d’autres images, des déductions qui sont conditionnés par notre vécu et notre façon d’appréhender le monde.

L’observation d’une image, quelque soit l’individu, n’est donc jamais un acte passif et laisse rarement indifférent.

La composition

Définition

La composition se préoccupe de concevoir l’arrangement des éléments d’une image dans un cadre physique donné. Les éléments d’une image rentrent en interaction les uns avec les autres et ces interactions sont influencées par les caractéristiques de chaque élément (taille, couleur, valeur, orientation, forme, emplacement …).

Se soucier de la composition, c’est choisir de répartir les éléments constitutifs de l’image en fonction de vos objectifs de communication. Ne pas se soucier de la composition, c’est laisser le hasard choisir à votre place et risquer de passer à côté de vos objectifs.

En webdesign, une réflexion sur la composition commence lors de l’étape de mise en page du contenu puis se poursuit lors du design graphique. La composition en webdesign diffère un peu de la composition en photographie car le webdesign doit prendre en compte un ensemble d’objets constitués de textes et d’images pour former un tout cohérent.

Les facteurs qui interviennent dans la composition

Beaucoup de facteurs peuvent être pris en considération pour élaborer une composition. Je vais essayer d’en faire une énumération ici. Pour chacun d’entre eux, je ne rentrerai pas dans les détails car certains de ces facteurs seront traités dans des articles ultérieurement.

Pour élaborer une composition, vous pouvez vous appuyer sur les notions suivantes:

Les règles de composition

Au cours des siècles, les artistes et les architectes ont définies des règles de composition empiriques basées sur l’expérience et l’observation de la nature. Ces règles, vous en avez probablement déjà entendu parlé. Il s’agit de la règle des tiers et de la règle du nombre d’or.

J’ai déjà parlé du nombre d’or dans un paragraphe de mon article « Utiliser une grille« .

Présentons rapidement ces deux règles:

Ces règles sont des méthodes de placement du ou des sujets importants de l’image de tel sorte que la composition nous paraissent harmonieuse tout en restant dynamique. Le défaut du photographe débutant est de centrer ses sujets dans ses compositions. Ce type de choix n’est pas mal en soi mais rend la composition statique et donc un brun ennuyeuse.

Voici où placer les centres d’intérêt d’une image selon ces deux règles de composition harmonieuse: (centres d’intérêts = quatre points dessinés)

Le sens de lecture

Selon des études d’observations de type eyes-tracking, les personnes de culture occidentale parcourent une image de haut en bas et de gauche vers la droite selon un trajet en Z. Ce n’est pas un hasard si les logos sur les documents ou les pages web sont souvent placés en haut à gauche.

De même, il semble que la gauche de l’image se réfère au passé et la droite au futur.

Un personnage qui marche et qui se dirige vers la droite de l’image sera interprété comme une personne qui s’éloigne alors que si la personne se dirige vers la gauche de l’image, on aura tendance à penser qu’elle revient sur ses pas.

Dans la même veine, un escalier nous semble descendre si il parcours l’image du coin haut-gauche vers le coin bas-droite et monter si il commence du coin bas-gauche et se termine au coin haut-droite.

Le point de vue

Le changement du point de vue change la composition de l’image. En effet, la forme d’un objet ne sera pas la même si il est représenté ou photographié selon deux points de vue différents.

Choisir un point de vue inhabituel peut montrer un objet banal sous un nouvel angle et changer le regard du spectateur sur cet objet.

En choisissant où vous placez l’horizon dans votre composition, vous changez l’expression de l’image. Un point de vue bas, inclue de façon plus importante le premier plan et fait rentrer le spectateur du bas vers le haut de l’image. Un personnage pris en contre plongée lui donnera un air dominateur. Inversement, un point de vue élevé vous détache de la scène. Vue de haut, un personnage semble plus petit et dominé.

L’échelle

Vous pouvez jouer avec l’échelle dans une composition à condition que vous donniez des indices visuels qui permettent à l’observateur d’apprécier cette échelle. En plaçant un objet connu sur l’image vous révèlerez par comparaison le petitesse ou le gigantisme des autres éléments.

Les éléments formels

Il s’agit du point, de la ligne, des courbes et des formes. Ces éléments, selon la façon dont ils sont placés, orientés, leur taille … n’expriment pas la même chose. Par exemple, des lignes courbes expriment la douceur, la féminité alors que des lignes hachées expriment le cahot, le désordre. Cela est aussi valable pour les formes. Un carré va exprimer l’ordre, la stabilité, la robustesse alors qu’un cercle va exprimer par exemple l’équilibre, l’infini, le renouvèlement.

Lorsque plusieurs objets sont présents dans une composition, ils rentrent en relation, interagissent entre eux, se concurrencent ou s’équilibrent. Des lignes optiques se forment sur lesquelles le regard peut se laisser guider. Ces lignes virtuelles sont de véritables lignes de force qui accompagnent l’observateur dans sa lecture de l’image. Vous pouvez vous en servir pour attirer l’attention de l’observateur vers un centre d’intérêt.

L’équilibre

Si vous êtes à la recherche d’une composition harmonieuse, vous allez essayer d’équilibrer votre composition. Il y a plusieurs paramètres qui permettent d’équilibrer une composition: la répartition des tons, des couleurs, des objets. La répartition des objets sur les différents plans.

Le poids de chaque objet dans une composition va être influencé par sa taille, sa couleur, sa valeur. Les caractéristiques qui augmentent le poids d’un objet sont l’importance de sa taille dans le cadre, l’assombrissement de sa valeur, son contraste, sa densité. Par exemple un petit objet dense et sombre peut être équilibré par un objet plus grand mais plus clair placé en opposition par rapport à un axe central.

La symétrie

Nous sommes sensible à la symétrie car on la trouve en abondance chez les êtres vivants et dans notre anatomie. Cette symétrie quelle soit radiale ou axiale apporte de la structure à l’image mais en revanche la stabilise au point de la rendre parfois trop statique, superficielle, ennuyeuse.

La symétrie est aussi un bon moyen d’équilibrer une composition si c’est l’effet recherché.

Le relation entre le premier plan et le second plan

Vous pouvez, en jouant sur plusieurs plans, simuler la profondeur. Pour cela vous pouvez intervenir sur la profondeur de champs ou la superposition des objets. Arrangez-vous pour que les différents plans ne rentrent pas en concurrence. Un plan sera mis en avant si il est plus net que les autres ou plus contrasté.

Les contrastes

Le contraste est un outil formidable pour retenir l’attention de l’observateur. Le contraste est basé sur une opposition entre deux objets. Sachez qu’il existe plusieurs manière de le générer. Nous en reparlerons dans un article ultérieur.

Conclusion

La composition est une notion incontournable de l’expression graphique qui vous aide à donner du sens à vos images ou à raconter une histoire. Plusieurs facteurs sont à prendre en compte pour vous aider dans cette tâche mais avant de composer votre image réfléchissez à ce que vous voulez exprimer.

Sources:

- Ouvrage « Composition » de David Präkel – Edition La compagnie du livre.

Introduction

Alors que le texte transmet ses informations de façon progressive et linéaire, l’image livre ses informations de façon globale. Les signes visuels de l’image sont épars et perçus simultanément. L’observateur parcours l’image, repère certains signes, les associes et en déduit du sens. L’image semble moins fiable que le texte car le destinataire interprète les signes qu’il observe en fonction de sa personnalité, de son expérience, de ses connaissances, de son imagination, de son inconscient … On comprend alors pourquoi ces interprétations peuvent diverger d’un individu à l’autre.

Malgré cela, l’image peut être un puissant vecteur de communication. En effet, une image peut transmettre des informations, des impressions, des émotions, des idées, du plaisir … dans tous les cas elle laissera rarement indifférent.

La communication par l’image

Sens de lecture d’une image

Une image peut être décodée selon deux niveaux : un sens dénoté et un sens connoté.

Le sens dénoté

Le sens dénoté d’une image correspond à la réalité de ce qu’on perçoit, reconnait puis nomme.

Par exemple si on me montre la photographie d’un chien, je perçois ses formes, ses textures, sa masse, ses couleurs … puis par analogie de mes représentations je reconnais cet objet comme étant un chien.

Le sens dénoté est donc la reconnaissance la plus neutre du signe iconique.

Le sens connoté

Le sens connoté (connotation) est celui qui s’ajoute au sens dénoté. Toutes image peut induire chez l’observateur un certain nombre d’interprétations qui s’ajoutent au sens dénoté. Le sens connoté renvoie aux images qui peuvent être associées à l’objet reconnu par des références culturelles, personnelles, inconscientes, sociales de l’observateur.

Par exemple, la photographie du chien peut me faire penser à la notion de fidélité. Une photographie d’une flamme pourra me renvoyer à des images de guerres, de danger, d’incendies ou de chaleur, de feu de camp, d’énergie.

Attention, ce sens connoté est variable selon les individus, le contexte, la culture.

Influence des codes

Notre rapport au monde est définie par un ensemble de valeurs profondément ancrées dans notre univers mental. Ces valeurs sont issues de notre culture, de nos mœurs, de nos croyances, de notre philosophie, de notre éducation … Ces valeurs ont façonné en nous un mode de pensé, des idéologies et des codes que nous partageons plus ou moins fidèlement avec les membres d’un même groupe culturel.

Tous ces codes intériorisés peuvent être réactivés à la lecture de l’image de façon plus ou moins élaborée selon le répertoire culturel de l’observateur. Ces codes sont largement mis en scène dans les publicités afin d’élargir les connotations de l’image et ainsi convaincre le destinataire par des procédés ludiques et esthétiques qui se rapproche plus de la séduction que de l’argumentation rationnelle.

Les codes comportementaux

Nous reconnaissons presque inconsciemment des codes comportementaux (gestes, attitudes, postures, rituels …) comme étant des signes annonciateurs d’un statut social, d’une humeur, d’une identité, d’une pensée, d’un rapport de force …

Une partie de notre gestuelle est donc codifiée par notre culture. Ainsi la reddition est codée par les mains levées, la révolte par un poing levé, l’arrêt par une main à plat qui fait face.

Les codes ornementaux du corps et de l’espace

Le maquillage, les vêtements, les tatouages, les uniformes, l’architecture sont autant de codes culturelles qui participent à notre vison du monde.

Les codes symboliques et signalétiques

On les retrouvent dans les blasons, les emblèmes, les pictogrammes, les symboles à valeur religieux, politique, philosophique, scientifique …, les codes de circulation et la signalétique urbaine.

Figures de styles

Comme en littérature, l’image peut utiliser des figures de styles pour exprimer plus efficacement une information.

La métaphore

Une métaphore consiste à rapprocher un comparé et un comparant qui appartiennent à deux univers différents. Le point qui les réunis attire l’attention de l’observateur par un effort d’interprétation. Cette technique permet de rendre plus concrète une idée abstraite. C’est aussi un procédé créatif qui fait appel à l’imaginaire du destinataire. Enfin, les métaphores sont propres à susciter des réactions émotives (amusement, admiration, dénigrement …) selon la nature burlesque, positive, négative du comparant.

Pour en savoir plus sur les métaphores et le webdesign, je vous invite à relire ma traduction de l’article de Larissa Meek : « Visual Metaphors: 7 rockstar examples on the web »

La métonymie

L’image à valeur métonymique dans le sens où elle cadre une fraction d’une réalité plus large. Lorsque nous observons un gros plan qui isole une partie d’un objet, d’un paysage, d’un personnage, notre attention se porte sur la partie isolée mais notre imaginaire et nos références comblent les parties manquantes.

Cette technique permet de mettre en place un impact plus fort sur une fraction d’un tout. Elle permet également de faire travailler l’imagination de l’observateur.

La part de l’inconscient

Certaines images éveillent en nous des émotions diverses: désir, trouble, angoisse, phobie … qui sont issus de notre perception du monde la plus archaïques. Cette perception est issus de notre inconscient qui est porteur d’interdits sociaux et culturels transmis par notre éducation. Notre inconscient participe donc, souvent à notre insu, à la lecture du message véhiculé par une image.

Les fonctions de l’image

On peut distinguer plusieurs types d’images si l’on prend leur fonction comme critère de regroupement.

Images informatives

Parmi les images informatives on trouve les graphiques, les schémas, les diagrammes, les photos de produit …

Une image informative peut être:

Référentielles

L’image accompagne le texte pour témoigner d’une façon visuelle l’information décrite. C’est le cas d’une photo qui illustre l’article d’un journaliste.

Didactiques

L’image explicite un texte pour pour favoriser sa compréhension. C’est le cas d’une illustration technique dans un mode d’emploi.

Images non informatives

Parmi les images non informatives on trouve les illustrations, les textures, les motifs, les encadrements …

Les images non informatives peuvent avoir un rôle:

Phatique

Une image à un rôle phatique si sa fonction est d’attirer l’attention de l’observateur (flèche, puces …)

Pragmatique

Une image à un rôle pragmatique si sa fonction est d’établir un lien affectif avec l’observateur et de le conduire à plonger dans un rapport subjectif avec l’objet représenté.

Esthétique

Une image à un rôle esthétique si sa fonction est de procurer chez l’observateur un sentiment de plaisir par le simple fait de sa beauté. L’esthétisme de l’image doit s’intégrer à la la tonalité graphique du design.

Incitative

Une image à un rôle incitatif si sa fonction est de déclencher une décision, une action chez l’observateur (acte d’achat, adhésion à une cause, don pour une association …)

Conclusion

L’image est un outil polysémique (plusieurs sens) capable d’engendrer de multiples interprétations. C’est à la fois un avantage et un inconvénient. Un avantage, parce que une seule image peut véhiculer un nombre considérable d’informations, et un inconvénients parce qu’elle peut entrainer des interprétations non désirées par l’émetteur de la part de l’observateur.

Pour réduire le caractère polysémique de l’image, celle-ci peut être accompagnée d’une légende, d’un titre ou d’un slogan qui ancre l’image dans une signification précise, réduisant ainsi l’interprétation subjective.

Quoi qu’il en soit, que l’image soit informative ou non, elle reste souvent au second plan pour se mettre au service du texte.

Sources :

- Ouvrage « Graphisme et ergonomie des sites web » – Cristina Barroca – Édition Dunod
- Ouvrage « Petite fabrique de l’image » – JC Fozza, AM Garat – Édition Magnard
- Ouvrage « Français, méthodes & techniques » – F. Crépin, C. Desaintghislain, E. Poulzagues-Daemon – Édition Nathanadidas

Introduction

La transparence possède une connotation plutôt positive. Dans le langage courant, la transparence peut signifier l’honnêteté, la franchise, le signe de l’ouverture.

En architecture, l’utilisation de matériaux transparents va permettre à la lumière de rentrer dans les intérieurs et d’apporter de la clarté.

En graphisme, la transparence peut être utilisée pour réaliser des superpositions d’aplats, de textures, de motifs et d’images. Le résultat aboutit à de nouvelles couleurs, lignes, formes qui, en se juxtaposant, donneront des compositions inédites.

La transparence d’une matière dépend de sa nature physique et de son opacité mais la transparence peut également être obtenue par la perforation d’une surface à l’origine complètement opaque.

Grâce aux logiciels de traitement d’images, le graphiste peut modifier la transparence de n’importe quel élément et lui affecter l’opacité qu’il désire dans une gamme allant de l’opacité complète à la transparence totale. Le réglage de la transparence, via ces outils, est donc d’une grande malléabilité et offre au graphiste une multitude d’effets.

Utilisation de la transparence

Voici quelques unes des utilisations que l’on peut faire de la transparence :

Fasciner, séduire le spectateur

La transparence cache tout en révélant, elle suggère plus qu’elle ne montre. C’est pourquoi on la retrouve souvent dans l’imagerie érotique qui utilise des matières comme la dentelle des sous-vêtements, le tulle, les voiles des lits à baldaquin.

Créer des compositions complexes

La transparence permet la superposition de nombreux éléments dans un espace limité tout en conservant leur intégralité pour créer des compositions riches et complexes.

Apporter de l’esthétisme

La transparence maniée avec créativité peut améliorer l’esthétisme d’une réalisation graphique en faisant par exemple varier l’interaction d’une image avec son arrière plan.

Combiner deux idées ou deux éléments

En fusionnant deux concepts, deux images, par transparence, il est possible de suggérer le lien qui les unis.

Mettre en valeurs certains éléments

La transparence permet d’atténuer, dans une composition, la présence de certains éléments au profit d’autres éléments qui deviennent alors plus remarquables.

Simuler la présence de plusieurs plans

La transparence couplée à un effet de flou, peut aider le designer à donner une illusion de profondeur.

Favoriser la lisibilité d’un texte sans sacrifier son arrière plan

Lorsqu’un arrière plan apporte une valeur ajouté à l’esthétisme de la composition, il est dommage qu’il soit masqué par des aplats opaques de couleurs pour y accueillir du contenu texte par exemple. Mais sans la présence de ces aplats de couleurs, le texte risque de se fondre dans l’image d’arrière plan et devenir difficilement lisible. Une solution est de diminuer l’opacité de ces aplats de couleurs de tel sorte que le texte reste lisible mais que l’image d’arrière plan garde une certaine présence et une certaine intégralité.

Exemples d’utilisation de la transparence en webdesign

www.velvetgoldmine.eu

Sur ce site, la transparence est utilisée pour atténuer la présence de l’arrière plan et permettre une bonne lisibilité du texte. Malgré tout, l’image d’arrière plan reste largement présente.

www.marcoszender.com

Ce site possède un menu de navigation qui joue sur le flou et la transparence. Cette effet graphique donne l’illusion que les autres items du menu passe derrière l’item actif au passage de la souris. On a donc un effet de profondeur où l’item actif du menu est mis en avant au passage de la souris.

www.uliheckmann.com

Sur ce portfolio de photographe, la typographie est totalement transparente pour laisser apparaitre une fraction des clichés de l’artiste. Cet effet graphique apporte du mystère et nous force a décrypter l’image qui se cache en arrière plan.

www.imaste-ips.com

Le site imaste-ips est tout en transparence. Grâce à cette transparence, la structure de la grille de mise en page est discrète mais délimite bien les différents éléments de la page (en-tête, menu principal, contenu central, pied de page). L’arrière plan particulièrement graphique et esthétique garde ainsi son intégralité et donne au design l’essentiel de son caractère.

www.f6creations.com

Sur le site de f6creations, le webdesigner a superposé un ensemble d’éléments graphiques avec différentes opacités pour élaborer un arrière plan riche et complexe qui donne tout son esthétisme au site.

www.montealto.pt

Sur le site Montealto, le cadre de droite délimite une zone de contenu. Le webdesigner aurait pu décider de faire un aplat opaque pour y déposer ce contenu. Il a préféré rendre ce cadre transparent probablement pour laisser transparaitre la photographie en arrière plan et ainsi laisser de l’espace au vélo qui évolue de gauche à droite. Un cadre opaque aurait été maladroit car le vélo serait venu butter contre un mur virtuel.

Sources:

- Ouvrage « Graphic design the new basics » de Ellen Lupton & Jennifer Cole Phillips – Princeton Architectural Press