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.

Capture d’écran 2019-03-29 à 15.05.51.png

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 😉