Ce que vous saurez faire à la fin
- Distinguer un wireframe low-fi d’un mockup hi-fi et choisir le bon niveau selon la phase projet.
- Maîtriser 4 outils gratuits ou très abordables : Whimsical, Excalidraw, Balsamiq et Figma.
- Construire une bibliothèque de composants standards réutilisables pour vos écrans mobiles et web.
- Valider vos wireframes en interne en 30 minutes avec un script de revue clair.
- Réussir la transition wireframe vers UI design sans perdre la logique fonctionnelle.
Durée : 3h. Pré-requis : compte gratuit Figma ou Whimsical, navigateur Chrome ou Firefox à jour, brief produit validé, équipe disponible 30 min pour la revue, budget zéro pour démarrer ou environ 9 000 FCFA/mois pour Figma Pro si vous êtes plusieurs collaborateurs.
Étape 1 — Comprendre pourquoi wireframer avant de coder
Le wireframe est le plan d’architecte de votre produit numérique. Il définit la structure, la hiérarchie de l’information et les flux utilisateur sans s’occuper des couleurs ni de la typographie. Pour une PME sénégalaise qui développe une app de e-commerce ou un site vitrine, sauter cette étape coûte cher : un changement structurel après le développement multiplie le coût par 10 ou 20. Wireframer en 1 journée évite 2 semaines de refactoring à 250 000 FCFA.
Étape 2 — Distinguer low-fi et hi-fi
Le low-fi (basse fidélité) utilise des rectangles gris, des placeholders Lorem Ipsum et zéro effort visuel. Il sert à valider la logique. Le hi-fi (haute fidélité) ressemble au produit final, avec couleurs, typographie, images réelles. Confondre les deux fait perdre du temps : passer 4h à choisir une couleur sur un wireframe qui changera de structure dans 24h est absurde.
Comparatif low-fi vs hi-fi
===========================
Critère | Low-fi | Hi-fi
-----------------|-----------------|------------------
Temps par écran | 5 à 10 min | 1 à 3h
Couleurs | Gris/blanc | Charte complète
Typographie | Sans-serif basique | Police finale
Images | Rectangles X | Photos réelles
Texte | Lorem ipsum | Copy validé
Outils typiques | Excalidraw, | Figma, Adobe XD
| Balsamiq |
Quand l'utiliser | Idéation, | Validation client,
| exploration | dev handoff
Coût d'un changement | Quasi nul | ÉlevéÉtape 3 — Choisir son outil selon le contexte
Le bon outil dépend de votre équipe, votre budget et votre niveau. Whimsical est parfait pour démarrer en solo. Excalidraw est gratuit, open source, idéal pour les esquisses rapides en réunion. Balsamiq impose un style hand-drawn qui empêche les clients de chipoter sur les détails visuels. Figma est le standard du marché pour passer du wireframe au design final dans le même fichier.
Comparatif outils wireframing 2026
===================================
Outil | Plan gratuit | Pro/mois | Force
------------|---------------|-----------|------------------
Whimsical | 4 docs | 6 000 F | Vitesse, simplicité
Excalidraw | Illimité | 0 F | Style esquisse
Balsamiq | Essai 30j | 5 500 F | Look low-fi forcé
Figma | 3 fichiers | 9 000 F | Pro, transition UI
Sketch | Essai 30j | 6 000 F | Mac uniquement
Adobe XD | Limité | 12 000 F | Écosystème Adobe
Penpot | Illimité | 0 F | Open source
Recommandation freelance Dakar : Figma gratuit
Recommandation atelier équipe : Whimsical
Recommandation présentation client : BalsamiqÉtape 4 — Démarrer avec Excalidraw en 5 minutes
Ouvrez excalidraw.com dans votre navigateur. Aucune inscription requise. Dessinez un rectangle pour le header, ajoutez le logo, listez 3 à 5 boutons de navigation. Sauvegardez en .excalidraw pour éditer plus tard ou exportez en PNG pour partager sur WhatsApp. Pour une réunion brainstorm avec 3 collègues, c’est l’outil le plus rapide du marché.
Étape 5 — Construire un wireframe mobile sur Whimsical
Sur whimsical.com, créez un nouveau Wireframe (pas un Flowchart). Choisissez le template Mobile (390×844 px, format iPhone récent). Glissez les composants depuis la sidebar : header, navbar, card, button, input. Whimsical impose un style monochrome qui force l’équipe à se concentrer sur la structure. Vous pouvez avoir 8 écrans complets en moins d’une heure.
Étape 6 — Composants standards à connaître
Toute interface mobile ou web utilise les mêmes briques de base. Apprenez à les nommer correctement pour communiquer avec un développeur ou un designer freelance. Cette nomenclature est universelle dans Figma, Whimsical et Bootstrap.
Bibliothèque composants standards
==================================
Navigation
- Header / App bar
- Bottom navigation (mobile)
- Sidebar / Drawer
- Tabs / Segmented control
- Breadcrumb (web)
Saisie
- Input text / Textarea
- Select / Dropdown
- Radio / Checkbox
- Toggle / Switch
- Date picker
- File upload
Affichage
- Card
- List item
- Avatar
- Badge / Chip
- Modal / Dialog
- Toast / Snackbar
- Skeleton loader
Action
- Primary button
- Secondary button
- Icon button
- Floating action button (FAB)
- Link
Feedback
- Loader / Spinner
- Empty state
- Error state
- Success stateÉtape 7 — Wireframer un écran de paiement mobile money
Prenons un cas concret. Vous concevez un écran de paiement pour un site e-commerce sénégalais. Listez les éléments obligatoires : montant en FCFA, méthode (Wave, Orange Money, carte), numéro de téléphone, code OTP, bouton Confirmer. Hiérarchisez : le montant en gros, la méthode en boutons visibles, le téléphone en input principal, l’OTP en deuxième écran. Wireframez d’abord en low-fi pour valider que tout tient sans scroll sur un écran 390×844.
Étape 8 — Penser les états et les écrans manquants
Les débutants wireframent seulement l’écran « tout va bien ». Les pros wireframent aussi les états vides (zéro produit dans le panier), les états de chargement (3G lente), les états d’erreur (paiement refusé), les états de succès (transaction validée). Pour chaque écran principal, prévoyez 4 états minimum.
Étape 9 — Construire un user flow avant les écrans
Avant de wireframer 20 écrans, dessinez un user flow qui montre comment ils s’enchaînent. Utilisez des rectangles pour les écrans, des losanges pour les décisions (Connecté ? Oui/Non), des flèches pour les transitions. Cela révèle souvent que vous avez oublié 3 écrans critiques (mot de passe oublié, validation OTP, écran de réussite).
User flow inscription mobile
=============================
[Splash screen]
|
v
[Onboarding 3 slides]
|
v
[Choix : Login ou Inscription ?]
| |
v v
[Login] [Inscription étape 1]
| |
v v
[Home] [Vérification SMS]
|
v
[Profil créé]
|
v
[Home]
Écrans à wireframer : 8
Temps estimé en low-fi : 1h30Étape 10 — Valider les wireframes en interne
Réunissez 3 personnes pendant 30 minutes maximum : un membre business, un dev, un utilisateur cible si possible. Présentez écran par écran en racontant l’histoire d’un utilisateur fictif. Demandez : « Quel bouton appuyez-vous d’abord ? » Si la réponse n’est pas évidente, votre hiérarchie est cassée. Notez les feedbacks dans un Google Doc et tranchez sous 24h.
Étape 11 — Annoter pour le développement
Un wireframe non annoté force le dev à inventer la moitié du comportement. Ajoutez des notes textuelles à côté de chaque interaction : « Au clic sur Acheter, ouvrir modal de paiement », « Si erreur 401, rediriger vers Login », « Loader visible pendant max 3 secondes sinon timeout ». Ces annotations économisent 5 réunions de clarification.
Étape 12 — Réussir la transition vers le UI design
Une fois le wireframe validé, le designer UI s’en empare pour appliquer la charte graphique. Pour une transition fluide, livrez un fichier Figma propre avec : grilles activées (8px ou 4px), composants nommés correctement, tous les écrans dans une seule page, conventions de naming cohérentes. Le designer ajoute couleurs, typographie, espacements, micro-interactions. La structure ne doit plus changer à ce stade.
Checklist transition wireframe vers UI
=======================================
Avant de livrer au designer UI :
- Tous les états sont wireframés (vide, loading, erreur)
- User flow validé par le PO
- Composants nommés (Card_Product, Btn_Primary)
- Grilles 8px activées sur Figma
- Annotations claires sur chaque interaction
- Aucun lorem ipsum sur les libellés critiques
- Logo et marque définis
- Charte couleur de base partagée
- Charte typographique partagée
- Inventaire des icônes nécessairesÉtape 13 — Erreurs de débutant à corriger immédiatement
Les wireframes débutants ont tous les mêmes défauts : trop de détails inutiles, pas assez d’espacement, hiérarchie écrasée, boutons trop petits sur mobile, pas d’état d’erreur, pas de gestion du clavier qui apparaît. Corriger ces 6 défauts vous fait passer de débutant à intermédiaire en une semaine.
Étape 14 — Cas concret : refonte d’un site PME à Dakar
Une PME de livraison de repas à Dakar voulait passer de WhatsApp à une vraie app. Sans wireframe, le premier dev a livré 12 écrans inutilisables. Après 3 jours de wireframing low-fi sur Whimsical (40 000 FCFA de prestation), le projet a été redessiné autour de 6 écrans clés : home avec restaurants, fiche produit, panier, paiement Wave, suivi de commande, profil. Le développement a coûté 1,2 million FCFA au lieu des 2,5 millions initialement budgétés.
Erreurs classiques à éviter
- Erreur : Wireframer en couleur dès le début. Vous perdez 80% du temps en débats stériles sur le bleu vs le vert. Restez en niveaux de gris jusqu’à validation de la structure.
- Erreur : Oublier les états d’erreur et de chargement. Le développeur les inventera mal et l’utilisateur sera frustré sur la 4G dakaroise.
- Erreur : Wireframer trop d’écrans avant de valider. Validez les 5 écrans clés avec un client avant d’en produire 30.
- Erreur : Mélanger flow et écrans dans le même fichier. Séparez le user flow (vue d’ensemble) des wireframes d’écrans (zoom).
- Erreur : Ne pas respecter les contraintes mobile. Un bouton de 24px de hauteur est inutilisable au doigt. Minimum 44px.
- Erreur : Penser que le wireframe remplace le prototype interactif. Pour valider un parcours, créez un prototype cliquable avec les liens Figma.
Checklist wireframing
✓ Brief produit lu et compris
✓ User flow général dessiné avant les écrans
✓ Outil choisi selon contexte (Whimsical, Figma, etc.)
✓ Format mobile 390x844 ou desktop 1440 défini
✓ Bibliothèque de composants standards utilisée
✓ Hiérarchie visuelle claire (taille, position)
✓ États couverts : nominal, vide, loading, erreur
✓ Boutons mobile minimum 44x44 px
✓ Annotations textuelles ajoutées
✓ Lorem ipsum remplacé par du copy proche du réel
✓ Revue interne 30 min planifiée
✓ Feedback intégré sous 24h
✓ Fichier organisé pour transition UI
✓ Aucune décision de couleur prise sur le wireframe
✓ Version finale partagée en lien et en PDF