Un petit billet pour vous présenter deux applications Open source pour créer vos maquettes d’IHM Web ou de vos applications lourdes.
Les maquettes sont des représentations statiques d’une page d’un site ou d’une application. On doit y formaliser les éléments présents, leur taille approximative, leur localisation, leur appellation… Les maquettes peuvent aussi concerner un élément plus précis de l’interface (par exemple la représentation des différents états d’une partie de la page).
Là encore, le choix de l’application devra se faire en fonction du niveau de fidélité visuelle que l’on veut obtenir et de l’objectif que l’on vise (présentation à un client, document de travail, support d’un test utilisateur, etc.).
La première application permet de réaliser des drafts de maquettes, nous sommes plus proche de l’état de brouillon que de maquettes client. Idéal pour les brainstormings ou les spécifications internes. On peut l’utiliser pour travailler rapidement avec son équipe, hors d’un contexte client.
La première application est __Denim__ (Université de Berkeley), elle a l’avantage d’être gratuite et peut-être déployée sur son poste de travail. Elle est compatible avec les trois OS (Linux, Mac, Windows)
Denim se base sur un concept intéressant : conserver les avantages du prototypage papier, tout en y introduisant des notions d’interactivité : elle permet de lier chacune des pages de façon dynamique (on se dirige là dans des problématiques de prototypage). Idée intéressante pour nos projets en méthode Agile.
L’utilisabilité de l’application est discutable, il est au premier abord assez difficile de se familiariser avec l’accès et le comportement du menu. De plus, l’utilisation de Denim en tant qu’outil de travail est presque soumise à l’emploi d’une palette graphique.
Toutefois après quelques bonnes dizaines de minutes d’utilisation, on commence à se familiariser, le menu est particulier au premier abord, mais intelligent quand on commence à saisir le concept.
Une barre sur la gauche permet de commencer sur une vue globale, ensuite le plan du site, les story-boards, la page et pour finir le détail de la page.
Je ne peux que conseiller son utilisation, ensuite on n’aime ou pas. Je ne pense pas que cela soit mitigé.
Le site de l’application DENIM
La deuxième application est __Pencil Project__, Pencil est une extension qui transforme Firefox en une application de dessin permettant de réaliser des IHM, schémas canevas, etc. L’application peut-être aussi utilisée en standalone indépendamment de Firefox.
Vous disposez pour cela de différentes formes et widgets que vous pourrez modifier à votre convenance. Parmi ces formes, on retrouve le plus part des contrôles Windows. L’application propose également un éditeur wysiwyg ainsi que les fonctions nécessaires au positionnement et à la manipulation des éléments.
Chaque document peut contenir plusieurs feuilles de dessin apparaissant sous forme d’onglet. L’un des intérêts de Pencil est de vous permettre de superposer ces différentes feuilles.
Pencil permet d’enregistrer votre travail au format *.epz (a single XML-based file) ou de l’exporter au format *.png
Pencil est réellement très simple à manipuler et permet de créer, très facilement, un canevas de site web ou d’application. On pourra évidemment utiliser bien d’autres applications pour obtenir ce résultat, mais avec un poids de moins de 400 Ko et tout cela en Open Source, rien d’équivalent !
Une fois de plus je ne peux que conseiller son utilisation, il permet de faire des maquettes Web avec une très grande rapidité et une très bonne qualité de rendu. Ideal pour présentation client ou des spécifications.
Le site de Pencil Project
Commentaire