Leçon 1 sur 7 · 7 min
Crée quelque chose en deux minutes
Objectif:Conçois une affiche avant d’apprendre la moindre règle, puis découvre les règles que tu viens d’utiliser.
TON PREMIER ACTE CRÉATIF
uxuiopen.comLe Studio 4 a besoin d’une affiche pour sa Design Night. À toi de la faire. Change ce que tu veux et regarde les vérifications sous l’affiche.
Design Night
Vendredi · 19 h · Studio 4
Atelier gratuit en soirée. Apporte un ordi.
Je viens- ✓Le titre guide la lecture
- ✓Le texte est lisible (6.2:1)
- Plus c’est grand et gras, plus c’est lu en premier. C’est la hiérarchie.
- Plisse les yeux. Si rien ne ressort, rien ne guide.
- Le texte doit contraster avec son fond pour être lisible.
Ce que tu viens de faire porte un nom
Chaque affiche, chaque écran d’appli et chaque site est fait des mêmes quelques éléments. Une fois que tu sais les nommer, tu peux parler de design, briefer l’IA avec précision et repérer ce qui cloche.
Design Night
Ven · 19 h · Studio 4
Je viens123456- 1Titre : la seule chose que les gens doivent lire. Le plus grand, le plus gras, en premier.
- 2Infos pratiques : quand, où, quoi. Faciles à trouver, sans jamais concurrencer le titre.
- 3Image ou forme : elle donne l’ambiance et attire l’œil depuis l’autre bout de la pièce.
- 4Appel à l’action : ce que tu veux que les gens fassent ensuite. Placé là où l’œil termine sa course.
- 5Espace blanc : le vide n’est pas du gâchis. Il sépare les groupes et laisse respirer les éléments.
- 6Marges : une bordure de sécurité de chaque côté, pour que rien ne paraisse à l’étroit ou coupé.
Les designers appellent cet ordre de lecture la hiérarchie. Une bonne affiche décide de ce qu’on lit en premier, en deuxième et en troisième, pour que personne n’ait à le deviner. Voici le chemin que suit ton œil sur une affiche qui marche :
Design Night
Vendredi · 19 h · Studio 4
Atelier gratuit en soirée. Apporte un ordi.
Je viens- C’est quoi ? Le titre est le plus grand, donc on le lit en premier.
- Quand et où ? En gras et bien visible, donc on le trouve ensuite.
- Je fais quoi ? Le bouton vient en dernier, là où l’œil s’arrête.
- Tout le reste est plus discret, exprès.
La taille n’est pas le seul levier. La graisse (gras ou fin), la couleur et l’espace autour d’un élément attirent aussi l’œil. Utilises-en un ou deux exprès, pas tous à la fois.
Mots à connaître
- Hiérarchie
- L’ordre dans lequel les gens remarquent et lisent les éléments. Tu la contrôles avec la taille, la graisse, la couleur et la position.
- Contraste
- La différence entre deux choses : foncé sur clair, grand à côté de petit. Le contraste rend les choses lisibles et les fait ressortir.
- Espace blanc
- L’espace vide autour et entre les éléments. Il regroupe ce qui va ensemble et repose l’œil.
- Alignement
- Placer les éléments le long d’un même bord ou d’un même axe. Une mise en page alignée paraît calme et intentionnelle.
- Appel à l’action (CTA)
- Le bouton ou la ligne qui dit aux gens quoi faire ensuite : Je viens, Acheter, S’inscrire.
Entraîne maintenant ton œil. Laquelle de ces trois affiches se lit dans le bon ordre ? Active « Plisser les yeux » pour les flouter, comme si tu voyais une affiche depuis l’autre bout de la pièce.
Quelle affiche se lit dans le bon ordre ?
Trois tests à faire sur n’importe quel design
Le test des yeux plissés
Plisse les yeux ou recule d’un pas. Ce qui ressort encore, c’est ce qui guide. Si ce n’est pas l’élément le plus important, rends-le plus grand, plus gras ou plus vif.
Le test des cinq secondes
Montre le design à quelqu’un pendant cinq secondes, puis cache-le. Demande-lui à quoi il servait et ce qu’il fallait faire. S’il ne sait pas répondre, la hiérarchie ne marche pas encore.
Le test du téléphone
Réduis-le à la taille d’un écran de téléphone. Peux-tu encore lire le titre et la date ? La plupart des gens verront ton travail d’abord sur un téléphone.
À voir sur de vrais sites
Ouvre-les dans un nouvel onglet et plisse les yeux. Chacun a un premier, un deuxième et un troisième élément à regarder bien clairs.
GOV.UK
À remarquer
- Des mots simples et de grands titres. Très peu d’éléments se disputent ton attention.
- Une seule colonne, beaucoup d’espace. La hiérarchie vient de la taille et de la graisse, pas de la décoration.
- Un bon rappel que la clarté l’emporte sur l’astuce.
Stripe
À remarquer
- Un seul titre qui dit ce que fait le produit.
- Un bouton ressort plus que tout ce qui l’entoure.
- La couleur est réservée à ce qui compte le plus.
Crée une deuxième affiche, pour un autre événement
Reviens à l’affiche ci-dessus et refais-la pour « Café & Critique, samedi 10 h ». Change le titre, puis essaie au moins deux mises en page et deux jeux de couleurs avant de choisir.
- 1Tape le nouveau titre dans le créateur d’affiche.
- 2Essaie toutes les mises en page. Garde celle où le titre guide toujours quand tu plisses les yeux.
- 3Choisis des couleurs qui passent la vérification du contraste.
- 4Fais les trois tests sur ta version préférée.
- 5Partage ce que tu as choisi, et pourquoi, dans la discussion.
Sur ton affiche, la date et le titre ont la même taille. Que se passe-t-il ?
Un texte gris clair sur fond blanc te paraît élégant. Que dois-tu vérifier ?
À lire ensuite