10 outils gratuits pour dessiner vos wireframes

Les wireframes, ou chemins de fer sont souvent négligés par manque de temps ou parce qu’on n’a pas les bons outils. Pourtant, avec les bons outils, un wireframe peut être fait en quelques instants, seule la réflexion sera longue.

Exemple de wireframe

Exemple de wireframe

C’est pourquoi, après des années passées à concevoir des zonings et wireframes avec des outils à la pointe de la technologie tels que l’application de dessin de Google Docs ou même un stylo et du papier à petits carreaux je me suis décidé à trouver un logiciel un peu moins hype, histoire de voir comment vivent les chefs de projet en 2014. J’ai donc fait un rapide sondage sur twitter et sur Google+ pour savoir quels outils vous utilisez, j’ai parcouru quelques blogs pour voir si nos amis anglophones utilisent d’autres outils et me voilà prêt à vous livrer les résultats de mes tests, de services que j’ai découverts ou d’autres que j’avais vaguement utilisés par le passé.

separateur

Créez vos wireframes en ligne

Indépendants de votre système d’exploitation, les outils de wireframing en ligne ne sont pas pour autant pauvres en fonctionnalités et ont autant à offrir que leurs concurrents “à installer”. Leur grande force réside souvent dans leur aspect collaboratif : chaque document créé est accessible à toute l’équipe, où qu’elle se trouve sur la planète.

1. Wireframe.cc

Parfait pour débuter, wirefame.cc vous permet de créer vos chemins de fer en quelques clics sur une interface épurée. L’application propose des tailles de canvas pré configurées : smartphone, tablette… avec un petit habillage qui permet de s’imaginer le périphérique. Vous n’avez qu’à sauvegarder votre document pour obtenir une url personnalisée qui vous permettra (à vous ou à un collaborateur) de l’éditer par la suite.

  • Les avantages : il n’y a que le wireframe qui compte, à la fois lors de la conception grâce à une interface qui ne propose aucune distraction, et lors de la visualisation : il n’est pas possible de personnaliser beaucoup les éléments, donc on n’est pas tenté d’introduire des éléments graphique superflus ;
  • Les inconvénients : Même si j’ai passé quelques heures sur cet outil, je le trouve encore un peu compliqué à prendre en main en raison d’une ergonomie un peu particulière (il faut sélectionner une zone pour pouvoir accéder au menu permettant d’y insérer un objet).

Pour accéder au service : http://wireframe.cc

Capture d'écran wireframe.cc

Capture d’écran du service wireframe.cc

2. Mocknow

Ou comment cumuler la simplicité du drag & drop et l’ouverture d’un SAAS. Mocknow propose un interface très simple permettant de créer un wireframe complet par de simples glisser/déposer. Un bouton de “publication” permet de sauvegarder le document sous une url unique afin de le partager et/ou de l’éditer. Un mode “preview” est proposé afin de visualiser le wireframe sans les barres d’outil, mais l’impression n’est vraiment pas optimisée.

  • Les avantages : Une vraie barre d’outils permettant un drag & drop efficace pour créer ses documents rapidement ;
  • Les inconvénients : Les éléments ne sont pas “magnétiques” : ils ne vont pas s’aligner automatiquement les uns aux autres.

Pour accéder au service : http://mocknow.com

Capture d'écran de MockNow

Capture d’écran du service MockNow

3. Cacoo

Cacoo n’est pas à proprement parler un outil de wireframing, mais un outil de modélisation qui vous permettra de créer, entre autres schémas (UML, flowchart…), des chemins de fer. Ce service est payant mais offre une version gratuite limitée à un projet de 25 feuilles, ce qui peut être suffisant pour bon nombre d’entre vous. Point d’html5 ici, il s’agit d’une application java (avec les avantages et les inconvénients que cela implique) qui permet de créer tout type de graphique, dont nos fameux wireframes, avec un rendu normal ou comme s’ils étaient dessinés au crayon (ce style est souvent appelé sketchy). Il faudrait un livre entier pour faire le tour de Cacoo, mais vous pouvez toujours créer un compte gratuit pour vous faire votre propre idée.

  • Les avantages : on peut faire tous les diagrammes utiles à un projet informatique (UML, je t’aime moi non plus), et c’est le seul outil disponible en français de cette liste ;
  • Les inconvénients : il faut un petit temps d’adaptation pour s’y retrouver parmi les nombreux menus, et tout le monde n’est pas fan du java.

