App Mobile — Swellr
Écrans d'onboarding, authentification et flux utilisateur de l'application mobile.
01 — Onboarding
Séquence d'introduction immersive de 4 écrans. Fond photo surf simulé par gradient océan, logo SWELLR centré, tagline minimaliste.
L'onboarding mise sur une expérience photo-first : fond plein écran évoquant l'océan, logo en blanc pur, sans interface. L'objectif est de créer un impact émotionnel immédiat avant toute interaction.
SWELLR
Écran 1
Splash
SWELLR
Catch the wave
Écran 2
Tagline
🏄
SWELLR
Catch the wave
Écran 3
Immersif
SWELLR
Bienvenue sur
Swellr
Swellr
Commencer
Tu as déjà un compte ? Connecte-toi ici !
ou
Écran 4 — Welcome
CTA
Gradient océan
#0a3a42 → #05a1b0
Font logo
Manrope ExtraBold 28px
Tagline
Inter Regular 13px / letter-spacing 3px
CTA pill
border-radius 999px / h 44px
02 — Authentification
Écrans de connexion, inscription et gestion des erreurs. Fond application sombre #08272e, inputs sur fond #1a3a42, bouton primaire teal pill.
L'interface auth adopte le fond sombre de l'application (#08272e). Les champs de saisie utilisent un fond légèrement plus clair (#1a3a42) pour créer la profondeur. L'état d'erreur se signale par une bordure rouge #DC2626.
←
SWELLR
Connecte toi,
Et surf avec tes amis ! 🏄
Et surf avec tes amis ! 🏄
Email
Mot de passe
Se connecter
Mot de passe oublié
Pas encore de compte ? Inscris-toi ici
ou
Log In — Connexion
Authentification
←
SWELLR
Inscris-toi
Et surf avec tes amis ! 🏖️
Et surf avec tes amis ! 🏖️
Prénom
Nom
Email
Mot de passe
S'inscrire
Déjà un compte ? Connecte-toi ici
ou
Sign In — Inscription
Authentification
←
SWELLR
Connecte toi,
Et surf avec tes amis ! 🏄
Et surf avec tes amis ! 🏄
john.doe@
⚠ Adresse email invalide
Mot de passe
Se connecter
Mot de passe oublié
Pas encore de compte ? Inscris-toi ici
ou
Log In — Erreur email
État Erreur
Fond app
#08272e
Fond input
#1a3a42
Erreur border
#DC2626
Titre
Manrope Bold 15px / 24px mobile
Input
h 40px / border-radius 10px
03 — Permissions Système
Demandes de permission localisation et notifications. Carte frosted-glass sur fond gradient océan. Design non-intrusif avec bouton primaire teal et option de refus.
Les permissions sont présentées dans une carte glass-morphism (background rgba blanc 0.12, backdrop-filter blur) qui flotte sur le fond immersif. Le bouton "Autoriser" utilise le teal primaire, le bouton "Plus tard" reste discret en ghost.
SWELLR
Permission Localisation
GPS
SWELLR
Permission Notifications
Notifs
Carte
rgba(255,255,255,0.12) / blur 12px
Border carte
rgba(255,255,255,0.18)
Btn Autoriser
#028490 teal
Btn Refus
ghost rgba blanc 0.08
04 — Flux Utilisateur
Diagramme des étapes de l'onboarding au premier accès à l'application principale.
Onboarding
4 écrans
4 écrans
Splash
→
Welcome
Accueil
Accueil
CTA
→
Choix
Nouveau
Sign In
Sign In
Existant
Log In
Log In
→
Permission
GPS
GPS
Système
→
Permission
Notifs
Notifs
Système
→
App
principale
principale
Dashboard
TEAL
Écrans brand Swellr
BLANC
Choix utilisateur
TEAL LÉGER
Permissions système
VERT
Destination finale
05 — Specs Techniques
Tableau récapitulatif des valeurs de design utilisées sur l'application mobile Swellr. Référence pour les développeurs iOS et Android.
Layout & Structure
| Propriété | Valeur | Note |
|---|---|---|
| Screen width | 393px | iPhone 15 Pro |
| Screen height | 852px | iPhone 15 Pro |
| Padding horizontal | 16px | Edges gauche & droite |
| Status bar iOS | 45px | Dynamic Island |
| Header height | 57px | 45px status + 12px padding |
| Bottom safe area | 34px | Home indicator iOS |
Composants UI
| Composant | Valeur | Note |
|---|---|---|
| Input height | 56px | Min touch target |
| Button height | 56px | Pill primary |
| Input border-radius | 8–14px | md → lg selon context |
| Button border-radius | 999px | Pill plein |
| Social btn width | 72px | Carré / cercle |
| CTA width (max) | 330px | Full width – 16px each side |
Typographie Mobile
| Rôle | Valeur | Note |
|---|---|---|
| Logo SWELLR | Manrope 800 28px | ExtraBold, blanc |
| Titre écran | Manrope 700 24px | Bold, blanc |
| Tagline | Inter 400 15px | Regular, blanc 75% |
| Body / labels | Inter 400 14–16px | Regular, blanc / rgba |
| Bouton | Manrope 700 16px | Bold |
| Erreur | Inter 400 13px | Regular, #DC2626 |
Couleurs App
| Rôle | Token | Hex |
|---|---|---|
| Background app | --color-teal-darkest | #08272e |
| Fond input | — | #1a3a42 |
| Primaire teal | --color-teal | #028490 |
| Erreur | --color-error | #DC2626 |
| Succès | --color-success | #22c55e |
| Texte principal | --color-white | #ffffff |
Note développeur : L'application cible iOS 17+ et Android 14+. Les mesures en px correspondent aux logical pixels (points iOS / dp Android). Le ratio pixel physique (screen density) n'est pas pris en compte dans ces specs — utiliser les valeurs telles quelles dans les fichiers de design Figma.