Apprenez la conception d'interface utilisateur de base en 5 minutes

Si vous avez une compréhension de base du HTML et du CSS et que vous souhaitez créer de superbes interfaces utilisateur dans le navigateur, ne cherchez pas plus loin! Dans cet article, vous améliorerez vos compétences en conception d'interface utilisateur en apprenant les sept principes fondamentaux suivants:

  • espace blanc
  • alignement
  • contraste
  • échelle
  • typographie
  • Couleur
  • hiérarchie visuelle

Cet article s'appuie sur un cours Scrimba gratuit créé par le brillant Gary Simon, également connu sous le nom de DesignCourse. Le cours propose un ensemble de tutoriels interactifs que vous pouvez suivre à votre rythme et même refaire pour vraiment intégrer votre apprentissage.

Lancement du cours: apprendre les principes de base de la conception de l'interface utilisateur?

Nous pensons que tous les développeurs frontaux devraient avoir des compétences de base en conception d'interface utilisateur. Alors là-dedans? Bien sûr, @designcoursecom vous apprend cela. Le tout sans utiliser d'outils de conception, juste du HTML et du CSS.

RT appréciés? // t.co/mT9fDjShUd # 100daysofcode

- Scrimba (@scrimba) 28 janvier 2020

Donc, si cet article vous laisse en vouloir plus, assurez-vous de consulter le cours. Maintenant, sautons dedans!

Espace blanc

La première conception fondamentale que nous examinerons est l' espace blanc , également appelé espace négatif. Comme son nom l'indique, il s'agit de l'espace entre les éléments de la page.

Les éléments qui sont écrasés sur une page sans espace blanc non seulement ne semblent pas attrayants, mais sont également difficiles à naviguer et à lire.

Nous pouvons ajuster l'espace blanc de différentes manières, y compris le remplissage, la marge et la hauteur de ligne. Consultez l'image avant et après ci-dessous pour voir quelle différence un espace blanc efficace peut faire.

Avant et après le réglage des espaces

Alignement

La prochaine étape est l' alignement . Il s'agit de s'assurer que chaque élément est correctement positionné par rapport aux autres éléments, par exemple en s'assurant que les colonnes sont alignées le long de la page.

Comme vous pouvez le voir sur les images suivantes, la première page avec des éléments dans de nombreuses colonnes différentes (alignement faible) est beaucoup moins attrayante et lisible que la seconde, qui a un fort alignement

Page avec un alignement faiblePage avec un fort alignement

Contraste

Il est important de prendre également en compte le contraste lors de la création d'une page ou d'une application. Le contraste est la différence entre les couleurs qui apparaissent les unes à côté des autres sur la page.

Comme vous pouvez le voir sur cet exemple, les pages avec un faible contraste sont difficiles à lire et les éléments ne ressortent pas.

Page avec un faible contraste

Les pages avec un bon contraste, comme celle ci-dessous, sont non seulement bien meilleures, mais sont plus conviviales et accessibles.

Exemple de bon contraste

Pour vous aider à obtenir un contraste parfait, les WCAG (Web Content Accessibility Guidelines) suggèrent un rapport de contraste minimum (AA) d'au moins 4,5: 1, ou 3: 1 pour un texte volumineux, ou un rapport de contraste amélioré (AAA) de 7 : 1 ou 4,5: 1 pour le texte volumineux. Il existe une gamme de plugins ou de sites Web pour vérifier cela.

Échelle

L'échelle est également une partie essentielle de l'interface utilisateur, alors considérez attentivement la taille de chaque élément. Par exemple, les éléments doivent être suffisamment grands par rapport à la page (donc pas de grands espaces). En outre, les éléments de plus grande importance, tels que les titres, devraient être plus grands que ceux de moindre importance.

Jetez un œil aux images avant et après ci-dessous et notez à quel point la page est meilleure lorsqu'elle est correctement mise à l'échelle.

Page avec une mauvaise échelleExemple de bonne échelle

Typographie

La typographie a également un impact important sur l'interface utilisateur. Il existe de nombreuses façons d'ajuster cela, notamment les choix de police, la taille de la police, l'alignement, l'espacement des lettres, la hauteur des lignes, les styles de police, la couleur et le contraste.

En règle générale, n'utilisez pas plus de 2 familles de polices sur une seule page et assurez-vous que les différents aspects fonctionnent ensemble afin d'établir l'ordre d'importance. C'est ce qu'on appelle la hiérarchie visuelle , que nous aborderons plus en détail ci-dessous.

Si vous suivez ces conseils, votre page sera aussi belle que celle-ci:

Exemple de bonne typographie

Et pas déroutant et illisible, comme ceci:

Page avec une typographie médiocre

Couleur

La conception de l'interface utilisateur fondamentale qui façonne d'abord l'expérience utilisateur est la couleur . La psychologie des couleurs signifie que chaque couleur a un sens pour certaines personnes - par exemple, le rouge peut signifier un danger, tandis que le blanc peut évoquer la propreté et la sérénité.

Soyez prudent avec la couleur, cependant. Les significations varient selon les cultures, alors faites toujours vos recherches et tenez compte de votre public cible lors du choix des couleurs.

Il est également important de se rappeler que trop de couleurs peuvent créer une mauvaise interface utilisateur et que les couleurs que vous choisissez d'utiliser doivent se compléter. En règle générale, vous ne pouvez pas vous tromper en utilisant des variations plus claires ou plus foncées de la même teinte les unes à côté des autres. Regardez à quel point la deuxième image ci-dessous est plus facile à regarder que la première!

Page avec de mauvais choix de couleursBonne utilisation de la couleur

Hiérarchie visuelle

Le dernier élément de notre liste des principes de base de la conception est la hiérarchie visuelle . Certains éléments d'une interface utilisateur sont plus importants que d'autres. La hiérarchie visuelle nous permet d'établir cette importance.

Cela peut être fait avec la position, le contraste, la couleur, l'échelle, le style ou une combinaison de ce qui précède, comme le montre la deuxième image ci-dessous, qui a une bien meilleure hiérarchie visuelle que la première.

Page avec une mauvaise hiérarchie visuelleUtiliser la typographie et la couleur pour établir la hiérarchie visuelle

Emballer

Dans cet article, nous avons couvert les sept principaux fondements du design: espace blanc, couleur, contraste, échelle, alignement, typographie et hiérarchie visuelle. Ils sont tous également importants pour l'interface utilisateur - si l'un de ces éléments fait défaut, toute l'expérience utilisateur en souffrira. Assurez-vous donc de les considérer tous lors de la création de vos conceptions d'interface utilisateur.

Le cours UI Design Fundamentals

Si vous souhaitez approfondir davantage ces sujets, veuillez consulter le cours gratuit UI Design Fundamentals à Scrimba. Vous y découvrirez les principes fondamentaux de manière beaucoup plus détaillée.

Bonne chance et bon codage :)