100 astuces de graphiste pour des designs percutants

On a recensé les erreurs les plus communes en graphisme

‍

Cet article a généré 88 200 impressions l'année dernière sur LinkedIn.

J'ai alors constaté qu'il y avait un réel besoin d'aide en design graphique.

Des astuces simples, que nous utilisons au quotidien qui sont désormais des bases pour construire des visuels sur les réseaux sociaux et aussi pour les documents de présentation. J'ai choisis de réaliser un récapitulatif des erreurs les plus communes que je retrouve et qui impactent l'expérience de vos lecteurs.

Que vous soyez débutant ou designer aguerri, il existe des principes incontournables pour réussir vos mises en page. Nous avons rassemblé 100 astuces de mise en page classées par grands thèmes pour vous aider à améliorer vos designs imprimés ou numériques. Ces conseils concrets et actionnables couvrent la typographie, la mise en page en grille, l’usage des couleurs, la composition, la lisibilité, l’expérience utilisateur (UX), les aspects print vs web, ainsi que de nombreux détails bonus. Mettez-les en pratique pour obtenir des créations claires, esthétiques et efficaces.

‍

1. Typographie

‍

1. Limitez le nombre de polices utilisées idéalement pas plus de deux pour garder une cohérence visuelle.

1. Utilisez les variations d’une même police (graisse, italique, taille) au lieu de multiplier les polices pour établir la hiérarchie.

1. Établissez une hiérarchie typographique claire en définissant des styles distincts pour les titres, sous-titres et le texte courant.

1. Choisissez des polices adaptées au message et au ton de votre contenu (une police moderne pour un sujet tech, par exemple).

1. Assurez-vous que la police choisie pour le texte principal soit hautement lisible, même en plus petite taille.

1. Évitez les polices trop fantaisistes pour les longs textes afin de ne pas fatiguer le lecteur.

1. Ajustez l’espacement des lettres (kerning) pour les titres ou éléments larges afin d’obtenir un rendu visuel équilibré.

1. Mariez des polices qui s’harmonisent bien (par exemple, une police serif avec une sans-serif) pour donner du contraste tout en restant cohérent.

1. N’utilisez pas de longs passages de texte entièrement en majuscules, qui sont plus difficiles à lire.

1. Maintenez les mêmes polices et styles à travers tout le projet pour assurer une cohérence professionnelle.

1. Pour le web, privilégiez des polices web standard ou importez vos polices personnalisées pour garantir un affichage correct partout.

1. Utilisez le gras et l’italique de manière cohérente et modérée, uniquement pour mettre en valeur les informations importantes.

‍

2. Grille

‍

13. Utilisez une grille de colonnes pour concevoir la structure de votre mise en page dès le départ.

1. Alignez vos textes et images sur cette grille pour créer un ensemble ordonné et professionnel.

1. Définissez des marges et gouttières constantes afin d’assurer une disposition aérée et équilibrée.

1. Respectez des espacements identiques entre des éléments similaires pour renforcer l’harmonie visuelle.

1. Servez-vous des guides et repères dans votre logiciel de design pour un placement précis de chaque élément.
2. Employez une grille de ligne de base (baseline grid) pour aligner verticalement les textes sur plusieurs colonnes.

1. Contrôlez visuellement que les bords de vos blocs (textes, images) s’alignent bien les uns avec les autres.

1. Limitez le nombre d’axes d’alignement différents : trop de points d’alignement disparates peuvent créer une impression de désordre.

1. En web design, adoptez un système de grille flexible (par exemple une grille basée sur des incréments de 8px) pour s’adapter à tous les écrans.

1. N’hésitez pas à ajuster légèrement la position de certains éléments pour un alignement optique parfait, même si cela déroge à la grille de base.

1. Choisissez une composition symétrique ou asymétrique en vous appuyant sur la grille, selon l’effet recherché (équilibre classique vs dynamisme).

1. Masquez la grille temporairement pour vérifier que la mise en page reste esthétiquement équilibrée sans les repères visibles.

