Archive

Posts Tagged ‘fil de fer’

Bye bye Visio : 4 applications spécialisées pour créer des maquettes schématiques

Le «wireframe» — ou la maquette schématique en français —, est une façon de mettre en page les fonctionnalités d’un site Web avant d’entreprendre les travaux de design graphique. C’est un outil pratique pour travailler rapidement sur un concept ou une idée, en faisant plusieurs itérations sans nuire à sa santé mentale et à celle du concepteur graphique de votre équipe.

Pour construire quelque chose, il faut un plan

Le «wireframe», c’est le plan détaillé de chacune des pages d’un site Web.

Lorsqu’un architecte construit une maison, il crée d’abord un plan. Il peut discuter du plan avec son client et apporter des changements au fur et à mesure que la compréhension du projet évolue. La décoration (design graphique), ça vient après. On décide de l’ambiance des lieux après qu’on se soit entendu sur le découpage des pièces.

Un «wireframe» doit donc intégrer et mettre en images les idées de l’architecte informationnel, des autres membres de son équipe et de l’utilisateur. Sa conception doit aussi favoriser la souplesse, afin de refléter les changements d’orientation qui peuvent survenir durant un projet.

L’important dans le processus de création d’une maquette schématique, c’est de ne pas se laisser ralentir par les détails. Si l’outil alourdit le processus de réflexion, il perd son utilité. Le mieux est l’ennemi du bien.

Du papier et un crayon

Comme dans la série MTV Unplugged où les artistes faisaient une prestation avec des instruments acoustiques, il est possible de commencer le processus de création du fil de fer («wireframing») sans utiliser de logiciel et d’en tirer des résultats tout à fait honnêtes.

Lors d’une rencontre de remue-méninges, une première maquette schématique peut être créée à l’aide d’outils traditionnels, mais efficaces : du papier et un crayon (ou une serviette de table comme le dit Dan Roam dans son livre The Back of the Napkin), un tableau blanc, une grande feuille vierge, des crayons, etc. Ce sont de très bons outils collaboratifs qui permettent de faire des itérations rapides, surtout en début de processus.

Par contre, après avoir jeté ses idées sur papier, il est bien de passer à une autre étape et d’utiliser une application de création de maquettes schématiques, pour les mêmes raisons qui font que l’on rédige dans un logiciel de traitement de texte au lieu d’écrire sur papier : ça facilite la bonification du document, le résultat est plus clair et propre et ça favorise les échanges.

Mais j’utilise déjà Visio !

Des applications comme Microsoft Visio et Adobe Illustrator peuvent servir à créer des maquettes schématiques. Beaucoup de gens les utilisent et obtiennent de bons résultats, mais un outil spécialisé vous permettra d’arriver à vos fins plus rapidement, avec un produit de plus grande qualité. C’est encore plus vrai si le logiciel spécialisé est très simple à apprendre.

J’ai pris le temps d’évaluer quelques applications spécialisées en conception de maquettes schématiques. Voici mon compte rendu : je vous laisse en tirer vos propres conclusions.

4 applications spécialisées pour créer des maquettes schématiques

Mockingbird

Mockingbird (tiré du terme anglais “mockup” pour maquette) est une application entièrement Web. Pour l’essayer, il suffit de se rendre sur le site de Mockingbird et de cliquer sur le bouton “Launch”.

L'interface Web de Mockingbird est facile d'utilisation mais l'ensemble fait un peu vieillot.

L’application offre 92 éléments d’interface et permet de créer plusieurs maquettes dans un même projet. L’interface est facile d’utilisation (ça ne m’a pris que quelques instants pour m’y retrouver) mais l’ensemble fait malheureusement un peu vieillot.

Environnement : Web
Prix : À partir de 9 $ par mois
Période d’essai gratuite : Illimitée, mais ne permet pas de sauvegarder.
Avantages :

  • Courbe d’apprentissage rapide.
  • Aucune installation nécessaire, prêt à utiliser en quelques secondes.

Inconvénients :

  • Paiement récurrent.
  • Éléments d’interface moins intéressants visuellement que certains compétiteurs.

Site Web de Mockingbird

myBalsamiq

myBalsamiq est une application Web qui existe aussi en version applicative (voir Balsamiq Mockups for Desktop). Chaque version à ses avantages.

La qualité principale de la version Web est son côté collaboratif. Plusieurs utilisateurs peuvent contribuer et échanger sur les mêmes projets, hébergés dans un « nuage » L’interface est conviviale. Je suis surpris de la facilité d’utilisation, surtout pour une application Web.

Dans myBalsamiq, les projets sont représentés sous forme de livres.

L’écran d’ouverture permet de voir les différents projets qui sont créés, représentés sous forme de livres. Chaque projet peut contenir plusieurs maquettes schématiques. Le tour guidé permet de rapidement comprendre le fonctionnement de l’interface.

Dans myBalsamiq, les éléments donnent l'impression d'avoir été dessinés à la main.

