Wireframe, à quoi ça sert?

Wireframe, à quoi ça sert?

27 Fev

Auteur : Arthur Dang, Catégories : Développement de site web

Définition d'un wireframe

Dans un cadre général et pour un produit web, un wireframe ou mockup consiste en la modélisation et schématisation de ses principales parties.

Par exemple, pour un site web, on privilégiera des pages principales comme l'accueil et une page standard, ainsi que certaines pages spécifiques importantes comme une page produit ou une page profil.

Pourquoi en utiliser ?

Dans le cadre d'un projet web, la transmission et la transparence de l'information est primordiale pour pouvoir aller de l'avant avec confiance.

L'utilisation de wireframes se place ainsi dans le dialogue établi entre les différentes équipes impliquées, soit au minimum : l'équipe client, l'équipe design, et l'équipe web.

Prenons un exemple

  1. En tant que client, vous souhaitez rafraîchir votre site web actuel par une nouvelle interface et un nouvelle image de marque.
  2. Pendant que l'équipe design peut progresser avec vous sur la nouvelle identité visuelle (logo, charte de couleur, type de police, etc.), l'équipe web va se pencher de l'autre côté sur la conception des différents types de gabarits nécessaires au site web.
  3. Cette équipe va donc lister avec vous vos besoins : comment présenter l'information (textuelle ou imagée) et comment accéder rapidement à l'information. Suite à ce travail de réflexion et de feedbacks, des wireframes sont conçus.
  4. L'équipe design peut ensuite récupérer ces gabarits pour comprendre la structure souhaitée du site web : les fonctionnalités prévues, les zones de contenu à disposer, la grille ou le format retenu.

Transparence et clarification sur le travail à accomplir

Grace à ce travail, les équipes gagnent en temps et en compréhension sur les points suivants :

  • Équipe client : avoir une vision complète de ce qui est attendue en terme de fonctionnalités, de contenu et de visuels.
  • Équipe web : avoir une vision de la structure du site web et de la conception des fonctionnalités.
  • Équipe design : avoir une vision claire des éléments à prévoir dans les propositions visuelles.

Le travail étant itératif (c'est-à-dire par étape de suivi et feedbacks), cela permet en outre de clarifier les points relevés comme enjeux lors de la signature du mandat.

Comment l'utiliser ?

Lorsque l'on parle de wireframes, plusieurs utilisations et déclinaisons sont possibles en fonction des processus de travail d'une organisation.

Mais un wireframe a un point essentiel à respecter; il ne traite pas de design. Il s'agit d'un "squelette" présentant par page importante :

  • une largeur de site web (le standard actuel étant 960 pixels),
  • les blocs de contenu à afficher, les boutons et la densité de l'information,
  • les effets dynamiques à prévoir (action-souris, système de navigation dans le cadre d'un carrousel, etc.).

L'objectif d'un wireframe n'est donc pas de brider le travail de réflexion et de conception visuelle, mais plutôt de soutenir l'équipe design pour proposer des solutions reflétant le besoin client.

Quels outils utilisés ?

De nombreuses solutions spécifiques - payantes ou gratuites - existent pour réaliser des wireframes. La liste serait exhaustive sachant que tous ont leur qualité et leur défaut. Ceci dit, le plus connu parmi les solutions payantes est Axure.

Ce qui importe est que l'outil soit accessible au plus grand nombre en terme de convivialité, et suffisamme complet pour construire ou dessiner vos wireframes. Ainsi, si par exemple il serait possible d'utiliser Adobe InDesign, ce serait se compliquer la tâche (et détourner l'utilisation première du logiciel).

Au sein de Symétris, nous avons opté pour la solution en ligne gratuite Cacoo que nous vous conseillons de tester. Cette solution gratuite se révèle complète et simple à utiliser, avec la possibilité de partager en ligne le travail et de collaborer simultanément dessus.

À noter que Symétris n'a aucune action auprès de Cacoo :-D

Tags :

Ajouter un commentaire