Comment créer et utiliser des wireframes ?

Le Wireframing est l’une des étapes les plus importantes du processus de création d’un produit tech ou d’une nouvelle fonctionnalité. C’est à ce moment que vos idées prennent forme. Il permet, grâce à l’absence déléments graphiques, de se concentrer uniquement sur l’ergonomie. Son objectif est de définir les différents éléments d’une interface (titres, textes, icônes, boutons, images…) ainsi que leurs emplacements.

Pourquoi réaliser des wireframes ?

La définition la plus simple d’un wireframe c’est qu’il s’agit du squelette d’un projet, c’est-à-dire le schéma d’une interface digitale… C’est comme un plan d’architecte : un schéma en noir et blanc, en deux dimensions.

Objectifs et avantages d’un wireframe

Un wireframe a pour objectif d’étudier l'ergonomie et la navigation, avant même d’avoir défini les choix visuels. Il aide également à visualiser les différents blocs (header, sidebar, footer...) pour les développeurs, ce qui permet d’identifier rapidement les impossibilités techniques.

On l’utilise lors des étapes préliminaires de la conception d'une interface web. Il permet de :

• faciliter la communication sur le début du design
• valider l’architecture des maquettes
• hiérarchiser l’information.

Très visuel, il est facilement compréhensible pour tous : client, graphiste, développeur. Son format simple permet de le modifier rapidement, contrairement à des maquettes très avancées sur le design.

Un wireframe permet de gagner du temps dans la conception d'un site/app.

Zoning, wireframes et mockups : les différences

On peut traiter le wireframing en passant par les différentes étapes ci-dessous :

• Zoning : définition des grandes zones qui vont composer l’interface visuelle du produit
• Wireframe : le wireframe repart souvent du zoning pour définir les différents éléments et leurs emplacements (image, bouton…)
• Mock-up : maquette avec tous les éléments de design (UI)

