Design d'interfaces numériques

Branding et personnalité

Le branding est l'identité globale d'une marque : valeurs, ton, personnalité, esthétique. Le design d'interface doit traduire cette identité visuellement. Un produit numérique est un point de contact majeur entre marque et utilisateur. Mauvais branding = produit oubliable, même bien conçu.

Pourquoi un UI designer doit comprendre le branding

• Toutes les décisions visuelles (couleur, typo, ton) doivent servir la marque
• Sans direction de marque claire, on tombe dans le générique
• Lien avec MAYA et Jakob's Law : équilibre entre identité distincte et conventions familières

Charte de marque (Brand Guide) — composantes typiques

Document de référence qui codifie l'identité visuelle et verbale d'une marque. Partagé par toute l'équipe (design, marketing, dev, contenu). Garantit la cohérence à travers tous les canaux.

• Logo et règles d'utilisation
• Palette de couleurs (primaires, secondaires, neutres, sémantiques)
• Typographie (familles, hiérarchie)
• Imagerie et photographie (style, traitement)
• Iconographie
• Ton de voix et règles rédactionnelles
• Exemples d'usage (do's and don'ts)

Archétypes de marque (Jung / Mark & Pearson)

12 archétypes universels issus de la psychologie jungienne. Popularisés par Margaret Mark et Carol Pearson (The Hero and the Outlaw, 2001). Chaque archétype a une personnalité, des valeurs, un ton. Permettent de répondre à des questions de design (« est-ce qu'un héros utiliserait cette couleur ? »).

Méthode rapide — sans gros budget de branding

Pour les projets sans gros budget de branding (cas fréquent pour un UI designer) :

• Choisir 3-4 adjectifs qui décrivent la marque
• Définir leur opposé défendable (ce qu'on ne veut pas être)
• Exemple : « Crédible vs casual », « Geek vs ennuyant », « Humble vs omniscient »
• Tester chaque décision visuelle contre ces adjectifs

Moodboard

Collection visuelle de références qui exprime une direction esthétique. Sert à aligner client, designer, équipe sur l'ambiance recherchée. Étape de divergence avant de converger sur le design.

Ce qu'on y met

• Captures d'écran de sites/apps inspirants
• Photos d'ambiance
• Palettes de couleurs
• Échantillons typographiques
• Textures et patterns
• Illustrations ou éléments graphiques
• Mots-clés et adjectifs

Bonnes pratiques

• Une seule direction par moodboard (sinon = fourre-tout)
• 15-30 références suffisent
• Annoter pourquoi chaque référence est pertinente
• Présenter 2-3 directions distinctes au client (pas 1 seule)
• Distinguer moodboard (ambiance générale) de références d'UI (composants précis)

Outils : Pinterest · Milanote · FigJam · Behance · Dribbble · Mobbin

Style tile

Pont entre moodboard (inspiration) et mockup (application). Montre typo, couleurs, boutons, textures appliqués sur une page d'exemple — sans encore composer une page complète. Permet de valider la direction visuelle avant le hi-fi.

Modèle HSB

Plus intuitif que RGB ou HEX pour ajuster une couleur en UI. Permet de créer des variations cohérentes (même teinte, saturation/luminosité différentes).

Schémas de couleurs

Règle du 60-30-10

Types de couleurs dans une palette UI

Couleurs et accessibilité

Ne jamais s'appuyer uniquement sur la couleur pour transmettre une information — utiliser aussi icônes et labels. 8% des hommes ont une forme de daltonisme.

Outils : WebAIM Contrast Checker · Plugin Stark dans Figma

Dark Mode

• Standard depuis ~2019 sur la majorité des plateformes
• Pas une simple inversion de couleurs
• Privilégier un fond gris très foncé (jamais pur noir, sauf OLED)
• Saturer un peu plus les couleurs en mode sombre
• Tester chaque composant dans les deux modes

Police vs fonte

Les deux termes sont souvent confondus. La distinction remonte à l'imprimerie au plomb : la police de caractères (anglais : typeface) désignait le dessin d'ensemble — la famille graphique complète, ex. : Helvetica, Inter — tandis que la fonte (anglais : font) était le matériel physiquement « fondu » pour imprimer ce dessin dans un corps et une graisse précis.

En numérique, la fonte est le fichier informatique qui décline la police : Arial Regular et Arial Bold sont deux fontes d'une même police (Inter-Bold.woff2 est une fonte de la police Inter). À ne pas confondre non plus avec la typographie, qui est l'art et la technique de composition et de mise en page des textes — le champ d'étude global qui englobe la création et l'usage des polices.

Source : Blog UX — Polices de caractères, fonte, typographie : quelles différences ?

Catégories de polices

Guide de combinaison rapide

Hiérarchie typographique

Règles de lisibilité

Échelle modulaire

Système mathématique pour des tailles cohérentes. Multiplier la taille body par un ratio.

Outil : typescale.com

Pixels vs rem

Le rem (Root EM) est une unité de mesure relative basée sur la taille de police de l'élément racine html (16px par défaut dans les navigateurs). Contrairement au pixel (unité fixe), le rem s'adapte aux préférences d'accessibilité de l'utilisateur et facilite le redimensionnement global de l'interface.

Hiérarchie visuelle

Ordre dans lequel les éléments sont perçus par l'œil. Toujours guider l'utilisateur vers l'action la plus importante.

Principes Gestalt

Théorie de la psychologie de la perception (école allemande, début XXe siècle). Les principes Gestalt décrivent comment le cerveau groupe automatiquement les éléments visuels.

Réf. : reallygooddesigns.com — Gestalt in UI/UX

Principe CRAP

Réf. : Digital Learning Institute — Principes CRAP

Équilibre et White Space

Grilles

Règle des tiers & Nombre d'or

La règle des tiers divise l'espace en une grille 3×3. Positionner les éléments clés aux intersections capte l'attention naturellement. Applications : placer le CTA principal au tiers supérieur droit · utiliser les lignes de tiers pour créer une hiérarchie visuelle.

Le nombre d'or (φ ≈ 1.618) génère des proportions naturellement harmonieuses. Applications : ratio sidebar/contenu (38/62%) · espacement entre sections · proportions typographiques.

Catégories d'éléments UI

Conventions (Loi de Jakob)

• Logo en haut à gauche → ramène à l'accueil
• Recherche en haut · Compte/profil en haut à droite
• Panier en haut à droite (e-commerce)
• Navigation principale horizontale (desktop) ou hamburger/bottom nav (mobile)
• Bouton primaire à droite dans les paires d'actions (web occidental)
• Footer pour les liens secondaires et légaux

Interaction Design (IxD)

Discipline qui étudie comment les utilisateurs interagissent avec un produit. Couvre : comportements, transitions, animations, temps de réponse, feedbacks. Le « comportement » de l'interface, par opposition à son apparence statique.

Les 5 dimensions de l'IxD (Crampton Smith / Silver)

États des composants

Un composant n'est pas une image fixe — c'est un ensemble d'états. Le débutant designe le « default » et oublie le reste. Chaque état doit être designé, documenté et livré au dev.

Microinteractions

Petites animations fonctionnelles qui répondent à une action. Formalisé par Dan Saffer (Microinteractions, 2013). Donnent vie à l'interface, fournissent du feedback, créent du plaisir.

Exemples : Toggle d'un interrupteur qui glisse · Bouton « like » animé · Pull-to-refresh · Validation en temps réel · Vibration au succès d'un paiement

Bonnes pratiques : Rapides (200-400 ms) · Pas distrayantes · Fonctionnelles avant d'être décoratives

Transitions et animation

Donne un sens de continuité et de localisation. Principes : easing (jamais linéaire) · durée · direction. Références : Material Design et Apple HIG documentent les standards de motion.

Design Atomique

Méthodologie de structuration d'un système d'interface proposée par Brad Frost (Atomic Design, 2013). Inspirée de la chimie — les interfaces sont composées d'éléments combinables.

Design System

Ensemble complet de standards, composants, principes et documentation pour concevoir de manière cohérente. Plus large qu'une bibliothèque de composants — inclut les règles d'usage et la philosophie. Source unique de vérité pour designers et développeurs.

Design Tokens

Couche d'abstraction la plus basse d'un design system. Valeurs nommées sémantiquement plutôt que littéralement.

• color-primary-500 au lieu de #3B82F6
• space-4 au lieu de 16px
• Permet le theming (dark mode, multi-marque) et la cohérence cross-plateforme
• Règle clé : jamais de valeur brute dans un composant, toujours un token

Design Systems de référence

Ressource avancée : Shopify — Web Components API

Définition

WCAG = Web Content Accessibility Guidelines · Publié par le W3C · Version actuelle : WCAG 2.2 (octobre 2023) · Standard légal dans la majorité des juridictions.

Les 4 principes POUR

Critères essentiels en UI design

Ressources WCAG

• W3C WCAG 2.2 — Référence officielle
• WebAIM — Vulgarisation et outils
• A11y Project — Checklists pratiques
• WAVE — Outil d'audit de page

Obligations légales

Approche de conception inclusive qui vise à concevoir pour la diversité d'utilisateurs dès le départ. Plus philosophique que WCAG, mais complémentaire. Différence clé : l'accessibilité rend un produit accessible après coup — le design universel conçoit pour la diversité dès le début.

Plugins d'accessibilité Figma

• Stark — Le standard. Contraste, simulation de daltonisme, vision faible
• A11y Annotation Kit — Annoter les considérations accessibilité pour le handoff
• Able — Vérification de contraste rapide
• Color Blind Simulator — Tester les palettes en mode daltonien

Définition

Des utilisateurs représentatifs accomplissent des tâches précises avec un prototype ou produit. On observe ce qu'ils font, écoute ce qu'ils disent, mesure les résultats.

Comment structurer un test

Métriques d'usabilité

Outils : Maze · UserTesting · Lookback · Useberry · Optimal Workshop

Évaluation heuristique

Méthode d'évaluation par expert (pas par utilisateurs). Utilise les 10 heuristiques de Nielsen comme grille d'analyse. Rapide, peu coûteuse, complémentaire au test utilisateur. Popularisée par Nielsen et Molich (1990).

Graphique radar (Spider Graph)

Visualisation des résultats — 10 axes (un par heuristique), score de 0 à 5. Forme polygonale révélant forces et faiblesses. Utile pour communication visuelle rapide, comparaison avant/après, benchmark concurrentiel.

Tree Testing

Valide une arborescence sans interface visuelle. L'utilisateur navigue dans la structure des labels pour trouver un élément cible. Permet de tester l'AI avant de wireframer.

Outils : Treejack · UXtweak · Maze

Test du premier clic

Mesure où les utilisateurs cliquent en premier pour accomplir une tâche. Le premier clic est critique : s'il est bon, l'utilisateur a 87% de chances de réussir la tâche (Bailey, 2008). S'il est mauvais, les chances chutent à 46%.

Test des 5 secondes

On montre une page 5 secondes puis on la masque. On demande ce que l'utilisateur a retenu. Évalue la clarté et la première impression. Particulièrement utile pour landing pages et propositions de valeur.

Enregistrement de sessions

Outils qui enregistrent automatiquement ce que font les utilisateurs réels sur le produit en production. Observation passive, non scénarisée. Source de données comportementales quantitatives et qualitatives.

Outils : Hotjar · FullStory · Microsoft Clarity (gratuit) · Smartlook · Mouseflow

Frame vs Groupe

Sizing modes

Autolayout — Concepts fondamentaux

L'outil le plus puissant de Figma. Reproduit la logique CSS Flexbox. Indispensable pour les composants réutilisables et le responsive.

Cas pratiques typiques

Modèles mentaux essentiels

Terminologie

Les 4 types de Properties

Raccourcis essentiels

Styles vs Variables

Architecture en couches (aliasing sémantique)

Changer une primitive met à jour toute la chaîne. Permet le dark mode sans dupliquer. Communication design ↔ dev claire.

Modes — exemple Light/Dark

1. Créer collection « Colors »
2. Ajouter modes : Light, Dark
3. Créer variables sémantiques (background, text-primary, border…)
4. Définir valeurs différentes par mode
5. Appliquer aux composants
6. Switcher le mode au niveau du frame racine → toute l'interface bascule

Interactions

Animations