‍

‍

3. Couleurs

‍

25. Limitez le nombre de couleurs principales dans votre design (2 ou 3 tout au plus) pour éviter de distraire ou de surcharger le lecteur.

1. Utilisez une palette de couleurs prédéfinie pour assurer une harmonie visuelle (par exemple via des outils comme Adobe Color ou ColorHunt).

1. Assurez un contraste suffisant entre le texte et le fond afin de garantir une lecture facile et accessible.

1. Servez-vous de la couleur pour hiérarchiser l’information : une couleur d’accent peut mettre en avant les éléments importants.

1. Respectez la charte graphique existante ou l’identité visuelle de la marque en utilisant ses couleurs dominantes de manière cohérente.

1. Choisissez des couleurs en accord avec le message : par exemple, des teintes vives pour exprimer l’énergie ou des tons bleus pour la confiance.

1. Évitez d’associer des couleurs qui jurent ensemble (discordance visuelle) ou qui fatiguent les yeux.

1. Testez votre palette en niveaux de gris pour vérifier que les éléments restent distinguables sans la couleur (contraste de luminance).

1. Utilisez les couleurs vives ou fluorescentes avec parcimonie, afin qu’elles soulignent des points clés sans dominer tout le visuel.

1. Pensez à l’accessibilité : assurez-vous que les personnes daltoniennes pourront distinguer vos éléments (évitez de ne différencier que par la couleur).

1. Envisagez le médium final : en numérique, travaillez en RVB/hexadécimal, tandis qu’en print, convertissez vos couleurs en CMJN pour un rendu fidèle.

1. Considérez l’espace blanc (zones vides) comme une partie intégrante de votre palette : il met en valeur vos contenus et apporte de la légèreté.

‍

‍

4. Composition

‍

37. Définissez un point focal clair sur chaque page ou écran pour orienter immédiatement le regard du lecteur.

1. Créez une hiérarchie visuelle en jouant sur la taille, la couleur ou la typographie de vos éléments pour signaler leur importance relative.

1. Évitez de surcharger : laissez des espaces blancs pour donner de l’air et rendre la composition plus lisible.

1. Appliquez la règle des tiers pour placer vos éléments clés aux intersections de lignes fortes, et obtenir une mise en page harmonieuse.

1. Recherchez l’équilibre visuel : assurez-vous qu’aucune zone de la page n’attire toute l’attention au détriment des autres (balancez les éléments).

1. Regroupez les éléments liés entre eux et éloignez ceux qui ne le sont pas (principe de proximité) pour faciliter la compréhension.

1. Répétez certains éléments de design (couleurs, formes, styles) à travers votre mise en page pour créer une cohésion visuelle (principe de répétition).

1. Utilisez le contraste (de taille, de forme, de couleur) pour faire ressortir les éléments importants par rapport au reste.

1. Faites attention à l’alignement optique : ajustez manuellement certains éléments (par ex. un texte centré sous un cercle) pour un rendu visuellement centré.

1. Placez les images près des textes auxquels elles se rapportent pour renforcer le lien sémantique et la compréhension du message.

1. Tenez compte du sens de lecture naturel (en « Z » ou en « F » pour les pages web) afin de disposer les éléments dans l’ordre où l’œil les parcourt.

1. Soyez cohérent sur l’ensemble du projet : si vous avez plusieurs pages ou écrans, utilisez la même grille et une structure similaire pour chacun.

1. Expérimentez la superposition d’éléments (overlay) pour ajouter de la profondeur ou du dynamisme, tout en veillant à conserver une bonne lisibilité.

37. Simplifiez autant que possible : éliminez tout élément décoratif superflu afin de ne garder que les informations essentielles.

‍

5. Lisibilité

‍

51. Optez pour une taille de police suffisamment grande pour le confort de lecture (par exemple ~16 px sur le web, ou 10-12 pt en impression).