Maquette fonctionnelleSource : [https://www.lafabriquedunet.fr/creation-site-vitrine/articles/wireframing-guide-complet-maquettes-fonctionnelles-web/](https://www.lafabriquedunet.fr/creation-site-vitrine/articles/wireframing-guide-complet-maquettes-fonctionnelles-web/)

Comment passer de l’idée au wireframe ?

Chercher de l’inspiration

Pour réaliser des wireframes, il faut avant tout travailler en amont. Il faut chercher ce que les utilisateurs veulent et ce dont ils ont besoin. Un wireframe c’est SIMPLE.

Il faut trouver de l’inspiration, benchmarker les concurrents, se tenir à jour des tendances web. Il existe une multitude de sites pour s’inspirer, propres à ce que vous cherchez. En voici quelques-uns :

• Collect UI : [http://collectui.com/](http://collectui.com/)
• Up Labs : [https://www.uplabs.com/](http://collectui.com/)
• Good Web : [http://www.goodweb.design/](http://collectui.com/)

Prenez l’habitude d’observer les maquettes d’autres designers et d’analyser des applications/sites que vous avez l’habitude d’utiliser. Votre vision se renforcera avec le temps.

La phase de conception

Concevoir des wireframes peut s’intégrer à différentes étapes du process créatif. Chaque designer a une manière différente d’aborder la conception des wireframes. C’est à vous de trouver le processus qui vous convient. Il faut tester les différents processus pour voir lequel est le mieux adapté à votre projet.

Notions clés :

• SKETCH = Esquisser ses idées sur papier, Ateliers Crazy 8, Priority Guide Content
• MOCKUPS = Maquettes finales avec l’UI appliquée
• HI-DEF WIREFRAME = Wireframe très détaillés

Voici quelques exemples de processus :

• SKETCH > WIREFRAME > MOCKUPS > PROTOTYPE
• SKETCH > WIREFRAME > HI-DEF WIREFRAME > MOCKUPS > PROTOTYPE
• WIREFRAME > PROTOTYPE > VISUAL >PROTOTYPE
• SKETCH > HI-DEF WIREFRAME > PROTOTYPE > MOCKUPS > PROTOTYPE

Le conseil de Nicolas, Product Designer : “j’ai pour habitude d’utiliser le processus SKETCH > HI-DEF WIREFRAME > PROTOTYPE > MOCKUPS > PROTOTYPE” que j’applique pour la plupart de mes projets. Je le trouve complet, il permet d’itérer à chaque étape importante du projet”.

Comment réaliser un wireframe ?

Créer des wireframes à la main

Après la phase d’inspiration, on vous conseille de commencer vos projets par une phase de sketching papier. Sur un carnet, une feuille A4 ou encore des gabarits pré-conçus, on commence à sketcher ses premiers écrans pour tester les différents éléments et disposions. Il faut aussi discuter, challenger, tester avec des acteurs du projet ou même extérieurs à celui-ci.

**Quel outil pour des wireframes à la main ?**Par exemple, le site [https://sketchsheets.com/](https://sketchsheets.com/) propose de télécharger des templates d’appareils (iPhone, Browser) pour les imprimer et sketcher facilement directement dessus.

Il existe des ateliers pour réaliser ses premiers wireframes papier. Tous les acteurs du projets peuvent participer, pas besoin de talent d’ “UX Designer”. Ils permettent au Designer de ne pas faire les wireframes dans son coin, seul. Il est nécessaire d’échanger avec l’équipe produit et les parties prenantes impliquées : challenger, modifier pour arriver sur un produit complet.

Le crazy 8 consiste à esquisser 8 écrans en un temps record : 8 minutes sur une feuille A4, divisée en 8. Cet atelier n’a pas pour but de de réaliser vos écrans finaux car son objectif est :

• d’avoir des idées différentes
• de pouvoir itérer en recommençant l’opération
• de comparer les résultats avec les autres participants
• de sélectionner les meilleures idées pour les fusionner
• d’arriver à un résultat qui convient à la totalité du groupe.

Le Priority Guide Content, quant à lui, consiste à hiérarchiser uniquement le contenu en le mettant sur des feuilles. On ajoute ensuite les interactions entre les utilisateurs et le produit, sur des post-its qui gravitent autour.

Les outils pour réaliser des wireframes digitaux

Ensuite vient la phase de wireframing. Chacun dispose de sa méthode : détailler ses wireframes pour concevoir des prototypes rapidement ou rester flou pour ne pas influencer l’utilisateur.

• Le logiciel Sketch est très léger, fluide et facile d'utilisation. Seul bémol, il est uniquement disponible sur Macs.
• Adobe XD +++ : Adobe XD est un outil vectoriel permettant le design et le prototypage d’interfaces utilisateur pour le web et les applications mobiles. On peut basculer facilement entre la maquette fonctionnelle (wireframe), le design visuel, le design d’interactions, le prototypage, l’aperçu et le partage, le tout dans un même outil très puissant.
• Illustrator + : le logiciel d'illustration vectorielle de référence permet de créer des logos, icônes, dessins, typographies et illustrations pour l'impression, le web, la vidéo et les appareils mobiles.
• Balsamiq +: rapide et très intuitif, ce logiciel vous permettra très vite de poser une structure pour toutes les pages de votre site, grâce à sa bibliothèque d'éléments très fournie.
• Kits InVision : des sites comme InVision proposent des kits tout faits de wireframes. Cela peut être une bonne base sur laquelle repartir. Rendez-vous sur cette page pour le recevoir.

Quelle est la composition d'un wireframe ?

Un wireframe se compose d'éléments très différents et la seule limite est votre créativité. On retrouve principalement des images, des textes et CTA (Call To Action : boutons). Il ne faut pas hésiter à bien respecter les tailles d'éléments pour se rendre compte de la hiérarchisation et des degrés d'importance des différents blocs.

Quelques conseils pour améliorer vos wireframes

Favoriser l'architecture

Lors de la conception d'un wireframe, on veut tout d'abord proposer une architecture d'interface. On utilise peu de couleurs et design pour éviter de distraire l'œil et se projeter sur le futur produit. Cependant, on peut utiliser des couleurs sur les CTA pour faire ressortir les éléments importants.

Hiérarchiser l'information

Bien définir les différentes tailles de blocs, texte (H1, H2,...) est très important. Ils peuvent être souvent modifiés durant les premiers tests utilisateurs.

Le moins de Lorem Ipsum

Essayez d'utiliser du vrai contenu. Placer le vrai contenu vous permettra de vous projeter et de décider comment les éléments se positionnent. Bien sûr, n’oubliez pas de prêter attention à la lisibilité de ce contenu, qui permet de garder l'utilisateur sur le site.

Penser mobile

N'oubliez pas de prendre en compte les différents devices, votre produit n'est pas destiné à un seul usage et chaque utilisateur dispose de produits différents. Cela passe par la taille des boutons sur un mobile, la disposition des blocs sur une tablette ou bien la taille des typographies sur un écran haut résolution.

Passer au prototype

Enfin vient la phase de prototypage qui permet de se projeter dès les premiers wireframes, ce qui est essentiel. Le prototype consiste à ajouter des actions et des relations entre les wireframes afin qu’ils puissent représenter le plus possible l’expérience utilisateur réelle. Par exemple, si je clique sur ce bouton, alors j’arrive sur le wireframe de la page d’après. Cette étape est utile pour corriger et récolter les tests utilisateurs.

Aujourd'hui, la plupart des logiciels (Sketch, Adobe XD) proposent le prototypage directement dans le logiciel, cependant Invision est à ce jour la solution la plus complète. Elle permet de collaborer en temps réel (commentaires, modifications) et des plugins sont disponibles pour lier vos logiciels préférés à cet outil.

Le wireframing n'est pas une phase simple d'un projet mais cette étape permet de poser les premières pierres et donner vie à votre produit.

En conclusion

Le Wireframing est une des étapes fondamentales dans la conception d’un produit digital. Bien trop souvent oubliée, cette étape permet grâce à l’absence de contenus, de réfléchir à l’expérience utilisateur et l’ergonomie en premier. Très rapidement, vous pouvez avoir des retours utilisateurs et améliorer ces wireframes. Le wireframing, vous permettra de valider ou invalider vos hypothèses posées pendant la phase de recherche utilisateurs, avant de lancer les développements. C’est aussi une étape qui vous permet de limiter les coûts sur du long terme et d’être dans une démarche de test & learn.