vocables.com | Des sites pour leurs utilisateurs

De l'usage des gabarits

L'usage des "gabarits" tend à se répandre au point que certains de nos clients arrivent chez nous avec leurs propres gabarits. Mais qu'est-ce donc qu'un gabarit? Appelé parfois modèle ou mockup, c'est une représentation schématique des futurs pages du site. IL n'est pas question à ce stade de graphisme mais de structure de la page et de la place donnée à chacun des contenus essentiels.

Sont généralement nécessaires, au minimum: un gabarit de home pag, un gabarit de rubrique, un gabarit de liste (par exemple liste de news), un gabarit de page standard, un gabarit de formulaire, etc.

L'étape des gabarits, entre la stratégie initiale et le graphisme, est fondamentale, pour maintes raisons:

Les gabarits permettent de se concentrer sur les emplacements et dimensions des éléments d'identité, des outils de navigation et surtout des contenus, qu'ils soient rédactionnels, iconographiques ou sonores.
Ils permettent de faire valider aux différents intervenants ces éléments mieux qu'un long descriptif et sans brûler les étapes en abordant design et atmosphère graphique.
Ils permettent de commencer à étudier l'ergonomie du futur site.
Ils accompagnent, après validation, les briefs du graphiste et des informaticiens.

L'étape des gabarits permet ainsi de se focaliser sur le spatial et donc l'usabilité avant d'affronter les réflexions ayant trait au graphisme et à l'ambiance. Chaque chose en son temps!

Encore faut-il trouver le bon outil de travail pour ces gabarits.

Nous distinguerons ici :

Gabarits réalisés en Excel
Gabarits réalisés en Word
Gabarits réalisés en PowerPoint
Gabarits réalisés en Balsamiq
Gabarits réalisés en Photoshop ou tout autre outil graphique
Gabarits réalisés en Dreamweaver

Gabarits réalisés en Excel

Gabarits réalisés en Word

Gabarits réalisés en PowerPoint

Image issue du site boxesandarrows.com qui traite du sujet.

Gabarits réalisés en Balsamiq

Logiciel vendu (hélas) par balsamiq.com

Gabarits réalisés en Photoshop ou tout autre outil graphique

Gabarits réalisés en Dreamweaver

Avantages et inconvénients

Pour cette comparaison, nous privilégions la rapidité d'usage et l'efficacité. Nous pensons que nos clients ont besoin de gabarits lisibles, compréhensibles et, surtout, livrés dans les temps impartis.

	Avantages	Inconvénients
Excel	Tous les interlocuteurs ont à priori ce logiciel.	Look manquant de classe. Pas de fonctionnalité d'abonnement à des "bibliothèques" qui permettrait de reproduire sur tous les gabarits le même menu et/ou la même têtière. Lourdeur dans la conception dûe à la rigidité des "cellules" et colonnes du logiciel.
Word	Tous les interlocuteurs ont à priori ce logiciel. Un des plus adaptés quand un grand nombre d'informations et de formats de texte doivent apparaître. L'usage de multiples tableaux permet de grouper et de déplacer ensemble les métadonnées. Facile à modifier par les interlocuteurs du projet.	Look manquant de classe. Pas de fonctionnalité d'abonnement à des "bibliothèques" qui permettrait de reproduire sur tous les gabarits le même menu et/ou la même têtière. Attention: laisser à chacun la possibilité d'intervenir sur le document est facilement source de complications et de quiproquos. MIeux vaut deux ou trois réunions de travail devant les documents originaux.
PowerPoint 2004	Presque tous les interlocuteurs ont ce logiciel. Pratique pour une présentation en groupe sur écran. Une des rares solutions à l'absence de fonctionnalité d'abonnement à des "bibliothèques" qui permettrait de reproduire sur tous les gabarits le même menu et/ou la même têtière: on pourra utiliser le "masque" du document PPT pour y placer les éléments reccurrents (menu, logo, têtière, pied de page, etc.) Certains apprécieront de pouvoir illustrer la navigation avec de vrais liens d'une diapo à l'autre.	L'utilisation de PowerPoint en matière de composiition de page nous semble malgré tout fastidieuse. Impossible de disposer d'une page qui ne soit pas rattachée "de force" au masque. Diiffulté à grouper plusieurs éléments. Poids des fichiers générés rapidement élevés.
Balsamiq	Son ambiance "croquis" tradut bien le fait qu'il ne s'agit pas encore de design mais de fonctionnalité. Multiples icônes et symboles prêts à l'emploi, très explicites.	Permet une lecture uniquement en format image (png), sauf si les interlocuteurs disposent du logciel. Pas de fonctionnalité d'abonnement à des "bibliothèques" qui permettrait de reproduire sur tous les gabarits le même menu et/ou la même têtière. Souvent laborieux à manipuler (petites lenteurs, menus contextuels "résistants", etc. Impossible de réaliser les boutons et icônes qui manqueraient à la palette fournie par Balsamiq.
Photoshop	Le plus fin et le plus classe à l'oeil.	Le plus long à réaliser. Parfois trop esthétique, ce qui laisse penser aux interlocuteurs qu'on parle design et non structure de l'information et ergonomie. Réservé à des utilisateurs réguliers de Photoshop, rompus aux calques.
Dreamweaver	Permet de passer à une maquette HTML déjà active et donc d'illustrer une navigation "en réelle". Les "bibliothèques" de DW permettent d'abonner chaque gabarit à des modules récurrents comme le menu, la têtière ou le pied de page. Leur modification entraîne une mise à jour automatique de tous les gabarits. Avantage fondamental à notre sens. Posé sur un serveur, permet aux interlocuteurs de visionner directement les gabarits via leur navigateur et d'obtenir une impression "en situation".	Ce logiciel est très cher. Look pauvre mais il n'est pas interdit d'ajouter les petites images qui finiront le projet.