Les maquettes ne doivent jamais faire foi - Beneylu School
Un problème fréquent rencontré sur les projets est l’écart entre le code et les maquettes : le moindre changement demande d’entretenir tout un tas de documents dont les maquettes. Et modifier des maquettes, c’est toujours infiniment trop long.
Afin de résoudre ce problème sur Beneylu School et limiter au maximum d’avoir à passer des heures à produire des maquettes pixel perfect et réduire la recette des interfaces, j’ai développé un document de principes d’interaction et de navigation, mais également de toutes les tailles, couleurs, typographie, composants et j’en passe, applicables à chaque module.
En somme, un design system avant les design systems.
Rendre l’équipe autonome - Speechlab
Sur Speechlab, j’étais le seul designer, et une ingénieure pédagogique structurait en parallèle tout le contenu de l’application. Si chaque écran de chaque parcours devait passer par une maquette, tout le projet passait par moi.
Dès le départ, j’ai donc pensé le design pour être le plus modulaire possible. Chaque composant était codifié, du titre au composant interactif. Par-dessus, des types d’écrans : ouverture, contenu, entraînement IA (en réalité une séquence d’écrans), fermeture… Les écrans de contenu étaient 100 % modulaires, les autres des gabarits plus fixes.
Restait à composer les parcours. Pour ça, un simple fichier Excel en trois colonnes : le code de l’écran (1.2.04 pour niveau 1, séquence 2, écran 04), ses composants dans leur ordre d’affichage, de haut en bas (titre, texte, timer, bouton suivant…), et pour chacun, son contenu ou ses règles. L’équipe pédagogique y composait elle-même ses parcours et les transmettait directement aux développeurs, sans repasser par la case maquette.
Résultat : 18 séquences d’une vingtaine d’écrans chacune, sans avoir à maquetter chacun de ces écrans.
Fichier de contenu · niveau 1, séquence 2
| Code | Composant | Contenu ou règles |
| 1.2.04 | Titre | Respire avant de parler |
| Texte | Avant de prendre la parole, inspire par le nez pendant 3 secondes, puis expire lentement par la bouche. |
| Timer | 30 s, démarre à l’affichage |
| Bouton suivant | « C’est parti ! », actif à la fin du timer |
| 1.2.05 | Titre | … |
→
4.Respire avant de parler
Avant de prendre la parole, inspire par le nez pendant 3 secondes, puis expire lentement par la bouche.
00:30