Wireframes

Le wireframing est une étape importante dans la création d’un site web ou d’une application, qui consiste à concevoir la maquette « fonctionnelle » du site. À la différence d’une maquette graphique, un wireframe fait complètement abstraction de l’aspect graphique et design du site, pour se concentrer sur l’ergonomie et l’organisation des différents éléments. C’est l’équivalent du plan (blueprint) d’une maison. Il permet de poser une architecture globale de l’information et de présenter les différents “objets” du site.

Il offre une vue simplifiée du projet en définissant des zones et des grands principes d’interaction. Il ne montre en général que les pages principales (on ne montre pas de pages de login ou de création de compte par exemple).

Cette étape peut paraître fastidieuse, mais elle permet ensuite de gagner du temps lors de la création d’un projet numérique.

Des wireframes sont :

Un plan visuel en niveaux de gris des pages clés de votre site
Un aperçu de la façon dont votre site, et chaque page, peuvent raconter votre histoire
Une chance d’explorer les fonctionnalités, les éléments, les call-to-action et la navigation sur le site
Une occasion de modifier la structure générale, l’architecture et d’identifier ce qui manque

Les wireframes ne sont pas :

Un moment pour choisir les textes utilisés (souvent du Lorem Ipsum en partie) la structure précise de chaque élément
Un temps pour se concentrer sur la couleur, la police, la longueur des textes (en général) ou la visibilité
Une expérience d’interface utilisateur complète; ce n’est en général ni cliquable ni navigable
Toujours correct ; ça sert à obtenir une réponse et commencer à poser des questions sous forme visuelle
Un élément à partager au client potentiel pour recevoir du feedback ! Vous n’aurez que des retours d’ordre visuel (“il faudrait un peu plus de couleur” etc.). Elles sont réservées à votre équipe élargie.

⚠️ Attention, il ne faut pas mélanger wireframes et mockups. On dit souvent que si l’application était un corps humain, les wireframes seraient le squelette, alors que les mockups seraient la peau…

Étapes

Faire le tour de projets proches pour s’inspirer (voir page Moodboards dédiée)
Choisir le format (app, web, webapp, etc.) en fonction de ce qui correspond le mieux au projet et au contexte d’utilisation
Lister les différentes pages et les fonctionnalités associées (se concentrer sur celles qui apportent le plus de valeur à l’utilisateur)
Dessiner rapidement sur le papier les différentes pages. Il peut être intéressant ici de tester plusieurs propositions (par exemple en s’appuyant sur la méthode des Crazy8s)
Si vous avez un doute, développez plusieurs propositions pour pouvoir choisir la meilleure
Définissez les zones principales (header, footer, menu, etc.)
Synthétiser les propositions et mettez au propre
Vous pouvez aussi en faire une version commentée, qui met en avant les points les plus importants
Passez maintenant à la maquette visuelle (voir page dédiée)

Bonnes pratiques

Respectez les ‘codes visuels’ du web ou des applications (menu en haut, sidebars, etc.), sauf si vous les maîtrisez sur les bout des doigts
Ne pas faire les pages de login / création de compte. Se concentrer sur ce qui compte.
Explorez ! C’est le moment idéal pour tester différentes propositions
Allez jusqu’au bout !

Questions à se poser

Avez-vous intérêt à représenter votre projet en vue mobile, iPad, desktop ou autre ? Dans quelle situation sera l’utilisateur quand il accèdera à votre produit ? Quel est son rapport au produit (la santé passe souvent sur téléphone par exemple) ? Est-ce qu’il s’agit d’une app native ou d’un site internet ?
Quels sont les pages à représenter ?
Quels sont les ‘objets’ qui existent sur le site ? À quelles données sont-ils associés ? (texte, chiffres, liens, likes, etc.)