Le design, c’est l’esthétique fonctionnelle.

Ce n’est pas de l’art.

L’art n’a pas de fonction, il ne sert pas d’objectif, sinon celui de l’expression artistique, et de la recherche de la beauté.

Un bon design doit être fonctionnel, et répondre à un problème. Sa dimension esthétique n’est que secondaire.

A l’ère du numérique, comprendre les grands principes du design est essentiel pour tous ceux qui ont des messages à communiquer, des produits à concevoir, et des expériences à faire vivre.

Le culte minimaliste

Pourquoi les designers sont-ils tous obsédés par le minimalisme ?

Si la fonction première du design est de répondre à un problème de la façon la plus efficiente possible, alors tout le superflu empiète sur cette finalité.

Comme dit précédemment, tout ce qui n’est pas essentiel à un système crée de la surcharge, de la saturation et de la friction qui ralenti l’évolution du processus.

Cela est vrai pour l’ingénierie, mais aussi pour la navigation d’un site web, la lecture d’une affiche, ou la construction d’un argument.

L’erreur principale que font les designers débutants est, qu’étant créatif, ils veulent faire des choses très « originales », artistiques, et intriquées, mais ils oublient qu’ils sont là avant tout répondre à une problématique.

Réussir à faire des choses simples, c’est les réduire et les synthétiser pour en faciliter l’expression.

Regardez ce que des marques comme Apple, gourou du minimalisme, inspirent à leurs clients :

• la simplicité
• l’efficacité
• l’ergonomie
• la précision
• la sûreté

Dans un monde surchargé d’information, ce sont des qualités qui permettent d’y voir clair. 

Un autre exemple est celui du style scandinave.

Que vous inspire une telle architecture :

Ne produit-elle par le même effet que celui d’un jardin Zen ?

Autre exemple, concernant la temporalité, en quelle année pensez-vous que cette affiche a été réalisée ?

Ce poster (style Suisse) fait toujours très moderne alors qu’il a été réalisé en 1962.

Un autre avantage des designs minimalistes est qu’ils vieillissent très bien. Beaucoup de ces œuvres faites dans les années 50 semblent encore dater d’hier.

Pour les entreprises, une identité et un système de communication minimaliste est bien moins risqué que des choix extravagants. (La complexité risque de perdre le client et de se démoder vite.)

C’est également une philosophie de vie proche des spiritualités orientales.

Quand votre environnement est clair, net et bien rangé, votre esprit l’est également.

L’aménagement d’une pièce dicte sa fonction. Pareillement pour la forme des objets. Si ceux-ci sont chaotiques, ils perdent en efficience.

Les 5 grands principes

La qualité d’un design dépend donc de sa performance à exécuter l’objectif souhaité.

Une affiche doit clairement communiquer ses informations.

Un site web doit être optimisé, rapide et ergonomique.

Une brochure doit être facile à naviguer et intuitive…

Quoi que ce soit que vous designez, pensez en termes de fonctionnalité, d’efficience et de performance. Tous les principes qui suivent dépendent de cette finalité première.

Pour créer des visuels percutants, suivez prérequis suivant :

1.    La répétition

La répétition donne du rythme à vos compositions. Elle peut s’incarner par différentes formes :

• Couleurs
• Formes
• Styles
• Mots
• Gestes
• Sons

Nous sommes des créatures d’habitude. Une information répétée suffisamment devient inconsciente, et les associations deviennent automatiques.

Il suffit d’une couleur, d’un slogan, d’une expression pour nous rappeler l’identité d’une marque.

Le rouge de Coca-cola, le logo en forme de pomme, le orange de Easy Jet… tous sont reconnaissables instantanément car ils répètent depuis des dizaines d’années les mêmes codes de communication.

L’association chez le consommateur se fait en moins d’une seconde (comme le chien de Pavlov qui salive au son d’une cloche).

Imposer un rythme par la répétition permet aussi de le casser, et d’attirer l’attention.

Lorsque vous identifiez un pattern, vous n’y faite plus attention car il devient pour vous prévisible, sans nouvelles informations à vous apporter.

Le fait de briser le pattern induit un effet de surprise et d’alerte. Une nouvelle information vient d’apparaitre dans l’environnement, et vous devez catégorifier celle-ci pour revenir à un état homéostatique.