Pour accéder au service : http://cacoo.com

Capture d'écran Cacoo

Capture d’écran du service Cacoo

4. Lumzy

Rien que par son modèle de paiement cette application se démarque des autres : vous achetez un jeton qui vous donne droit à 12 heures d’utilisation sans popups (un message vous invite à payer si vous ne l’avez pas fait). L’interface, elle, se rapproche d’un environnement Windows, avec une belle barre de boutons au look XP… je trouve dommage de n’avoir pas travaillé plus sur le design, parce qu’au final ça (et les popups) lasse et on est vite tenté de passer à un autre outil, malgré le fait que le service fonctionne très bien.

  • Les avantages : l’impression des wireframes et de leurs annotations est prévue, chose exceptionnelle pour les SAAS de cette liste, et il est possible d’utiliser l’application sans inscription ;
  • Les inconvénients : l’interface brouillon gâche l’ensemble. Les éléments ne sont pas “magnétiques”.

Pour accéder au service : http://lumzy.com/

Capture d'écran de Lumzy

Capture d’écran de l’application Lumzy

5. Frame Box

Encore un petit outil en html5, sans inscription. Le canvas est facilement redimensionnable et les éléments peuvent être positionnés par simple drag & drop. Le petit plus de l’appli est le fait de choisir la durée pendant laquelle votre chemin de fer sera accessible via son url personnalisée. Pour l’instant Frame Box est en version 0.7, ce qui signifie que l’équipe derrière le projet est consciente que l’outil peut (doit) être amélioré, ce qui ne l’empêche pas d’être 100% fonctionnel.

  • Les avantages : l’outil est clairement tourné vers le travail collaboratif : il gère les révisions d’un wireframe et permet de décrire les actions d’une fenêtre pour que les autres utilisateurs sachent ce qui se passe ;
  • Les inconvénients : le rendu final n’est pas au niveau de celui des solutions concurrentes, le redimensionnement du navigateur n’est pas géré.

Pour accéder à l’application : http://framebox.org/

Capture d'écran Frame Box

Capture d’écran de l’application Frame Box

 

 Les logiciels de wireframe à installer

Moins pratiques pour les projets collaboratifs, les outils de conception de chemin de fer hors ligne ont l’avantage de pouvoir être utilisés sans connexion internet, ce qui peut être un avantage pour les utilisateurs nomades.

6. Pencil

C’est celui que vous m’avez conseillé sur Google+ (merci) et au final c’est celui que j’ai adopté. Pencil est un logiciel de wireframing pour PC, Mac, Linux, ou disponible sous la forme d’une extension firefox qui vous permet de gérer tous les chemins de fer d’un projet dans un fichier (et de les exporter au format png). Par défaut, Pencil propose la création de wireframes sketchy ou classiques et vous pouvez télécharger des outils supplémentaires, par exemple pour ajouter des icônes ou des composants au look d’un os spécifique (iOs, Android…).

  • Les avantages : disponible en tant qu’extension Firefox, donc utilisable comme une Portable App, Pencil est facilement extensible grâce aux Stencils et aux templates d’exportation ;
  • Les inconvénients : Pencil ne pas gère les révisions des wireframes, vous devrez mettre en place votre propre système de versions.

Pour télécharger l’application : http://pencil.evolus.vn

Pour télécharger le plugin Firefox : http://code.google.com/p/evoluspencil, le module qui est proposé dans le catalogue de Firefox n’est pas compatible avec les versions récentes du navigateur.

Capture d'écran de Pencil

Capture d’écran du logiciel Pencil

 

7. Wirefry

A moins que je ne sois passé à côté de quelque chose, wirefry n’est pas une interface graphique permettant de créer “à la souris” des wireframes, mais plutôt un environnement permettant de mettre en forme du code html en incluant un minimum de css… pourquoi ne pas coder directement avec un framework comme bootstrap dans ce cas ?

  • Les avantages : le code peut être réutilisé une fois les chemins de fer validés, le rendu est en Responsive Web Design ;
  • Les inconvénients : on est plus près du prototype que du wireframe, et il faut un éditeur html pour générer un document.

Pour télécharger cet outil : http://getwirefy.com

Chemin de fer avec Wirefry

