Une app pour apprendre la langue des signes française dix minutes par jour, en refaisant chaque signe devant un miroir caméra.

Pl. 02 / 16Étude de cas

Paume

Une app pour apprendre la langue des signes française dix minutes par jour, en refaisant chaque signe devant un miroir caméra.

Bon de commandeN° Pl. 02 · 2026
Client
Projet personnelApp web installable, en bêta publique sur paume.pages.dev
Année
2026Octobre 2026 : recherche, app, identité et mise en ligne
Rôle
Recherche : besoin, apps existantes, études sur l’apprentissage des signesConception du parcours et de la boucle de leçonUI/UX de l’app, mobile d’abordIdentité visuelle complète « Atelier papier »Développement front et back, mise en ligneSélection et crédit des 99 vidéos de signeurs
Nature du travail
  • Web & App ✓
  • Branding ✓
  • Print
  • Motion
  • Social media
  • Illustration ✓
Livrables
  • App web installable (PWA), utilisable hors ligne
  • Parcours de 4 unités et 22 leçons, 99 signes filmés
  • Charte graphique : logo et déclinaisons, couleurs, typographies, 30 pictogrammes, 8 illustrations, gabarits réseaux, logo animé
  • Tokens de la charte branchés dans le code de l’app
Outils
  • React 19
  • TypeScript
  • Vite
  • PWA
  • MediaPipe
  • Cloudflare Pages
  • Cloudflare D1
  • PWA (Workbox)
  • ts-fsrs
  • Zustand
  • React Router 7
  • Vitest

Le film

Film de présentation réalisé pour ce portfolio. La trajectoire est celle mesurée par l’app sur la vidéo de référence du signe « Merci » (Laura Jauvert, CC BY 3.0).

Pl. 02 · Le film0:00 / 0:00

Le brief

Pour l’anglais ou l’espagnol, les apps se comptent par dizaines. Pour la langue des signes française, on trouve d’excellents dictionnaires vidéo et quelques cours, mais on y regarde les signes, on ne les fait presque jamais. J’ai voulu une app pour celles et ceux qui veulent apprendre la LSF dix minutes par jour, par exemple pour parler avec un proche sourd.

L'enjeu

Une langue des signes s’apprend avec les mains : il fallait faire produire le geste, pas seulement le reconnaître, et le corriger sans que la vidéo de l’apprenant quitte son téléphone. Il fallait aussi une identité chaleureuse, qui ne fasse ni clipart, ni appli scolaire.

Au programme

  • Leçons courtes : voir, refaire, reconnaître, signer de mémoire, réviser
  • Révisions espacées, avec deux cartes par signe (reconnaître et produire)
  • Miroir caméra : le geste est comparé à la vidéo de référence, sur l’appareil
  • Dactylologie : l’alphabet manuel, épeler et lire
  • Dictionnaire des signes avec fiche, ralenti et miroir
  • Série, points et objectif du jour

La démarche

  1. 01Constat

    J’ai passé en revue les apps de langues signées et les chiffres disponibles : environ 100 000 personnes sourdes ont la LSF pour langue principale et 250 000 la pratiquent (Université de Rouen). Une étude de 2024 (Morett et al.) montre qu’on retient mieux un signe qu’on a refait que celui qu’on a seulement regardé.

  2. 02La boucle de leçon

    Chaque leçon suit la même boucle courte : voir le signe, le refaire, le reconnaître parmi quatre propositions, le signer de mémoire, puis le réviser au bon moment grâce à la répétition espacée (FSRS).

  3. 03Le miroir caméra

    MediaPipe repère les mains et les épaules dans le navigateur. Les points sont ramenés au buste, puis la trajectoire est alignée sur celle de la signeuse par DTW. Les références ont été précalculées sur les 99 vidéos du parcours.

  4. 04L’identité

    Le 20 octobre, j’ai présenté trois directions complètes, chacune avec logo, palette, typographies, écran d’app et post : Lumière du jour, Le geste et Atelier papier. J’ai retenu Atelier papier, en gardant Bricolage Grotesque, la typo de la version bêta, pour le mot « paume ».

  5. 05Mise en ligne

    L’app est installable et fonctionne hors ligne. Elle est hébergée sur Cloudflare Pages ; quelques fonctions et une base D1 recueillent les avis et, seulement avec accord, des statistiques anonymes.

Planches

