Cours 2 | Composition¶

Retour sur les exercices¶

Au besoin, demandez une rétroaction verbale 🗣️ sur votre travail

Comité Merch¶

J'ai besoin de 2 volontaires par groupe pour gérer le concours du logo 2026 !

Règle des tiers¶

La règle des tiers est un principe classique de photographie qui vise à positionner un sujet d'intérêt de façon harmonieuse. C'est un principe également très utile pour le design graphique.

Imaginons une grille 3 × 3 sur un visuel.
Placez les éléments importants soit sur les lignes, soit sur les intersections.

Vous avez cette option sur votre téléphone

Principes de design graphique¶

Contraste¶

Définition
Mettre des éléments en opposition (taille, formes, typo, texture, couleurs, styles).

À quoi ça sert ?
Attirer l’attention, clarifier la lecture et rendre un message plus “accrocheur”.

Exemples

Une petite analogie ⭐️

Une pièce silencieuse.
Un cri y sera extrêmement contrasté (opposition sonore).
Dans une pièce où tout le monde crie, plus personne ne se distingue.

Contraste et accessibilité

Le contraste de couleur peut nuire à la lisibilité s'il n'est pas assez prononcé, surtout pour du texte.

Alignement¶

Définition
Un fil invisible qui relie les éléments entre eux (marges, colonnes, grilles, axes).

À quoi ça sert ?
Donner une impression d’ordre, de rigueur et de cohérence. À l’inverse, on peut désaligner volontairement pour provoquer ou interpeller.

Exemples

Une petite analogie ⭐️

Imaginez une troupe de soldats au garde-à-vous.
Un soldat qui n'est pas aligné évoque un manque de rigueur.
Remplacez ce même soldat par un danseur contemporain : vous avez plutôt un effet de contraste !

Équilibre¶

Définition
Répartition du poids visuel dans une image (ce qui “pèse” : taille, contraste, couleur, densité, position, etc.).

À quoi ça sert ?
Créer un sentiment de stabilité et de confort visuel.

Exemples

Équilibre symétrique
Évoque le calme et la prévisibilité.

Équilibre asymétrique
Évoque le dynamisme et l'informel.

Super important en design

L'asymétrie ne signifie pas que les éléments sont jetés au hasard, ni que c'est déséquilibré ! On compense par le poids visuel plutôt que par une position miroir.

Hiérarchie¶

Définition
Organiser l’information pour indiquer quoi regarder en premier, puis en deuxième, etc.

À quoi ça sert ?
Aider la personne à comprendre rapidement, naviguer facilement et retenir l’essentiel.

Exemples

Couleur¶

Définition
La couleur est un langage visuel. Elle sert à communiquer, hiérarchiser et guider le regard.

À quoi ça sert ?
Communiquer une intention (ambiance, connotation), attirer l’attention, soutenir la hiérarchie et améliorer (ou nuire à) la lisibilité.

Exemple

La couleur peut servir de “code” (ex. : boutons, alertes, catégories) ou créer une émotion (ex. : luxe, danger, calme).

Le « vide »¶

Définition
Espace laissé volontairement autour des éléments (marges, espacements, zones non occupées).

À quoi ça sert ?
Laisser respirer, améliorer la lisibilité et mettre en valeur l’essentiel.

Exemples

Less is More

Espace négatif¶

Définition
Utiliser le “vide” pour faire apparaître une forme secondaire ou une idée cachée.

À quoi ça sert ?
Ajouter une seconde lecture, créer une métaphore, rendre un visuel plus mémorable.

Exemples

Proportion¶

Définition
Relation de taille entre les éléments (grands/petits, épais/fin, large/étroit).

À quoi ça sert ?
Créer du sens : importance, relation, confort visuel.
Pour qu'il y ait proportion (ou disproportion), il faut comparer un élément à un autre.

Exemples

Répétition¶

Définition
Réutiliser des éléments similaires/identiques (couleurs, formes, motifs, textures, typographies).

À quoi ça sert ?
Créer de la cohérence visuelle, renforcer une identité et installer un rythme agréable.

Exemples

Rythme¶

Définition
Cadence visuelle créée par la répétition et des variations (ex. : alternance, progression, regroupements).

À quoi ça sert ?
Guider l’œil et rendre la composition “vivante” sans la rendre chaotique.

Exemples

Mouvement¶

Définition
Organisation qui dirige le regard (directions, diagonales, courbes, flèches, séquences).

À quoi ça sert ?
Créer un parcours de lecture et une dynamique (ex. : du titre vers l’appel à l’action).

Exemples

Emphase¶

Définition
Mettre un élément en vedette : le point focal (ce que l’on veut que l’œil voie en premier).

À quoi ça sert ?
Éviter que tout “se batte” pour l’attention et rendre l’intention claire.

Exemples
On peut créer de l'emphase avec le contraste, la perspective, la subordination¹ et la position.

Proximité¶

Définition
Regrouper ce qui va ensemble et séparer ce qui est différent.

À quoi ça sert ?
Clarifier la structure, réduire la confusion, montrer des relations (groupes, sections, catégories).

Exemples

Unité¶

Définition
Donner l’impression que tout appartient au même système (style, règles, cohérence, harmonie).

À quoi ça sert ?
Renforcer la crédibilité, la clarté et l’identité visuelle (on “reconnaît” le système).

Exemples

Mini checklist de principes 🧠¶

Quand vous créez, corrigez ou améliorez un design, commencez par :

Hiérarchie : qu’est-ce qu’on voit en premier, en deuxième, etc. ?
Proximité : qu’est-ce qui va ensemble / qu’est-ce qui est séparé ?
Alignement : est-ce que le positionnement est efficace ?
Contraste : qu’est-ce qui ressort ?
Vide : est-ce que ça respire ? (surtout autour du texte)
Unité : est-ce que les styles sont cohérents ?

Figma¶

Tracé et remplissage¶

Usage d’images CC0 (ex. : Pexels.com)
Usage de vecteurs existants pour créer un pattern custom !
Paramètres avancés de contour

Vectoriel¶

Entrer ou quitter l'édition vectorielle : Enter
Manipulations de tracé (points d'ancrage, courbes Bézier)
Supprimer un point avec ++Shift+Del++
Opérations booléennes (Union, Soustraction, Intersection, etc.)

Exercices¶

Exercice - Vectoriel
Courbes de Bézier | method.ac

Exercice - Vectoriel
Opérations booléennes | method.ac

Exercice - Figma
Radio-Canada

Exercice - Figma
DIE

Devoir¶

Devoir - Figma
J'peux faire mieux que ça !

En art, la subordination consiste à mettre en valeur un élément central de l'image, en atténuant l'importance de l'ensemble. ↩