Sur un site web, par exemple, on trouve la répétition sous forme de typographie, de couleur, d’espacement, d’alignement… Vous pouvez interrompre ce pattern pour attirer l’attention sur un bouton « Commander». Pour ce faire, vous pouvez changer le bouton de couleur, de typo, de taille…

Vous pouvez le faire de façon subtile, ou de façon grossière comme sur les étiquettes de promotion jaune fluo (PROMO -20% !) que l’on trouve en supermarchés.

Par la répétition, vous créez aussi une familiarité avec votre audience.

Lorsque deux inconnus se rencontrent, une grande part de l’anxiété sociale vient du fait que, ne se connaissant pas, ils ne peuvent prédire leurs comportements.

Soyez prévisible si vous voulez que les gens vous fassent confiance.

L’évolution nous a programmé à détecter les patterns et les cycles. Nous avons un besoin profond d’harmonie, de symétrie et d’ordre. Ceux-ci régulent l’anxiété, car ils signalent que nous sommes en territoire connu et maîtrisé.

Le chaos, l’aléatoire et l’inconnus sont des phobies universelles.

C’est pour cela que l’on aime la répétition, la symétrie et l’harmonie.

2.   La hiérarchisation

Les structures hiérarchiques existent partout dans la nature.

Certains éléments sont plus importants que d’autres car ils se situent plus haut dans l’arborescence.

Pareillement dans vos systèmes de communication, certaines informations sont plus importantes que d’autres.

La taille et la position d’un élément graphique indique sa position dans la hiérarchie, mais aussi son ordre de lecture.

Les informations qui sont reliées entre elles doivent être groupées.

Sur une affiche de festival, par exemple, le nom du festival est toujours écrit en gros, la date en moyen, et les partenaires en petit. La taille du nom des artistes dépend de la notoriété de ceux-ci. Les blocs d’informations sont regroupés selon leurs thématiques.

La hiérarchisation peut se faire de différentes façons :

• Par la taille
• Par la position
• Par le contraste
• Par l’alignement
• Par la rupture d’un pattern
• Par le groupement
• Par les lignes de fuites
• Par la répétition

3.   L’ergonomie

L’ergonomie d’un visuel dépend de sa facilité de lecture, et est grandement relié à la hiérarchisation du contenu.

Sur une affiche, les éléments graphiques doivent guider le regard et faciliter la compréhension.

C’est pour cette raison qu’une des règles d’or du design est l’alignement.

Les lignes prolongent naturellement le regard, alors que les points le fixent à un endroit.

Vos designs doivent être fluides et harmonieux. La lecture doit être facile. Et l’œil doit toujours être redirigé sur le sujet par les lignes de fuites.

La focalisation du spectateur suit idéalement le chemin que vous avez tracé.

L’ensemble des éléments aboutissent à un tout cohérent, où rien n’est laissé au hasard.

Chaque aspect a une fonction qui sert l’objectif communicationnel.

Les bons designs donnent toujours une impression de « flow » et d’un mouvement dynamique entrainant.

4.    Le contraste

Sans contraste, il n’y a pas de vie. On ne peut distinguer la lumière sans l’obscurité.

Bien que les couleurs y jouent un rôle très important, le contraste peut s’exprimer de différentes façons :

• Sombre-clair
• Grand-petit
• Rapide-lent
• Ordonné-chaotique
• Grave-aigue
• Chaud-froid
• Surchargé-vide

Le contraste est ce qui rend vos compositions intéressantes. Il a pour effet de briser la monotonie, en apportant de la variation.

Comme énoncé plus haut, il peut servir à mettre en valeur un élément important, ou au contraire, à mettre entre parenthèse un élément secondaire.

Beaucoup de contraste attire l’œil. Peu de contraste fait l’effet inverse.

Si l’ensemble de la composition manque de contraste, alors elle perd en lisibilité.

Astuces : Vous pouvez vérifier les valeurs colorimétriques d’une image en la passant en noir et blanc. A partir de là, vous verrez plus facilement les zones claires et sombres, et pourrez ajuster en fonction les couleurs.

Une autre façon d’introduire du contraste est par les espaces négatifs (des espaces laissés vides). Ils permettent à vos compositions de respirer, chose que beaucoup de débutants négligent.

Les espaces négatifs mettent en valeur les espaces positifs par effet de contraste.

Attention car trop de contraste peut créer un effet agressif.

