Stoneageblog.com

Wireframes, zoning, mockups : voila trois termes pour exposer une même notion : la maquette d’interface. Utilisée tout d’abord dans la création de logiciels lourd en amont de la phase de développement, cette technique est maintenant largement utilisée dans la conception de sites Internet. Il existe même aujourd’hui une grande diversité d’outils pour réaliser ces maquettes, d’ailleurs chacun possède ses habitudes et donc ses préférences. Personnellement j’ai longtemps travaillé avec Photoshop avant de découvrir un autre logiciel que j’affectionne tout particulièrement et que je vous présenterais en fin d’article… (suspens !)

Au commencement il y eut… Photoshop

J’ai donc commencé mes premiers wireframes directement sous Photoshop a grand coup d’outil rectangle (rectangle tool) ! Ce zoning était créé suite aux premières réunion client puis ensuite retravaillé et validé avec ce dernier. Je livrai ensuite mon .psd au graphiste qui venait alors y apposer sa touche personnelle (en d’autre termes le design !).

Voici donc comment je travaillais :

Création du document

J’ai une technique un peu particulière pour créer un nouveau wireframe avec photoshop, je commence par ouvrir Firefox et à l’aide de l’extension Web Developer je positionne la taille de ma fenêtre à 1024x768. Ce n’est pas par hasard, cette taille est encore aujourd’hui la résolution la plus utilisée sur Internet si j’en crois les Xiti et autres Google analytics. Donc une fois Firefox à la bonne taille, je fais en sorte qu’il ne me reste qu’une barre de marque page en plus de la barre d’adresse pour simuler le navigateur du client lambda et là je fais un screenshot de ma fenètre. J’ouvre ensuite ce screenshot dans photoshop et j’agrandis la zone de travail vers le bas afin de pouvoir travailler sur un site en longueur.

Avant d’aller plus loin, je fais une autre étape indispensable pour que le travail de zoning soit optimal : je positionne la ligne de flottaison, soit un simple trait horizontal délimitant (au dessus) la zone directement visible (sans scroll) par l’internaute lorsqu’il arrive sur le site internet. Cette ligne est primordiale, elle vous permettra par exemple d’être certain de placer un bouton “Ajouter au Panier” directement accessible sans contraindre le client à user la molette de sa souris. (Je pense que je reviendrai dans le cadre d’un autre article sur la ligne de flottaison, il y a largement de quoi disserter sur le sujet !)

Création de la structure de la page

Avant de commencer à définir des zones, la première étape était pour moi de créer des groupes dans mon .psd. Je prévoyais donc un groupe par page puis ensuite un sous groupe par zone principale.

Pourquoi cette organisation ? pour pouvoir avoir dans un même fichier le zoning de chaque partie du site et aussi pour pouvoir transmettre un document hiérarchisé au graphiste.

En effet ce dernier à la réception savait exactement le type de page qu’il avait à designer mais aussi quels seront les éléments principaux de chacune des pages.

Zoning

Le principal est en place, reste maintenant à laisser libre cours à votre imagination pour créer votre zoning… En général je me débrouille avec pas grand chose : l’outil rectangle, le texte (lorem ipsum), la gamme de gris, les règles et le raccourci “Pomme + J” (dupliquer le calque) !

Par exemple, en exclu voici le zoning du futur stoneageshop ! (évidement c’est un fake, vous vouliez que je vende quoi ? mes zoning ? )

Surtout, c’est pas la peine d’aller plus loin, le zoning c’est pas du design. L’objectif c’est de ne pas perdre de temps… et puis je sais pas vous mais moi je trouve ça très joli un zoning “pur”

Tout ça pour dire que c’était avant…

Et oui, photoshop ça va un temps, certes il a des avantages et surtout c’était un bon moyen pour moi de me mettre à réaliser mes premiers zoning mais maintenant, avec un peu de recul cette technique a aussi ses inconvénients…

• le fichier en vient rapidement à vous plomber photoshop (même sur un macbook pro avec 2go de ram, le surnombre de groupes et de calques fait très mal aux performances !)
• les éléments sont difficilement manipulables (imaginez : vous avez enfin créé une liste déroulante et vous vous rendez compte qu’il faut la redimensionner, il faut alors reprendre chaque petit élément la composant et le redimensionner à l’échelle…)
• cette étape de zoning peut être très longue et assez rébarbative, en effet à chaque nouvelle maquette il faut recommencer un paquet de choses (certes, au bout d’un moment on commence à se constituer une petite bibliothèque d’éléments) mais cela reste quand même très long d’obtenir une maquette !
• en utilisant photoshop, on a tendance à s’arrêter trop sur les détails et donc perdre en productivité. C’est un peu ce qu’explique les gars de 37signals dans leur article “Why we skip photoshop”. Je ne suis pas aussi extrémiste qu’eux qui font leurs mockups directement en HTML/CSS (bien que j’ai déjà essayé !) Je trouve cela encore plus contreproductif car si l’on passe effectivement moins de temps sur le choix des couleurs ou sur les retouches de texte, on en perd un autre paquet sur les alignements et les positionnements qui seront très probablement revu après le passage du webdesigner !

Balsamiq Mockups

Malgré ces freins j’ai passé presque 2 ans à travailler uniquement avec photoshop pour développer mes maquettes. Quelle ne fut pas ma surprise cet été de découvrir un petit logiciel fort sympathique appelé Balsamiq Mockups. Aucun rapport avec le vinaigre du même nom, ce petit logiciel sert uniquement à faire des zonings et il le fait très bien !

Plutôt qu’on long discours voici une petite vidéo de présentation :

Et si on reprend le wireframe du stoneageshop ça donnerai :

A titre de comparaison, il m’a fallut a peu près 30min pour faire le wireframe sous photoshop et 10 pour le faire sous balsamiq ! Je ne vais pas énumérer les points fort de ce logiciel, le blog de superfiction que j’ai récemment découvert le fait très bien, d’ailleurs je vous conseille vivement d’aller lire son article sur Balsamiq. Si il y a une chose à retenir c’est que ce logiciel est disponible gratuitement en utilisation web et que la version desktop ne coûte que $79 ce qui n’est vraiment pas excessif pour un logiciel de cette qualité.

Pour aller plus loin avec les wireframes…

Je citais juste au dessus le blog de superfiction et son article sur Balsamiq, ce n’est pas son seul article sur ce même sujet, en effet là ou moi je présente mon expérience avec photoshop, lui présente la sienne avec tout un tas d’outils différents :

• Powerpoint
• Microsoft Visio
• Axure RP Pro
• Acrobat
• Gliffy
• Jumpchart

Tout récemment un blog entièrement consacré aux wireframes a vu le jour : Wireframes Magazine. Je vous en conseille vivement la lecture, les articles sont pointus et tournent tous autour du même sujet : les wireframes.

Enfin, si vous êtes vous aussi tombé “amoureux” de Balsamiq, vous allez forcément aimer le site suivant : Mockups To Go : c’est un blog qui publie de nombreux éléments qu’il est possible d’utiliser directement dans Balsamiq !