Créer un wireframe avec Balsamiq

1. Objectifs

   • Découvrir Balsamiq et son interface
   • Ajouter rapidement des contrôles avec Quick Add
   • Écrire dans les contrôles avec les codes de mise en forme
   • Construire les wireframes d'un parcours de trois écrans
   • Créer des symboles réutilisables et relier les écrans avec des liens
   • Présenter le parcours et exporter son travail en PNG et en PDF

1. Présentation

   • Balsamiq est l'un des outils de wireframe les plus connus. Son rendu volontairement « dessiné à la main » rappelle à tous qu'il s'agit d'une ébauche : on discute de la structure, pas des couleurs.
   • Dans cette leçon, vous allez construire les wireframes du parcours « réserver un livre » de BiblioCampus, les relier entre eux pour obtenir un wireframe cliquable, puis exporter le tout. Balsamiq est payant, mais propose un essai gratuit de 14 jours : organisez vos séances de TP pendant cette période et exportez votre travail à chaque séance.

• Nous continuons avec BiblioCampus, notre application fictive de réservation de livres. Pour les activités, créez le dossier 27-wireframe-balsamiq/ dans votre dépôt GitHub ui-ux-design-bts.

1. Pourquoi Balsamiq ?

   • Balsamiq a trois atouts pour la phase de wireframe :

1. L'interface

   • L'écran de Balsamiq s'organise en cinq zones :

1. Les contrôles

   • Les éléments d'interface s'appellent des contrôles. Le plus rapide est de les ajouter avec Quick Add, en tapant leur nom anglais :

1. Écrire dans les contrôles

   • Double-cliquez sur un contrôle pour modifier son texte. Quelques codes simples permettent de le mettre en forme :

1. Construire un wireframe

   • La construction suit toujours le même ordre :

1. Le parcours « réserver un livre »

   • En appliquant ces étapes, on obtient trois wireframes :

1. Relier les écrans

   • Les liens transforment les wireframes en parcours cliquable :

1. Les symboles

   • Les éléments présents sur tous les écrans se créent une seule fois sous forme de symbole :

1. Exporter et partager

   • À la fin de chaque séance, on exporte et on partage :

1. Exemple 1 : l'écran « Recherche » en 15 minutes

   • Ines ajoute un conteneur iPhone avec Quick Add, puis un Title « Rechercher », un Text Input « Titre, auteur, cours… », un Subtitle « Recherches récentes » et trois Link (liens texte).
   • Pour les matières, elle utilise des boutons arrondis : « UX », « Web », « Mobile », « Réseaux ». Elle aligne tous les contrôles sur la même marge gauche, puis groupe la zone des matières.
   • Elle renomme le wireframe « 01-Recherche » : l'écran est prêt en un quart d'heure.

1. Exemple 2 : les liens révèlent un oubli

   • En mode présentation, Youssef clique sur « UX », arrive sur les résultats, ouvre une fiche… puis ne trouve aucun moyen de revenir.
   • L'équipe ajoute une flèche ← dans l'en-tête de la fiche et des résultats, liée à l'écran précédent. Sans le parcours cliquable, l'oubli serait passé inaperçu jusqu'à la maquette.

1. Exemple 3 : le symbole fait gagner du temps

   • La barre de navigation (Accueil, Chercher, Ma liste, Compte) est créée comme symbole et placée sur les trois écrans.
   • Après le premier test, les étudiants trouvent « Ma liste » ambigu. L'équipe renomme l'onglet « Favoris » dans le symbole : les trois écrans sont mis à jour en une seule modification.

1. Aide-mémoire

   • Les gestes essentiels dans Balsamiq :

1. Activité 1 : repérer l'interface

   • Ouvrez Balsamiq (essai gratuit) et retrouvez les cinq zones de la leçon. Faites une capture d'écran et numérotez-les.
   • Vérifier : les cinq zones (barre d'outils, bibliothèque, liste des wireframes, canevas, propriétés) sont numérotées sur votre capture.

1. Activité 2 : maîtriser Quick Add

   • Sans utiliser la bibliothèque, ajoutez avec Quick Add : un conteneur de téléphone, un titre, un champ de saisie, une image, deux boutons et des onglets.
   • Vérifier : les sept contrôles sont sur le canevas et vous n'avez utilisé que le clavier pour les trouver.

1. Activité 3 : mettre en forme le texte

   • Dans un Paragraph, écrivez une description de plat avec un mot en gras, un mot en italique et un mot désactivé. Créez des onglets « Lundi, Mardi, Mercredi, Jeudi, Vendredi ».
   • Vérifier : les trois mises en forme apparaissent correctement et le Tabs Bar affiche cinq onglets.

1. Activité 4 : réaliser l'écran « Menu du jour »

   • Réalisez dans Balsamiq l'écran CantineCampus décrit ci-dessous :

• Vérifier : les sept éléments demandés sont présents, alignés sur des marges communes, avec de vrais textes.

1. Activité 5 : créer un symbole

   • Transformez la barre de navigation de l'activité 4 en symbole.
   • Vérifier : en modifiant un libellé du symbole, il change sur tous les écrans qui l'utilisent.

1. Activité 6 : compléter le parcours

   • Créez les écrans « 02-Créneau », « 03-Paiement » et « 04-Confirmation » en réutilisant le symbole.
   • Vérifier : les quatre wireframes sont nommés dans l'ordre et partagent la même navigation.

1. Activité 7 : relier les écrans

   • Reliez les écrans avec la propriété Link, y compris les retours en arrière.
   • Vérifier : en mode présentation, on peut aller de l'écran 01 à l'écran 04 et revenir, sans impasse.

1. Activité 8 : faire tester

   • Faites tester le parcours en mode présentation à un camarade, sans l'aider. Notez ses hésitations.
   • Vérifier : vous avez noté au moins deux hésitations et une correction pour chacune.

1. Activité 9 : corriger et exporter

   • Appliquez les corrections, puis exportez chaque écran en PNG et l'ensemble en PDF.
   • Vérifier : vous avez 4 fichiers PNG et 1 PDF, nommés comme les wireframes.

1. Activité 10 : déposer votre travail sur GitHub

   • Déposez vos PNG, votre PDF et vos notes de test dans 27-wireframe-balsamiq/:

git add 27-wireframe-balsamiq
git commit -m "Ajoute la leçon sur les wireframes Balsamiq"
git push

• Vérifier : les fichiers apparaissent sur GitHub et les PNG s'affichent directement dans le navigateur.

1. Erreurs fréquentes

1. À retenir

   • Balsamiq produit des wireframes rapides au rendu « dessiné à la main ».
   • Quick Add permet d'ajouter un contrôle en tapant son nom anglais.
   • Des codes simples mettent le texte en forme : *gras*, _italique_, -désactivé-, virgules pour les onglets.
   • Les symboles évitent de recopier les éléments communs à plusieurs écrans.
   • La propriété Link et le mode présentation transforment les wireframes en parcours cliquable.
   • On exporte en PNG et en PDF à chaque séance et on dépose sur GitHub.

Un bon wireframe se fait vite et se jette sans regret.