Créer un wireframe avec ioDraw

1. Objectifs

   • Utiliser ioDraw, outil de diagrammes gratuit, pour réaliser des wireframes
   • Construire des éléments d'interface à partir de formes simples
   • Respecter les dimensions d'un écran, les marges et la grille de 8
   • Construire un écran par étapes en groupant et en dupliquant
   • Réaliser un wireflow: les écrans et le parcours dans le même schéma
   • Sauvegarder le fichier source et exporter les images

1. Présentation

   • Balsamiq est pratique, mais payant après l'essai. ioDraw est un outil de diagrammes gratuit, utilisable dans le navigateur sans inscription. Il n'a pas été conçu pour le maquettage, mais ses formes de base suffisent pour réaliser des wireframes propres.
   • Son grand atout est de permettre de placer les écrans et les flèches du parcours dans le même document : on obtient un wireflow, très utile pour présenter un parcours complet à l'équipe ou à l'enseignant.

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

1. Pourquoi ioDraw ?

   • ioDraw a des atouts et des limites qu'il faut connaître :

1. L'interface

   • Pour un wireframe, on ouvre l'éditeur d'organigrammes. Son interface comporte quatre zones :

1. Des formes aux éléments d'interface

   • Chaque élément d'interface se construit avec une ou deux formes simples :

• Selon la version, ioDraw peut aussi proposer une bibliothèque de formes d'interface : si elle est disponible, utilisez-la, mais gardez le style gris et simple du wireframe.

1. Les dimensions

   • Un wireframe dessiné dans un outil de diagrammes doit respecter les dimensions réelles d'un écran :

1. Construire un écran

   • L'écran se construit en quatre temps, du cadre à la navigation :

1. Le wireflow

   • Une fois les écrans construits, on les place côte à côte et on les relie par des flèches légendées :

• Chaque flèche porte l'action de l'utilisateur (« toucher un livre »). Les décisions (« En rayon ? ») sont des losanges, comme dans un organigramme.

1. Gagner du temps

   • Quelques gestes rendent le travail beaucoup plus rapide :

1. Sauvegarder et exporter

   • ioDraw s'utilise sans compte : il faut donc penser à sauvegarder son travail :

1. Exemple 1 : une ligne de résultat construite une fois

   • Salma dessine une ligne de résultat : un rectangle barré de 48 × 64 pour la couverture, une barre foncée pour le titre, une barre claire pour l'auteur, le tout aligné sur la grille.
   • Elle groupe ces trois formes, puis duplique le groupe trois fois en le décalant de 80 px vers le bas. Les quatre lignes sont parfaitement identiques et alignées, en moins de deux minutes.

1. Exemple 2 : un écran dupliqué

   • Pour créer l'écran « Fiche », Salma duplique l'écran « Résultats » entier : le cadre, l'en-tête et la barre de navigation sont déjà en place.
   • Elle supprime la liste et ajoute l'image, les lignes de texte et le bouton « Réserver ». La cohérence entre les écrans est garantie.

1. Exemple 3 : le wireflow révèle une branche oubliée

   • En dessinant le losange « En rayon ? » sous l'écran « Fiche », l'équipe se demande ce que voit l'étudiant si le livre est déjà emprunté.
   • Elle ajoute un écran « Alerte enregistrée » et une flèche « M'alerter ». Ce cas, invisible écran par écran, apparaît immédiatement dans le wireflow.

1. Aide-mémoire

   • Les étapes pour créer un wireframe avec ioDraw :

1. Activité 1 : préparer le canevas

   • Ouvrez ioDraw, créez un organigramme vierge, réglez la grille sur 8 et posez un cadre de 360 × 640.
   • Vérifier : le cadre fait exactement 360 × 640 dans le panneau de format et il est verrouillé ou placé en arrière-plan.

1. Activité 2 : créer une bibliothèque personnelle

   • Dessinez une fois chacun des éléments de la leçon (bouton, image, champ, lignes de texte, avatar, icônes) et regroupez-les à côté du cadre.
   • Vérifier : les sept éléments sont prêts à être copiés, en gris, aux bonnes tailles (boutons d'au moins 44 px de haut).

1. Activité 3 : construire l'écran « Menu du jour »

   • Construisez l'écran 01 de CantineCampus : en-tête, onglets des jours, trois plats, bouton « Réserver mon repas ».
   • Vérifier : les marges de 16 px sont respectées et les trois plats sont identiques (construits une fois, puis dupliqués).

1. Activité 4 : dupliquer pour les écrans suivants

   • Dupliquez l'écran 01 pour créer les écrans 02 à 04 du parcours.
   • Vérifier : l'en-tête et la navigation sont identiques sur les quatre écrans.

1. Activité 5 : réaliser le wireflow

   • Reliez vos écrans selon le cahier des charges ci-dessous :

• Vérifier : les quatre écrans, le losange de décision et des flèches légendées par les actions de l'utilisateur sont présents.

1. Activité 6 : ajouter les cas d'échec

   • Ajoutez au wireflow deux cas d'échec : solde insuffisant au paiement, perte de connexion.
   • Vérifier : chaque cas a un losange de décision et un écran ou un message de sortie.

1. Activité 7 : vérifier les dimensions

   • Échangez votre fichier avec un camarade : il vérifie les marges, la hauteur des boutons et l'alignement.
   • Vérifier : votre camarade a relevé au moins un défaut que vous avez corrigé.

1. Activité 8 : comparer avec Balsamiq

   • Comparez le temps passé et le résultat obtenu pour le même écran dans Balsamiq et dans ioDraw.
   • Vérifier : votre comparaison cite au moins deux avantages et deux limites de chaque outil.

1. Activité 9 : exporter

   • Exportez le wireflow complet et chaque écran en PNG, et téléchargez le fichier source.
   • Vérifier : vous avez le fichier source et au moins 5 images PNG lisibles.

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

   • Déposez le fichier source, les PNG et votre comparaison dans 28-wireframe-iodraw/:

git add 28-wireframe-iodraw
git commit -m "Ajoute la leçon sur les wireframes ioDraw"
git push

• Vérifier : le fichier source et les images apparaissent sur GitHub ; le wireflow s'affiche dans le README du dossier.

1. Erreurs fréquentes

1. À retenir

   • ioDraw est un outil de diagrammes gratuit qui permet de réaliser des wireframes avec des formes simples.
   • On commence par un cadre aux dimensions réelles : 360 × 640 sur mobile.
   • Marges de 16 px, grille de 8 et boutons d'au moins 44 px de haut.
   • Grouper, dupliquer et aligner rendent le travail rapide et cohérent.
   • Le wireflow réunit les écrans et le parcours, avec ses décisions.
   • On télécharge toujours le fichier source et on exporte les images en PNG.

Ce n'est pas l'outil qui fait le wireframe, c'est la rigueur de celui qui le dessine.