Loading...

Pourquoi concevoir des Wireframes

Le 15/02/2019
par Hugo de Unscuzzy
Accueil / L’académie / Gestion de projet / Pourquoi concevoir des Wireframes

Découvrez l'importance de la conception de wireframes pour tous vos projets web et nos conseils pour obtenir un document efficace.


Une définition donnée par Wikipédia :

Le wireframe ou maquette fonctionnelle est un schéma utilisé lors de la conception d’une interface pour définir les zones et composants qu’elle doit contenir. À partir d’un wireframe peut être réalisée l’interface proprement dite par un graphiste. La démarche de recourir à des wireframes s’inscrit dans une recherche d’ergonomie. Elle est surtout utilisée dans le cadre du développement logiciel et des sites et applications Web. Le wireframe consiste concrètement en un croquis, un collage papier ou un schéma numérique.

Mes conseils

Voici quelques petits conseils pour concevoir des wireframes que je suggère sur cette version brut de votre projet :

  • Tout d’abord, privilégiez des nuance d’une seule et unique couleur (comme le bleu ou le gris qui sera encore plus neutre). Si vous utilisez trop de couleurs, cela va distraire vos collaborateurs et avec du noir et blanc, on peut déjà faire beaucoup de chose. Du moins, lorsqu’il s’agit de croquis.
  • Ne mettez pas d’image mais plutôt un encart avec le symbole image, ou un placeholder avec les dimensions. En effet les image ont également tendance a distraire l’attention de la personne qui va tester votre produit. Or nous voulons rester concentrer, right?
  • Soigner la présentation du texte. Certes c’est un prototype mais vous pouvez tout de même formater le texte pour que le client puisse se projeter un minimum dans votre maquette. Mettez des titres sautez des lignes et si vous n’avez pas de texte préalablement rédiger, trouver des accroches pour les titre et un bon vieux lorem ipsum dans les paragraphes.
  • N’oublier pas également de souligner vos lien hypertexte ou de les différencier d’une autre manière. Le but est de simuler le comportement d’un vrai texte pour plus de réalisme. Encore une fois, ce n’est pas un travail graphique, seulement la structuration de vos pages.
  • Et enfin, il faut garder en tête que pour concevoir des wireframes vous ne pas ajouter de détails graphiques. Pourquoi ? Car lorsque vous aller présenter votre travail à vos collaborateurs, ils risquent de vous dire qu’ils préfèrent le bouton en rouge plutôt qu’en bleu. Mais ce n’est pas du tout le but du wireframe, c’est le but de la maquette.

Le wireframe va vous obliger à poser et à faire valider l’ensemble de vos blocs sur toutes les pages de votre site (ou de tous vos modèles de pages si vous avez un site plus volumineux) et ça… C’est une très bonne chose ! Mais aussi, il va vous obliger à anticiper le contenu à créer dans le cas où ce n’est pas encore le cas. C’est toujours mieux pour la suite du projet !

Quels outils utiliser ?

Depuis quelques temps déjà, j’utilise Adobe XD pour concevoir des wireframes, que ce soit pour l’Agence ou pour mes projets (top secret🕵️) perso. C’est top car c’est le logiciel le plus simple à prendre en main et efficace dans la dynamisation des wireframes. Il permet de créer des liens d’une page à l’autre que vous pouvez placer sur vos boutons par exemple ou votre bar de navigation. Vos croquis deviennent interactif en un rien de temps, vos collaborateurs sauront l’apprécié ! L’utilisation de Kit UI vous fera gagner beaucoup de temps également, vous pouvez en trouver quelques-uns gratuitement sur internet. Avant, j’utilisais, et j’y reviens parfois, à UXPin qui est encore plus complet.
Également, Balsamiq reste un classique concevoir des wireframes. Je l’utilisais avant mais je ne suis pas fan de l’aspect Doodle car je trouve qu’on finit par s’y perdre sur des croquis un peu compliqués…
Mais bon, vous pouvez aussi les faire à la main si vous êtes plus à l’aise sur papier. Le principal c’est d’avoir un document bien pensé, compréhensible et qui puisse être transmis aux autres acteurs du projet.

Les wireframes, c’est vraiment la base pour travailler et élaborer une expérience utilisateur digne de ce nom. Vous ne devez les négliger sous aucun prétexte.
Et voilà, vous en savez déjà un peu plus sur l’approche UX d’un site internet !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *