Master 1 - mention Audiovisuel, Médias Interactifs Numériques, et Jeux - parcours Direction de Projets Numériques

Enseignements hors programme

Ces cours regroupent des ressources additionnelles conçues pour enrichir les compétences en conception numérique. Elles proposent un appui pratique à travers un guide UI et un enseignement consacré à Figma, afin d’accompagner le développement d’une pratique plus complète des outils du design.

Voir tous les enseignement hors programme
ENSEIGNEMENT HORS PROGRAMME

UI Design : Guide pratique
- principes et cohérence graphique -

EXPERT

Description

Ce guide propose un ensemble structuré de principes et de méthodes pour concevoir des interfaces claires, cohérentes et adaptées aux usages numériques. Il couvre les fondamentaux visuels — typographie, couleur, mise en page, iconographie — ainsi que les aspects liés à la lisibilité, à l’accessibilité et aux bonnes pratiques de composition. L’ensemble constitue une ressource opérationnelle destinée à accompagner la création et l’évaluation d’interfaces dans des contextes variés.

Objectifs pédagogiques

  • Structurer la compréhension des principes d’UI Design : Offrir des repères sur les notions essentielles permettant d’aborder la conception d’interface avec une base solide : typographie, couleurs, hiérarchie visuelle et organisation des éléments.
  • Développer une pratique fondée sur des règles et standards reconnus : S’appuyer sur des recommandations issues du design système, des bonnes pratiques de lisibilité et des référentiels d’accessibilité.
  • Accompagner la mise en œuvre dans des projets réels : Proposer des exemples, check-lists et démonstrations pour aider à appliquer concrètement les choix graphiques et ergonomiques dans la production d’écrans.
  • Favoriser la cohérence et la qualité visuelle des interfaces : Aider à produire des interfaces lisibles, équilibrées, accessibles et alignées avec les besoins des utilisateurs.

Sommaire

  1. Fondamentaux de la typographie → structurer la lisibilité, la hiérarchie et l’identité visuelle
  2. Fondamentaux de la couleur → comprendre la perception, les modèles et les usages en interface
  3. Harmonies & combinaisons → construire des palettes fiables et cohérentes
  4. Mise en page & structuration → organiser l’information et équilibrer l’interface
  5. Iconographie → renforcer la compréhension par un langage visuel clair
  6. Animations & micro-interactions → soutenir l’attention et guider les actions
  7. Accessibilité → assurer la perception, la lisibilité et l’usage pour tous
  8. Check-lists & bonnes pratiques → valider la qualité d’une interface avant mise en production

UI Design : Guide pratique - principes et cohérence graphique

1. Fondamentaux de la typographie

  1. les typologies de polices (sérif, sans-sérif, cursives, monospace, display),
  2. les Web Safe Fonts et Web Fonts,
  3. les règles de lisibilité numérique (poids, italique, majuscules, contrastes, formes de lettres),
  4. les principes de choix des polices (cohérence, identité, impact),
  5. les tendances contemporaines,
  6. les associations typographiques et leur rôle,
  7. les ajustements pour l’accessibilité (tailles, interlignage, largeur de ligne, fallback, tests de lisibilité).

2. Fondamentaux de la couleur

  1. théorie de la couleur et importance en UI (identité, organisation, accessibilité),
  2. modèles colorimétriques : RVB, CMJN, HSB/monochrome, niveaux de gris, RYB,
  3. importances émotionnelles et culturelles des couleurs,
  4. usages détaillés couleur par couleur (rouge, bleu, jaune, orange, vert, rose, mauve, brun, gris, blanc, noir),
  5. propriétés mesurables : teinte, saturation, luminosité, température, contraste.

3. Harmonies & combinaisons

  1. harmonies classiques (analogues, complémentaires, triadiques, etc.),
  2. équilibre des valeurs,
  3. palettes monochromes et multi-teintes,
  4. impact sur la hiérarchie et l’attention.

4. Mise en page & structuration

  1. principes de mise en page,
  2. gestion des espaces,
  3. alignements, grilles, colonnes,
  4. hiérarchie visuelle et équilibre des masses.

5. Iconographie

  1. types d’icônes,
  2. cohérence des traits,
  3. lisibilité et usages en contexte fonctionnel.

6. Animations & micro-interactions

  1. animation comme indicateur d’état,
  2. feedback visuel,
  3. mouvement au service de la clarté, pas de la décoration.

7. Accessibilité

  1. contrastes (normes recommandées),
  2. tailles minimales,
  3. éléments interactifs accessibles,
  4. couleurs problématiques pour le daltonisme,
  5. bonnes pratiques de navigation.

8. Check-lists & bonnes pratiques

  1. check-list typographique,
  2. vérifications de contraste,
  3. cohérence de palette,
  4. test multi-supports,
  5. rappel des erreurs fréquentes.
Télécharger le guide