Maquettage express

Avant même d'attaquer pleinement la conception graphique d'une interface, il est nécessaire de poser le tout sur papier... mais cela dépend du coup de vos compétences en la matière! Passez plutôt au numérique, c'est plus propre et y'a pas besoin de gomme!

Pour élaborer rapidement et concrètement l'agencement de l'information (et le zoning) et des fonctionnalités d'une future interface, le maquettage en fil de fer (wireframe) est souvent un passage obligé de l'approche ergonomique. C'est d'ailleurs ce que proclame Jean-François Nogier: "Le prototypage est la clé de voûte du développement itératif".

Que l'on soit à l'aise ou non avec un crayon à papier, quand un client veut pouvoir se représenter concrètement sa future interface, l'esthétique du wireframe a tout de même son importance. De nombreux outils sont à portée de souris et tout dépend de ce que l'on veut en faire. Je vous en propose donc quelques uns, du plus basique au plus étoffé, du plus statique au plus fonctionnel (n'hésitez pas à m'en suggérer d'autres!).

Pencil Sketching, une extension de Firefox contenant l'essentiel des éléments fonctionnels de tout interface (bouton, liste déroulante, zone de texte, etc.). Vraiment très basique et assez configurable (rendu exportable simplement au format png); Patterns
Fonctionnel
Rapidité
Prix

Balsamiq Mockup, utilisable facilement en ligne (Flex) ou en logiciel, le rendu ressemble à du dessin bien qu'il reste très efficace (exportable au format png (et xml avec le logiciel)); Patterns
Fonctionnel
Rapidité
Prix

MockupScreens, un logiciel de wireframe plutôt basique et facile d'utilisation, générant une maquette fonctionnelle (rendu au format html); Patterns
Fonctionnel Rapidité
Prix

Oversite, un logiciel de wireframe assez basique, permettant en particulier de définir l'architecture d'un site web et les liens entre pages, et donc une maquette fonctionnelle (rendu exportable au format html); Patterns
Fonctionnel
Rapidité
Prix

Axure, assurément le meilleur compromis en termes de possibilités de prototypage statique ou fonctionnel et d'architecture de l'information, sans connaissance en programmation. Il génère même du javascript en toute transparence (rendu au format html); Patterns
Fonctionnel
Rapidité
Prix

Prototype Composer de Serena, un logiciel complet de la définition de l'architecture de l'information à l'interface finale (rendu exportable simplement au format Visio); Patterns
Fonctionnel
Rapidité
Prix

Gliffy, plutôt généraliste dans la manipulation d'objets, il permet néanmoins un maquettage efficace bien que basique (rendu au format html); Patterns
Fonctionnel
Rapidité
Prix

Protoshare, uniquement en ligne, ce logiciel permet de créer des maquettes très riches dans un espace collaboratif où les différents intervenants pourront apporter leurs contributions au projet; Patterns    
Fonctionnel
Rapidité
Prix

Certes, d'autres logiciels comme Dreamweaver ou Visio permettent de faire des prototypes bien plus puissants et fonctionnels... mais leur maniabilité demande davantage de temps et de connaissances (programmation, interaction avec des bases de données, etc.).

Touche d'humour:
Si vous avez la possibilité d'amener votre porte de frigo en réunion, je vous conseille également guimagnets... une autre manière de faire du maquettage un jeu?!

1-Mise à jour suite au commentaire de Eris-superfiction: Ajout de Gliffy et Protoshare, et ajout de notations détaillées