Sélectionner une page

Les 12 principes du design

par | Mar 26, 2020 | Pirate | 0 commentaires

Bien qu’il soit difficile d’identifier le nombre précis de principes qu’il existe en design, je vous en ai réuni une douzaine qui ressortent régulièrement dans les livres et articles dont je m’inspire.

Ces principes combinés permettent de créer des visuels qui soient plus agréables au regard et plus communiquant quand aux idées qu’ils souhaitent transmettre.

Voici donc une sélection de 12 principes du design illustrés par des exemple de sites internet qui utilisent ces règles. Bonne lecture.

1/ Equilibre

Pour obtenir un visuel qui soit équilibré, le designer se doit de bien savoir marier les différents éléments qui composent le visuel ; tel que la typographie, les images, les couleurs…

Il existe deux types principaux d’équilibre, le symétrique et l’asymétrique.  Le symétrique peut paraître plus ennuyeux, tandis que l’asymétrique relève d’un de plus de recherche pour rendre le visuel plus attractif. Le design web se base sur des structures divisées en colonnes sur lesquelles il est possible de s’amuser.

Lacoste design

Lacoste utilise une asymétrie sur son site qui s’équilibre grâce à la combinaison entre une image foncée et une typographie claire. Sur le troisième tiers de l’écran cette caractéristique est inversée, ce qui équilibre l’ensemble.

2/ Emphase

Il s’agit d’exprimer clairement le message le plus important du visuel. Le plus difficile est bien souvent d’identifier quelle est l’idée principale que l’on souhaite communiquer, avant même de penser à la designer.

Laboté design

Le slogan de Laboté délivre efficacement son message qui est que les soins qu’ils vendent sont personnalisables.

3/ Contraste

Il s’agit de créer du contraste entre les différents éléments. Une typographie claire sur un fond foncé est un exemple de contraste que l’on peut utiliser. Il permet de rendre un site plus « pop », moins fade. Il est nécessaire de bien l’utiliser concernant l’accessibilité et la lisibilité des éléments. Un site peu contrasté peut s’avérer être difficile à lire et peu aguicheur.

Pampa design

Le site Pampa offre une lecture aisée grâce au contraste entre l’écriture noire sur fond clair dans le menu et inversement sur la landing page avec une typographie claire sur fond foncé.

4/ Le blanc

Le blanc permet d’aérer la page web, de ne pas surcharger le visuel. On serait tenté de remplir l’ensemble de la page comme on pourrait le faire en peinture, cependant avoir des espaces vides sont souvent préférables.

Bonobos design

Le site Bonobos met en avant l’aspect minimaliste et les valeurs de transparence de sa marque concernant la fabrication de ses habits.

5/ Proportion

La proportion aide à attirer l’œil sur ce qui est le plus important. Plus un élément a une proportion importante et s’impose comparé aux autres éléments, plus celui-ci a de l’importance.

Le Tetris design

Sur le site Le Tetris, c’est l’exposition la plus récente qui est la plus importante, c’est pourquoi son encadré prend le plus de place sur la page.

6/ Hiérarchie

Certains éléments sont plus importants que d’autres, c’est pourquoi afin de les mettre en avant on peut jouer avec les tailles, les couleurs, les proportions, les dispositions sur les pages.

Un élément plus grand, placé en première position ayant une typographie plus grasse ainsi que des couleurs plus flashy sera ainsi plus facilement mis en avant.

Le garofi design

Sur le site du Garofi, l’élément le plus important est bien le dernier article publié, suivi du second, puis du shop et les applis sur la droite.

7/ Rythme

Un site peut être très monotone s’il conserve une structure simple et prévisible. Casser les codes, modifier les espacements, les dispositions et les formes peut aider à rendre un site plus dynamique.  

Totem design

Sur le site Totem, chaque transition entre les blocs est unique, ce qui rend le site très vivant, voir même déboussolant par moment (trop de distraction peut parfois empêcher les lecteurs de se concentrer et, donc de passer à côté des messages ou des CTA). Par exemple, sur cette page je suis bien plus obnubilée par les yeux du totem que par le CTA «Voir la vidéo».

8/ Mouvement

Cette notion se base sur le mouvement du regard. De haut en bas, de gauche à droite, dans le sens de la lecture. Un UX Designer doit prendre en compte cette notion qui est que les éléments doivent avoir une logique de placement par rapport à ce mouvement.

Hotel barrière design

Sur le site du Casino Barrière d’Enghien-les-bains, ce mouvement est bien pris en compte. En première position hiérarchique on obtient l’attraction principale « le carré VIP », suivi du dîner dans l’ordre chronologique, puis du clou du spectacle la nuit à l’hôtel. D’ailleurs on remarque bien que les proportions sont bien respectées en fonction de l’importance de chaque événement pour les clients.

9/ Variété

La variété est une notion très utile pour l’expression de la créativité. Elle invite à diversifier les éléments afin de rendre un site plus tape à l’œil. Varier les couleurs, des typographies, les formes, les images, les vidéos… Tout est permis afin de réveiller le lecteur et de lui faire vivre une expérience unique.

12 principes du design

Sketch est un lieu « underground » à Londres, avec des décorations éphémères, des invités huppés… Pour son site internet il conserve cette identité excentrique et « secrète » en remplaçant le menu du restaurant étoilé par des mini jeux variés et d’une absurdité immorale.

10/ Répétition

La répétition offre un aspect monotone et rassurant.

Nördik Impakt design

Le festival Nördik Impakt n’a pas voulu privilégier un artiste plutôt qu’un autre dans sa line up, c’est pourquoi il utilise une répétition non hiérarchisée dans sa programmation (d’autant plus que le classement est réalisé par ordre alphabétique).

11/ Harmonie

Un projet doit être pensé de A à Z tout en maintenant une harmonie globale, une unité qui lie l’ensemble des pages du site internet.

Kymono design

Bien que le site Kymono dispose d’une grande variété d’éléments, il reste néanmoins harmonieux. Les bleus et le rose communiquent entre les photos, la typographie, les encadrés et les images graphiques. L’utilisation de la forme carrée et de lignes en diagonales conservent cette harmonie.

12/ Texture

Que ce soit un produit physique ou un visuel dans un site web, la texture est un élément très communiquant. Lorsque vous achetez un jus dans une bouteille en verre vous aurez une meilleure perception du liquide qu’il renferme que si le packaging avait été en plastique ou en carton. Pour un site internet c’est pareil. Avec les logiciels à notre disposition il est de plus en plus simple de communiquer une texture à travers son écran d’ordinateur.

Norman fait des vidéos design

Sur le site de Norman fait des vidéos, la texture papier est représentée afin de réveiller nos souvenirs d’école, avec l’utilisation de marqueurs également, et les icônes sont comme dessinés au stylo à bille.

Conclusion des 12 principes du design

Il n’est pas obligatoire d’utiliser tous ces principes pour réaliser un bon design, mais en général il est nécessaire d’en utiliser plusieurs à la fois afin d’obtenir un rendu un minimum appréciable.

Le design est vraiment intéressant car il existe une infinité de possibilité de création. Ne pas respecter l’ensemble de ces principes peut permettre également d’innover et de surprendre, ce qui est bien évidemment encouragé ! (Enfin, cela dépendra de vos clients).

Bon brainstorm à tous !

Lire un article sur le design intitulé « Quelle taille texte pour un site internet réactif?« .

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

NEWSLETTER

Reçois chaque semaine des conseils et articles sur le Design.