Udāna — L'Embarquement

Le mandat

Udāna avait besoin d'une page claire pour annoncer L'Embarquement, sa matinée de lancement au centre-ville de Montréal le 5 décembre 2026, et diriger les visiteurs vers l'inscription. La page devait expliquer à qui s'adresse l'événement, présenter les programmes d'Udāna et réunir toute l'information pratique : date, heure, lieu, salle, prix, carte et accès en transport en commun. La billetterie reste sur la page Zeffy existante du client : le site n'a donc ni formulaire, ni compte, ni paiement à maintenir.

Direction créative

Nous avons travaillé strictement dans la charte graphique d'Udāna : une palette fermée de brun profond, terracotta, or et ivoire, Lora pour les titres éditoriaux et Poppins pour les libellés, sans dégradés ni ombres portées, et l'étoile à huit branches de la charte utilisée seulement comme motif d'arrière-plan discret, à faible opacité. L'image d'accueil réunit la silhouette de Montréal et une cour marocaine dans une même vue : le lien Canada–Maroc se lit avant même le texte.

Le système de marque, tel que construit

Palette

• Brown#45301F
• Terracotta#B0553A
• Gold#C9A227
• Ivory#F3EADC
• Olive#6E7350

Typographie

• LoraDisplay / Editorial
• PoppinsUI / Labels

Technologies

• Next.js
• TypeScript
• Tailwind CSS
• next/font
• JSON-LD
• Netlify

Approche UX

Un seul défilement répond aux questions du visiteur dans l'ordre où elles se posent : de quoi s'agit-il, pourquoi venir, qui est Udāna, comment se déroule la matinée et comment s'y rendre. Le lien de réservation apparaît dans l'en-tête, l'accueil, le menu mobile et la section finale, tous reliés à une seule constante dans le code pour éviter toute incohérence. L'information pratique est regroupée en un bloc, à côté d'une carte intégrée et d'un lien d'itinéraire.

Stratégie responsive

Le mobile a été pensé en direction artistique, pas seulement empilé. Les téléphones et les tablettes en portrait reçoivent un cadrage vertical dédié de l'image d'accueil pour garder les deux repères visibles. Le menu mobile est un panneau ivoire translucide avec un léger flou d'arrière-plan, une entrée échelonnée et une navigation clavier complète, avec une version opaque pour les navigateurs ou visiteurs qui réduisent la transparence.

Mouvement et interaction

Le mouvement reste volontairement sobre. Les sections apparaissent en fondu à l'entrée dans l'écran grâce au CSS et à un IntersectionObserver plutôt qu'à une librairie d'animation, et tout le contenu reste visible sans JavaScript. Les boutons se soulèvent légèrement au survol et s'assombrissent au clic. Tout mouvement est désactivé avec prefers-reduced-motion.

Performance et accessibilité

L'image d'accueil est chargée en priorité, les polices sont auto-hébergées avec seulement le sous-ensemble nécessaire préchargé, et la carte se charge en différé. Le balisage utilise de vrais repères, un lien d'évitement, des listes de description valides pour les détails de l'événement, des états de focus visibles et un contraste vérifié sur les photos. Lors du contrôle qualité en production, nous avons constaté que du balisage injecté par l'hébergeur cassait l'hydratation React sur le domaine final ; un petit script de nettoyage en ligne a corrigé le problème et la page s'affiche sans erreur côté client.

SEO et découvrabilité

La page inclut des données structurées Event et Organization (date, lieu, prix et lien de billetterie), une URL canonique, des aperçus Open Graph, un sitemap et des règles robots. Les déploiements de prévisualisation sont automatiquement marqués noindex : seul udana.ca est destiné à être indexé.