Utilisation de Wirefry avec Sublime Text 2

 

8. Cogtool

Le projet  été abandonné, mais le logiciel, pour PC ou Mac est toujours disponible sur GitHub. L’objectif de cette application était de prévoir l’utilisabilité d’une interface en fonction des périphériques d’entrée et de sortie disponibles, mais au final il s’agit “juste” d’une application de wireframing fonctionnelle mais pas inoubliable non plus. Par contre l’idée de départ était bonne, donc chacun est libre de faire un fork du projet pour le continuer 😉

  • Les avantages : On peut visualiser toutes les “frames” de son projet sur un seul écran. Le logiciel est disponible pour Mac OS ;
  • Les inconvénients : Les éléments disponibles sont peu nombreux et pas magnétiques.

Pour télécharger le logiciel : https://github.com/cogtool/cogtool/releases/tag/1.2.2

Capture CogTool

Capture d’écran du logiciel CogTool

 

 

9. Serena Prototype Composer Community Edition

Là on joue dans la cour des grands ! Serena Prototype Composer vous permet de gérer tout votre projet, c’est à dire les wireframes du site mais aussi les diagrammes d’activité, la composition de l’équipe et les todo list… Etant donné que c’est la version gratuite d’un logiciel commercial, la qualité est au rendez-vous et quelques petits détails, comme la taille de la grille personnalisable facilitent le travail.

  • Les avantages : Tout le projet peut être géré à un seul endroit, des layouts sont déjà préconfigurés (disposition sur 3 colonnes, 2 colonnes + un slider pleine largeur …) ;
  • Les inconvénients : La prise en mains se fait doucement, de peur de “faire une bêtise” en modifiant un paramètre du projet.

Pour télécharger le logiciel : http://www.serena.com/index.php/en/products/other-products/prototype-composer/

Serena Prototype Composer Community Edition

Capture d’écran du logiciel Serena Prototype Composer

 

Dessiner des wireframes avec les doigts ?

10. Mocking Pal

Je terminerai cette liste par un outil disponible sur les smartphones et tablettes Android : Mocking Pal, qui permet de dessiner un wireframe sur un écran tactile avec une interface toute simple et intuitive. Comme dans la plupart des outils présentés ici, un simple glisser déposer permet d’ajouter un élément sur une grille. Il est possible de modifier ou de redimensionner chaque objet très facilement grâce à de gros boutons d’action et un menu contextuel efficace.

  • Les avantages : l’ergonomie est vraiment bien étudiée, on est efficace instantanément sur une tablette ;
  • Les inconvénients : les possibilités sont restreintes, et il faut être honnête : travailler sur un écran de 4 pouces n’est pas réaliste, l’utilisation correcte du logiciel est donc réservée au tablettes.

Pour installer l’appli : https://play.google.com/store/apps/details?id=com.sharkear.penmockups

Capture Mocking Pal

Capture d’écran de l’application Android Mocking Pal

 

iMockup : des wireframes avec iOs

Je ne pouvais pas proposer un outil Android sans parler d’un concurrent disponible pour iOs, alors je vous propose iMockup et OmniGraffle, aucun des deux n’étant gratuit, et n’ayant pas d’iPad, je ne les ai pas testés, mais sachez qu’ils existent.

separateur

Je suis persuadé que bon nombre d’entre vous utilisent d’autres outils, et que vous avez un avis sur certains d’entre ceux que j’ai listés ci-dessus, alors exprimez vous ! Donnez nous vos impressions et proposez vos logiciels favoris, s’ils sont gratuits je validerai vos liens avec plaisir.

