10 oct. 2010
Balsamiq Mockups, un outil de wireframe indispensable
22:23
Jean-Christophe Duvivier
agencement
agilité
ergonomie
mock-up
wireframe

Que ce soit dans une démarche classique ou agile, les wireframes sont devenus indispensables dans un souci d'optimisation de l'agencement et de l'ergonomie. Plus précis, plus représentatifs et mois rébarbatifs que des documents de spécifications qu'ils viennent complémenter, les wireframes permettent de schématiser de manière très basique une interface en faisant abstraction de la charte graphique en elle même. Accompagnés d'annotations, ils permettront même d'identifier les actions utilisateurs possibles ainsi que les interactions.
À ce titre, je vous présente Balsamiq Mockups, un outil simple, intuitif, performant est très pertinent ! Fonctionnant sur plateforme Adobe Air, il nécessite une installation si vous voulez l'utiliser offline, mais propose aussi une version online dans le cadre d'une démo.
L'utilisation est très simple. Chaque élément est accessible via un menu catégorisé est peut être inséré dans la maquette par un drag and drop. Une fois inséré, il nous est possible de redimensionner l'élément, mais aussi d'interagir sur son style de bordure, la couleur du texte, l'alignement etc., comme le proposerait n'importe quel éditeur de texte. Il est de plus possible de grouper les éléments entre eux, ce qui peut paraître futile mais se révèle être très efficace voir indispensable.
Diagramme en secteurs, accordéons, checkbox, barres de scroll, icônes, bref ; une large panoplie d'éléments où vous trouverez ce que vous voulez ;) Il vous est même possible de réaliser des wireframes pour les applications smartphones.
Pour une utilisation personnelle, la licence vous coutera 75$. Un très bon rapport qualité/prix quand on voit le temps que peut vous faire gagner la réalisation de wireframes.
Pour de plus amples informations à propos de Balsamiq Mockups, c'est sur le site officiel. Voici le wireframe de mon blog, réalisé en 2 minutes :

iPhone et le buzz des applications collaboratives




novembre 2011
Commentaires
Le 23 nov. 2010 à 07:51
euh... intéressant, ce côté "fait à la main" avec un ordinateur qui dessine comme un enfant de 7 ans.
Ahhh en plus ils le vendent?
konigi propose des "stencils" pour omnigraffle, nettement moins moches.
Ah oui... il faut un Mac, ou un iPad...
Dommage.
Le 01 déc. 2010 à 09:03
Les goûts et les couleurs :)
Le côté "fait main" permet d'accentuer le rôle du mockup : définir la disposition des éléments. Il ne doit en aucun fournir des détails esthétiques poussés, au risque de le prendre pour ce qu'il n'est pas : une maquette graphique.
Je vois que vous l'avez utilisé dans votre projet (http://www.lutrindigital.cc/?p=209) pour définir le back-office. Comme quoi les dessins d'enfants de 7 ans peuvent avoir un rôle important à jouer dans un projet, quelque soit son ampleur ;)