définitions du marketing digital et relation client

Définition Wireframe

L’ergonomie est un élément fondamental d’un projet digital. Il faut en tenir compte dès le démarrage du projet. Le wireframe ou maquette fil de fer en français est une représentation visuelle de l’interface d’une page web. C’est une étape capitale qui se situe entre le cahier des charges et la réalisation des maquettes graphiques. Si vous omettez d’en passer par là, vous risquez non seulement de mal évaluer le temps et les finances nécessaires à la réalisation de votre projet web mais aussi d’obtenir un site Internet qui n’est pas ergonomique.

schéma wireframe

Les outils préférés des UX Designers

Définition du wireframing

On utilise le wireframe pour définir des zones et fonctionnalités d’une page sous forme de croquis, collage papier ou schéma numérique (étape de prototypage).
Cette maquette sert à définir le « zoning » c’est-à-dire le découpage des différentes pages du site. C’est un schéma avec des blocs ou boîtes qui détermine les grandes fonctionnalités et les zones principales du contenu. Ces zones ont un rôle, une position et une taille définie. Le wireframe peut être plus ou moins détaillé et donner des précisions sur l’importance visuelle de certains éléments (hiérarchisation des textes, dimensions en pixel des contenus…).

Pourquoi utiliser les wireframes ?

Le zoning est la base du travail du graphiste web qui va par la suite habiller les zones avec l’identité visuelle définie au préalable. Le wireframe peut constituer une base de discussion entre clients et agences (les contenus sont parfois fictifs pour mieux se projeter) mais aussi permettre de tester sur des utilisateurs si l’ergonomie de la navigation et des interactions est optimale. Le maquettage wireframe permet de tester si l’interface envisagée est réalisable. Cela permet aussi de voir si elle répond aux objectifs de la marque et aux exigences des utilisateurs. Enfin, c’est une estimation du temps et des coûts de développement.

Les wireframes constituent une sorte de plan de votre site web. Ils permettent de définir la structure finale des différents types de pages et d’évaluer si l’expérience utilisateur (UX) est optimisée. En fait, c’est une manière de formaliser les attentes, besoins et objectifs du projet et d’ apporter des modifications avant d’aller plus loin dans la création de votre site web.

 

Comment réaliser techniquement un wireframe ?

Certains passent encore par le maquettage papier mais il existe aussi des solutions comme des logiciels dédiés ou détournés de leur fonction d’origine pour créer des prototypes de pages. Ces solutions permettent de mettre en place la structure et les spécifications fonctionnelles de vos pages.

Voici 4 solutions que nous avons retenu :

  • Axure : un des leaders du marché qui permet de créer un grand nombre de wireframes et gère très bien le responsive design;
  • Invision : application accessible en ligne et facile d’utilisation pour créer des zones interactives;
  • Mockflow : application accessible en ligne et facile d’utilisation avec un éditeur très complet;
  • Balsamiq : logiciel facile d’utilisation et très complet pour créer des wireframes au style « dessiné à la main ».

Vous pouvez également utiliser des logiciels de création graphique comme par exemple Illustrator.

 

En conclusion, le wireframe est un outil indispensable dans la gestion de votre projet web. Il vous permet non seulement de gagner du temps mais aussi de respecter votre planning de production de site Internet. A ne pas confondre avec le zoning, un prototype ou un mockup.

3 Comments

  1. […] le plus souvent unique (soit abandonné par la suite, soit fait pour évoluer), contrairement aux wireframes qui peuvent être […]

  2. […] interactif est au format html. Parmi les différents outils présentés dans l’article sur le wireframing, certains sont spécialisés comme Mockflow.  Nous l’avons vu précédemment, c’est […]

  3. […] : à ne pas confondre avec wireframe, mockup ou prototype […]

Laisser un commentaire

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