Des images plein cadre et des transitions lentes, pour donner une sensation d’espace dès le premier écran.
PROJET 06 · SITE WEB
PROJET WEB ANIMATION & WEBFLOWNORTH · 2026
AGENCE DE VOYAGES FICTIVE · GRAND NORD
UN VOYAGE QUI SE DESSINE AU SCROLL.
Un site de voyages dans le Grand Nord pensé comme un carnet de route : une carte qui se trace sous les yeux, des cartes postales qui volent et un billet d’embarquement pour finir. Animations GSAP et développement Webflow.
UX / UIGSAPWEBFLOW
02. LE CONTEXTE
DONNER ENVIE DE PARTIR AVANT DE PARLER DE PRIX.
NORTH est un projet personnel : une agence fictive de voyages sur mesure entre la Norvège, la Suède, la Finlande et la Laponie. Le site est en anglais, pour une clientèle internationale.
Le défi : faire tenir des paysages immenses dans un écran de téléphone, sans que les animations passent devant l’essentiel. La route, les hébergements, les saisons et le moyen de réserver.
Chaque envie a ses chiffres : jours, kilomètres, nuits. On sait vite si le voyage est pour soi.
Une page qui avance comme un trajet, de l’inspiration jusqu’à la réservation.
01CADRAGE
02STRUCTURE
03ANIMATION
04WEBFLOW
03. STRUCTURE & WIREFRAMES
D’UNE MAQUETTE FIGÉE À UNE VRAIE STRUCTURE.
ROUTEESPACERYTHMECLARTÉ
La maquette de départ venait de Figma, tout en position absolue : impeccable à une seule largeur, cassée partout ailleurs. Toute la page a été reconstruite en flex et en grid, section par section.
Onze sections suivent la logique d’un voyage : destinations, expériences, envies, itinéraire, hébergements, saisons, avis, questions, puis le départ. Chaque bloc a été calé en structure avant d’être animé.
04. UI DESIGN
LA NUIT POLAIRE ET UN VERT D’AURORE.
L’interface joue sur un bleu nuit profond, un crème de papier et un vert acide qui rappelle les aurores. Une typographie étirée pour les titres, une mono pour les repères, comme dans un carnet de bord.
LE WIREFRAME
Des blocs simples pour valider l’ordre du voyage, la place des images et les repères chiffrés avant de passer au design.
LA TYPOGRAPHIE
NORTH
OCCULAR TITRES ROBOTO MONO REPÈRES & DONNÉES
INTER · TEXTE COURANT
LA PALETTE
Bleu nuit, crème, vert aurore et menthe glacée, avec un orange réservé au tracé de la route. Peu de couleurs, chacune a son rôle.
05. ANIMATIONS & RESPONSIVE
CHAQUE SECTION A SON MOUVEMENT.
01
La carte se dessine au scroll : les étapes tombent, le tracé avance de Tromsø aux Lofoten et le compteur défile jusqu’à 7 jours et 520 km.
02
Cartes qui volent, galerie horizontale des hébergements, saisons en diaporama, avis sur trois colonnes, FAQ façon WhatsApp et billet d’embarquement pour conclure.
03
Sur mobile et tablette, les animations lourdes laissent place à des versions fixes et lisibles, et aucun effet ne dépend du survol de la souris.
06. LES ÉCRANS FINAUX
LE MÊME VOYAGE, DU GRAND ÉCRAN AU TÉLÉPHONE.
Sur ordinateur, les sections se figent pour laisser l’animation raconter. Sur mobile, le récit se déroule en colonne, avec la carte, les polaroids et les chiffres recomposés pour tenir dans la main.
07. LE RÉSULTAT
UN SITE QUI DONNE ENVIE DE PARTIR, ET QUI CHARGE VITE.
La maquette figée est devenue un site en flex et en grid, qui passe de l’ordinateur au téléphone sans casser.
Une douzaine d’animations GSAP et ScrollTrigger, chargées par petits lots pour ne jamais bloquer la page.
Sur PageSpeed : 99 en performance sur ordinateur, 98 sur mobile, 100 en accessibilité et en bonnes pratiques.
08. LE SITE LIVE