Le UI design (User Interface Design, ou conception d’interface utilisateur) est la discipline qui consiste à concevoir l’apparence visuelle et les éléments interactifs d’un produit numérique (site web, application, logiciel, etc.) afin de rendre son usage clair, esthétique et efficace.
En d’autres termes : le UI design, c’est ce que l’utilisateur voit et avec quoi il interagit.
Ce que le UI design inclut
- La typographie (choix des polices, hiérarchie des titres)
- La palette de couleurs (cohérence, contraste, accessibilité)
- Les icônes, boutons, champs de formulaire, menus
- Les espacements, alignements, ombres, transparences
- Les micro-interactions (effet au survol, animation d’un like, transition)
- L’adaptation visuelle aux différents écrans (en lien avec le responsive design)
UI design ≠ UX design (mais complémentaire)
| UI Design | UX Design | |
|---|---|---|
| Focus | Apparence et interactivité | Expérience globale, besoins, parcours |
| Question | « À quoi ça ressemble ? » | « Est-ce que ça fonctionne bien pour l’utilisateur ? » |
| Livrables | Maquettes visuelles, design system | Personas, parcours utilisateurs, prototypes fonctionnels |
| Analogie | Le look du tableau de bord d’une voiture | L’ergonomie du poste de conduite, la logique des commandes |
Le bon produit = bonne UX + bon UI
Une belle interface (UI) ne sauve pas une mauvaise expérience (UX).
Une excellente UX est mal perçue si le UI est laid ou confus.
Outils courants du UI designer
- Figma (gratuit, collaboratif, standard de l’industrie)
- Sketch (macOS uniquement)
- Framer (pour du UI + interactions avancées)
- Penpot (alternative open source à Figma)
Bonnes pratiques UI
- Cohérence : même style partout (design system)
- Accessibilité : contraste suffisant, tailles lisibles, navigation clavier
- Feedback visuel : l’utilisateur doit savoir que son action a fonctionné
- Moins, c’est plus : éviter la surcharge cognitive (principe de clutter)
Exemple concret
Contexte :
Une application mobile pour réserver des hébergements locaux avec un accent sur les territoires kabyles, amazighs ou ruraux.
1. UX Design (expérience utilisateur)
Objectif : rendre le parcours simple, rassurant et efficace.
- Recherche utilisateur :
→ On découvre que les voyageurs locaux veulent :- Voir qui est l’hôte (photo, nom, téléphone)
- Savoir s’il y a eau chaude, WiFi, clim (sans jargon)
- Réserver sans carte bancaire (paiement à l’arrivée ou via CIB/BaridiMob)
- Parcours clé :
- Recherche : filtres simples (prix, village, disponibilité)
- Fiche hébergement : photo + infos essentielles en haut (pas besoin de scroller)
- Contact direct : bouton « Appeler l’hôte » visible
- Réservation : possibilité de laisser un message (« Je viens avec 2 enfants »)
- Confirmation : SMS + email en français, kabyle, tamazight et arabe
- Tests utilisateurs :
→ On corrige un point bloquant : les gens ne comprenaient pas l’icône “écran” → remplacée par “WiFi”.
L’UX design a défini quoi proposer et dans quel ordre, en fonction des besoins réels.
2. UI Design (interface utilisateur)
Objectif : rendre l’interface claire, belle et culturellement pertinente.
- Identité visuelle :
- Palette de couleurs inspirée des paysages kabyles : terres ocres, bleu nuit, blanc neige
- Typographie lisible même en plein soleil (ex. : Inter ou Tajawal pour l’arabe)
- Éléments d’interface :
- Bouton principal = “Réserver” en ocre vif (#D2691E), rond avec ombre douce
- Icônes personnalisées :
- 🛏️ pour “chambres”
- 🚿 pour “eau chaude”
- 📞 pour “appeler l’hôte”
- Photos en pleine largeur, sans cadre, avec légende en kabyle (ex. : “Tajmaɛt n Tala” = maison près de la source)
- Adaptation linguistique :
- Interface multilingue (fr, kab, ar) avec changement rapide via un drapeau ou un menu en bas
- Noms des villages en Tifinagh + transcription latine
- Micro-interactions :
- Quand on clique sur “Appeler”, l’icône 📞 pulse doucement pour confirmer l’action
- Les dates sélectionnées dans le calendrier se remplissent d’ocre