Accueil » Blog » Les meilleurs outils pour réaliser vos maquettes

Les meilleurs outils pour réaliser vos maquettes

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 :

  • Menus verticaux, horizontaux, en onglet, en liens textes, fil d’Ariane,…
  • Cartes géographiques et calendriers interactifs
  • Boutons, barres de défilement, cases à cocher, en-veux-tu-en-voilà
  • Icônes fonctionnelles les plus variées (imprimante, enveloppe, loupe,…)
  • Fonctions sociales et participatives
  • Texte “lorem ipsum” à la demande
  • Et bien d’autres possibilités

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

Votre commentaire

Your email address will not be published. Required fields are marked *

Je suis un humain*

This site uses Akismet to reduce spam. Learn how your comment data is processed.