1. Limitez la longueur des lignes de texte à environ 60-70 caractères pour éviter la fatigue visuelle lors de la lecture.

1. Aérez vos paragraphes avec un interligne (espacement entre les lignes) d’au moins 1,5 fois la taille du texte pour améliorer la lisibilité.

1. Vérifiez le contraste texte/fond : un texte foncé sur fond clair (ou l’inverse) doit pouvoir se lire sans effort.

1. Privilégiez l’alignement à gauche pour les longs paragraphes (en français et langues similaires) afin de respecter le flux naturel de lecture.

1. Soyez prudent avec le texte justifié sur toute la largeur : il peut créer des espaces irréguliers, utilisez la césure automatique pour équilibrer si nécessaire.
2. Évitez de présenter un long bloc de texte sans aucune pause : fractionnez en paragraphes, listes ou utilisez des intertitres pour segmenter le contenu.

1. Utilisez des titres et sous-titres pour structurer vos textes et permettre une lecture en diagonale rapide par les lecteurs pressés.

1. Sur les supports numériques, assurez-vous que le texte reste lisible sur mobile en adaptant éventuellement la taille ou la disposition pour les petits écrans.

1. N’abusez pas des effets de style sur le texte (ombres portées, contours, clignotements) qui peuvent nuire à la clarté des mots.

1. Si possible, faites relire votre mise en page par un tiers afin de détecter d’éventuels problèmes de lisibilité ou des détails que vous auriez manqués.

1. Laissez suffisamment d’espace autour des blocs de texte (marges internes) pour que l’œil puisse isoler le texte et ne pas être distrait par le reste.

‍

‍

6. Expérience utilisateur (UX)

‍

63. Concevez votre mise en page en pensant d’abord à l’utilisateur final : les informations les plus importantes doivent être les plus faciles d’accès.

1. Mettez en évidence un appel à l’action (CTA) principal par page ou écran, avec un style visuel qui le démarque clairement (couleur, bouton).

1. Assurez-vous que la navigation soit intuitive et constante sur tout le support (menus placés au même endroit, intitulés clairs).

1. Utilisez des structures de mise en page familières (schémas classiques) pour ne pas dérouter l’utilisateur habitué à certaines conventions.

1. Gardez une cohérence de design entre les écrans/pages : les éléments interactifs (boutons, liens) doivent avoir le même style et comportement partout.

1. Pensez mobile-first ou responsive design : la mise en page doit rester claire et fonctionnelle sur mobile, tablette comme sur grand écran.

1. Priorisez le contenu en fonction des besoins de l’utilisateur : affichez en premier ce qui a le plus de valeur ou d’urgence pour lui.

1. Réduisez la charge cognitive en épurant visuellement vos pages : chaque élément doit avoir une raison d’être, sinon il peut être supprimé.

1. Prévoyez des zones cliquables larges pour les boutons et liens afin de faciliter l’interaction, surtout sur les écrans tactiles.

1. Distinguez visuellement les éléments cliquables des éléments statiques (par exemple en soulignant les liens ou en utilisant une couleur bien distincte pour les boutons).

1. Testez votre mise en page auprès de vrais utilisateurs ou de collègues pour identifier les points de confusion et les améliorer avant déploiement.

1. Tenez compte de l’accessibilité numérique : ajoutez des textes alternatifs aux images, assurez-vous que la navigation est possible au clavier et que les contrastes respectent les normes.

‍

7. Print vs Web

‍

75. Utilisez le mode colorimétrique adéquat : CMJN (CMYK) pour les documents à imprimer, et RVB (RGB/Hex) pour les contenus web, afin d’obtenir des couleurs fidèles sur chaque support

1. Adaptez la résolution de vos images : en impression, visez 300 DPI pour un rendu net ; sur le web, optimisez les images (taille en pixels et compression) pour garantir un chargement rapide.

1. Prévoyez un fond perdu (bleed) de 3 à 5 mm sur les documents destinés à l’impression pour éviter tout bord blanc après la coupe finale.

