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

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

Cette étape de conception des pages est réalisée à l’aide, dans un premier temps, de la technique de « zoning ». Puis les choses s’affineront avec l’établissement d’une représentation des pages plus aboutie : les wireframes.

Le zoning

Le zoning est une technique simple qui consiste a représenter une page de votre site à l’aide de boites qui symbolisent les grandes fonctionnalités et les zones principales de contenu. Cette étape est primordiale pour décider le l’organisation générale de vos pages. On ne résonne ici qu’en terme de zones (boites), le détail des éléments qui rempliront ces zones ne sera abordé qu’à l’étape des wireframes.

Chaque boite (carrés, rectangles …) représente une entité majeure de votre site qui doit trouver sa place sur l’écran en fonction deux critères principaux :

• Son importance hiérarchique.
• Son encombrement spatial.

L’encombrement spatial est matérialisé par la forme des boites, l’importance hiérarchique par une valeur de gris par exemple.

Bien sure vous devez, lors de cette étape, avoir déjà une idée approximative de la taille qu’occuperont vos éléments sur la page. Cela suppose que vous ayez débroussaillé le travail lors de l’étape de rassemblement de votre contenu et de l’architecture de l’information.

Exemple de zoning de la page d’accueil du thème WordPress « Enjoy » (en cours de réalisation)

Cette étape tient généralement compte de la résolution cible de vos utilisateurs.

Il faut également tenir compte de la zone au dessus du « fold » (zone visible de l’écran sans avoir à scroller). Le fold représente une ligne virtuelle qui se situe en bas de votre écran et délimite la zone à partir de laquelle les informations sont accessibles uniquement par défilement. En effet, les éléments les plus importants devront se situer au dessus du fold où à cheval sur celui-ci pour suggérer leurs présences.

Il est important de comprendre (et de faire comprendre au client) que la réflexion se porte uniquement sur l’organisation générale des grandes zones d’influence du site et non sur le choix des couleurs où des icônes. Le client ne doit donc pas être frustré par le niveau d’abstraction élevé de représentation des pages de son site à cette étape.

Ce travail se concrétise par l’établissement d’un livrable qui servira de document de discussion avec le client pour correction puis validation.

Les wireframes

Une fois que l’organisation générale des pages a été validé à l’aide de la technique du zoning, nous pouvons commencer à affiner les choses en réalisant des wireframes.

Attention, le terme wireframe possède de nombreux synonymes que vous rencontrerez sûrement selon les personnes avec qui vous travaillerez :

• Maquette ergonomique
• Maquette fonctionnelle
• Prototype
• Storyboard
• Mockup
• Layout …

Les wireframes sont des maquettes dans lesquelles on détail le contenu des boites définies dans l’étape de zoning. Il s’agit de réfléchir non pas sur le graphisme mais sur les aspects fonctionnels et ergonomiques des éléments qui rempliront ces boites. C’est pourquoi il est conseillé de réaliser les wireframes en noire et blanc pour ne pas distraire le client des objectifs principaux de ce type de document. Vous pouvez tout de même représenter les liens hypertetxes en bleu. En aucun cas les aspects purement graphiques ne doivent être abordés lors de cette étape.

Le document qui va réunir l’ensemble des fonctionnalités d’un site sous forme de wireframes est appelé story-board.

Chacune des boites qui composent notre zoning contient par exemple du contenu texte, des éléments de navigation, des formulaires, des listes, des images … Ce sont ces éléments que vous devez maintenant décrire sur votre maquette. Vous devez connaître la taille précise en pixel de ces éléments, décrire visuellement et par écrit le fonctionnement et les différents états des éléments fonctionnels tel que les menus où les formulaires.

Une réflexion approfondie doit être entamée sur le vocabulaire des rubriques, des titres, des liens, des libellés de bouton, des champs de formulaire, des messages d’erreurs … Pour le corps du texte, si possible utilisez du vrai texte, celui qui sera utilisé pour le site, à défaut utilisez les « Lorem ipsum ».

Vous devez également être attentif à décrire l’apparence des objets dans leurs différents états :

Pour les éléments cliquables quel sera leur aspect à l’état nominal, survolé, activé.

Pour le workflow d’un panier d’achat quel sera l’apparence des différents boutons.

Toutes ces descriptions vont permettre de faciliter le travail des intégrateurs, des développeurs et des graphistes en levant les ambigüités.

Exemple de wireframes de la page d’accueil du thème WordPress « Enjoy » (en cours de réalisation)

