Balsamiq Mockups permet de créer des mockups. Un mockup permet de mettre proprement “sur papier” l’idée que vous avez de votre projet. De cette manière on pourra commencer le développement / la partie graphique beaucoup plus simplement.
Les mockups sont très sommaires, ils servent juste à projeter une idée que vous avez et la valider avec d’autres personnes. On voit beaucoup plus facilement les améliorations.
Tutoriel Balsamiq Mockups : Création d’une page d’accueil
Nous allons voir comment créer un mockup d’une page d’accueil de site internet.
Je vous laisse le ficher que j’ai fait en téléchargement libre.
Créer de nouveaux plans pour vos fenêtres
A gauche, vous allez pouvoir ajouter de nouvelles fenêtres. Chaque fenêtre comprend un nouveau plan de travail.
En plus de cela, vous allez pouvoir renommer chaque fenêtre. Pensez à créer une seule page par mockup / fenêtre.
Par exemple :
- Page principale
- Page de contact
- Page d’article
- Page de création de devis…
- Etc
Ajouter des éléments sur le plan de travail
Comme nous voulons créer une page de site internet, dans le menu tout en haut, sélectionner “Container“.
(*) Ce menu tout en haut vous permet de trouver tous les objets dont vous avez besoin (zone de texte, image, téléphone, navigateur, boutons…). Je vous conseille de regarder un peu tous les items pour vous donner de l’inspiration.
Simplement cliquer sur l’élément que vous souhaitez et déposez-le sur le plan de travail.
Vous pouvez redimensionner l’élément que vous venez d’ajouter en passant la souris sur un coin ou un côté.
(*) Vous pouvez également déplacer l’élément sur le plan de travail dès que vous voyez la “croix fléchée” (placez la souris sur les bords de l’objet).
Une bonne habitude à prendre est de verrouiller ce que vous avez mis en arrière plan. Que ce soit un téléphone ou un navigateur internet, cela vous permettra d’éviter de bouger ce fond.
Ajouter de nouveaux objets sur votre plan de travail
J’appelle “plan de travail” la zone quadrillée où vous avez tous vos items. Dans “Common” j’ai trouvé énormément de choses comme le menu, les boutons…
(*) C’est normal que votre wireframe ne ressemble pas à la maquette de ce que vous voulez ! Ce n’est pas le but, ici on essaye juste d’agencer aux mieux les éléments pour voir si c’est cohérent avec notre idée.
Sur certains éléments, une fenêtre apparaîtra à droite pour personnaliser davantage l’élément.