5.   L’imprévisibilité

« Apprends les règles comme un professionnel afin de pouvoir les briser comme un artiste ».

—  Pablo Picasso

Ce qui est trop prévisible devient ennuyant.

La surprise, au contraire, attire l’attention.

Plus haut, nous avons évoqué l’idée d’interruption de pattern. C’est exactement ce que l’on entend par l’imprévisibilité.

Celle-ci permet d’introduire de la vie et de l’originalité à vos compositions.

Dans un monde surchargé d’information, il est nécessaire attiser la curiosité du spectateur.

Oui, nous aimons les choses familières, mais nous aimons aussi la nouveauté et le fait de se faire surprendre.

C’est lorsque vous comprenez et maîtrisez les règles fondamentales que vous pouvez les briser intelligemment.

L’anticonformisme, l’audace, et la prise de risque, sont nécessaire pour sortir du lot et se distinguer du reste.

A vous d’imposer un rythme, et de le briser au bon endroit, pour un effet des plus percutant.

Pensez en termes de musique : si elle est trop répétitive, elle devient ennuyeuse. Si elle est trop chaotique, elle devient inaudible.

L’équilibre que vous cherchez est à la frontière entre l’ordre et le chaos.

Exemple 

Pour illustrer ces principes, voici un poster qui récapitule ces 5 grandes règles de design.

Ce poster utilise la répétition de plusieurs façons. Les couleurs se répètent, la typographie aussi, l’angle d’inclinaison est le même, et le mot « répétition » dupliqué crée un pattern visuel.

Tous ces éléments donnent du rythme à l’image de façon fluide et harmonieuse.

Les informations sont hiérarchisées selon leur importance et groupées par bloc. Le titre est plus gros que le reste du texte, et est à proximité des principes, ce qui indique leur lien. Les informations secondaires (le site web et la signature) sont placées à l’écart de la composition principale.

Au niveau de l’ergonomie, le « 5 » sert de point focal qui indique le début de la lecture. Les lignes aident et guident le regard dans la composition. Elles redirigent constamment l’œil vers le sujet principal. L’espace négatif aère la lecture qui s’appuie sur une typographie facilement lisible et bien contrastée.

Contraste qui est utilisé à plusieurs niveaux. D’abord par les couleurs qui ont des valeurs opposées, ensuite dans les écarts de taille de police. Il se manifeste aussi par l’épaisseur du mot « contraste », par la signature manuscrite, et la courbure du mot « imprévisible » s’opposant à l’angularité du reste de la composition. Notez également que l’espace en bas à gauche n’est pas blanc, mais gris, justement pour atténuer le contraste qui créerait une rupture trop violente

Les choses imprévisibles qui cassent le rythme et la monotonie sont l’inclinaison de la composition, la déconstruction et le réagencement du titre, la circularité du mot « imprévisible », et l’horizontalité de la signature.

Conclusion

Nous avons articulé et vu en action 5 principes, mais la liste pourrait s’allonger. Elle pourrait aussi se raccourcir puisque certaines règles se chevauchent.

La hiérarchisation sert à l’ergonomie ; et le contraste peut aider à la hiérarchisation, à l’ergonomie et introduire de la surprise…

Vous voyez qu’avec une typographie et deux couleurs, on peut déjà faire quelque chose d’esthétique et de fonctionnel.

Si vous voulez apprendre le design, commencez par faire simple et pratiquez en vous imposant des contraintes.

Contrairement à ce que l’on peut penser, être limité dans les médiums que l’on utilise stimule la créativité. Alors que trop de choix vous perd dans la complexité.

Entrainez-vous en reproduisant ce poster (ou un autre). Utiliser seulement une seule police et deux couleurs, puis commencez à expérimenter.

(Vous pouvez m’envoyer vos créations par email, pour les abonnés à la Newsletter, ou sur les réseaux.)

Vous verrez que même avec ces contraintes les options sont déjà quasiment infinies.

Une dernière chose : faite confiance à votre instinct et votre sens de l’esthétique.

Toutes ces règles de design sont des grandes lignes directrices qui ne doivent pas vous brider.

Parfois, vous agencez un élément d’une certaine manière qui brise toutes les règles, mais cela fonctionne même si vous ne pouvez articuler pourquoi.

Votre jugement esthétique, et votre sensibilité artistique, prime sur les principes logiques.

— Geoffroy