Wireframe : définition
Le wireframe (maquette fil-de-fer en français) est une maquette utilisée pour la création de sites web, d’applications ou de logiciels. Le wireframe est souvent utilisé en design d’interface ou dans le cadre d’expérience d’utilisateur design (UX design) pour créer un visuel simplifier de la structure et des fonctionnalités d’un site ou application.
Wireframe vs mockup
Un mockup (à ne pas confondre avec le wireframe) est l’étape suivant le wireframe dans la création d’un site web ou d’application mobile. Le mockup est aussi une maquette de site web (ou application/logiciel) mais il est bien plus détaillé et fini que le wireframe. Alors que le wireframe pourrait constituer une sorte de maquette « brouillon » (le design et l’esthétique du site n’étant pas développé), le mockup pourrait ressembler à un « premier essai ». Le prototype serait donc l’étape final après le wireframe et le mockup dans la création de site web, d’application mobile ou de logiciel.
Quand faire des wireframes ?
Il est préférable de faire des wireframes aussi tôt que possible dans le cycle de vie d'un projet (dans la mesure du raisonnable, bien évidemment). Chaque projet a un workflow qui lui est propre, mais en règle générale, vous devez établir votre premier wireframe au cours de la phase d'initiation ou de planification du projet.
Si vous créez vos premiers wireframes lors de la phase d’initiation, commencez par des wireframes basse fidélité. La phase d’initiation est consacrée à l’expérimentation : vous avez une idée de site Web ou d’application, mais vous ne savez pas encore précisément quelle forme elle prendra. La création de wireframes basse fidélité est rapide et facile : il s’agit ainsi d’un outil de brainstorming idéal. Consignez vos idées, envoyez-les aux autres parties prenantes pour obtenir leur avis, puis retournez à la planche à dessin.
Lorsque votre projet entre dans la phase de planification, vous devez commencer à générer des wireframes de moyenne et haute fidélité. La phase de planification est celle où vos concepts prennent forme, et vous aurez besoin de wireframes fiables et fournis avant de pouvoir passer à la phase d'exécution.
Vos wireframes devraient devenir plus sophistiqués et se perfectionner au fur et à mesure que le projet avance dans ces deux premières phases. Lors de la remise des modèles à l'équipe de développement pour codage (la phase d'exécution), vous devriez avoir terminé vos wireframes.
Wireframe : ses éléments
Les wireframes gardent une apparence simple et une esthétique plutôt épurée. C'est en partie pour cette raison qu'ils sont si efficaces. Lors du développement de sites Web et d'applications, il est tentant de commencer immédiatement à jouer avec les polices et des couleurs, avant même d'avoir bien planifié l'expérience utilisateur. Lorsque vous créez des wireframes, mettez de côté les détails pour vous concentrer sur trois aspects fondamentaux de votre produit : le design de l'information, de la navigation et de l'interface.
Wireframe pour le design de l'information :
Lorsque les utilisateurs interagissent avec votre application ou votre site Web, ils absorbent des informations en permanence : quel type de site Web visitent-ils ? Comment peuvent-ils interagir avec ? Quelle est la « fonction » du site ? Ce processus est automatique et largement subliminal. En tant que concepteur, votre rôle est de faciliter ces interactions en choisissant la meilleure manière de présenter l'information sur une page.
Comment ça marche en pratique ?
Par exemple, si votre site Web propose un service de messagerie, la plupart des visiteurs du site seront soit des utilisateurs habituels, soit de nouveaux visiteurs. Les utilisateurs habituels voudront très certainement se connecter, alors que les nouveaux visiteurs souhaiteront peut-être créer un compte ou simplement en savoir plus sur votre service. Sur votre page d'accueil, vous devez tenir compte de chacun de ces visiteurs et leur fournir suffisamment d'informations pour qu'ils puissent atteindre leurs objectifs respectifs. Ces informations peuvent par exemple être communiquées via des boutons : Se connecter, S'inscrire ou En savoir plus. Le design de l'information consiste à déterminer les éléments à inclure et à les positionner de manière efficace.
Wireframe pour le design de la navigation :
Nous avons tous installé des applications qui demandent une recherche interminable pour trouver le menu Paramètres. Et nous avons tous eu l'impression qu'un site Web nous faisait tourner en rond : ce moment où vous avez l'impression que la page « Informations de votre compte » n'est plus qu'à un clic, pour finir par revenir sur la page d'accueil ou pire, une page d'erreur 404. Il est très clair qu'en tant qu'utilisateurs, nous sommes constamment confrontés à des systèmes de navigation mal conçus.
Comme son nom l'indique, le design de la navigation détermine la façon dont les utilisateurs se déplacent dans votre application ou site Web. À partir d'un écran donné, un utilisateur peut accéder à un certain nombre d'autres écrans. Mais il ne le saura pas si vous ne lui dites pas : les menus déroulants, les liens et les barres de défilement sont tous des exemples d'éléments visuels qui aident l'utilisateur à naviguer dans votre produit.
Wireframe pour le design de l'interface :
Le design de l'interface réunit tout cela : l'information, la navigation et, bien sûr, tous les autres éléments de votre wireframe. Le design de la navigation et de l'information ont tous deux des composants à l'écran : boutons, menus, etc. Le design de l'interface fait référence à la manière dont ces éléments sont incorporés dans l'interface utilisateur, qui comprend elle-même d'autres éléments, tels que les zones de texte, les images d'en-tête et les barres latérales.
Comment faire un wireframe ?
Maintenant que vous avez assimilé les aspects théoriques de la création de wireframes, il est temps de mettre ces connaissances en pratique. Suivez ces quelques étapes pour vous lancer :
1. Élaborez un plan pour votre wireframe
