Let's go paddle!
Marée haute, mer à 26 °C.
Fenêtre ouverte · encore 4 h 30
↗ marée montante
☁️24°air
🚩10 NOrafales
🌊26,1°eau
〰️0,3 mhoule
🌡️3uv
Prochaines marées hautes
Aujourd'hui
00h06h12h18h23h59
02:00 → 05:00 · 06:00 → 09:00 · 14:00 → 19:00
No paddle.
Marée trop basse et rafales à 36 km/h.
↗ marée montante
☁️21°air
🚩36 NOrafales
🌊22,4°eau
〰️0,4 mhoule
🌡️5uv
💨22vent
Prochaines marées hautes
Aujourd'hui
00h06h12h18h23h59
02:00 → 05:00 · 14:00 → 19:00
🎯 Problématique
Se déplacer pour rien, c'est vite frustrant.
J'ai commencé le paddle récemment. Rapidement, un problème récurrent : arriver sur le spot et réaliser que la marée est trop basse, le vent trop fort ou les conditions mauvaises. Aucun outil ne centralisait ces infos avec un verdict clair.
😤
Le problème
- Plusieurs sources d'info à consulter manuellement (météo, marée, vent)
- Impossible de savoir d'un coup d'œil si ça vaut le déplacement
- Les apps surf/paddle existantes sont trop généralistes
- Pas d'outil pensé spécifiquement pour le paddle débutant
✅
La solution
- Un verdict immédiat parmi 3 états (go, no paddle, brouillard) basé sur 4 facteurs combinés
- Toutes les données sur un seul écran : marée, vent, rafales, houle, température
- Une logique simple et claire avec la marée comme condition principale
- Sélection des plages à proximité via carte interactive et favoris
🛠 Solution
Une app, un seul objectif : passer plus de temps sur l'eau.
🌊
Verdict immédiat (3 états)
Let's go. conditions favorables, No paddle. un facteur bloque, Brouillard. données indispos. Le subtitle explique pourquoi en français clair.
📐
4 facteurs lisibles
Marée (≥ 50 % de l'amplitude du jour, sine qua non), vent (≤ 15 km/h), rafales (≤ 25 km/h), houle (≤ 0,40 m). Tout est documenté dans l'app.
🗺
Spots à proximité
Carte interactive (Leaflet + OpenStreetMap) pour trouver les plages autour de toi, choisir ton rayon de recherche (10/25/50 km) et marquer tes favoris d'une étoile.
📱
Mobile-first
Design adapté à l'usage en extérieur, info principale immédiate, cibles tactiles généreuses. Fonctionne sur n'importe quel téléphone à jour.
⚡
Stack minimaliste
HTML/CSS/JS vanilla, Leaflet pour la carte. APIs Open-Meteo et données marines en direct. Pas de framework JS (React, Vue, etc.), pas de backend. Fonctionne depuis un fichier local ou hébergé.
🤖
IA-augmented
Conçu et développé avec Claude Code. La décision de design reste humaine, l'IA accélère l'implémentation et permet de tester plus d'itérations.
🔄 Itérations
Trois versions avant de trouver le bon rythme.
Le verdict immédiat était l'idée de base, mais la façon de présenter la marée, la météo et la décision a beaucoup évolué. Voici les trois pivots majeurs avant le design actuel (illustré en haut de page).
🌊 PaddleCheck10:33
🏄
Let's go paddle !
Marée haute · Vent 8 km/h
🌡 22°💨 8🔆 5.2🌊 17°
Ce matin08:30 → 11:00
Demain soir17:15 → 19:45
V1 · Premier jet
Verdict & chips météo
Une carte verdict, des chips colorés pour la météo, une barre de marée à pourcentage. Lisible mais l'info marée se perd dans le bruit visuel.
Verdict clairMarée illisible
🏄 Paddle Check18:42
NIVEAU DE MARÉE : EN DIRECT
-1,52 m
NO-GO↘ descendante
30°air
28vent
44raf.
26°eau
V2 · Dashboard
Marée XXL, NO-GO/GO
Marée en chiffres XXL, pastille d'état (NO-GO / GO), graphique, stats en grille. Précis mais trop dense, le verdict se noie dans la donnée.
Marée mise en avantVerdict noyé
🏄 PaddleCheck10:33
Let's go.
Marée favorable, rafales faibles, mer à 25°C.
Fenêtre · encore 8 h 26
☀️ 25°
🚩 16
🌊 25°
〜 0,4
V3 · Minimaliste
"Let's go." + courbe
Verdict en titre, courbe sinusoïdale lisible, badge fenêtre. Calme et élégant, mais un peu plat, le verdict manque de personnalité et de joie.
Courbe génialeTrop sage
🎨
Méthodologie · IA-augmented
Pour chaque version, j'ai utilisé Claude Design en complément de Claude Code. L'idée : partir d'une intention floue, générer plusieurs propositions visuelles, les comparer, choisir la direction qui fait vibrer, puis seulement après, implémenter avec Claude Code.
- Sortir de mes biais visuels : explorer des pistes que je n'aurais pas tentées seul
- Challenger chaque idée : tester des directions "disruptives" sans peur de perdre du temps
- Ouvrir les chakras : 3 à 5 variantes côte à côte en quelques minutes, comparaison immédiate
- Garder la décision finale : l'IA propose, je tranche, je garde le contrôle du goût
Le verdict 3D façon pop, les vagues animées, la palette Lagon, autant de directions nées de cette boucle. Un super accélérateur pour challenger ses propres réflexes de designer et aller chercher des pistes plus disruptives qu'en solo.
✨ Pourquoi cette forme finale
Trois choix qui ont fait toute la différence.
Après V1, V2 et V3, trois directions de design ont vraiment transformé l'app, et pourquoi elles fonctionnent là où les précédentes échouaient.
Choix 1
🌊
La vague est le verdict
Plutôt qu'afficher la marée comme une donnée à interpréter (un pourcentage, un chiffre, une courbe), on l'affiche comme ce qu'elle est : de l'eau qui monte ou descend dans l'écran. La métaphore est littérale, le verdict s'impose en une seconde.
vs V1 / V2 / V3V1 chiffrait (72 %), V2 dramatisait (-1,52 m + pastille rouge), V3 traçait une sinusoïde à décoder. La vague animée raconte la même histoire d'un seul geste visuel.
Choix 2
📏
Le seuil au cœur de l'écran
Une ligne pointillée horizontale marque la mi-marée, le minimum pour pagayer. L'œil compare instinctivement : eau au-dessus = Let's go, eau en-dessous = No paddle. Pas de chiffre à mémoriser, pas de seuil mental à porter.
vs les pistes précédentesLà où V3 demandait de localiser le curseur sur une courbe et de le comparer à un point de référence flou, la ligne tranche net : au-dessus ou en-dessous.
Choix 3
🗺
La carte avant la liste
On choisit son spot sur une carte interactive avec rayon réglable (10/25/50 km) et favoris en étoile. Pas de champ de recherche à remplir : l'utilisateur part de sa position, voit ce qui l'entoure, marque ses habitudes.
vs un sélecteur classiqueUne liste avec autocomplete suppose qu'on connaît le nom des plages. La carte ne suppose que la géographie : universelle, immédiate.
Trois décisions cohérentes : transformer la donnée en perception, ancrer le verdict sur du visuel stable, et coller à l'instinct géographique de l'utilisateur. C'est cette V4 qui est devenue l'app.
♿ Accessibilité
Pensée pour être utilisable partout, par tout le monde.
L'accessibilité a été intégrée dès le départ. Deux thèmes, Sombre pour l'extérieur en plein soleil et Lagon pour l'intérieur en lecture posée. Contraste validé WCAG AA, navigation clavier, respect des préférences système, et trois états de verdict explicites pour ne jamais laisser l'utilisateur dans le flou.
Sombre & Lagon × GO & No paddle
Sombre · GO
Let's go paddle!
Marée haute, mer à 26 °C.
Fenêtre ouverte · encore 4 h 30
Lagon · GO
Let's go paddle!
Marée haute, mer à 26 °C.
Fenêtre ouverte · encore 4 h 30
Sombre · No paddle
No paddle.
Marée trop basse et rafales à 36 km/h.
Lagon · No paddle
No paddle.
Marée trop basse et rafales à 36 km/h.
Trois verdicts, jamais d'ambiguïté
Let's go paddle!
Les 4 facteurs sont bons. Tu peux y aller.
No paddle.
Au moins un facteur bloque. Le subtitle dit lequel.
Brouillard.
Données indispos ou réseau qui patine. Pas de faux GO.
🌓
Thème Sombre / Lagon
L'app détecte la préférence système (prefers-color-scheme) et bascule automatiquement. Un toggle manuel dans "À propos" permet de forcer un mode.
🎯
Contraste WCAG AA
Tous les textes respectent au minimum un ratio de 4.5:1 sur les deux thèmes. Lisible en plein soleil sur le spot comme à l'intérieur.
⌨️
Navigation clavier
Tous les éléments interactifs accessibles au clavier, focus visible en vert, skip link vers le contenu principal.
🎬
Mouvement réduit
Respect de prefers-reduced-motion : animations et transitions désactivées si l'utilisateur le préfère.
🌐
Sémantique HTML
Landmarks (main, nav, footer), ARIA labels, hiérarchie de titres cohérente pour les lecteurs d'écran.
📱
Cibles tactiles 44px+
Boutons et zones cliquables d'au moins 44×44 px avec espacement suffisant, conformément aux recommandations iOS et Android.
🚀 Axes d'amélioration
Ce que j'aimerais explorer ensuite.
📷
Caméras live sur les spots
Intégrer des flux caméra pour voir en temps réel la fréquentation, la hauteur des vagues et l'état visuel des spots.
🔔
Notifications push
"Fenêtre idéale dans 2h", alerter proactivement quand une fenêtre paddle parfaite s'ouvre dans la journée.
🤖
Score IA des conditions
Remplacer les seuils fixes par un score calculé par IA, capable d'apprendre des préférences de l'utilisateur session après session.
👥
Mode partagé
Organiser des sorties en groupe : synchroniser les disponibilités, créer une émulation collective autour des bonnes fenêtres.