7 principes fondamentaux du webdesign

7 principes fondamentaux du webdesign

Rédigé par Théo SERRANO

Fondateur de l'agence de communication Vert Caméléon, j'enseigne également à l'université diverses matières comme le webdesign ou le motion design.

21 janvier 2021

Les 7 principes fondamentaux du webdesign sont des indices qui vont vous permettre de mesurer la “réussite” de votre design. Une fois maîtrisés, ils permettent de designer n’importe quel type d’application web, et vous permettent de vous démarquer des designers amateurs.

01. Espace négatif

principes fondamentaux webdesign - espace négatif

L’espace négatif définit les zones entre les différents éléments d’une page web.

Cet espace n’affiche délibérément aucun contenu.

Dans la première image (ci-dessus), on remarque que le texte est difficilement lisible, et rien n’attire spécialement le regard. Dans la deuxième image (ci-dessous), on a réglé le problème en augmentant l’espace négatif autour du texte pour “l’aérer” et le faire respirer.

principes fondamentaux webdesign - espace négatif

02. Alignement

principes fondamentaux webdesign - alignement

L’alignement est le procédé qui permet de s’assurer que chaque élément du design est correctement positionné par rapport aux autres.

Dans la première capture (ci-dessus), on voit que les éléments sont positionnés de manière chaotique et ne respecte aucune forme d’alignement. Cela a pour effet de causer une certaine instabilité visuelle qui n’est pas très agréable pour la lecture. Dans le deuxième exemple (ci-dessous), on a corrigé ces problèmes avec un alignement vertical.

principes fondamentaux webdesign - alignement

03. Contraste

principes fondamentaux webdesign - contraste

On dit de deux éléments qu’ils sont contrastés, ou qu’un design a un fort contraste, quand les éléments sont facilement différenciables visuellement.

WCAG 2.0

La présentation visuelle de texte et images doit avoir un ratio de contraste d’au moins 7:1, excepté pour les gros titres, qui doivent avoir un ratio de contraste d’au moins 4.5:1.

Tout doit être lisible ! Lisible ne veut pas dire “on les devine dans un environnement optimal”. Lisible signifie que tous les éléments sont visibles par n’importe qui, n’importe où, n’importe quand.

Le ratio entre la couleur de fond du bouton “Call to action !” et celle du fond est de 1.4. Ce qui est beaucoup trop faible.

principes fondamentaux webdesign - contraste

04. Échelle

principes fondamentaux webdesign - échelle

L’échelle correspond à la taille des éléments.

La relation des tailles entre elles est primordiale pour trouver un équilibre dans son design.

principes fondamentaux webdesign - échelle

05. Couleurs

principes fondamentaux webdesign - couleurs

Le premier élément d’UI qui façonne l’expérience de l’utilisateur est la couleur.

Limiter le nombre de couleurs pour garder en cohérence peut être une bonne solution pour ne pas perdre l’utilisateur.

principes fondamentaux webdesign - couleurs

06. Typographie

principes fondamentaux webdesign - typographie

Tout comme pour la couleur, limiter le nombre de polices de caractères différentes peut éviter de rendre votre interface trop confuse. 

principes fondamentaux webdesign - typographie

07. Hiérarchie visuelle

Chaque élément d’une interface a un niveau d’importance. Certains éléments (comme un call to action) sont plus importants que d’autres (un corpus).

La hiérarchie visuelle correspond à l’établissement de cet ordre de priorité par une différenciation visuelle, en utilisant les principes vus précédemment.

Aucune hiérarchie visuelle

principes fondamentaux webdesign - hiérarchie visuelle

Alignement et espace négatif

principes fondamentaux webdesign - hiérarchie visuelle

Contraste

principes fondamentaux webdesign - hiérarchie visuelle

Couleur

principes fondamentaux webdesign - hiérarchie visuelle

Échelle

principes fondamentaux webdesign - hiérarchie visuelle

Combinaison de plusieurs procédés

principes fondamentaux webdesign - hiérarchie visuelle

Nous espérons que ce rappel sur les 7 principes fondamentaux du webdesign vous aura plu ! Pour finir, nous vous laissons avec un dernier exemple où nous améliorons le design d’une interface en utilisant ces procédés !

principes fondamentaux webdesign - hiérarchie visuelle
principes fondamentaux webdesign - hiérarchie visuelle

Ça pourrait aussi vous intéresser…

La meilleure landing page en 2023 ?

Nous allons vous présenter le meilleur modèle de landing page pour optimiser l'expérience utilisateur et la conversion, adapté à différents types de sites web. Bien que la structure de la landing page puisse varier selon le site web, nous allons ici examiner comment...

Top 10 tendances UI Design pour 2023

Dans un monde digital en perpétuelle évolution, l'interface utilisateur (UI) et l'expérience utilisateur (UX) sont devenus des éléments essentiels pour le succès de tout site ou application web. Même les éléments de conception les plus basiques jouent un rôle vital...

0 commentaires

Soumettre un commentaire

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