Faire des visuels corrects sans être designer
Grille, hiérarchie et contraste posés comme des contraintes vérifiables, puis un agent chargé de relever les écarts.
La plupart des visuels ratés ne le sont pas par manque de talent. Ils le sont parce que personne n'a décidé de règles avant de commencer. Trois polices différentes, six tailles de texte, des marges au jugé, un gris clair sur fond blanc parce que « ça fait discret ». Chaque décision prise isolément semble raisonnable, et l'ensemble donne quelque chose de brouillon.
La bonne nouvelle, c'est que la part du design qui produit ce brouillon est mécanique. Alignement, espacement, hiérarchie, contraste : ce sont des contraintes vérifiables, pas des questions de goût. Tu peux les poser une fois et t'y tenir, sans jamais avoir ouvert un livre de typographie.
Ce guide donne ces contraintes, puis montre comment faire relever les écarts par un agent au lieu de les chercher toi-même.
Avant de commencer
- Un visuel existant à corriger, ou un besoin précis (post, couverture, schéma)
- Un outil qui permet de fixer des valeurs numériques : marges, tailles, couleurs
- Un vérificateur de contraste, celui des outils de développement du navigateur suffit
1Poser une grille et ne plus en sortir
L'alignement est ce qui se voit en premier, même sans savoir le nommer. Un élément décalé de trois pixels donne une impression de négligence que personne ne sait expliquer.
La méthode la plus simple consiste à choisir une unité d'espacement et à n'utiliser que ses multiples. Prends 8 pixels : tes espacements deviennent 8, 16, 24, 32, 48, 64. Rien entre les deux. Ça élimine d'un coup les 13 px et les 27 px qui donnent l'air bricolé.
Deux règles complètent la grille :
- Aligne sur un seul axe. Si le texte est aligné à gauche, tout est aligné à gauche, y compris le titre et le bouton. Le centrage ne se mélange pas au calage à gauche dans le même bloc.
- Regroupe par la proximité. Un titre appartient à son paragraphe : mets 8 px entre eux et 48 px avant le bloc suivant. L'espace fait le regroupement, pas les traits de séparation.
La marge extérieure est plus grande qu'on ne croit
Le réflexe est de coller le contenu aux bords pour gagner de la place. Le résultat paraît étouffé. Une marge extérieure généreuse, plus large que le plus grand des espacements internes, fait presque tout le travail de respiration d'une composition.
2Trois niveaux de hiérarchie, pas plus
Une composition lisible se parcourt dans un ordre. Cet ordre se construit avec trois niveaux : ce qu'on lit en premier, ce qu'on lit ensuite, ce qu'on lit si on s'intéresse.
Le piège est de vouloir marquer chaque niveau avec plusieurs signaux à la fois. Un titre en gras, en grand, en majuscules, en couleur et souligné n'est pas cinq fois plus important : il est illisible. Un signal fort par niveau suffit, deux au maximum.
| Niveau | Signal |
|---|---|
| Principal | Grande taille, un seul par visuel |
| Secondaire | Taille moyenne, ou graisse marquée |
| Tertiaire | Taille du corps, couleur atténuée |
Pour les tailles, un rapport constant évite d'avoir à choisir. Multiplie par environ 1,5 à chaque niveau : 16, 24, 36. Trois valeurs, pas huit.
Sur les polices : une seule suffit dans la grande majorité des cas. Ses variantes de graisse te donnent déjà tous les contrastes utiles. Si tu en veux deux, prends-en deux franchement différentes, sinon l'écart ressemble à une erreur.
3Vérifier le contraste au lieu de le deviner
C'est le seul point du design visuel qui se mesure entièrement, et c'est celui qu'on rate le plus souvent. Un texte gris clair sur fond blanc est parfaitement lisible sur ton écran, à ta luminosité, avec tes yeux. Il ne l'est pas dehors, ni pour quelqu'un dont la vue baisse.
Les seuils des WCAG servent de référence même hors du web :
| Élément | Rapport de contraste minimal |
|---|---|
| Texte courant | 4,5:1 |
| Texte de grande taille, à partir de 18 pt, ou 14 pt en gras | 3:1 |
| Composants d'interface et éléments graphiques porteurs de sens | 3:1 |
Le rapport se calcule entre la couleur du texte et celle du fond directement derrière. Sur une photo, il n'y a pas de couleur de fond unique : c'est le cas où poser le texte sur un aplat, un bandeau semi-opaque ou une zone volontairement assombrie.
Le contraste ne se juge pas à l'œil
Un écran neuf, calibré et à pleine luminosité ment. Ouvre l'inspecteur du navigateur ou un vérificateur en ligne et lis le chiffre. C'est deux secondes, et c'est la correction qui améliore le plus un visuel amateur.
4Réduire avant d'ajouter
Quand un visuel ne fonctionne pas, le réflexe est d'ajouter : une icône, un dégradé, une ombre, un cadre. La correction efficace va presque toujours dans l'autre sens.
Une liste courte de choses à retirer en priorité :
- Les couleurs en trop. Une couleur d'accent, une couleur de texte, une couleur de fond. L'accent sert à une chose : ce qu'on veut que le regard trouve.
- Les cadres et les traits. Un espace blanc sépare aussi bien qu'une bordure, sans ajouter de bruit.
- Les ombres portées. Elles ne servent que si un élément doit paraître au-dessus d'un autre. Sinon, elles salissent.
- Le texte décoratif. Une phrase que personne ne lira occupe une place que le titre pourrait prendre.
5Faire critiquer le visuel par un agent
Un modèle multimodal ne va pas te dire si un visuel est beau, et sa réponse spontanée sur une image est en général un compliment poli. Il devient utile quand tu lui demandes des constats vérifiables plutôt qu'un avis.
La différence tient dans la formulation. Ne demande pas « qu'est-ce que tu en penses », demande une liste de faits.
Voici un visuel. Ne me dis pas s'il est reussi. Rends-moi quatre listes :
1. Les elements qui ne sont pas alignes entre eux, avec leur position.
2. Les paires texte / fond dont le contraste te parait insuffisant, avec
les couleurs que tu lis.
3. Les niveaux de hierarchie que tu distingues, dans l'ordre ou ton regard
les prend.
4. Ce que tu retirerais, avec une justification par element.
Si tu n'es pas sur d'une couleur, dis-le au lieu d'estimer.
Le point 3 est le plus révélateur. Si l'ordre annoncé par le modèle n'est pas celui que tu voulais, ta hiérarchie ne fonctionne pas, et tu le sais avant de montrer le visuel à qui que ce soit.
Les couleurs lues sur une image sont approximatives
Un modèle qui décrit une image estime les valeurs colorimétriques, il ne les mesure pas. Utilise sa réponse pour repérer les zones douteuses, puis vérifie les rapports de contraste avec un outil qui lit les vraies valeurs.
Quelques prompts pour aller plus loin
| Objectif | Prompt à adapter |
|---|---|
| Audit d'alignement | Sur ce visuel, liste les elements qui ne partagent pas le meme axe d'alignement. Donne leur position approximative. |
| Ordre de lecture | Decris dans quel ordre ton regard parcourt ce visuel, element par element. Ne commente pas l'esthetique. |
| Simplification | Propose trois elements a retirer de ce visuel, avec ce que chaque suppression fait gagner. |
| Échelle typographique | Propose trois tailles de texte a partir d'un corps de [TAILLE] px, avec un rapport constant, et dis a quel usage chacune correspond. |
| Palette | A partir de la couleur [HEX], propose une couleur de texte et une couleur de fond dont le contraste depasse 4.5:1. Donne les rapports calcules. |
| Déclinaison | Liste les adaptations necessaires pour passer ce visuel d'un format [A] a un format [B] sans recouper le texte. |
Tu as d’autres ressources comme ça ?
Ce que tu viens de lire est entièrement gratuit. Une nouvelle ressource part chaque semaine dans la newsletter : guides, modèles à copier et liens triés, sans compte à créer.
Me contacter
Une question, un projet, une envie de collaborer ? Écris-moi.
Cette page est en accès libre, n’hésite pas à la partager.