Comme pour le zoning, l’établissement des wireframes se concrétise par la réalisation de livrables qui seront communiqués au client afin de débattre, corriger puis valider la conception des pages du site avant de passer au design graphique.

Conclusion

L’erreur classique est de vouloir se précipiter sur l’aspect graphique des pages du site sans porter attention à l’ergonomie et à la conception de la mise en page. Cette erreur se paye généralement en retours successifs qui couterons chère en temps et en argent. Les étapes de zoning et wireframe sont donc indispensables dans le process logique de la construction d’un site internet et il faut y porter une attention particulière. Cela sera d’autant plus vrai que le projet sera important.

Travailler avec le client et l’équipe projet à partir de ce type de documents (zoning, wireframe) permet de se concentrer sur le fond (fonctionnalités, interactions, contenus) sans se laisser distraire par la forme (design).

Sources :

Ouvrage : Ergonomie web, pour des sites efficaces – Amélie Boucher – Ed. Eyrolles

Quelques rappels de base

Pour se rafraichir la mémoire et aborder le sujet de l’harmonie des couleurs, voici un certain nombre de définitions issus de Wikipédia qu’il me semble important de connaitre :

La couleur
La couleur est la perception par l’œil d’une ou plusieurs fréquences d’ondes lumineuses, avec une (ou des) amplitude(s) donnée(s).

Pour simplifier je dirais que la couleur n’existe pas sans lumière. Celle-ci est composée de plusieurs ondes. L’oeil humain (le récepteur sensible à ces ondes) génère un message nerveux que le cerveau interprète par une couleur. Notez que l’oeil humain n’est pas sensible à toutes les ondes qui composent la lumière.

Selon la technique utilisée pour produire de la couleur nous distinguerons 2 types de synthèse :

La synthèse additive
La synthèse additive est l’opération consistant à combiner la lumière de plusieurs sources émettrices colorées afin d’obtenir une nouvelle couleur.

En synthèse additive, les couleurs primaires généralement utilisées sont au nombre de trois : le rouge, le vert et le bleu (RVB ou RGB).

• - l’addition de ces trois couleurs donne du blanc.
• - l’absence de couleur donne du noir.

La synthèse additive est le principe de composition des couleurs utilisées notamment dans les écrans cathodiques, les écrans LCD et les vidéoprojecteurs tri-tubes.

La synthèse soustractive
La synthèse soustractive est l’opération consistant à combiner l’effet d’absorption de plusieurs couleurs afin d’en obtenir une nouvelle.

Par exemple, la superposition sur une surface blanche de deux filtres colorés, l’un jaune et l’autre bleu, permet d’obtenir du vert.

Le terme soustractif vient du fait qu’un objet coloré soustrait (absorbe) une partie de la lumière incidente. De fait, une couleur obtenue par synthèse soustractive de plusieurs autres sera nécessairement plus sombre qu’elles.

En synthèse soustractive, les couleurs primaires généralement utilisées sont au nombre de trois : le cyan, le jaune et le magenta

• - l’addition de ces trois couleurs donne du noir.
• - l’absence de couleur est le blanc.

La synthèse soustractive est le principe qui régente le mélange de pigments colorés en peinture (et notamment en aquarelle), en impression trichromique ou quadrichromique, ainsi qu’en impression papier pour la photographie couleur.

En imprimerie, on ajoute le noir aux trois couleurs de base pour plusieurs raisons: économie d’encres (une seule couleur au lieu de trois, et de surcroît l’une des moins chères à fabriquer), amélioration des contrastes d’images et de texte, et pureté du noir. En effet, la qualité du noir composé par mélange des trois couleurs primaires est intimement lié à la pureté des pigments de base, et il est par cette méthode très difficile d’obtenir une noir neutre.

Le cercle chromatique

Un cercle chromatique est une représentation circulaire des couleurs. Celles-ci sont ordonnées comme au sein d’un arc-en-ciel, la fermeture du cercle s’effectuant par une transition du rouge au violet via le magenta.

L’image de gauche nous montre un cercle chromatique du système additif.

L’intérêt du cercle chromatique réside dans ses caractéristiques :

• - les couleurs primaires sont situées à 120° les unes des autres.
• - les couleurs secondaires alternent avec les couleurs primaires et sont situées à 120° les unes des autres.
• - la complémentaire d’une couleur lui est diamétralement opposée sur le cercle.
• - l’apparence du cercle dépend des couleurs primaires choisies.
• - le cercle est indépendant du type de synthèse considéré (additive ou soustractive), seul le rôle des couleurs change.

