Tutoriel Balsamiq Mockups
Rendu Balsamiq Mockups pour l’agence-web CHC

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.

Télécharger le modèle

 

Créer de nouveaux plans pour vos fenêtres

Balsamiq Mockups gérer ses fenêtres
Gérer les fenêtres sur Balsamiq

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
Balsamiq Mockups changer le nom d'une fenêtre
Changer le nom d’une fenêtre

 

 

 

 

 

 

 

 

 

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.

Balsamiq Drag and Drop
Déplacer les éléments sur la zone de travail

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).

Balsamiq Mockups redimensionner
Redimensionner un 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.

Balsamiq Mockups verrouiller des objets
Verrouiller l’élément de 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.

Balsamiq Mockups changer le texte
Modifier la taille et la forme du texte

Sur certains éléments, une fenêtre apparaîtra à droite pour personnaliser davantage l’élément.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *