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
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.
02. 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.
03. 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.
- Plugins navigateur
- Sites (https://color.a11y.com/?wc3)
- Plugins pour soft UI
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.
04. Échelle
L’échelle correspond à la taille des éléments.
La relation des tailles entre elles est primordiale pour trouver un équilibre dans son design.
05. 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.
06. Typographie
Tout comme pour la couleur, limiter le nombre de polices de caractères différentes peut éviter de rendre votre interface trop confuse.
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
Alignement et espace négatif
Contraste
Couleur
Échelle
Combinaison de plusieurs procédés
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 !
0 commentaires