GratuitIntermédiaire2 h 09

Principes de l'UI design

Donnez une forme claire et cohérente à vos interfaces : hiérarchie visuelle, typographie, espacements et grilles, couleur et contraste, icônes et images, états des composants, puis assemblage de tout cela dans un design system que votre équipe peut faire vivre.

Ce que vous saurez faire

  • Construire une hiérarchie visuelle claire sur un écran
  • Choisir et organiser une échelle typographique lisible
  • Appliquer un système d'espacement et de grille cohérent
  • Composer une palette de couleurs et vérifier les contrastes d'accessibilité
  • Concevoir un jeu d'icônes et d'images homogène
  • Dessiner les états d'un composant et structurer un design system avec ses règles d'usage

Prérequis conseillés

Initiation à Figma

Plan du cours

Partie 1 · Composer l'écran : hiérarchie, typographie, espacement42 min

  1. La hiérarchie visuelle10 min
  2. La typographie : lisibilité et échelle11 min
  3. Espacement, alignement et grille11 min
  4. Quiz : hiérarchie, typographie et espacement10 min

Partie 2 · Couleur, contraste et iconographie43 min

  1. La couleur : composer une palette11 min
  2. Contraste et accessibilité visuelle11 min
  3. Icônes, images et illustrations11 min
  4. Quiz : couleur, contraste et iconographie10 min

Partie 3 · Composants, états et design system44 min

  1. Les états des composants11 min
  2. Du style aux tokens : les fondations d'un design system12 min
  3. Documenter et faire vivre un design system11 min
  4. Quiz : composants, états et design system10 min
Principes de l'UI design : cours gratuit d'interface en français · Formuloo School