Les éléments de page sont variés et donnent l’impression d’avoir été dessinés à la main. Cet effet «griffonnage» est pratique pour que l’attention soit portée sur le contenu et non le style visuel de la page.

Environnement : Web
Prix : À partir de 12 $ par mois
Période d’essai gratuite : 30 jours
Avantages :

  • Outils collaboratifs entre plusieurs personnes.
  • Possible de l’utiliser à partir de n’importe quel poste de travail.
  • Permet de regrouper les maquettes par projet.
  • Les éléments semblent avoir été dessinés à la main.
  • Mode “présentation” plein écran.

Inconvénients :

  • Paiement récurrent.

Site Web de myBalsamiq

Balsamiq Mockups for Desktop

En complément de la version Web, Balsamiq Mockups for Desktop s’installe sur tous les systèmes d’exploitation supportant la technologie Adobe Air, dont Windows et Mac OS.  Les sytèmes iOS, Android et Blackberry Tablet OS devraient aussi pouvoir « accueillir » cette version : je ne l’ai toutefois pas validé.

On retrouve la même finesse dans le design des éléments, les mêmes fonctionnalités et la même facilité d’utilisation que dans l’application Web. Personnellement, j’aime le fait de n’avoir à payer un logiciel qu’une seule fois. Un paiement unique est souvent plus facile à faire approuver par son organisation. Par contre, si on n’a pas de compte myBalsamiq, on perd tout le côté collaboratif et la gestion des projets de la version Web. En effet, la version « Desktop » et la version Web peuvent se « parler » et fonctionner ensemble seulement si on paye un compte mensuel myBalsamiq.

Mode plein écran

Dans les deux versions (Web et « Desktop »), on retrouve un mode plein écran qui permet de présenter nos créations sur projecteur, à l’aide d’un curseur bleu surdimensionné qui suit le mouvement de la souris. J’adore!

Le mode plein écran offre un curseur bleu surdimensionné.

Environnement : Adobe AIR (Windows, Mac OS X)
Prix : 80 $
Période d’essai gratuite : 7 jours
Avantages :

  • Payable seulement une fois.
  • Les éléments semblent avoir été dessinés à la main.
  • Mode “présentation” plein écran.

Inconvénients :

  • Pas de gestion par projet. Chaque maquette est autonome, sauf si on paye pour un compte myBalsamiq qui permet de partager le tout en ligne.

Site Web de Balsamiq Mockups for Desktop

Omnigraffle

Je vous avais dit que je ne présenterais que des outils spécialisés, mais je fais une exception pour un très bon produit.

Omnigraffle s’apparente à Visio puisqu’il n’est pas d’abord conçu pour créer des maquettes schématiques. Si vous avez à créer des diagrammes de toute sorte, plans de site, organigrammes et autres documents visuels (et que vous utilisez un Mac), il peut très bien faire le boulot et vous offrir quelques petits avantages, comme la mise en page automatique, qui vous permettront de sauver du temps.

Il y a une communauté Omnigraffle appelée Graffletopia qui offre des gabarits des éléments de pages de toutes sortes. La plupart sont gratuits et plusieurs sont axés vers la création de wireframes.

Environnement : Mac OS X, iPad
Prix : 100 $ pour Mac OS X, 50 $ pour iPad
Période d’essai gratuite : 14 jours
Avantages :

  • Pas seulement un outil de wireframe – c’est un logiciel versatile qui peut servir à beaucoup de choses, comme la création de diagrammes.
  • Les éléments provenant de Graffletopia sont bien conçus et utiles.

Inconvénients :

  • Courbe d’apprentissage plus difficile que les autres produits.
  • N’existe pas en version Windows.
  • Requiert le téléchargement de stencils supplémentaires (gratuits).

Site Web d’Omnigraffle

Mon choix : Balsamiq

Après ces essais, j’ose me prononcer en faveur de la gamme de produits Balsamiq. Devriez-vous utiliser la version Web avec outils collaboratifs, la version « Desktop » ou une combinaison des deux, cela dépend de vos besoins de collaboration. Je crois que ce produit évolue bien et qu’il offre de belles fonctionnalités pour le prix. Bien sûr, cet avis n’implique que moi.  :)

Prochain billet : prototypes fonctionnels

Avant de faire un achat, prenez le temps de lire mon prochain billet, qui présentera des applications de prototypage. Ces applications approfondissent le concept des maquettes schématiques en offrant la possibilité d’en créer des versions fonctionnelles : des prototypes.

Je vous présenterai les applications Axure RP, Flairbuilder, Jumpchart, Proto.io et iPlotz.

Patrick Matte, ergonome Web, Sépaq
Collaboration spéciale

———

Biographie de Patrick Matte : Patrick est un pionnier du Web, créant professionnellement ses premiers sites dès 1995. Il s’intéresse à l’impact positif que peut avoir la technologie dans nos vies, comme outil au service de l’être humain et de sa créativité. Il est ergonome Web à la Sépaq.


Suivre

Recevez les nouvelles publications par mail.

Rejoignez 4 113 autres abonnés

%d blogueurs aiment cette page :