Comment faire des maquettes wireframe

Étiquettes : , ,

Trois conseils super simples pour réussir vos maquettes wireframe et bien organiser l’information et les interactions sur votre projet de site Internet. 

Les maquettes wireframe sont au site Internet ce que les plans d’architecte sont au bâtiment: ils servent à modéliser l’agencement des espaces et des fonctionnalités. À formaliser l’organisation de l’information sur le site Internet et l’interaction entre l’interface et l’utilisateur. C’est le boulot de l’architecte de l’information, donc, de préparer ces prototypes. Qui indiquent les types de contenus qui occuperont les différents blocs sur la page Web ainsi que les comportements de ces blocs.

Ce travail d’esquisse est essentiel dans tout projet Web, car il formalise tous les enjeux liés à l’ergonomie, à l’interaction avec l’internaute et aux messages à véhiculer.

Comment réussir ses maquettes wireframes?

Pour faire de bonnes maquettes wireframe, il faut bien préparer son travail. Prenez-le temps de réfléchir, de faire des recherches sur les bonnes pratiques, les dernières tendances, de comparer votre projet à des sites Internet existants, etc.

Avant de me retrousser les manches, je passe en revue:

  • L’arborescence du futur site Internet
  • Les fonctionnalités et besoins éditoriaux
  • La cartographie des contenus et formats
[pullquote]Ce travail d’esquisse est essentiel dans tout projet Web, car il formalise tous les enjeux liés à l’ergonomie, à l’interaction avec l’internaute et aux messages à véhiculer.[/pullquote] Ensuite, je recherche 3 à 5 sites Internet que je peux mettre en concurrence (en termes de design, mais surtout de fonctionnalités et de logique d’interface). Et je compare les bonnes pratiques entre ces sites Internet concurrents sur la base de cinq critères:

  1. branding et impact visuel
  2. ergonomie et simplicité d’utilisation
  3. organisation et accessibilité de l’information
  4. valeur ajoutée des fonctionnalités
  5. efficacité de la recherche interne
Vous pouvez également rechercher sur Internet des exemples de wireframes récents, de préférence documentés, qui me permettent de challenger le prototype qui se dessine doucement dans un coin de votre cerveau.
Ensuite, vous pouvez commencer à dessiner le header, le body et le footer, en intégrant les éléments qui s’y trouvent généralement. C’est à dire :
  1. Le header (l’en-tête) – c’est à dire la première zone que voient vos visiteurs et qui leur permet de reconnaître votre identité et votre métier.
  2. Le body (corps de page) – en une, deux ou trois colonnes, selon la taille d’écran de vos utilisateurs moyens, selon la densité et le volume des informations à publier et relier, selon, aussi, la profondeur de navigation que vous devez mettre en place.
  3. Le footer (pied de page) – qui sur des sites volumineux a tendance à donner une vision de la navigation sur plusieurs niveaux de profondeur.
De nombreux outils proposent déjà des « prémaquettes » sur lesquelles vous pouvez agencer et réagencer des éléments en fonction des besoins. Attention cependant à ne pas succomber à l’attrait de certaines fonctions ou formats de contenus juste parce que l’outil vous les propose.
Comme d’habitude, n’hésitez pas à réagir ou poser des questions.


Laisser un commentaire

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

Devenez chroniqueur

Vous souhaitez devenir chroniqueur ou nous soumettre un article? Rien de plus simple.

Ça m'intéresse

#EPW sur Twitter

#EPW sur Facebook

À propos

Votre blog Écrire pour le web en chiffres
  • Plus de 25.000 sessions par mois
  • Plus de 35.000 pages vue chaque mois
  • 1500 abonnés à la newsletter
  • Créé en 2006
  • 1e position dans Google sur des expressions métier
En savoir plus