Article original : Design Principles – A List of the Principles of Design
Lorsque vous commencez à apprendre la théorie du design graphique, vous pourriez être surpris de découvrir qu'il existe des règles spécifiques à suivre lors de la conception.
Ces règles sont connues sous le nom de principes de design, et dans cet article, vous apprendrez les bases des 13 principes de design.
Connaître les principes de design vous donnera une meilleure compréhension de la manière de créer des designs plus harmonieux et des expériences utilisateur améliorées.
Voici ce que nous allons couvrir dans ce guide :
Qu'est-ce que les Principes de Design ?
Les principes de design sont un ensemble strict de règles.
Les designers adhèrent à ces règles pour créer des expériences utilisateur agréables et des produits finaux visuellement attrayants.
Ces règles sont des outils et des directives qui aident le designer à créer un sentiment d'harmonie et d'équilibre dans leurs designs.
Ils garantissent l'utilisabilité et un effet globalement plaisant pour les spectateurs et les utilisateurs.
Les 13 Principes de Design
Équilibre
Chaque élément de design sur une page a un poids différent, selon sa taille, sa forme ou sa couleur.
Ce poids est connu sous le nom de poids visuel.
L'équilibre en design est la manière dont vous arrangez et positionnez les éléments dans une composition, et il s'agit de distribuer le poids de ces éléments.
Une composition manquant d'équilibre signifie qu'un élément domine tous les autres.
Pour créer un équilibre, vous devez positionner les éléments correctement.
Par exemple, cela pourrait être qu'un élément d'un côté est beaucoup plus "lourd" que le reste et domine, rendant ainsi le design instable.
Il existe deux types d'équilibre :
- Équilibre symétrique
- Équilibre asymétrique
Avec l'équilibre symétrique, imaginez tracer une ligne invisible et verticale au centre de la page et diviser la page en deux côtés.
Les éléments des deux côtés de la ligne ont un poids visuel uniformément distribué et créent une image miroir.
L'ordre, la position et l'alignement des éléments sont égaux des deux côtés, créant une cohérence dans le design.
L'équilibre asymétrique est l'opposé de l'équilibre symétrique.
Les éléments des deux côtés ont des arrangements différents, car ils ont également un ordre et un positionnement qui varient dans la composition.
Même si chaque côté a un poids visuel différent, le design global maintient un poids visuel égal des deux côtés.
Il n'y a pas d'image miroir, et les deux côtés semblent différents, mais le design reste stable.
Par exemple, un design asymétrique peut être lorsque trois éléments plus légers empilés les uns sur les autres d'un côté équilibrent un seul élément plus lourd de l'autre côté.
L'équilibre asymétrique crée un intérêt visuel et ajoute une touche moderne au design.
Variété
La variété crée un intérêt visuel et empêche le design de devenir monotone et prévisible.
La variété est créée en utilisant des éléments qui ne se ressemblent pas.
Avec l'utilisation de la variété, vous avez de bonnes chances de maintenir l'intérêt et l'engagement des spectateurs.
La variété dans le design est obtenue grâce à l'utilisation de nombreuses choses différentes, dont quelques-unes sont :
- Tailles variées,
- Formes variées,
- Couleurs variées,
- Textures variées,
- Typographie variée.
Emphase
Le but de l'emphase est de créer un point focal.
Un point focal est un objet qui se distingue instantanément et attire l'attention du spectateur ou de l'utilisateur au premier regard.
Lorsque l'emphase est mise sur un élément de design, cela signifie que l'objet spécifique est mis en avant par rapport au reste et est donc d'une grande importance.
Par exemple, vous pouvez penser à l'emphase comme un texte en majuscules et en gras.
L'emphase peut être le titre principal d'un site web.
Elle peut également être un message de quelque sorte.
Vous pouvez vouloir transmettre quelque chose de crucial ou de préventif à vos spectateurs et vous assurer que votre public en est conscient et se concentre d'abord sur cela.
L'emphase peut également être un grand bouton avec une couleur vive sous un article à acheter - cela peut servir de call-to-action pour les visiteurs.
C'est ce que vous voulez que les autres remarquent en premier - l'information essentielle que quelqu'un doit connaître et à laquelle il doit prêter attention dès le premier regard sur votre travail.
C'est un élément spécifique de contenu qui doit se démarquer du reste du design.
Outre le texte et la couleur, l'emphase est obtenue avec la taille, la forme, le poids, la texture et la position, pour n'en nommer que quelques-uns.
Lorsque vous créez une emphase, assurez-vous de le faire sans perturber l'équilibre global de la composition et sans créer un effet dominant et discordant.
Contraste
Alors que l'emphase consiste à accentuer un seul élément, le contraste concerne le degré apparent de différence entre deux ou plusieurs éléments de design qui sont proches les uns des autres.
Cette différence peut être qu'un élément a une couleur de fond sombre, et l'autre a une couleur claire.
Il peut également s'agir qu'un élément a un ton plus froid, tandis que l'autre a un ton plus chaud. Ou qu'un élément est plus grand et l'autre est plus petit en taille. Ou utiliser une police serif sur un texte et une police sans-serif sur un autre texte.
Par exemple, prenez cette page web.
Lorsque vous naviguez sur la page depuis un ordinateur de bureau ou un ordinateur portable, vous verrez qu'en haut à droite, il y a deux boutons sur lesquels vous pouvez cliquer :
- le bouton "Forum" a une couleur de fond sombre qui est la même que le reste de la barre de navigation,
- le bouton "Donate" a une couleur de fond jaune vif qui le fait ressortir.
Cela est considéré comme un contraste. Il y a deux éléments très différents l'un à côté de l'autre, mais l'un attire le plus l'œil et attire votre attention.
En résumé, le contraste met en évidence deux éléments totalement opposés avec des caractéristiques très différentes. La différence doit être notable.
Il existe différents types de contraste, tels que le contraste de couleur ou de taille, de forme ou de texture.
Le but est de créer de la variation et de l'intérêt et donc de créer un focus et une emphase tout en maintenant l'équilibre dans le design.
Un bon contraste va de pair avec les meilleures pratiques d'accessibilité et la création de produits et services utilisables pour tous. Il est nécessaire de prendre en considération les personnes ayant des déficiences visuelles.
Pensez à un autre exemple.
Supposons qu'il y ait un élément avec un fond gris clair et un texte gris foncé. Ensuite, il y a un autre élément avec la même couleur de fond, mais avec un texte noir.
Lequel est le plus facile à lire ? Le second avec le texte noir.
Il y a un contraste de couleur plus élevé entre la couleur de fond et la couleur du texte (premier plan).
Il y a un manque de contraste dans le premier élément - cela rend la lecture du texte beaucoup plus difficile.
Hiérarchie
La hiérarchie organise les éléments visuels par ordre d'importance.
Le rôle de la hiérarchie dans le design est de créer un système de classement visuel selon la priorité logique du contenu. Elle aide à guider les spectateurs de l'information la plus importante à la moins importante en créant un flux et un arrangement logique de ce contenu.
Pensez à l'ordre typique des éléments sur une page web.
Nous lisons de haut en bas, donc l'œil du spectateur doit d'abord être attiré immédiatement par l'information essentielle avant qu'il ne commence à faire défiler la page vers le bas.
Ainsi, cela signifie que l'information cruciale doit être en haut de la page - elle doit être la plus proéminente et avoir le rang le plus élevé sur la page.
Prenez l'exemple suivant.
En haut d'une page web, il y a généralement le logo de l'entreprise en premier.
Ensuite, il y a une barre de navigation ou un menu déroulant, qui aide les utilisateurs à décider de la zone du site avec laquelle ils veulent interagir.
Il peut également y avoir une barre de recherche pour que les utilisateurs puissent entrer des mots-clés pour rechercher un sujet spécifique et gagner du temps.
Ensuite, il peut y avoir un appel à l'action ou le titre principal qui renforce le but de la page et son contenu.
Ensuite, il peut y avoir la zone principale qui contiendrait un sous-titre avec du texte, puis un autre sous-titre avec plus de texte, et ainsi de suite.
Cet ordre crée une organisation visuelle et aide les spectateurs à distinguer quel contenu semble être le plus important et mérite leur attention.
Il guide les spectateurs du début du contenu à la fin - de la priorité la plus élevée à la moins élevée.
La position des éléments signifie l'importance - l'information la plus importante est toujours plus haute sur une page, tandis que si quelque chose est en bas, il n'est pas aussi important.
D'autres moyens de créer une hiérarchie dans le design sont l'utilisation de couleurs pour créer un contraste et alterner la taille des éléments de différentes manières.
Sans hiérarchie, tout le contenu semblerait identique, et rien ne se démarquerait et ne signalerait l'importance, ce qui entraînerait de la confusion pour les spectateurs.
Répétition
La répétition est lorsqu'un élément spécifique est répété plusieurs fois dans le design.
Le rôle de la répétition dans le design est de créer de la cohérence et de l'unité.
La répétition crée des relations et des associations entre des éléments apparemment séparés et différents et crée un lien entre eux - un lien commun qui relie tout ensemble.
Pour atteindre la répétition, vous utilisez la même couleur particulière ou le même schéma de couleurs plusieurs fois dans le design.
Ou vous restez fidèle à un type de police spécifique ou utilisez une phrase récurrente dans la page.
Un élément souvent répété dans les designs est un logo, qui joue un rôle crucial dans la création d'une identité de marque.
Un logo rendra les spectateurs et les utilisateurs familiers avec la marque. Ils reconnaîtront et distingueront sa voix et son ton des autres marques.
Les utilisateurs mémoriseront et identifieront le logo avec la vision et la mission de l'entreprise.
Ils sauront ce que représente la marque.
Motif
Le motif, à première vue, semble être très similaire à la répétition, car il implique que les éléments réapparaissent plusieurs fois dans la page.
Cependant, ils ont des différences significatives.
Alors que la répétition traite du même élément qui se répète dans le design, un motif se concentre sur plusieurs éléments de design différents qui se répètent de la même manière dans la composition.
Un motif dans le design concerne la répétition de plus d'un élément.
Un exemple de motif dans la vie quotidienne est les carrelages de sol et les papiers peints.
Un exemple de motif sur le web est l'utilisation de fonds dans les sites web et les applications pour créer une harmonie et une sensation cohésive.
Mouvement
Le mouvement est la manière dont les yeux se déplacent lors de la visualisation et de l'interaction avec une composition.
Le mouvement fait référence à la manière dont l'œil du spectateur se déplace et au chemin qu'il prend dans un design.
Le designer utilise le mouvement pour guider le spectateur autour des différents éléments de design.
Ils créent différentes zones focales pour chaque moment afin de capturer efficacement l'attention du spectateur, passant d'un élément à un autre dans une séquence dirigée et bien pensée.
Typiquement, l'œil du spectateur voit d'abord l'élément le plus important, puis le deuxième plus important, puis le troisième, et ainsi de suite.
Un exemple de mouvement peut être la visualisation d'un escalier en spirale lorsque vous êtes en haut - votre œil se déplacera le long des différentes lignes et bords.
Le mouvement sur le web peut être créé par :
- L'utilisation d'effets animés,
- L'utilisation d'effets de flou,
- L'utilisation d'effets de spirale,
- L'utilisation de lignes et de bords,
- L'utilisation de différents panneaux de direction qui fournissent des indications, indiquant au spectateur de déplacer son attention vers la gauche, la droite, ou de regarder vers le bas ou vers le haut.
Rythme
Le rythme implique la combinaison de la répétition, de la variété et du mouvement.
Le rythme est la manière dont plusieurs éléments de design différents les uns des autres se répètent dans un ordre particulier.
Répéter ou alterner un groupe d'éléments différents dans le même ordre et à des intervalles spécifiques est un moyen de créer du rythme dans le design.
Il existe cinq types de rythme différents dans le design, selon le type d'intervalle :
- Rythme aléatoire,
- Rythme régulier,
- Rythme fluide,
- Rythme progressif,
- Rythme alterné.
Les éléments suivent un tempo et se déplacent et s'écoulent de manière organisée.
Cela ressemble à la sensation de suivre une chorégraphie de danse ou de bouger au rythme de la musique.
Au lieu d'attirer l'attention sur une seule zone du design ou de guider le spectateur d'une partie différente à une autre, le rythme se concentre sur le déplacement des yeux du spectateur à travers toute la composition.
Proportion
La proportion dans le design fait référence à la taille et au poids visuel de deux ou plusieurs éléments visuels.
La proportion est également la relation entre ces éléments visuels.
La relation est basée sur la taille. C'est comment la taille d'un objet se compare et est corrélée à la taille de l'autre objet.
Essentiellement, c'est comment les éléments évoluent en taille les uns par rapport aux autres.
Par exemple, la proportion compare et mesure l'importance des éléments les uns par rapport aux autres.
Supposons qu'il y ait deux objets - l'un est plus grand et l'autre est beaucoup plus petit.
L'élément le plus grand sera plus noticeable, ce qui indique qu'il est plus important que le plus petit.
Un design bien proportionné signifie que la taille de tous les éléments préserve l'équilibre, l'unité et l'harmonie pour l'ensemble du design.
Une bonne proportion signifie que tous les éléments sont bien liés les uns aux autres.
Alignement
L'alignement fait référence à la manière dont les éléments visuels sont alignés, ordonnés et structurés les uns par rapport aux autres et par rapport à l'ensemble du design.
C'est un moyen de créer une connexion et un flux visuel entre les objets liés et de créer un résultat plus unifié dans le design.
En alignant les différents objets visuels, vous aidez à guider votre spectateur dans le design.
Les formes d'alignement les plus courantes sont l'alignement à gauche, l'alignement à droite et l'alignement au centre.
Unité
L'unité dans le design est la manière dont différents éléments visuels se réunissent pour créer de la cohésion et de la complétude dans le design et un effet harmonieux.
Avec l'unité, des éléments apparemment différents créent un sentiment "d'unicité". Cela peut être réalisé de plusieurs manières différentes.
Par exemple, des éléments de différentes tailles peuvent tous avoir la même couleur et être proches les uns des autres.
Cela les fait apparaître comme s'ils appartenaient ensemble ou comme s'ils étaient liés et similaires d'une certaine manière.
Espace Blanc
L'espace blanc est également connu sous le nom d'espace négatif.
Essentiellement, l'espace blanc fait référence aux zones qui manquent d'éléments visuels, et aux zones avec un espace vide et inutilisé autour des éléments déjà existants dans un design.
L'espace blanc ne signifie pas nécessairement que l'espace vide est blanc en couleur - il peut être de n'importe quelle couleur. Il fait plutôt référence au vide et à la place disponible dans votre design et au fait que certaines zones ne contiennent rien.
L'espace blanc consiste à ne pas ajouter d'éléments à la composition et adopte une approche plus minimaliste et simpliste du design. Parfois, moins c'est effectivement plus.
L'espace blanc crée de l'espace respiratoire dans le design.
Lorsque beaucoup de choses se passent sur une page, les spectateurs peuvent facilement être submergés par toutes les informations qu'ils doivent assimiler. L'espace blanc aide à prévenir cela. Il rend tout texte disponible plus lisible et crée une expérience utilisateur globalement meilleure.
L'espace blanc élimine tout encombrement inutile et crée un point focal. Utilisez donc l'espace blanc autour des éléments importants pour les faire ressortir.
Conclusion
Espérons que vous avez maintenant une compréhension de haut niveau des principes de design et une meilleure idée de la manière de les mettre en œuvre dans vos futurs designs.
Merci d'avoir lu !