Boite à outils gestion de projet (orienté web) #7 : La maquette

Depuis le début de cette série d’article, aucun n’avait encore abordé jusque là l’aspect pourtant essentiel qu’est le graphisme.  C’est étrange, non ? La majorité des éléments que je vous ai présenté sont tous plus tournés vers le fonctionnel que vers le visuel… Évidement, je suis développeur! Toutefois, cela ne m’empêche pas de voir l’importance de la partie graphique d’un site ou projet.

Importance de l’aspect graphique

L’aspect graphique est un fil conducteur pour définir aussi les besoins des clients et du projet car il fait appel à nos sens.  Bien que je parle de graphisme, je ne m’arrêterai pas à relation entre le visuel et la vue mais bien aux conséquences.

Dans le cadre d’un site, le visuel est à prendre sous plusieurs angles:

  • la structure descriptive de la page HTML
  • son rendu sur les différents supports  ( navigateur + support physique )
  • son utilisation ( expérience utilisateur )
  • et son accessibilité

Ces derniers mois, ma vision des choses s’est élargie sur la manière de pouvoir aborder ce sujet grâce dans un premier temps à mes collègues ensuite mes lectures  et pour finir les conférences auxquelles j’ai pu assister. Évidement, cela ne fait pas de moi un expert mais me permet de changer mon angle d’approche ( si je venais à faire du graphisme ou webdesign 🙂 ).

Tout ça pour en venir à la maquette

Pour la petite définition, la maquette est un document représentatif de l’aspect visuel du projet. Celui-ci peut être accompagné d’annotations et  finir par regrouper les maquettes et en faire un storyboard pour une expérience utilisateur complète du site.

Vous rencontrerez sans doute les termes  wireframe, mockup et sans doute d’autres. Ce sont pour la plupart une maquette avec un but ou un sens ce qui justifie le terme employé. Bien que le but de représentation du projet reste fondamentalement le même.

6 Outils :

J’ai fait une petite recherche pour quelques outils. Mon choix s’est porté sur le numéro 1 pour ses arguments de poids:  sa gratuité et sa simplicité.  Pour les outils tablettes pour faire des maquettes, j’en présenterai une fois que j’en aurai une.

1. Pencil

Comme dit plus haut, j’ai choisi cet outil pour son prix et qui contrairement à certains est une application de bureau donc pas un RIA ou une application via le navigation. Pencil est flexible et permet d’ajouter des collections d’outils pour combler les besoins spécifiques.

2. MockingBird

Mockingbird m’a surpris visuellement avec sa simplicité et son efficacité bien que je ne l’ai pas poussé dans ses derniers retranchements. De plus, son prix semble assez raisonnable par rapport à la concurrence en ce qui concerne le prix entrée de gamme.

3. Mockflow

Après avoir pu le tester gratuitement, j’ai voulu me renseigner sur les options payantes… ah ben non il y a juste Free et Premium ce qui donne une offre claire et précise. Pour du full illimité le Premium reste une des meilleures offres que j’ai vu pour un produit plutôt abouti. A noter, le premium rajoute une suite d’outil que je n’ai pas pu tester donc je les présume plus qu’autres choses au même niveau que l’application.

4. Balsamiq

Nous avons eu le gratuit, le plan minimal très intéressant et le produit Premium à un bon prix… et là nous avons la licence que tu paies une fois et ensuite ça roule tu as ton application bureau qui sera mise à jour. Mais qui dit application desktop dit que le stockage est sur notre machine pas d’hébergement ou stockage en ligne. L’intérêt pour certains sera réduit mais pour ceux qui ont les capacités d’hébergement de contenu et de stockage cet outils pourrait bien vous faire économiser sur du long terme comme les mise à jour sont incluses.

5. Cacoo

Il y a aussi le genre d’outil qui te permet de faire ce que tu veux faire mais aussi de tout faire c’est un peu ce que fait Cacoo. Donc si vous ne voulez pas faire une maquette de site mais plutôt un autre diagramme au hasard  un MCTA ou alors même une simple représentation graphique du réseau de la PME ou d’une salle… Ne changez pas d’outil, Cacoo est là.

Qui dit grand potentiel dit un prix qui va avec… mais il y a un modèle Free et ensuite c’est l’offre Premium découpée. Une offre Premium qui est pour un seul et unique utilisateur  pas trop chère pour la large gamme de diagrammes disponibles. Et ensuite le vrai premium  qui est découpé en fonction de l’usage donc max 10 users, 30 et puis 100 pour la dernière offre. J’ai tenu à mettre cet outil ici plus pour son choix de diagramme que pour le prix bien que celui-ci pour un usage seul est très intéressant.

6. Moqups

J’étais parti sur 5 outils et j’ai vu Moqups !  Simple, efficace pour ce qu’on lui demande c’est-à-dire de faire une maquette pour un site. Bien que je ne l’ai précisé pour aucun les exports de maquette sont au minimum PNG et PDF bien que certains permettent le SVG ou autre. Moqups est gratuit apparemment et on peut stocker/partager/linker ses maquettes pour les présenter.


Tous ces outils pour permettre de déjà se faire une idée ou bien tout simplement réaliser une idée. Se rendre compte qu’elle est bonne ou mauvaise pour certaines utilisations. Pouvoir se rendre compte qu’il manque quelque chose. Les maquettes c’est notre première impression, notre base. Une bonne maquette pourra empêcher de tomber dans des pièges comme de l’improvisation à outrance sur les interfaces pour en fin de compte oublier de mettre en avant des fonctionnalités essentielles de votre produit ou site.

Imaginez un site d’édition en ligne où le bouton de sauvegarde/enregistrement du document n’est pas visible, peu visible ou est juste une icône en forme de chat avec une tartine  sur le dos. Pensez-vous qu’une maquette aurait été validée avec de tels éléments?

Commentaire (0)

Laisser un commentaire

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