Quelques outils pour réaliser des maquettes

J’ai défini mon besoin, mais de quelle manière puis-je le mettre en image? 

Il est certain que la simple description des données et des actions qui vont apparaître dans les écrans d’une application est assez limité pour se projeter dans l’application finale, et cela laisse libre cours à trop d’interprétations différentes suivant le lecteur.

Pour compléter la description d’un besoin, une manière efficace est de produire une maquette des écrans attendus. Une maquette est une représentation partielle ou complète d’un système ou d’un objet (existant ou en projet) afin d’en tester et valider certains aspects (ergonomiques et graphiques) et/ou le comportement (maquette fonctionnelle).

Votre client va avoir une idée beaucoup plus précise du rendu final de son application : disposition des champs et des tableaux, cohérence des informations, nécessité de scinder les formulaires trop imposants…

Il existe bien évidemment beaucoup de logiciels qui permettent d’effectuer ce travail, et il existe tout autant d’articles qui traitent du sujet.

Chez K2, nous avons fait le choix de comparer cinq applications, en axant essentiellement notre démarche sur la production d’écrans statiques ; ces maquettes font partie intégrante des documents que nous délivrons à nos clients en phase d’analyse.

Il y en a pour tous les goûts : des payantes, des online, des intégrées, des complètes, des basiques. Petit tour d’horizon :

Balsamiq

La petite préférée et la plus utilisée par notre équipe d’analystes fonctionnels est sans conteste Balsamiq. Design sympa et grand choix d’icônes et de wigdets (élément de base d’une interface graphique comme un bouton par exemple), possibilité de dupliquer ou d’exporter tout ou partie des écrans… c’est vite fait, et bien fait.

maquette d’une page d’accueil avec Balsamiq
maquette d'une page d'accueil avec Balsamiq

Il est également possible d’ajouter des templates contextualisés, en créant une librairie personnelle, ce qui permet de créer des contrôles Balsamiq qui correspondent aux contrôles spécifiques K2, d’uniformiser les maquettes et de gagner du temps :

Exemple de widgets personnalisés

Moqups

La petite sœur de l’application Balsamiq est Moqups, qui est une version en ligne. La version de base est gratuite, et pour bénéficier d’options comme l’enregistrement des projets en local, le travail collaboratif de manière simultanée ou encore l’utilisation de modèles (master pages) applicables à toutes les pages d’un projet, il faut s’acquitter du montant de la licence, à partir de 99 euros/an. Moqups est intégré à Google Drive (création de projets directement à partir du menu de Google Drive) et à Dropbox.

maquette d’une page d’accueil avec Moqups

maquette d'une page d'accueil avec Moqups

Pencil Project

Dans la même veine, Pencil Project d’Evolus, est intéressant parce que totalement gratuit. Diversité des wigdets, accessibilité des principales fonctions, il donne la possibilité d’exporter en web ou au format Office, ce qui n’est pas négligeable pour les présentations formelles.

Outil de création de maquette Pencil

Visio Professional et Axure Pro

Dans la série des pros, il y a Microsoft Visio Professional 2013 et Axure Pro. Leur tarif (respectivement 739 euros et 540 euros) après expiration de la période d’essai gratuite est justifié par le fait qu’au delà de la réalisation de maquettes d’applications informatiques dynamiques, vous avez la possibilité de créer d’autres choses que des maquettes d’écran ; par exemple des diagrammes élaborés, des plans architecturaux ou électriques ou des flux de travail… que vous pourrez exporter sous pléthore de formats, du web jusqu’à Office (avec en prime export des listes d’actions en Excel), en passant par les images. Le partage collaboratif est également proposé.

maquette d’une page d’accueil avec Axure Pro

maquette d'une page d'accueil avec Axure Pro

maquette d’une page d’accueil avec Visio

maquette d'une page d'accueil avec Visio

Axure Pro permet en plus d’injecter de l’intelligence en développant du code derrière les boutons d’actions, de manière simplifiée mais en gérant tout de même les événements et les conditions, les connexions à des bases de données pour alimenter les listes déroulantes.

L’ergonomie et la simplicité d’utilisation sont tout de même moins recherchées dans ces logiciels plus techniques.

K2 smartforms designer

En dernier lieu, pour qui possède une licence d’utilisation K2 Designer, il est envisageable de concevoir ses maquettes d’écran directement avec l’outil qui sera utilisé pour l’exécution. Quelques notions sont nécessaires quant à la manipulation de l’outil, mais il n’y aura pas besoin d’aller jusqu’à l’écriture de code. Le résultat est très probant et se rapproche du rendu final, surtout si on implémente du dynamisme derrière les boutons. Cependant, l’obtention d’un résultat satisfaisant prend plus de temps qu’avec un logiciel de maquettage simple, suffisant pour la plupart des analyses que nous réalisons. L’utilisation de K2 Designer a un fort intérêt dès lors que la maquette doit s’animer, les outils comme Balsamiq sont plus simples et plus rapides à utiliser si on ne fait que du “dessin” des écrans.

maquette d’une page d’accueil avec K2 Designer

maquette d'une page d'accueil avec K2 Designer

Résumé

En résumé, voici un petit tableau récapitulatif des principales informations :

tableau comparatif des différentes soolutions

3 thoughts to “Quelques outils pour réaliser des maquettes”

  1. Comme je l’ai dit au début on aurait du faire les mockup en utilisant K2 Forms, ca nous aurait évité les mauvaises surpirses 🙂

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.