Les couleurs primaires

Les couleurs primaires sont au nombre de trois. Pour la synthèse additive ce sont le rouge, le vert et le bleu. Pour la synthèse soustractive il s’agit du magenta, du cyan et du jaune.

L’image de gauche nous montre les couleurs primaires d’un cercle chromatique du système additif.

Par couleur primaire on entend couleur faisant partie d’un ensemble qui par combinaison permettent de générer l’ensemble des couleurs perceptible par l’œil humain.

Les couleurs secondaires

Une couleur secondaire est une couleur obtenue par le mélange en quantité égale de deux couleurs primaires.

L’image de gauche nous montre les couleurs secondaires d’un cercle chromatique du système additif. Il s’agit du Magenta, du Cyan et du Jaune. Dans la synthèse soustractive il s’agirait du rouge, du vert et du bleue (qui sont les couleurs primaires du système additif).

Les couleurs tertiaires

Une couleur tertiaire est une couleur obtenue par le mélange en quantité égale d’une couleur primaire et d’une couleur secondaire voisine c’est à dire consécutive sur le cercle chromatique.

L’image de gauche nous montre les couleurs tertiaires d’un cercle chromatique du système additif. Les couleurs tertiaires sont au nombre de six.


Les couleurs complémentaires
Une couleur complémentaire est la couleur opposée à une autre sur le cercle chromatique. On définit deux couleurs comme complémentaires si mélangées ensemble, elle produisent un gris.

Le modèle TSV : Teinte, Saturation, Valeur
Le modèle TSV est un espace colorimétrique, défini en fonction de trois composantes :

- La teinte : c’est le type de couleur ou tonalité chromatique (comme rouge, bleu, jaune…), la valeur varie entre 0 et 360, mais est parfois normalisée en 0–100 %.
Ne pas confondre la « teinte » (la couleur) et le « ton » d’une couleur qui considère celle-ci du point de vue de son intensité lumineuse (valeur) et de son degré de saturation.

- La saturation : c’est la pureté de la couleur, plus la pureté augmente plus la couleur est vive. Plus la saturation baisse plus la couleur est fade et se rapproche du gris. Une couleur est désaturée si elle contient plus ou moins de gris neutre ou de sa couleur complémentaire. La saturation varie entre 0 et 100 %.

- La valeur : c’est la brillance, la luminosité de la couleur, la quantité de lumière transmise par la surface. Plus la valeur augmente, plus la couleur est franche. Plus la valeur diminue, plus la couleur s’assombrit jusqu’au noir. Elle varie entre 0 et 100%.
A noter que deux couleurs pures différentes n’ont pas la même clarté. Le jaune est la couleur la plus clair du cercle chromatique et le violet la plus sombre.

Le modèle TSV est particulièrement utilisé dans les applications graphiques. La Teinte est représentée par une région circulaire; un triangle séparé peut être utilisé pour représenter la Saturation et la Valeur. Typiquement, l’axe vertical du triangle représente la Saturation, alors que l’axe horizontal représente la Valeur. En informatique graphique, il est courant de représenter chaque canal de couleur par un entier entre 0 et 255 plutôt que par un réel entre 0 et 1. Encodé de cette manière, chaque couleur TSV a un équivalent RVB. Pourtant, l’inverse n’est pas vrai. Certaines couleurs RVB n’ont pas d’équivalent TSV. En fait, seulement 1/256e des couleurs RVB sont ‘disponibles’ en TSV, ce qui élimine effectivement un canal de contrôle pour l’utilisateur artiste.

Camaïeu
Un ton est, théoriquement, l’ensemble des couleurs obtenues par toutes les modifications d’une couleur pure que l’on peut réaliser avec des gris neutres (désaturation), du blanc (éclaircissement), du noir (assombrissement). Les différents tons d’une même couleur sont appelés « Camaïeu ». Camaïeu de rouge, de vert … Voir les accords monochromatiques.

Le langage des couleurs

La température des couleurs

La roue chromatique peut être divisée en 2 ensembles distincts (cf image) regroupant d’un côté un groupe de couleurs dites « chaudes » de l’autre un groupe de couleurs dites « froides »

Il semble que notre organisme soit sensible à la teinte des couleurs qui l’entoure. Une étude médicale à par exemple montré que la perception du vert bleuté ralentit la circulation sanguine alors que le rouge orangé l’active.

