Lorsque l’on conçoit un site web ou une application, il est essentiel de bien comprendre les étapes de la conception visuelle. Deux outils fondamentaux sont l’esquisse et le wireframe, mais ils servent des objectifs différents.
Il est donc important de déterminer précisément ce que l’on entend lorsque ‘un wireframe vous est demandé.
Le wireframe est une représentation précise de la structure d’un site ou d’une application. Il ne contient pas encore d’éléments graphiques comme les couleurs ou les images, mais il montre l’agencement des éléments et les interactions prévues.
La fonction vitale d’un wireframe est de fixer tout ce qui est structurel sans se laisser distraire par des couleurs, des typos, des images. Ces éléments séduisants nous font oublier de prêter attention à tous les détails importants : est-ce qu’on a prévu tout les écrans, menus, sous-menus, pop-ups, boutons de navigation ? Est-ce que les termes utilisés dans les boutons sont les plus pertinents ? Est-ce que les userflows sont courts, intuitifs et fluides ? Etc.
Caractéristiques :
- But : Définir la structure, l’organisation des contenus, et les premières interactions.
- Détail : Le plus détaillé possible. On inclut des détails sur les composants comme les menus, formulaires, boutons, etc.
- Outil : Dessin précis sur papier, tablette ou sur des logiciels spécialisés comme Figma, Adobe XD…
Exemple : Un wireframe inclurait les sections exactes : emplacement des menus, zones pour les images, titres, paragraphes et boutons avec une indication précise de leurs tailles et positions.
Papier ou logiciel ?
Le wireframe papier sera plus rapide à réaliser, raturer, gommer, découper et recoller. Il permet plus facilement des annotations autour des écrans.
Le wireframe logiciel va prendre plus de temps à réaliser (sauf si l’on est un ninja de Figma) mais il sera encore plus précis et, s’il a été bien conçu, peut servir de base pour le design.
Différence entre une esquisse et un wireframe en webdesign
Cette petite vidéo montre l’évolution entre une esquisse, un wireframe (numérique) et le design final. Le wireframe intermédiaire aurait pu être réalisé sur papier à condition de garder le niveau de précision des éléments.
L’esquisse est donc une représentation très basique et rapide de vos idées, réalisée à la main sur papier ou sur une tablette.
- But : Explorer des idées de manière rapide et sans contrainte.
- Détail : Très faible, souvent juste des formes ou des blocs pour symboliser les éléments (boutons, images, textes).
- Outil : Crayons, outils numériques simples.
- Utilisation : Pour brainstormer, tester différentes mises en page ou concepts rapidement.
Résumé des différences :
| Aspect | Esquisse | Wireframe |
|---|---|---|
| Objectif | Explorer des idées | Définir la structure et l’ergonomie |
| Niveau de détail | Faible | Le plus possible |
| Outil | Papier/crayon ou outils simples | Papier ou logiciels spécialisés |
| Utilisation | Phase de brainstorming | Phase de validation structurelle |
Conseil :
Les deux outils sont complémentaires. Commencez toujours par des esquisses pour libérer votre créativité, puis passez au wireframe pour préciser la structure.
Ressources pour les wireframes à la main :
Ces site vous proposent des feuilles à imprimer pour dessiner vos wireframes. Les grilles en pointillé sont très pratiques pour mesurer et respecter les proportions.
Et pour les plus passionnés :