Projet en cours · lancement à venir
Yskorr · Application mobile
Chaque écran répond à une question d’athlète.
Yskorr, le carnet d’entraînement hybride sur iPhone : WOD, HYROX, course. Un projet en cours au studio, dont nous concevons l’application, le design system, les textes et le site vitrine.
Yskorr est un projet du studio, en cours de développement. Pas de captures de l’application pour l’instant : les dessins de cette page expliquent des principes, ils ne reproduisent pas d’écrans.
- Application iPhone
- Design system
- Écriture de l’interface
Fiche projet
- Produit
- Yskorr
- Nature du projet
- Projet du studio, en cours
- Plateforme
- iPhone
- Technologies
- Expo, React Native, Expo Router
- Site vitrine
- Next.js 16, Vercel
- Statut
- En développement, lancement à venir
Le point de départ
Un carnet qui répond, pas un tableur à remplir.
Un carnet d’entraînement ressemble vite à un tableur : des colonnes de chronos, des formulaires à remplir, des chiffres posés sans repère.
Yskorr part de l’inverse. Chaque écran répond à une question que se pose l’athlète : où j’en suis, ce que j’ai gagné, ce qu’il reste à battre. Un chiffre arrive toujours avec ce à quoi il se compare.
Ce que nous concevons
L’app, ses règles, ses mots et son site.
Quatre chantiers menés ensemble, pour qu’un écran, une phrase et une page de présentation parlent de la même voix.
L’application iPhone
Conçue et développée avec Expo, React Native et Expo Router, pour l’entraînement hybride : WOD, HYROX et course dans un même carnet.
Le design system
Les règles qui valent pour chaque nouvel écran : surfaces, typographie, usage de la couleur, graphiques et écrans vides.
Les textes de l’interface
Un ton, des formats de chiffres et un lexique : le tutoiement, des phrases courtes, des mots courants à la place du jargon.
Le site vitrine
Un site Next.js 16 déployé sur Vercel, pour présenter l’application.
Les principes
Sept règles qui valent pour chaque écran.
Elles sont écrites dans le design system de l’app, et tout nouvel écran s’y conforme.
Une question, un écran
Chaque écran répond à une question que se pose l’athlète. Ce qui n’y répond pas n’a rien à y faire.
De grands chiffres, beaucoup d’air
Un seul chiffre héros par écran, porté par une carte à fort contraste. Le reste se range en tuiles, façon bento. Rien qui ressemble à un tableur ou à un formulaire.
Aucun trait
Sur les écrans de lecture, pas de bordure, pas de filet, pas de séparateur. On sépare par l’espace, par la surface et par la typographie.
Une couleur d’accent, trois usages
Elle signale une porte vers la suite, le score d’un bloc et le repère d’un record. Nulle part ailleurs.
Ni rouge ni vert dans les chiffres
Un temps ne change pas de couleur parce qu’il est bon. Sa hiérarchie passe par la taille et la graisse, et le signe porte le sens.
Des graphiques sans axes ni grilles
L’alignement suffit. Seule la donnée est tracée, et le graphique dit comment le lire quand ce n’est pas évident.
Solo d’abord
Aucune pression, et jamais de rouge pour un recul. Le collectif passe avant le classement.
Deux principes, dessinés
Des schémas faits pour cette page. Ils ne reproduisent pas les écrans de l’application, et les valeurs sont des exemples.
Schéma : un écran organisé en une grande carte à fort contraste qui porte le chiffre principal, puis quatre tuiles claires de même taille sur deux colonnes, séparées par de l’espace et sans aucun trait.
- 1La carte contrastée — une par écran, pour le chiffre héros.
- 2Les tuiles — deux colonnes, des hauteurs fixes.
- 3L’espace — il sépare, à la place des traits.
Exemple de hiérarchie d’un chiffre, avec des valeurs d’exemple : un petit libellé « Ton record », un très grand temps, 24:18, et dessous sa comparaison, −0:05 sur ton ancien record, écrite sans couleur.
- 1Le libellé — petit, ce que l’on regarde.
- 2Le chiffre — le plus grand de l’écran.
- 3Le repère — sans rouge ni vert, le signe porte le sens.
Les mots comptent
Des mots courants, et un chiffre toujours situé.
Le ton, les formats de chiffres et un lexique font partie du design system, au même titre que les couleurs.
Le tutoiement, toujours
Et une écriture épicène : aucun accord ne suppose le genre de l’athlète.
Un constat, puis sa preuve
Des phrases courtes et concrètes, sans jargon de designer ni anglicisme inutile.
Un chiffre a toujours un repère
Il se lit contre quelque chose : un ancien record, une 1re fois, les semaines d’avant.
Un lexique contre le jargon
Des mots à ne plus écrire, chacun avec son remplaçant courant : « progrès » plutôt que « gain », « 1re fois » plutôt que « ligne de base ».
Un écran vide invite
Il ne s’excuse pas : il propose une seule chose à faire, écrite comme une invitation.
Un vide invite
AvantAucune donnée. Vos statistiques s’afficheront ici.
AprèsLance ta 1re séance : elle deviendra ton record à battre.
Un chiffre a un repère
AvantPR : 4:41 (−5 s vs baseline)
Après4:41, soit −0:05 sur ton ancien record.
Une porte dit où elle mène
AvantVoir plus
AprèsToutes tes courses
La stack
Expo pour l’app, Next.js pour le site.
L’application
- Expo
- React Native
- Expo Router
L’application iPhone est construite avec Expo et React Native ; Expo Router organise la navigation entre les écrans.
Le site vitrine
- Next.js 16
- Vercel
Le site vitrine de l’application est un site Next.js 16, déployé sur Vercel.
Où en est le projet
En développement, lancement à venir.
L’application est en cours de développement. Cette page en montre les principes, pas les écrans.
Une interface claire repose sur des décisions écrites.
Les règles du design system et du lexique tranchent pour chaque écran : ce qui reste, ce qui part, et les mots pour le dire.
Projet en cours · lancement à venir.
Parler de votre application