Il faut en tenir compte, on évitera ainsi d’utiliser le rouge pour un site de thalassothérapie si le message à faire passer est la quiétude et le repos.

Plus généralement :

Les couleurs chaudes suggèrent la proximité, l’énergie, la vivacité.

Les couleurs froides suggèrent l’éloignement, l’apaisement, le calme.

L’effet psychologique et la symbolique

C’est un sujet qui répond d’avantage de la subjectivité que de règles établis. En effet la symbolique des couleurs et les effets psychologiques ou sensations qu’elles provoquent diffèrent selon l’historique personnel des individus, la culture et l’époque.

Cependant des généralités semblent se dégager pour une majorité de personnes appartenant à une même culture dans une époque donnée.

Voici quelques exemples d’interprétation des couleurs qui, je le rappel, ne sont pas des règles absolues.

• - Paint Café (symbolique)
• - Paint Café (psychologie)
• - Dezign Box
• - Yellow Pimento

L’influence des couleurs entre elles

Les couleurs peuvent se faire concurrence entre elles si elles sont utilisées à valeurs ou à surfaces égales dans un design. L’oeil du spectateur peut alors se perdre en sautant d’une couleur à l’autre.

Si l’on souhaite réaliser un design psychédélique pour un événement musical par exemple, en privilégiant l’aspect graphique, ce n’est pas grave. Par contre si vous souhaitez conduire le regard de l’internaute vers des zones importantes de votre design, mieux vaut choisir parmi les couleurs de votre composition celle qui sera dominante (c’est à dire celle qui va couvrir la plus grande surface), celle qui sera tonique (celle qui créera de l’emphase et sera utilisée pour la plus petite surface) et les autres de moindre importance.

Pour éviter la concurrence des couleurs, la couleur dominante sera fortement atténuée soit en la désaturant, soit en modifiant sa valeur (par éclaircissement ou par assombrissement).

La couleur tonique sera utilisée pure et bien saturée.

Les autres couleurs, si il en a, seront moyennement atténuées par désaturation ou en jouant sur la valeur (luminosité).

Harmonie : techniques de base

Je vais, dans ce chapitre, énumérer des techniques qui utilisent la roue chromatique. Le nom des techniques sera traduit en anglais pour que vous puissiez faire le rapprochement avec les libellés utilisés dans les applications graphiques qui parfois sont en anglais. Chaque technique sera accompagnée d’une image illustrant le type de combinaison décrit sur une roue chromatique. Rassurez vous, un chapitre sur les outils vous proposera quelques ressources pour vous aider à réaliser ces types d’harmonies plus facilement. Cependant pour utiliser ces outils au mieux il est important de connaître ces techniques de base.

Notez que par simplification, nous nous basons ici sur une roue chromatique de 12 teintes (3 primaires, 3 secondaires, 6 tertiaires ) pour expliquer les techniques de base. Toutes ces règles sont bien sure transposables sur une roue chromatique complète qui fournit toutes les nuances de teinte. Comme le webdesign s’apprécie généralement sur un écran, j’utiliserai pour mes exemples une roue chromatique de la synthèse additive.

Composition monochromatique (Monochromatic)

Pour obtenir une composition monochromatique il suffit de choisir une teinte unique puis la décliner soit en :

- La désaturant progressivement (ajout progressif de gris neutre).
- En l’éclaircissant progressivement (ajout progressif de blanc).
- L’assombrissant progressivement (ajout progressif de noir).

On peut également combiner désaturation et éclaircissement (ajout de gris neutre + blanc = gris clair) ou assombrissement (ajout de gris neutre + noir = gris foncé), cela aboutit à une composition monochromatique plus contrasté, avec un peu plus de punch.

Les compositions monochromatiques sont aussi appelées « camaïeu ». Elles donnent des contrastes de couleur dit « clair-obscur »

Les compositions monochromatiques permettent des designs sobres et élégants.

Composition analogue double, triple (Analogous)

La composition analogue double (2 teintes) ou triple (3 teintes) est composée de teintes voisines sur la roue chromatique.

Ce type de composition fonctionne généralement bien et est plaisant à regarder. Elles donnent des designs où règne la sérénité, le confort, l’harmonie. On rencontre souvent ce type de composition de couleurs dans la nature.

La composition analogue DOUBLE est composée de deux teintes.

Il existe 3 formules :

- Primaire –> Secondaire , les 2 teintes sont voisines mais séparées par une couleur tertiaire.
Cet accord est souvent utilisé en communication visuelle pour les logos par exemple.

- Primaire -> Tertiaire , les 2 teintes sont directement voisines .

