Dans mon boulot de conception d’interfaces, je suis régulièrement amené à réaliser des maquettes.
Maquettes, prototypes, ergolayouts, mockups, wireframes,… de nombreux vocables existent pour désigner ce qu’on peut considérer comme du design fonctionnel (qui s’intéresse au découpage des contenus, à la taille et à la position des fonctionnalités,…) par opposition au design graphique (qui s’intéresse aux couleurs, aux effets graphiques, aux formes,…).
Microsoft Visio reste un des classiques pour réaliser ce genre de tâches. Personnellement, il me déçoit. Je le trouve faible dans son rendu graphique, fermé dans son approche et incomplet en termes d’éléments d’interface.
Jusqu’ici, je trouvais sympathique des outils tels que Gliffy ou Mockingbird.
Mais là, j’ai testé Mockflow, et je l’ai tout de suite adopté !
Tout y est ! Glissez et déposez les objets suivants :
Suite à vos commentaires, chers lecteurs, je rajoute Balsamiq, dont j’aime l’allure “brouillon manuscrit”. Elle lève toute ambiguïté sur le fait qu’il s’agit d’une maquette, et non d’un produit fini.
J’aime le résultat, car on produit des maquettes propres et professionnelles, sans prendre le risque de dériver sur les questions graphiques, beaucoup plus subjectives en termes de gestion de projet (“Les goûts et les couleurs”, comme on dit!). Je vous conseille de passer par ce stade de prototype fonctionnel, avant de vous lancer dans la finition graphique. Même s’il reste souvent intéressant, ensuite, si vous avez la chance de travailler avec un bon créatif, de lui laisser du champ et la possibilité de remettre en question certains choix.
Bon, il reste tout de même les risques liés à un outil en ligne, comme la nécessité de posséder une connexion Internet performante et fiable. Je me rappelle avoir amèrement regretté, en Algérie, mon choix de travailler avec des outils en ligne.
Vous pouvez tester Mockflow gratuitement. Pour une utilisation intensive, il vous en coûtera 59 euros par an. Microsoft Visio coûte 999 $, à titre de comparaison.
Si vous optez pour un produit payant, le “must”, c’est Axure Pro, qui permet d’ajouter de l’interactivité à vos maquettes : effets au clic ou au passage de la souris, et bien plus.
Découvrez services en maquettes web ! Faites-vous une idée avec notre poster “avant / après” !
Commentaires des lecteurs
Comment by krysttof — 8 December 2010
Il manque à ta liste l’excellent Pencil Project : pencil.evolus.vn/en-US/Ho… qui est une extension à Firefox !
Grandiose !
Comment by max — 8 December 2010
J’aime bien "Balsamiq Mockups"
balsamiq.com/products/moc…
Comment by J.Juraver — 8 December 2010
Pareil que max, j’utilise pas mal balsamiq, assez complet et avec un certain charme "manuscrit"…
Comment by jmh — 8 December 2010
Oui, j’ai été voir… et je comprends maintenant ce que vous voulez dire par "charme manuscrit" 😉
Comment by Matthieu — 8 December 2010
Mockflow a l’air vraiment puissant, je vais essayer!
Comment by Agence Web Wixiweb — 9 December 2010
Le meilleur sans hésitation c’est Axure RP Pro
http://www.axure.com/
Comment by Zakaria — 9 December 2010
En effet http://www.axure.com reste un outil excellent pour les approches ergonomiques, et prototypes web !
Comment by Choko — 11 December 2010
Salut,
Merci pour ces conseils. Je vais les utiliser prochainement.
Comment by jmh — 6 January 2011
Protoshare a l’air super aussi… voir le billet d’Elie Sloïm sur le sujet : blog.temesis.com/post/201…
Comment by Patrice — 8 February 2011
Je viens de jeter un oeil à pencil.evolus.vn/en-US/Ho… et je le trouve très intéressant, pour un outil gratuit. Ceci dit, je vais tester Mockflow, à ce prix dérisoire …
Comment by agence web maroc — 28 April 2016
Merci pour ces outils , je vais essayer prochainement