Comment faire des maquettes wireframe?

Comment faire des maquettes wireframe

Ce billet a été lu 4037 fois. À votre tour?

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

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.


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.

Related

A propos de Muriel Vandermeulen

Directrice associée et fondatrice de l'agence Wearethewords, Muriel prône le Web utile, attrayant et pérenne grâce notamment à la stratégie de contenu.

Auteure et conférencière, ses compétences sont largement reconnues à l'international auprès des groupes de presse (Le Monde, L’Avenir.net, … ), de grands comptes (Abritel, Airbus, Delhaize, Fnac, Lego) ou encore de hautes écoles et ministères belges et français. Son crédo: content, marketing, performance.

Sur le sujet, avez-vous lu...

5 Responses to Comment faire des maquettes wireframe?

  1. [...] 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:…  [...]

  2. [...] 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:…  [...]

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

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

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>