L’interface utilisateur (User Interface, UI) désigne l’ensemble des éléments visuels, textuels, sonores ou tactiles par lesquels un·e utilisateur·rice interagit avec un système numérique (site web, application, outil pédagogique, etc.).
Elle inclut :
- les composants interactifs (boutons, formulaires, menus),
- la mise en page (hiérarchie visuelle, espacement, alignement),
- la typographie, la palette de couleurs, les icônes,
- les retours visuels (états : survol, focus, chargement, erreur).
Outils et technologies pour concevoir et développer une UI
1. Langages et standards fondamentaux (indispensables)
| Techno | Rôle | Bonnes pratiques DMA |
|---|---|---|
| HTML5 | Structure sémantique | → Utiliser <button>, <label>, <nav>, etc. |
| CSS3 | Style, mise en page, animations | → Préférer Grid/Flexbox natifs à Bootstrap |
| JavaScript (ES6+) | Comportement dynamique | → Vanilla JS > framework si interaction simple |
| ARIA | Accessibilité avancée | → Seulement quand HTML sémantique ne suffit pas |
2. Systèmes de design & composants (à utiliser avec discernement)
| Outil | Usage | Recommandation |
|---|---|---|
| Design system maison | Cohérence visuelle sur mesure | Gestion des tokens de design Theo (Salesforce, open source) ou simple JSON Génération de palette accessible ColorBox (open source) ou Leonardo (Adobe, open) Documentation légère Docusaurus (statique) ou Markdown + GitHub Pages Tests de contraste A11y Color Palette (extension Chrome) |
| Tailwind CSS | Utility-first, très configurable | À compiler localement, pas via CDN |
| Bootstrap | Framework rapide | À éviter si surcharge inutile (JS + CSS lourd) |
| Shoelace / Lightning CSS | Composants web standards | Basés sur Web Components, légers |
| WordPress Block Theme | UI moderne sans page builder | Alternative souveraine à Elementor |
3. Outils de conception (avant le code)
| Outil | Type | Alternative libre/sobre |
|---|---|---|
| Figma | Design collaboratif | Cloud propriétaire → exporter en SVG/JSON |
| Penpot | Alternative open source, auto-hébergeable | Basé sur SVG, compatible avec workflow DMA |
| Excalidraw | Schémas main levée, pédagogiques | Open source, export PNG/SVG, versionnable |
| Pencil Project | Wireframes low-fi | → Pour se concentrer sur la structure, pas le look |
4. Technologies d’implémentation UI moderne
| Tech | Cas d’usage | Attention |
|---|---|---|
| Web Components | Composants réutilisables, sans framework | Standard du W3C, léger, pérenne |
| React / Vue / Svelte | Apps interactives complexes | Surdimensionné pour sites content-first |
| Astro Islands | Interactivité ciblée dans site statique | Approche « partial hydration » idéale |
| Alpine.js | Comportements simples sans build | Léger (7 Ko), proche de jQuery mais moderne |
5. Accessibilité & tests UI
| Outil | Fonction |
|---|---|
| axe / Lighthouse | Audit automatisé a11y |
| WAVE | Analyse visuelle des problèmes |
| NVDA / VoiceOver | Test avec lecteur d’écran |
| Keyboard navigation test | Vérifier tabulation logique |
| Contrast checker | Valider rapports de contraste (WCAG) |
6. Performance UI (éviter le fard numérique)
- Pas d’animations non essentielles (
prefers-reduced-motion) - Polices système par défaut (ou fallback explicite)
- Icônes en SVG inline (pas en police d’icônes)
- États focus visibles (pas de
outline: nonesans remplacement) - Chargement progressif (contenu lisible avant JS)
7. Éco-conception UI
- Mode sombre respectueux (
@media (prefers-color-scheme: dark)) - Images vectorielles plutôt que bitmaps quand possible
- Réduction du nombre de requêtes (sprites CSS, icônes inline)
- Pas de vidéos autoplay ni carrousels gourmands