- Secondaire -> Tertiaire , les 2 teintes sont directement voisines .

La composition analogue TRIPLE est composée de trois teintes.

Il existe 5 formules :

- Secondaire –> Primaire <-- Secondaire, les 3 teintes sont voisines mais séparées par une couleur tertiaires.

- Primaire --> Secondaire <-- Primaire , les 3 teintes sont voisines mais séparées par une couleur tertiaires.

- Tertiaire -> Primaire <- Tertiaire , les 3 teintes sont directement voisines.

- Tertiaire -> Secondaire <- Tertiaire , les 3 teintes sont directement voisines.

- Primaire -> Tertiaire <- Secondaire , les 3 teintes sont directement voisines.

Composition complémentaire (Complements)

La composition complémentaire s’obtient en choisissant deux teintes diamétralement opposées sur le cercle chromatique.

L’important contraste entre deux couleurs complémentaires créer un environnement vibrant surtout à pleine saturation. Ce type d’arrangement peut être délicat à manipuler à forte dose, mais fonctionne bien si vous voulez faire ressortir quelque chose. Évitez les couleurs complémentaires pour le texte.

Il existe 2 formules :

- Primaire <> Secondaire (diamétralement opposée)

- Tertiaire <> Tertiaire (diamétralement opposée)

Si vous avez une couleur dominante et une couleur tonique dans votre design, dans ce type de composition, l’une des deux couleurs joue le rôle de dominante et l’autre de tonique.

Composition accords isocèles (Split-complements)

Les compositions accords isocèles sont obtenues en choisissant 3 teintes sur la roue chromatique formant un triangle isocèle. Les teintes qui forment la base sont voisines mais séparées d’une teinte.

Ce type de composition a le même fort contraste visuel que les compositions complémentaires mais avec moins de tension. C’est est un bon choix pour débuter car facile à réaliser.

Il existe 3 formules : (base / base > sommet … du triangle isocèle)

- Tertiaire / Tertiaire > Primaire

- Tertiaire / Tertiaire > Secondaire

- Primaire / Secondaire > Tertiaire

Votre tonique sera la couleur qui forme le sommet du triangle, la dominante l’une des deux autres.

Composition accords équilatéraux (Triadic)

Les compositions accords équilatéraux s’obtiennent comme les isocèles mais le triangle formé est équilatéral. Les 3 teintes sont séparées par 3 autres sur le cercle chromatique.

Ce type de composition à tendance à donner une ambiance assez vibrante même si l’on utilise des versions de teintes désaturées ou éclaircies. Pour réussir l’harmonie d’une composition accord équilatéral les couleurs doivent être soigneusement équilibrées si elles sont utilisées pures.

Il existe 3 formules :

- Primaire / Primaire / Primaire

- Secondaire / Secondaire / Secondaire

- Tertiaire / Tertiaire / Tertiaire

Ces formules fournissent trois teintes, soit :

- Une couleur chaude et deux couleurs froides, la tonique sera alors la couleur chaude, la dominante une des deux couleurs froides.

- Une couleur froide et deux couleurs chaudes, la tonique sera alors la couleur froide, la dominante une des deux couleurs chaudes.

Composition analogue double + 1 complémentaire (Analogous 2 + Complements)

La composition analogue double + 1 complémentaire s’obtient en choisissant 2 teintes voisines et une complémentaire de l’une des deux teintes.

Il existe 6 formules : (-> adjacentes; <> opposées)

- Primaire -> Secondaire <> Primaire

- Secondaire -> Primaire <> Secondaire

- Primaire -> Tertiaire <> Tertiaire

- Tertiaire -> Primaire <> Secondaire

- Secondaire -> Tertiaire <> Tertiaire

- Tertiaire -> Secondaire <> Primaire

Dans ces formules la tonique sera la couleur complémentaire (position 3 de la formule) et la dominante sera la couleur opposée à la complémentaire (position 2 de la formule).

Composition 4 tons en rectangle (Tetradic)

La composition 4 tons en rectangle s’obtient en choisissant 4 teintes sur le cercle chromatique formant un rectangle. Cela nous donne une paire de couleurs complémentaires.

Ce type de composition vous offre beaucoup de possibilités de variation et fonctionne mieux si vous laissez l’une d’entre elle dominer.

Il existe 2 formules :

- Primaire / Primaire / Secondaire / Secondaire

- Tertiaire / Tertiaire / Tertiaire / Tertiaire

