JOUR 3 — UI Design, Design System & Maquettes HD + Prototypage

---

Objectifs pédagogiques

• Comprendre les bases du UI design
• Créer une hiérarchie visuelle claire
• Concevoir un mini design system
• Réaliser plusieurs maquettes haute-fidélité (HD)
• Utiliser les Styles Figma (couleurs, textes)
• Construire des composants interactifs (boutons, inputs)
• Prototyper un parcours fluide avec transitions

---

1. Principes essentiels du UI design (1h)

1.1. La hiérarchie visuelle

Une structure hiérarchie permet de guider le regard de l’internaute.

Leviers

• Taille
• Gras
• Couleur
• Espacement
• Bordure / background
• Position dans la page

---

1.2. La grille (Grid)

Une interface propre utilise :

• 8px grid
• Marges régulières
• Alignements systématiques
• Colonnes (desktop : 12 colonnes par ex.)

---

1.3. La couleur

Règles simples :

• 1 couleur primaire
• 1 couleur secondaire
• 2 à 4 nuances neutres
• 1 couleur accentuée
• Jamais plus de 2 couleurs saturées par écran

---

1.4. La typographie

Règle simple : UNE seule famille de police dans tout le projet.

Exemple :

• H1 : 32 px, semibold
• H2 : 26 px, semibold
• H3 : 20 px, medium
• Body : 16 px
• Caption : 13 px

---

2. Design System minimal (1h)

Un design system est la boîte à outils visuelle d’un projet pour les développeur.euse.s.

Pour en savoir plus voici une synthèse et connaitre les outils pour concevoir un Design System

Il contient les différents composants

• Styles de texte
• Styles de couleurs
• Boutons
• Inputs
• Cartes
• Icônes
• Espacements

---

2.1. Palette minimaliste recommandée

Primary: #3B82F6 (bleu)
Primary Dark: #1E40AF
Neutral 900: #111111
Neutral 600: #444444
Neutral 300: #CCCCCC
Neutral 100: #F5F5F5
Success: #10B981
Error: #EF4444

---

2.2. Typographies

Font Family: Inter (ou Roboto)
H1: 32/40 semibold
H2: 26/34 semibold
Body: 16/24 regular
Caption: 13/20 regular

---

2.3. Boutons (components ou composants)

Primary Button

• BG : Primary
• Text : white
• Padding : 16/24
• Border radius : 8px

Secondary Button

• BG : white
• Border : 2px Primary
• Text : Primary

États possibles:

• Default
• Hover
• Focus
• Disabled

---

2.4. Inputs

[ Label ]
[ champs texte ..................... ]
Erreur : "Veuillez remplir ce champ"

États nécessaires :

• Default
• Focus
• Error

---

3. Maquettes HD : passer du wireframe au concret (1h30)

Écrans à produire en HD (au choix)

1. Page d’accueil
2. Page de login / authentification
3. Liste d’éléments (articles, films, produits…)
4. Fiche détaillée avec éventuellement un tableau
5. Page de réservation / achat

---

Règles de transformation wireframe vers la version HD

• Appliquer les styles
• Utiliser les composants
• Passer du gris vers la couleur
• Rendre tout cohérent pour respecter la charte graphique
• Ajouter des images (placeholder Figma ok)

---

TP (1h) : Créez 3 écrans HD cohérents

Contraintes

• Utiliser la grille 8px
• Utiliser uniquement les styles du *Design System
• Utiliser au moins 3 composants
• Ajouter une image (Frame : Fill)
• Rendre l’écran responsive (auto-layout obligatoire !)

---

4. Prototypage avancé (45 min)

4.1. Interactions

• On Click
• While Hovering
• Drag interactions
• Smart Animate
• Overlays (popups)

---

4.2. TP : Créer un mini-prototype

Écrans nécessaires :

• Liste
• Détail
• Confirmation

Si on sélectionne un élément de la Liste on arrive sur le détail de l’article ou du produit avec possibilité d’effectuer un ajout à un panier.

Ajoutez une animation :

• Smart Animate sur un bouton
• Transition slide-in
• Overlay “Ajout au panier”

---

5. TP final du jour (30 min)

Créer votre mini Design System + 2 écrans HD + 1 prototype.

A fournir :

• 2 écrans HD minimum
• Prototype navigable
• Design system minimaliste
• Nom des frames + pages propres