Encart bleu : on apprend mieux un signe en le faisant (1,55 contre 1,21), et graphique qui place Paume parmi les apps de langues signées
Pl. 02.1Ce que dit la recherche, et où se place Paume
La boucle en cinq étapes, voir, refaire, reconnaître, signer de mémoire, réviser, et quatre principes
Pl. 02.2La boucle de leçon et ses principes
Trois planches de direction : Lumière du jour, Le geste, Atelier papier (retenue)
Pl. 02.3Trois directions présentées le 20 octobre 2026
Construction du symbole sur une grille : doigts arrondis, main inclinée, œil, repérage du rose, et tailles de 128 à 16 px
Pl. 02.4Le symbole, construit sur une grille de 64
Le logo principal et ses déclinaisons : sur bleu, sur encre, logotype seul, jaune riso, icônes d’app
Pl. 02.5Le logo et ses déclinaisons
Sept couleurs : papier, encre, bleu riso, rose riso, surimpression, jaune riso, écran signe ; Bricolage Grotesque et Atkinson Hyperlegible Next
Pl. 02.6Couleurs et typographies
Trente pictogrammes au trait et huit illustrations en papier découpé
Pl. 02.730 pictogrammes et 8 illustrations

Les écrans de l’app (captures réelles)

Écran Parcours : objectif du jour, unité Saluer et ses leçons
Pl. 02.8Parcours
Écran Nouveau signe : la vidéo du signe Bonjour et son usage
Pl. 02.9Nouveau signe
Écran Que signifie ce signe ? : une vidéo et quatre mots
Pl. 02.10Reconnaître
Fiche du signe Merci : vidéo, miroir caméra et signalement
Pl. 02.11Fiche du signe
Six écrans d’une leçon, de la découverte du signe à l’écran Bravo
Pl. 02.12Une leçon, écran par écran
Quatre téléphones sur fond bleu : parcours, révisions, dactylologie, fiche du signe
Pl. 02.13L’app au quotidien
Analyse d’une vidéo de référence image par image, les quatre étapes du miroir, et les 99 trajectoires superposées
Pl. 02.14Le miroir caméra : repérer, mesurer, aligner, conseiller
Schéma technique : l’app sur l’appareil, Cloudflare, les vidéos libres de Wikimedia Commons, et les chiffres du parcours
Pl. 02.15Architecture : installable, hors ligne, hébergée à la périphérie
Gabarits de posts et de stories, logo animé, aperçu de lien et icône d’app
Pl. 02.16La marque en action : gabarits, logo animé, icône

Décisions

01

Faire, pas regarder

Chaque leçon fait refaire chaque signe tout de suite, puis le fait produire de mémoire. Chaque signe a deux cartes de révision : reconnaître (vidéo vers mot) et produire (mot vers signe).

02

La caméra reste sur l’appareil

Le geste est analysé dans le navigateur et aucune image n’est envoyée. La progression reste dans le téléphone, sans compte et sans cookie.

03

De vrais signeurs, jamais de signe généré

Toutes les vidéos montrent des personnes filmées, avec leur nom et leur licence (Wikimedia Commons). Je n’ai pas voulu d’avatar ni de signe dessiné : un signe faux s’apprendrait aussi bien qu’un vrai.

04

Un œil au creux de la main

La LSF est une langue du regard, et on l’apprend avec les mains. Le symbole est une main découpée, imprimée en deux encres riso. J’ai décalé le rose presque à la verticale pour qu’il ne raye pas les doigts en petit, et l’œil est découpé dans les deux feuilles.

05

Un bleu doux derrière les signes

Les vidéos et photos de signeurs se posent toujours sur un bleu doux uni, jamais sur le papier beige ni sur une texture, pour que les mains se détachent.

Résultats

  • 22Leçons, en 4 unités
  • 99Signes filmés par des signeurs, crédités
  • 26Lettres de l’alphabet manuel
  • 0Cookie, et aucune image envoyée

Ce que j'en retiens

Ce projet m’a appris à penser l’identité et le produit ensemble : les couleurs, les typos et les ombres de la charte sont les mêmes variables que celles du code. La prochaine étape est prévue dans la charte : faire relire la direction et le parcours par des personnes sourdes avant une diffusion plus large, l’œil dans la paume étant un hommage à leur langue.

Palette

Couleurs relevées sur les visuels du projet.

  • Papier#F4EFE6C0 M2 J6 N4
  • Encre#1D1B26C24 M29 J0 N85
  • Bleu riso#0078BFC100 M37 J0 N25
  • Rose riso#FF48B0C0 M72 J31 N0
  • Surimpression#002284C100 M74 J0 N48
  • Jaune riso#FFE800C0 M9 J100 N0
  • Écran signe#D3E6F0C12 M4 J0 N6