Ces formules donnent des compositions de 2 couleurs froides et 2 couleurs chaudes.
La dominante sera l’une des quatres couleurs au choix, la tonique sera la complémentaire de la dominante choisie.

Composition 4 tons en carré (Square)

La composition 4 tons en carré s’obtient en choisissant 4 teintes sur le cercle chromatique formant un carré.

Ce type de composition vous offre beaucoup de possibilités de variation et fonctionne mieux si vous laissez l’une d’entre elle dominer.

Il existe 1 formule :

Primaire / Tertiaire / Secondaire / Tertiaire

La dominante sera l’une des quatres couleurs au choix, la tonique sera la complémentaire de la dominante choisie.

Composition analogue triple + 1 complémentaire (Analogous 3 + Complements)

La composition analogue triple + 1 complémentaire s’obtient en choisissant 4 teintes sur le cercle chromatique. 3 teintes voisines + la complémentaire de la couleur centrale.

Ce type de composition vous offre beaucoup de possibilités de variation et fonctionne mieux si vous laissez l’une d’entre elle dominer.

Il existe 7 formules :

- Tertiaire -> (Primaire <> Secondaire) <- Tertiaire

- Tertiaire -> Primaire -> (Tertiaire <> Tertiaire)

- Primaire -> (Secondaire <> Primaire) <- Tertiaire

- Tertiaire -> Secondaire -> (Tertiaire <> Tertiaire)

- Primaire -> (Tertiaire <> Tertiaire) <- Secondaire

- Secondaire -> Tertiaire -> (Primaire <> Secondaire)

- Primaire -> Tertiaire -> (Secondaire <> Primaire)

La tonique sera la couleur complémentaire et la dominante la couleur opposée à la complémentaire.

Composition zone d’influence d’une couleur primaire

Une composition zone d’influence d’une couleur primaire est un accord de 7 couleurs (1 couleur primaire, 2 couleurs secondaires et 4 couleurs tertiaires). Son emploi est très limité en webdesign car l’utilisation de 4 teintes est souvent un maximum. On l’utilise d’avantage dans la décoration de bâtiments. Cependant il est intéressant de la connaître c’est pourquoi j’en parle rapidement ici.

Sur une roue chromatique simplifiée comme celle que l’on utilise dans cet article, 3 compositions de ce type peuvent être extraites. Pour cela il suffit de prendre une couleur primaire et les trois couleurs adjacentes de part et d’autre de celle-ci. On obtient donc 3 compositions avec une zone d’influence soit du rouge, soit du vert, soit du bleu. (cf image, composition zone d’influence du bleu)

Pour une harmonie réussie, mieux vaut respecter l’éloignement des couleurs par rapport à la primaire.

Utiliser une image

La méthode de la roue chromatique n’est pas la seule pour obtenir une harmonie de couleurs. Si votre client vous propose un logo ou si vous partez d’une image qui aura un poids important dans votre design, vous pourrez vous en inspirer pour en extraire une palette de couleur.

Soit vous utilisez un outil pipette et allez chercher les teintes qui vous plaisent dans l’image, soit vous utilisez un outil en ligne de type Pic2Color qui vous extrait directement la palette de couleur de votre image.

Pour mieux comprendre cette technique, je vous conseil l’article bien illustré de Dave Shea sur le site 24ways.org.

Des outils pour vous aider

Il existe sur le web de nombreux outils qui vous aiderons à composer votre palette de couleur pour vos futurs design.

Roues chromatiques et compositions

• - Infinisedesign.net
• - Snook : pour vérifier contraste entre background et texte
• - Genopal
• - Color Jack

Palettes prêts à l’emploi

• - Daily Color Scheme
• - Kuler d’Adobe
• - Colour Lovers (mon préféré !)

Application Linux

• - Agave Color Schemer

Conclusion

Pour concevoir un design web qui fonctionne, il faut savoir choisir une composition de couleurs harmonieuses afin d’établir une charte graphique agréable à regarder. Mais est ce une condition suffisante ? Non, un design web réussi c’est aussi un design qui aide à transmettre un message, aide l’oeil à trouver l’information, met le contenu en valeur, ne laisse pas votre lecteur indifférent. Soigner le design de votre site c’est aussi soigner votre image, que vous soyez une société, une organisation, une association, un indépendant …

Mes sources

Ouvrages :

• - La couleur et ses accords – Robert Montchaud – Editions Fleurus

Sites web :

• - paintcafe.com
• - tigercolor.com
• - pourpre.com
• - Wikipédia