Appli mobile d’apprentissage de l’UX/UI
Chaque jour, tu deviens un peu plus designer.
Des leçons de 3 à 5 minutes où l’on manipule de vraies interfaces, et deux profs qui ne sont jamais d’accord : KoRaNé, le panda roux impassible, et Aniki, le panda géant qui a toujours la bonne méthode.
Chapitre 01
KoRaNé rend l’apprentissage du design aussi régulier qu’un jeu, sans rien céder sur le sérieux du contenu. Tout ce qui suit découle de cette tension entre jeu et exigence.
Mission
Quelques minutes, une vraie interface à manipuler, un progrès visible.
Vision
Une génération de designers francophones, de Paris à Douala.
Promesse
La phrase qu’on doit pouvoir vérifier à la fin de chaque module.
Public
15 ans et plus, 5 à 15 minutes par jour, surtout sur mobile.
Pratiquer
On touche une interface avant de lire la théorie. Chaque leçon fait faire quelque chose.
Sérieux, jamais ennuyeux
Le contenu est exact et relu. L’humour sert l’apprentissage, il ne le remplace pas.
L’apprenant d’abord
KoRaNé joue au manipulateur, mais aucune mécanique de l’appli ne joue contre la personne.
Ouvert à tous
Gratuit pour apprendre, accessible, léger sur les téléphones modestes.
La marque ne se tient jamais à une extrémité. Quand KoRaNé tire vers le malicieux, Aniki ramène vers le sage : c’est le duo qui fait l’équilibre.
Chapitre 02
Le panda roux a porté le nom de « panda » le premier, avant que le panda géant ne le lui prenne. Leur rivalité vient de là. Ils se contredisent, se taquinent, et se respectent.
Mascotte principale · le prof
Il mène les leçons, lance les défis, tient la Mine et relance tant que la leçon n’est pas faite. Impassible, rusé, il joue avec les mots pour obtenir ce qu’il veut, mais il veut sincèrement que tu progresses. Son sourire est rare : il se mérite.
Je peux attendre. Longtemps. Ta leçon, elle, s’ennuie.
Jamais : se moquer de la personne. Son humour vise la procrastination.
Mascotte secondaire · le prof sage
Le « grand frère » (aniki, en japonais). Il explique quand on bloque, corrige avec bienveillance et défend la méthode, la recherche et l’éthique. Il tient le Carnet de l’apprenant et sourit facilement.
Ce n’est pas une erreur, c’est une donnée. On recommence ?
Jamais : la colère. Au pire, un soupir patient.
KoRaNé
Aniki
Règles de production : illustration vectorielle plate, contours prune, aucun dégradé ni texture, aucun texte dans l’image, PNG transparent de 2048 px, nommé mascotte-expression-contexte.png.
Chapitre 03
Le logotype provisoire est composé en Unbounded ExtraBold, le « é » en terracotta. Un logotype dessiné sur mesure le remplacera ; il gardera ces proportions et cette couleur d’accent.
Zone de protection : la hauteur du « o » tout autour du logotype. Rien ne s’y pose.
Taille minimale : 24 px de haut à l’écran, 8 mm à l’impression.
Interdits : le déformer, le mettre en dégradé, le poser sur une photo chargée, le recolorer hors palette.
À 29 px, les oreilles et les taches crème doivent rester lisibles. Android recadre en cercle : le visage reste dans les deux tiers centraux.
Chapitre 04
Chaque couleur vient des mascottes. Le terracotta est l’univers de KoRaNé, le bleu poudré celui d’Aniki, le jaune crayon celui du jeu. Le prune dessine tout, comme les contours des personnages.
Univers de KoRaNé, bouton d’action ludique. Texte posé dessus : encre.
Contours, titres, bouton principal. Le fil qui relie tout.
Cartes et surfaces. Respiration de l’interface.
Univers d’Aniki, explications et théorie. Texte posé dessus : encre.
La Mine, les XP, les copeaux. Réservé au jeu.
Encre sur papier · 14,6:1 AAA
Prune sur crème · 9,3:1 AAA
Crème sur prune · 9,3:1 AAA
Encre sur crayon · 7,4:1 AAA
Encre sur terracotta · 5,1:1 AA
Encre sur bleu · 5,0:1 AA
Crème sur terracotta · 2,6:1 Refusé
Crème sur bleu · 2,7:1 Refusé
Chapitre 05
Le jeu, l’interface et Aniki ont chacun leur police. On reconnaît qui parle avant même de lire, et l’espace autour du texte compte autant que le texte.
La voix du jeu
Mine 12
Unbounded, 600 à 800. Scores, titres d’écran, chiffres de jeu. Toujours avec parcimonie.
font-family: Unbounded
La voix de l’interface et de KoRaNé
Trois bonnes réponses. Je n’ai rien vu.
Nunito, 500 à 900. Toute l’interface, les leçons, et les répliques de KoRaNé en ExtraBold.
font-family: Nunito
La voix d’Aniki
Avant de dessiner, demande-toi pour qui.
Fraunces italique. Uniquement les répliques d’Aniki, comme une note dans son carnet.
font-family: Fraunces italic
ScoreUnbounded 800 · 40/44
+120 XP
Titre d’écranUnbounded 600 · 28/34
La recherche utilisateur
TitreNunito 800 · 22/28
Module 2 · Les personas
Sous-titreNunito 800 · 18/24
Qu’est-ce qu’un persona ?
TexteNunito 600 · 16/24
Un persona est un utilisateur fictif qui résume les besoins d’un groupe réel, construit à partir de la recherche.
Texte secondaireNunito 600 · 14/20
Leçon 3 sur 5 · environ 4 minutes
ÉtiquetteNunito 800 · 12/16 · +4 %
Trouve le problème
Réplique d’AnikiFraunces italique 500 · 18/26
Un persona sans recherche, c’est un personnage de roman.
Chapitre 06
Tout repose sur une base de 4 points. La grille mobile a 4 colonnes, des marges de 20 et des gouttières de 12. Le bouton « Grille », en bas à droite, superpose celle de ce livre.
Espacements
Rayons
L’effet tampon. Tout élément qu’on touche porte une bordure prune de 2 px et une ombre pleine de 4 px, sans flou. À l’appui, il descend de 3 px et l’ombre tombe à 1 px.
Zones tactiles de 48 × 48 au minimum, une seule action principale par écran.
Chapitre 07
Des composants qu’on a envie de toucher. Essaie les boutons et réponds à la question : les états juste et faux montrent toujours une icône et un mot, jamais la couleur seule.
Boutons
Progression de leçon et compteurs
Niveaux de designer
Ligues hebdomadaires
Timer de duel
Question de leçon
QCM · Accessibilité
Un texte de 16 px doit atteindre quel contraste minimal pour respecter WCAG AA ?
Bulles de dialogue
Joli contraste. Pour un fantôme.
Vérifie le ratio, puis fais confiance à tes yeux.
Chapitre 08
Toutes les mécaniques partent du crayon de KoRaNé. On ne garde pas une flamme : on garde la mine. Teste-la ci-dessous.
Douze jours. Je commence à te respecter. Un peu.
Chaque jour de pratique taille le crayon. Un jour manqué, la mine casse et KoRaNé « fait la mine ».
Tailler produit des copeaux, la monnaie de l’appli. Le taille-crayon répare une mine cassée dans les 24 heures.
Croquis, Wireframe, Maquette, Prototype, Produit, Icône : monter de ligue, c’est apprendre les niveaux de fidélité.
Le portfolio tenu par Aniki. Chaque module terminé y ajoute une page illustrée.
10 questions, 15 secondes chacune, entre amis. Un mode entraînement sans timer reste toujours ouvert.
La carte des compétences, ici pour un apprenant fictif après 3 modules.
Chapitre 09
On tutoie. Phrases courtes, mots concrets, humour pince-sans-rire. KoRaNé taquine la procrastination, Aniki rassure et explique. Aucun des deux ne rabaisse la personne.
| Situation | KoRaNé | Aniki |
|---|---|---|
| Bonne réponse | Pas mal. Ne t’habitue pas. | Exactement. Tu as regardé le contraste avant tout le reste. |
| Erreur | Audacieux. Faux, mais audacieux. | Regarde la hiérarchie : qu’est-ce que l’œil lit en premier ? |
| Mine cassée | Ta mine a cassé. Je ne dis rien. Je le pense très fort. | Une journée manquée ne défait pas ce que tu as appris. |
| Fin de leçon | Cinq minutes. Je savais que tu en étais capable. Presque. | Une page de plus dans ton Carnet. |
Ta leçon du jour t’attend, quand tu veux.
Ta mine s’émousse. Cinq minutes suffisent.
Je ne dis rien. Je regarde juste ta série. Fixement.
Même Aniki a fait sa leçon. Et il lit lentement.
Chapitre 10
Les icônes reprennent le trait des mascottes : 2 px, extrémités arrondies, grille de 24, couleur prune. Le motif mélange les outils du designer : courbes de Bézier, curseur, crayon, copeau.
Le motif habille les écrans de récompense, les fonds de partage et les supports imprimés. Il ne passe jamais derrière un texte courant.
Chapitre 11
L’attente est lente et presque immobile, la récompense est courte et franche. Le son est doux et boisé, comme un crayon sur du papier. Tout se coupe, et le réglage « réduire les animations » est respecté.
| Mouvement | Durée | Courbe |
|---|---|---|
| Appui sur un bouton | 100 ms | ease-out |
| Changement d’état | 200 ms | cubic-bezier(.2,.8,.2,1) |
| Récompense, montée de niveau | 400–600 ms | cubic-bezier(.34,1.56,.64,1) |
| Attente des mascottes (Rive) | boucle 4 s | linéaire, très faible amplitude |
| Moment | Son | Haptique |
|---|---|---|
| Bonne réponse | Coche au crayon, petite note claire | Légère |
| Mauvaise réponse | Frottement de gomme | Double, légère |
| Mine +1 | Taille-crayon qui tourne | Moyenne |
| Mine cassée | Petit « crac » | Aucune |
| Fin de leçon | Courte phrase de marimba | Moyenne |
| Intro de duel | Souffle puis impact feutré | Forte, une fois |
Chapitre 12
Trois écrans du MVP, construits uniquement avec les éléments de ce livre. Ils suivent eux aussi le mode clair ou sombre.
QCM · Du croquis au prototype
Qu’est-ce qu’un wireframe ?
La Mine
12 jours
Douze jours. Je commence à te respecter. Un peu.