Wireframes : les wireframes sont des schémas utilisés en web design qui permettent de suggérer sommairement les éléments principaux d’une interface web (application, site…). Pour être utilses, ils doivent être mis en place avant toute création artistique.

En début de projet, ils permettent de valider les éléments principaux de l’ergonomie et de présenter une maquette fonctionnelle suffisamment évocatrice pour un client non technicien. En cours de projet, ils peuvent servir de référence pour tous les acteurs (client, développeurs, web designer…).

Un exemple réel.

Un autre (une page)

Quelques synonymes : Zonings (franco-français ?), Page Architecture, Low Fidelity Mock-Up, Page Schematic, Rough Draft.

Outils logiciels :

Powerpoint

Le seul avantage est que c’est un outil que tout le monde connait, et que presque tout le monde possède (au moins en version Open Office). Ainsi, même le client est en mesurer de faire une proposition. Mais l’outil n’est pas utilisable de manière professionnelle : pas de composants prêts à l’emploi pour créer des éléments HTML classiques comme un menu déroulant, un bouton. De plus le format paysage n’est pas très adapté.

Visio (Microsoft)

Il n’existe pas d’outils par défaut dans les outils web, il faut donc installer des outils spécifiques (le « Web Prototyping Tool » (ZIP) et/ou « Wireframe Stencil 2003″ (ZIP – 1.3 Mo)) . Je vous renvoie à une très bonne analyse de l’outil avec les liens vers ces composants. En résumé : un outil puissant une fois les composants installés, à mon avis un peu surdimensionné si c’est uniquement pour faire des wireframes.

Les plus :

  • simplicité d’utilisation,
  • Tous les composants web sont présents et paramétrables (taille…),
  • Possibilité de mettre en place des scénarios (erreur utilisateur…),
  • Export HTML
  • Visionneuse pour ceux qui n’ont pas Visio

Les moins :

  • Pas d’intéraction avec les éléments de formulaire
  • Pas de scroll dans les exports HTML
  • Pas de « coller en place »
  • Gestion des tableaux : télécharger ceci.
  • CompatibilitéMac

Axure

Un outil spécifique qui va jusqu’au prototype et aux spécifications. En anglais et payant (600 $ env.)

Denim

Un outil informel pour le design d’interface ou les ébauches de sites web.

Design Stencil Kit par Yahoo!

Non testé : des éléments tout prêt (mais ala Yahoo! je suppose) pour OmniGraffle ou illustrator/photoshop ou Visio par Yahoo.

Tout simplement : le HTML (avec Dreamweaver)

Julie Stanford sur BoxesAndArrows explique très bien dans ce post (en anglais) les avantages d’un wireframe ou de prototypes en HTML. Je suis quasiment convaincu. Un seul inconvénient, convaincre les non-techniciens de l’équipe de l’utiliser, mais Dreamweaver reste un outil très simple en mode wysiwyg, pas plus compliqué qu’un outil comme Visio en tout cas.

Elle donne d’ailleurs quelques conseils pratiques pour simplifier l’utilisation : Dreamweaver primer.

Un autre article donne les avantages et les inconvénients comparés du HTML par rapport à Visio : Practical Applications: Visio or HTML for Wireframes

Encore un article : Prototyping with XHTML

Un autre outil en ligne (edit 12 janvier 2010)

D’autres outils (mise à jour 5/11/2008) :

Quelques liens :