Mis à jour le mercredi 23 août 2017
  • 8 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Maitrisez les règles de composition

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Appliquez le principe du "less is more"

Le design consiste à rendre les objets et leur usage plus simples.

On pourrait croire qu'il est plus aisé de faire quelque chose de simple. Mais on a tort ! 😱

C'est exactement l'inverse…

« Simplicité de forme ne signifie pas nécessairement simplicité de l’expérience. »

- Robert Morris

Il est plus difficile de faire simple que de faire compliqué tout simplement parce que :

  • C'est facile d'ajouter des choses dans tous les sens.

  • C'est dur de choisir quoi enlever pour garder l'essentiel.

Faites simple, et n'ayez pas peur du vide

Pour faire simple, il faut :

  1. Comprendre l'essence d'un message, d'une intention ou d'un usage.

  2. Supprimer tout ce qui ne sert à rien (= n'aide pas mieux à comprendre l'essentiel) et rajoute du bruit visuel (= distrait, accapare l'attention).

  3. Mettre l'essentiel en avant, le rendre immédiatement visible/lisible.

L'espace, le vide dans un design graphique c'est bien ! C'est une bonne chose. 😇

N'ayez donc pas peur d'en laisser. Le design visuel doit être aéré ; il doit laisser respirer.

Une seule règle donc : concevez avec modération, concevez équilibré. 🍰

En faire trop, rajouter des fioritures par-ci par-là pour faire joli… cela ne sert à rien et cela détourne l'attention des individus sur des petits détails sans importance ; ce qui empêche de voir l'essentiel.

Faites attention à l'espacement et à l'alignement

Pour laisser place à l'essentiel, vous l'avez compris, il faut faire de la place…

Quand vous concevez une slide (ou autre type de document graphique), n'ayez pas peur de laisser de l'espace entre les objets/images ou le texte comme le fait Apple sur son site internet par exemple.

Une ligne de texte n'est pas censée prendre toute la largeur d'une page, et ce même si elle est longue : revenez à la ligne, découpez la phase, et laissez ce que l'on appelle du "padding" en anglais (marge, bordure, espacement).

Les éléments graphiques qui composent un document ne doivent pas avoir l'air d'avoir été disposés au hasard…

Imaginez que votre canevas (votre espace de création, de conception) sur lequel vous allez mettre votre contenu, comporte des lignes invisibles, un quadrillage (comme vous pouvez en mettre dans Photoshop, Illustrator, ou Indesign).

Ensuite, vous n'avez plus qu'à placer le contenu de façon adéquate.

Cela veut dire deux choses :

  1. Alignez les éléments entre eux : soit vous centrez, soit vous alignez sur un côté, mais ne faites pas les deux, car cela casse l'impression d'unité et d'harmonie

  2. Egalisez les espacements et respectez une symétrie.

Servez-vous de la règle des tiers

Par ailleurs, vous pouvez vous inspirer de la "règle des tiers" en photographie.

La règle des tiers c'est le fait de découper mentalement une image en 9, créant ainsi des tiers sur sa longueur et sa largeur. Cela vous permet de composer une image, en plaçant les éléments importants le long des lignes verticales et/ou horizontales, voire à leurs intersections.

Moondigger - Wikimedia Commons - CC BY-SA 2.5
Moondigger - Wikimedia Commons - CC BY-SA 2.5

Comme vous pouvez le voir sur cette photo, le photographe a pris soin de placer l'horizon sur une ligne horizontale, et de placer l'arbre sur une ligne verticale. Aussi, il a placé le point fort de l'image - l'arbre - sur une intersection.

C'est la même chose en design visuel, quand vous composez, il est intéressant de placer le contenu (texte et image) selon cette règle.

"La raison principale pour observer la règle des tiers est de décourager le placement du sujet au centre et de proposer des solutions d'organisation de l'image plus variées."

- La règle des tiers (Wikipédia)

Teeks99 - Wikimedia Commons - CC BY-SA 3.0
Avant/Après par Teeks99 - Wikimedia Commons - CC BY-SA 3.0

Cela permet d'aboutir à des visuels beaucoup mieux équilibrés et plus élégants.

Pourquoi ?

Cela plait naturellement à l'oeil et c'est plus agréable à regarder parce que notre cerveau capte cette singularité… Et oui, cette règle fait référence au nombre d'or (les proportions parfaites), cela a trait à ce que nous percevons comme beau dans un visage ou un paysage… 🙃 

Servez-vous des bénéfices du contraste

Le contraste en design visuel est très important car il permet de mettre l'information en avant, de rendre l'information lisible de loin.

C'est le cas typique de certains logos comme celui d'Ikea qui ont des couleurs qui s'opposent et l'utilisent jusqu'au bout des ongles : 

Kirakiraouji - Wikimedia Commons - CC BY-SA 3.0
Kirakiraouji - Wikimedia Commons - CC BY-SA 3.0

"Le contraste est l'un des concepts de composition qui recèle le plus de potentiel parce que n'importe quel élément peut se contraster à un autre. Vous pouvez établir toutes sortes de contrastes : par la manipulation de l'espace (vide et plein), par le choix des couleurs (sombre et clair, chaud et froid), par la mise en forme du texte (gras ou normal), par la position des éléments (haut et bas), etc."

- Garr Reynolds

En effet, le contraste, vous permet de donner du relief à des éléments de votre composition.

De plus, pour un oeil externe, cela permet de comprendre et trouver l'information plus rapidement.

Inspirez-vous du 'print' et du web

C'est pour cela que j'observe très attentivement les sollicitations visuelles autour de moi en termes de création print (impression) ou web (numérique) : magazines, affiches, publicités, blogs, posters, etc.

Et quand j'aime quelque chose dans un visuel, une image, une slide, chaque fois je me pose la question de savoir :

  • Qu'est ce qui retient mon attention dans cette image ?

  • Comment sa composition m'amène à concentrer mon regard ?

  • Pourquoi est-ce que je trouve cela beau ?

… Ou encore, quand je regarde une publicité, la première page d'un magazine ou l'illustration d'un article dans un blog, je me demande :

  • Qu’est ce qui provoque mon envie de lire la suite ?

  • Pourquoi suis-je attrapée par cette image ?

Je m’inspire régulièrement de montages visuels, de répartition des éléments graphiques, des couleurs, des polices, des designs qui m’interpellent … et je les copie ! 🤔

C'est en observant et en essayant de reproduire ce que l'on a vu, que l'on apprend à bien composer. 

Parmi les choses qui m'inspirent :

  •  Les sites comme SoonSoonSoon ou Fast Company.

  • Les affiches sur le quai du métro parisien et la publicité liée au voyage.

  • Les "keynotes" aux conférences.

  • La présence sur les réseaux sociaux de marques créatives  et/ou start-up.

Exemple de certificat de réussite
Exemple de certificat de réussite