Méthodologie : maquette ou wireframe, that is the question

Depuis la création de KickStartup, nous avons beaucoup évolué sur la partie Wireframe de nos projets de production Web. Les “wireframe” viennent entre le cahier des charges et les maquettes design : ils permettent de positionner les différents éléments des pages et de travailler sur la structure des informations.

‍

Nous avons essayé beaucoup de recettes et d’outils, notamment Google Slide (alternative à Powerpoint) qui est particulièrement collaboratif mais très vite frustrant et limité.

Voici donc quelques conseils et outils que nous utilisons pour nos wireframes.

1- À quoi sert le wireframe ?

C’est une technique utilisée par des équipes d’UX / UI, des web designers voire des équipes techniques. Elle permet, sans engager de temps sur le design, de se projeter sur :

• La structure d’un site
• La structure d’une page
• Le déroulé d’une ou plusieurs fonctions

Et surtout : la phase wireframe nous permet d’accompagner le client dans sa réflexion, l’aider à visualiser comment une page sera organisée, voire même donner vie à un concept. Les wireframes permettent de faciliter au maximum la compréhension des différents acteurs du projet (chef de projet, designer, developper,...) pour un projet fluide et sans surprise.

2-Par où doit-on commencer ?

Je dirais : chacun sa religion. Mais il y a 2 ans, nous avons réalisé un très gros audit UX pour un gros acteur de la carte cadeau, et j’ai découvert le plaisir des grandes feuilles A3. Nous passions plusieurs heures avec le designer à produire des wireframes en couvrant les murs de pages A3.

Alors aujourd’hui, j’ai toujours mon cahier A5, ma trousse et je n’hésite pas à démarrer sur papier. Pourquoi ? C’est la liberté du mouvement que l’informatique n’a pas encore su remplacer.

Une fois les travaux finis sur papier, nous basculons sur informatique, mais quel outil choisir ? Photoshop ? Moqups ? Adobe XD ? …

Tout d’abord, que cherchons-nous ?

• Un outil simple et rapide à prendre en main
• Un outil collaboratif
• Un outil avec une bibliothèque riche pour éviter de chercher de la matière partout
• et en bonus un outil permettant d’animer les maquettes

Chez KickStartup, nous avons choisi Moqups mais c’est très sincèrement une discussion sans fin. Adobe XD est en train de prendre beaucoup de place mais je pense qu’on se trompe de sujet à ce stade. Alors qu’on cherche à structurer, organiser et présenter le contenu de la meilleure des façons pour gagner du temps en phase  UI / Design, l’esthétique nourrit le débat déjà à ce stade du projet. Erreur !

En conclusion

C’est un outil de travail vraiment cool qui permet de s’obliger à poser à plat ses idées, à tel point que je passe souvent par cette phase lorsque je travaille sur un nouveau produit pour KickStartup ! D’ailleurs j’ai commencé à travailler sur une Landing Page pour notre nouvelle offre Productivité, mais je n’en dis pas plus pour l’instant.

BONUS 1 - quelques wireframes que nous avons produit :

BONUS 2 : plein d’autres exemples de wireframes 😉

Discutons-en