Je dessine une maquette plus vite que mon ombre…

Vous avez besoin de dessiner rapidement une maquette ?

Pas besoin que ce soit très élaboré, juste avoir les bons éléments aux bons endroits, pour avoir une idée claire de ce que pourrait donner la mise en page générale ?

Le design plus vrai que nature, avec photoshop ou autre, fait toujours discuter et débattre vos collègues ?

Balsamiq Mockups vous évite de perdre du temps.

Par défaut, les éléments sont en gris enfin noir 80%, c’est plus classe.

Les formes sont comme si elles étaient dessinées à la main, mais les lignes sont bien plus droites que sur votre cahier ou sur le paperboard 🙂

L’alignement des éléments est facile à gérer grâce aux petites règles qui s’affichent et attirent votre élément.

On peut changer la taille des éléments, la couleur (la palette est limitée), background/foreground, grouper, dégrouper, locker des éléments entre eux, ajouter des icones à certains éléments comme les boutons.

La version de démo (évidement c’est payant !) est vraiment faite pour découvrir : pas d’enregistrement, pas d’export png et une pop-up qui s’ouvre toutes les 5 minutes.

On peut export en xml, si quelqu’un sait dans quel logiciel, à part Basalmiq bien sûr, on peut importer ?

<mockup version="1.0" skin="sketch">

<controls>

<control controlID="4" controlTypeID="com.balsamiq.mockups::Button" x="408" y="35" w="130" h="-1" zOrder="2" locked="false" isInGroup="-1">

<controlProperties>

<text>Participer%20%21</text>

</controlProperties>

</control>

</controls>

</mockup>

J’ai testé sur 2 petites maquettes que j’avais crayonné sur un bloc-notes.

10 minutes pour dessiner ma page de visualisation d’un élément de ma bdd, avec un peu moins d’une dizaine de data/propriétes et 2 ou 3 actions possibes sur la page.

Il m’a manqué quand même une petite liste à puces dans la liste des formes possibles et un timeline/historique. J’ai du utiliser un tableau pour les puces et une progress-bar pour mon timeline

Le plus qui m’a donné envie de tester est l’affichage résultant.

Imaginez, vous voulez faire voir à votre collègue, une mise en page auquelle vous pensez, pour cette %***$ de page qu’il faut améliorer.

Vous faites un gribouilli sur une page de brouillon, vous en discutez, plein plein de questions, « et ça c’est quoi un bouton, un lien ? » une fois mis d’accord, pause café, optionnellement  demander l’accord au chef, hum, il va apprécier votre gribouilli 🙂 puis le réaliser, si jamais vous arrivez à relire votre gribouilli le lendemain, et là il y aura toujours quelque chose à déplacer ou à modifier.  loi de murphy oblige.

C’est là qu’intervient balsamiq, vos lignes seront droites, tout sera aligné, on ne se trompera pas de type d’élément, vos collègues et votre chef comprendront ce que vous voulez faire. Vous obtiendrez une mise en page plus propre et surement une « utilisabilité » meilleure. Et on ne vous blamera pas pour ce dégradé qui n’est pas exactement comme la maquette.

les liens :

screenshots : http://www.balsamiq.com/products/mockups/examples

essai en ligne : http://www.balsamiq.com/products/mockups

download : http://www.balsamiq.com/products/mockups/desktop