Que vous soyez graphic designer ou UI/UX designer, et quelque soit le domaine du design qui vous intéresse, il existe des bases et des principes de conception qui, si vous les connaissez, pourront vous aider dans vos réalisations.
Lors de ma formation, j’en suis venue à découvrir et à apprendre ces principes, et c’est pourquoi j’ai voulu partager cela avec vous.
Pour bien comprendre de quoi on parle, ici les principes du design correspondent à un ensemble de règles que les concepteurs utilisent pour créer des œuvres visuellement agréables, organisées et fonctionnelles. Ces principes permettent notamment d'améliorer la lisibilité, la compréhension et l'impact visuel d'une création graphique.
On retrouve une dizaine de principes du design principaux comme présenté dans l’image ci-dessus. Dans cet article, j’aborderai 13 points clés avec des exemples concrets pour mieux illustrer et comprendre l'intérêt de chaque principe.
Je n’aborde pas ici les principes liés à la couleur et à la typographie, car ils sont déjà traités en détail dans un autre article du blog : 10 notions fondamentales pour le design d’UI. Donc si vous souhaitez approfondir ces notions ainsi que d’autres aspects du design UI, je vous invite à consulter cet article ✨.
1 - Les lignes
Une ligne est une forme qui relie deux ou plusieurs points. Elle peut être fine ou épaisse, droite ou courbe, continue ou interrompue, ondulée ou dentelée, …
Les lignes ont plusieurs fonctions :
- Mettre en avant un élément clé du design.
- Diviser ou organiser le contenu.
- Guider le regard du spectateur à travers la composition.
Lorsque vous travaillez avec des lignes, prêtez attention au poids, à la couleur, à la texture et au style pour maximiser leur impact visuel.
2 - Les formes
Les formes sont des zones bidimensionnelles aux contours reconnaissables, comme le cercle, le carré ou le rectangle. Elles se divisent en deux catégories :
- Formes géométriques : régulières et précises (ex. : carré, triangle, hexagone).
- Formes organiques : plus libres et irrégulières, souvent inspirées de la nature.
Elles peuvent vous aider à organiser ou à séparer le contenu, à créer des illustrations simples ou à ajouter de l'intérêt à votre travail.
2.1 - Les formes 3D
Lorsqu'une forme devient tridimensionnelle, on l'appelle un volume. Celui-ci peut être :
- Concret, et exister dans le monde réel.
- Suggéré, grâce à des techniques comme la lumière, l'ombre et la perspective pour créer l'illusion de profondeur.
En design, le volume rend le réalisme possible. Par exemple, une simple ombre peut créer l'illusion de couches ou donner à un objet un sentiment d'appartenance à un espace.
3 - Mise en page & Composition
La mise en page est à la base de la conception et représente la structure sous-jacente d'un design. Une composition bien pensée et hiérarchisée facilite la lecture, et améliore donc l'expérience utilisateur.
3.1 - La hiérarchie
La hiérarchie visuelle permet d'attirer l'œil du spectateur vers les éléments clés d’un design : elle indique par où commencer et où aller en utilisant différents niveaux d'emphase. Elle s’appuie sur des différences de taille, de couleur, de poids typographique (la taille de police, la graisse, ..) ou de positionnement pour établir des priorités.
Pour mettre en place une hiérarchie, il est important de déterminer les éléments que le lecteur doit remarquer en premier, puis de les faire ressortir.
On peut facilement voir un exemple de hiérarchie dans les titres et les en-têtes d'une conception.
3.2 - La proximité
Ce principe repose sur le regroupement, ou la séparation d'éléments visuellement liés afin de montrer leur relation. Une bonne proximité améliore la clarté et la lisibilité d’un design.
Veillez à ce que les éléments liés soient regroupés, c’est-à-dire, que l’espace entre les éléments soit faible, et les groupes qui ne sont pas liés les uns aux autres doivent être séparés pour souligner visuellement leur absence de relation.
3.3 - Les espaces "blancs"
L'espace blanc ou «white space» (ou espace négatif) est la zone vide entre les éléments graphiques et même les marges extérieurs. Il joue un rôle crucial dans toutes les compositions en permettant :
- Une meilleure lisibilité.
- Une séparation claire des éléments et des sections.
- Une composition plus élégante et aérée.
3.4 - L'alignement
Un alignement cohérent assure une composition structurée et harmonieuse. Il existe plusieurs types d'alignement :
- Alignement à gauche, à droite ou centré. Il est recommandé d’utiliser l’alignement centré uniquement sur des textes courts (3 lignes max) ou des titres car les utilisateur.trice.s peuvent rencontrer des problèmes pour repérer le début de chaque ligne de texte.
- Alignement justifié. Le texte est espacé de manière à ce que les côtés droit et gauche du paragraphe aient le même bord. Attention, cet alignement rend le texte moins lisible et donc moins accessible, cf Supplemental Guidance: Text Justification - Low Vision Accessibility Task Force
- Alignement sur une grille.
3.5 - Les grilles
Il peut être utile d'imaginer que votre contenu soit disposé à l'intérieur d'une grille. Une grille est une structure de mise en page fondamentale dans la conception qui organise le contenu en lignes et en colonnes. Cela fournit un cadre pour la disposition des éléments, et on retrouve aussi cela pour les éléments d'interface utilisateur sur une page ou un écran.
Les grilles établissent un ordre visuel cohérent et facilitent la navigation et la compréhension du contenu, cela permet aussi d’éviter d’avoir une lecture en escalier. Pour s’adapter au mieux au support, il peut être judicieux d’ajouter ou de réduire le nombres de colonnes afin de de rester cohérent avec la taille du support, comme présenté ci dessous :
4 - L'équilibre
L'équilibre est la répartition du poids visuel des éléments d’un design. Il peut être influencé par de nombreux éléments, notamment la couleur, la taille, le nombre et l'espace blanc.
Les compositions peuvent être :
- Symétriques : le poids visuel est identique ou similaire de part et d'autre d'un axe, elles donnent l'impression d'être équilibrées car chaque taille est effectivement identique.
- Asymétriques : sont différentes, mais le poids est toujours réparti de manière égale, la composition est équilibrée parce qu'elle attire l'attention sur les bons éléments
4.1 - “La règle des tiers”
Il peut aussi être intéressant de connaître “La règle des tiers” («The Rules of Thirds»), pour construire et structurer ses compositions. Le principe est assez simple :
- Imaginez votre espace de travail comme une grille de 3x3.
- Les lignes se rencontrent à quatre intersections au centre de la page, qui correspondent aux principaux points d'intérêt de la scène.
Nous trouvons ce type de composition attrayant car, selon des études, l'œil humain suit naturellement ce chemin lorsqu'il scrute un dessin :
5 - L'unité/ L’harmonie
L'unité désigne la relation cohérente entre les éléments d’un design. Une composition harmonieuse s’obtient en utilisant des couleurs, des typographies et des styles similaires. Bien sûr les éléments d'une composition ne doivent pas tous être identiques, mais ils doivent être liés d'une manière ou d'une autre avec les éléments cités précédemment. Un manque d'unité peut donner l'impression d'un design désorganisé et encombré.
Par exemple, dans une application, utiliser une palette de couleurs cohérente, des images similaires et des espacements homogènes renforce l’unité visuelle.
6 - Le contraste
Le contraste, c’est le niveau de différence entre les éléments de conception. Il met en évidence certaines parties d’un design en opposant des éléments, et cela peut se faire par le biais de différentes échelles, formes, couleurs (ex. : couleurs complémentaires, grande VS petite taille). Le contraste signifie simplement qu'un élément est différent d'un autre.
Il est essentiel pour attirer l’attention et établir une hiérarchie visuelle.
Pour créer un contraste, vous pouvez utiliser la couleur, ajuster la taille, la forme ou le poids visuel d'un objet. Un bon exemple est l’utilisation d’un bouton d’appel à l’action (CTA) coloré sur un fond neutre pour le mettre bien en évidence.
7 - L'emphase
L’emphase est une technique permettant d’attirer le regard sur un élément de conception très précis. Elle peut être obtenue par :
- L’utilisation de couleurs vives.
- Des lignes directrices ("leading lines") qui pointent vers le contenu principal.
- Une taille ou une position dominante.
8 - La répétition
C'est l'utilisation d'un même élément plusieurs fois dans une composition. Il peut s'agir de la même couleur, forme, police de caractères, du même élément graphique, ou de la même grille. Et cela crée de la cohérence et renforce l'identité visuelle.
Par exemple, utiliser la même icône pour représenter des actions similaires dans une interface, ou la même couleur pour son image de marque.
La répétition nous rappelle que chaque projet doit avoir une apparence et une sensation cohérentes.
9 - Les motifs
Les motifs sont des ensembles d'éléments répétés de manière régulière pour former un design plus complexe. Ils ajoutent de la texture et de la richesse visuelle. Par exemple, dans le design textile, un motif répétitif de fleurs ou de formes géométriques ajoute un effet esthétique cohérent.
10 - Le rythme
Il s'agit de la répétition d'éléments avec des variations (de taille, d'espacement, de couleur) pour créer un mouvement visuel dynamique. Le rythme peut être régulier, fluide ou progressif. Par exemple, des cercles de tailles croissantes qui guident le regard.
11 - Le mouvement
Le mouvement désigne le chemin emprunté par nos yeux dans une composition et la manière dont ils sont dirigés à travers un design. Nous pouvons l'utiliser pour guider nos spectateurs vers un élément très spécifique ou l'élément le plus important d'une composition. Des éléments comme les lignes, les formes et les couleurs influencent ce flux visuel.
12 - Les proportions
Les proportions font référence aux relations de taille entre les différents éléments d’une composition. Fondamentalement, cela fait référence à la taille des éléments les uns par rapport aux autres. Les éléments plus grands sont plus faciles à voir que les plus petits et, selon ce principe, les éléments plus grands sont donc plus importants que les plus petits.
Une bonne proportion contribue à l’équilibre et à l’esthétique générale du design. S'il n'y a pas de proportions dans une composition, tout se ressemblera.
13 - La variété
Elle crée des contrastes et des tensions dans la composition d'un dessin et peut intriguer les spectateurs, par exemple en mélangeant des formes organiques avec des formes géométriques. En utilisant la variété, cela nous évite de créer un design monotone et de perdre l'intérêt du spectateur.
Conclusion
Bien sûr, tous les principes ne sont pas à prendre au pied de la lettre lorsque l’on design un produit, mais ils nous aident et nous guident dans les prémices d’une composition. Il faut garder en tête que cela reste des outils destinés à améliorer notre efficacité mais que notre créativité reste notre atout principal.
Avec l’expérience et la pratique, l’application de ces principes devient inconsciente voire automatique, mais il peut être très utile de prendre le temps de bien les comprendre lorsque, comme moi, on débute dans le domaine du design.
Sources
- La Gestalt Theory et son application en UI / UX design
- Les théories de la gestalt dans l'UX design - Wimersion, Agence Digitale
- 12 Graphic Design Principles
- White Space in Graphic Design
- How To Use Balance in Graphic Design
- A Brief Guide to Variety — A Design Principle - Venngage
- Using the Rule of Thirds in Graphic Design
- What is the Rule of Thirds? | IxDF
- Why Justified (or Centered) Text is Bad for Accessibility
- The Principles of Design | FREE COURSE
- Beginning Graphic Design: Fundamentals
- Beginning Graphic Design: Layout & Composition
