Wireframing avec Pencil

Dans le processus de création d'un site Internet, le wireframing est une étape importante : réaliser une maquette succincte d'une page/site web. Le plus souvent, celle-ci est en noir et blanc, sans aucun élément graphique. Le principe étant de se concentrer sur les éléments constitutifs de la page et leurs placements . À l'origine, le wireframe était réalisé à l'aide d'un papier et d'un crayon, mais il existe maintenant tout un tas de logiciels adaptés.

Pencil, qu'est ce que c'est ?

Pencil est un logiciel libre de prototypage d'interface graphique : il permet de créer facilement des maquettes à partir d'éléments prédéfinis (boutons, cadres, listes etc.). C'est un logiciel basé sur le couple XUL/Gecko (respectivement moteur d'interface graphique et moteur de rendu HTML de la fondation Mozilla).

Il existe deux façon de l'installer : soit comme module complémentaire à Firefox (3.5 au minimum), soit en version autonome pour Linux et Windows. Pour ma part, j'ai installé la version autonome téléchargée sur le site Internet du projet que j'exécute grâce à la commande xulrunner application.ini (je me suis fait un raccourci dans mon menu Gnome...).

Visitez le site officiel pour en apprendre plus et le télécharger.

L'interface

Une fois le logiciel lancé, l'interface se divise en 5 parties :

• la traditionnelle barre des menus (Document, Edit …)
• une première barre d'outils pour enregistrer, ouvrir, fermer mais aussi placer les éléments (distribuer, aligner, monter, descendre tailles…)
• une seconde pour tout ce qui est édition du texte
• La partie gauche de la fenêtre permet d'accéder aux différentes collections d'objets graphiques
• La partie gauche représente notre zone de travail.

Ce logiciel n'est pas (encore) traduit en français, il faudra manier un minimum la langue de Shakespeare, mais rien de bien méchant...

La collection d'objets

Comme je vous l'ai dit plus haut, la partie gauche de la fenêtre est réservée aux différentes collections d'objet. Pencil en comporte déjà un bon nombres : éléments Windows XP, GTK+, natif XUL … et le plus intéressant ici : Sketchy GUI.

Sketchy GUI reprends des éléments d'interface de type crayonnés très adaptés pour une maquette en wireframe. Rappelez-vous que l'idée est ici de concentrer sur le placement des éléments, pas leurs design. Cette collection contient entre autres les boîtes, images, zone de textes, zone de mot de passe, tableaux… Pour placer un éléments sur notre zone de travail, il suffit de glisser-déposer celui-ci. Une fois posé, il suffit de cliquer avec le bouton droit de votre souris puis de sélectionner le menu properties, il est alors possible de changer les couleurs, les polices etc. Dans la plupart des cas, un double clic sur l'élément permet de saisir du texte à l'intérieur de l'élément.

Point très intéressant, vous pouvez fabriquer vos propres collections d'objet à partir de fichiers SVG. J'ai testé brièvement cette possibilité mais les possibilités sont limitées par rapport aux objets déjà en place (impossible d'éditer des propriétés comme les couleurs, polices, contenu).

Il est aussi possible importer d'autres collection fabriqué par des utilisateurs de Pencil. Il y en a quelques unes disponibles sur le site officiel.

Une maquette c'est bien, interactive c'est mieux

Pencil permet de créer plusieurs pages dans une maquette, fonction très intéressante lorsqu'il s'agit de présenter une maquette contenant plusieurs types de pages (accueil, catégorie, article, recherche etc.).

Il est aussi possible de créer des zones interactives sur les pages afin de les lier entre elles. Cette action est relativement simple à définir : un clic droit sur l'élément puis aller dans le menu Link to.... Une fois exportée en HTML, notre maquette sera ainsi fonctionnelle.

Exportation

Une fois la maquette réalisée, il est possible de l'exporter dans divers formats. Il faut préalablement installer un gabarit d'exportation (menu Tools > Manage Export Template)

Il existe deux type d'export (et donc deux types de gabarits):

• HTML : la maquette sera exportée au format HTML, il existe des gabarit avec vignettes, avec Javascript etc.
• Document texte : la maquette sera exporté au format PDF, OpenOffice ou Word.

Les gabarits sont téléchargeables sur le site officiel de Pencil (sur cette page), une fois installés, il suffit d'aller sur le menu Documents > Export documents.

Un petit test

Histoire de tester un peu le logiciel, j'ai décidé de faire la maquette du site du collectif Giroll. À l'époque de sa conception je disposais pas d'un tel outil : la maquette fut (vite) dessinée sur une simple feuille de papier.

Sans entrer dans les détails, je vous livre ici une série de capture d'écran prises tout au long du travail.

En conclusion

Pencil va vite devenir un outil indispensable pour moi. Simple et efficace, sa prise en main et relativement aisée : il m'a fallu seulement une demi-journée pour le maîtriser. Maintenant c'est sûr : fini Open Office pour faire des maquettes.

S'il est amené à devenir indispensable, il n'est cependant pas exempt de défaut . Premier défaut de taille : impossible d'exporter mon travail au format document texte, que se soit au format Open Office Texte, PDF ou document Word. gênant pour imprimer ou envoyer la maquette par courriel. Les éditions de texte ne sont pas toujours aisées (Sélections approximative, fond blanc permanent même quand le texte est blanc etc.).

Un peu de pub

Le mercredi 7 juillet à 11h, dans le cadre des Rencontres Mondiales du Logiciel Libre, je vous propose d'assister à ma conférence Webdesign et Logiciels Libre où je présenterai mes outils fétiches pour créer des sites web : Pencil, Inkscape, Gedit, Firebug etc...