20 réponses

  1. […] Les wireframes, ou chemins de fer sont souvent négligés par manque de temps ou parce qu’on n’a pas les bons outils. Pourtant, avec les bons outils, un wireframe peut être fait en quelques instants, seule la réflexion sera longue.  […]

  2. […] Conception de site internet ou de logiciel, les wireframes sont indispensables à votre projet. Découvrez 10 outils pour créer les votres gratuitement !  […]

  3. jerome dit :

    Je rajouterai à cette longue liste la solution éditée par balsamiq
    http://balsamiq.com/products/mockups/

    J’utilise une vieille version lancée alors que la solution était encore en phase de lancement. Elle permet très intuitivement et facilement de réaliser des sketchs.
    Je ne doute pas que depuis elle a gagnée en productivité.

  4. Renaud M.G. dit :

    Merci jerome, on en parle beaucoup en effet, mais est-ce que cette application est gratuite ?
    J’ai vu qu’il y a une extension Chrome, ça peut être pratique aussi

  5. […] Conception de site internet ou de logiciel, les wireframes sont indispensables à votre projet. Découvrez 10 outils pour créer les votres gratuitement !  […]

  6. kaduma dit :

    Il y a également Moqups.com en sas html5 qui permet pas mal de choses avec la version gratuite. Son atout est son ergonomie assez intuitive, et il est plutôt complet.

  7. […] 10 outils gratuits pour faire vos wireframes – Responsive Mind […]

  8. mathieu dit :

    Ces solutions me semblent un peu complexe au vue de la simplicité et le liberté qu’on a avec un crayon et une feuille de papier…

  9. Renaud M.G. dit :

    Merci pour l’info, c’est vrai qu’il fonctionne bien !

  10. Renaud M.G. dit :

    Bonjour Mathieu, oui c’est plus complexe qu’un crayon et une feuille mais ça a quand même quelques avantages :

    on peut travailler à plusieurs sans être dans la même pièce
    on n’a pas besoin de gomme pour faire une modification (ce qui fait des économies énormes au bout de 12564 siècles)
    quand on a une écriture “originale” et un tracé plus proche de celui d’un développeur que celui d’un graphiste on peut quand même les transmettre au client

    mais je confirme, il m’a fallu plusieurs années pour abandonner mon cahier et mes pattes de mouche pour entrer dans le 21° siècle

  11. […] 10 outils gratuits pour faire vos wireframes – Responsive Mind […]

  12. […] Conception de site internet ou de logiciel, les wireframes sont indispensables à votre projet. Découvrez 10 outils pour créer les votres gratuitement !  […]

  13. […] “ Conception de site internet ou de logiciel, les wireframes sont indispensables à votre projet. Découvrez 10 outils pour créer les votres gratuitement !”  […]

  14. […] 10 outils gratuits pour faire vos wireframes – Responsive Mind. Les wireframes, ou chemins de fer sont souvent négligés par manque de temps ou parce qu’on n’a pas les bons outils. […]

  15. […] 10 outils gratuits pour faire vos wireframes – Responsive Mind. Les wireframes, ou chemins de fer sont souvent négligés par manque de temps ou parce qu’on n’a pas les bons outils. […]

  16. Le Den's dit :

    Salut à tous les assidus de ce sujet intéressant.

    J’apporte une actualité sur le projet du PENCIL (d’Evolus), qui est léger et véloce comme j’aime.
    Fonctionnant très bien dans sa version de fin 2013 (2.0.5), la prochaine en 2015 sera la 3.0;
    Pour ce qui est de l’extension Firefox, hé bien elle est fonctionnelle si la vers. dite “stand-alone” est installée sur le système (en fait ce ne sont que des fichiers xml, xul, et js… Voilà.
    Epi on trouve même dans une version française pour debian le fichier francisation “.dtd” qui pour fonctionner sous win, devra remplacer dans le dossier “locale\en-US” celui qui offrait tous les menus, dialogues, etc. Sorties de fichiers intéressants, html interactif, word, odt, pdf, etc Ha !.. Et ça imprime maintenant ! Bye.

  17. Renaud M.G. dit :

    J’ai hâte de voir cette version ! Merci pour l’astuce de la francisation 🙂

  18. Le Den's dit :

    Ok, je reviens donner le lien pour le “/locale/pencil.dtd” traduit en FR !!!

    http://www.ordilibre.com/pencil

  19. Renaud M.G. dit :

    Merci !

  20. Gilles dit :

    Bonjour,

    Merci pour le sujet. Pencil evolus est vraiment un bon logiciel.
    Le fichier deb proposé par Ordilibre est en 2.04 et il y a une alerte de sécurité à l’installation (fichier .deb non conforme). Cela part d’une bonne intention de la part de Christophe Catarina d’avoir réalisé la traduction. Cependant, je pense qu’il serait préférable d’envoyer directement à Evolus Pencil cette traduction.
    La communauté qui développe et utilise Pencil serait heureuse de bénéficier de ce travail avec la dernière version et la prochaine en 3.0
    Bien cordialement.

Laisser un commentaire

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