1. Utilisez des formats de page adaptés : en print, respectez les standards (A4, A5, etc.) ; pour le web, concevez des mises en page flexibles qui s’ajustent à divers formats d’écran.

1. Testez la lisibilité sur support final : une police parfaitement lisible à l’écran peut s’avérer trop petite une fois imprimée (et vice versa), ajustez en conséquence.

1. En web, pensez en unités relatives (%, em, rem) pour que votre mise en page s’adapte dynamiquement ; en print, travaillez en mesures fixes (mm, pt) pour un contrôle précis de la mise en forme.

1. Intégrez (embarquez) vos polices dans les PDF d’impression ou vectorisez le texte pour éviter les problèmes de polices manquantes chez l’imprimeur.

1. Sur le web, vérifiez le rendu de votre mise en page sur différents navigateurs et appareils pour assurer une expérience cohérente pour tous les utilisateurs

1. Considérez l’expérience physique : en print, le choix du papier et des finitions (vernis, relief) influencent la perception ; sur le web, soignez les animations et interactions qui enrichissent l’expérience.

1. Adaptez le design en fonction du support : un concept graphique imaginé pour une brochure imprimée devra souvent être repensé pour un site web (et inversement) afin de conserver son impact.

‍

8. Détails bonus

85. Maintenez une cohérence absolue dans toutes vos créations : élaborez un guide de style (polices, couleurs, iconographie) et suivez-le scrupuleusement.

1. Relisez tous vos textes : même un superbe design perdra en crédibilité s’il contient des fautes d’orthographe ou de grammaire.

1. Utilisez des icônes ou pictogrammes pour renforcer vos messages, mais veillez à ce que leur style soit uniforme et qu’ils soient faciles à comprendre.

1. Effectuez un contrôle final de l’alignement et de la répartition : prenez du recul, zoomez et dézoomez pour voir si l’ensemble est équilibré à toutes les échelles.

1. Gardez des marges de sécurité suffisantes : ne placez pas d’éléments essentiels trop près des bords du document, surtout en vue d’une impression.
2. Pensez aux détails typographiques : utilisez les bonnes conventions (guillemets françaises « », espaces insécables…) et assurez-vous d’une typographie soignée pour un rendu professionnel.

1. Tenez compte des différences culturelles : les couleurs ou symboles peuvent avoir des significations variées selon le public cible, adaptez votre mise en page si elle est destinée à l’international.

1. Veillez à ce que votre design soit attractif et invite à la lecture : il doit donner envie de parcourir le contenu, pas seulement être esthétiquement plaisant.

1. Créez du rythme visuel en variant les tailles d’images et de textes tout en respectant l’harmonie globale (cela évite la monotonie visuelle).

1. Profitez des fonctionnalités avancées de vos outils de création (styles de paragraphe, composants réutilisables, grilles “magnétiques”…) pour gagner du temps et uniformiser la mise en page.

1. Laissez reposer votre design et regardez-le de nouveau plus tard : un œil frais permet de repérer des améliorations ou des erreurs que vous n’aviez pas vues.

1. Inspirez-vous de mises en page réussies sur des plateformes comme Behance, Dribbble ou des blogs spécialisés (ex : le blog Ferrstudio) pour nourrir votre inspiration.

1. Restez en veille et curieux : testez régulièrement de nouveaux outils, de nouvelles typographies ou approches de design pour faire évoluer vos compétences.

1. Demandez des retours à d’autres designers ou collègues : un avis extérieur peut révéler des points à améliorer auxquels vous n’aviez pas pensé.

1. Commencez par des esquisses ou des wireframes pour planifier l’organisation de votre mise en page avant de passer aux détails visuels.

1. Testez votre design dans son contexte réel : imprimez un prototype ou visualisez-le sur différents appareils pour vous assurer qu’il rend bien une fois déployé.

Vous pouvez aussi solliciter l'audit d'un professionnel pour vos mises en pages

‍

‍