# Explore Togo — brief de design Plateforme de découverte et de réservation touristique pour le Togo. Document de référence à suivre à la lettre. Quand un choix n'est pas spécifié ici, tranche dans le sens de la sobriété. --- ## 0. Comment utiliser ce brief - Produis les écrans dans l'ordre de la section 4 à 9. Le premier écran (page d'accueil) fixe le système, les suivants s'y conforment. - N'invente aucun contenu : la section 11 contient les vrais lieux, les vraies régions, les vrais textes. Utilise-les. - Les prix indiqués sont des valeurs de remplissage à ajuster plus tard. Ne les présente jamais comme vérifiés. - Rédige toute l'interface **en français**, avec un sélecteur de langue FR / EN visible dans l'en-tête. Raison : les chaînes françaises sont 15 à 20 % plus longues que l'anglais, donc concevoir en français garantit que rien ne casse à la traduction. - Mobile d'abord. Chaque écran doit exister en 390 px et en 1440 px. --- ## 1. Le produit Une plateforme web qui permet de découvrir les sites touristiques du Togo et de réserver directement un guide, un transport ou un circuit. **Le problème.** Les gens découvrent les sites togolais sur les réseaux sociaux et demandent systématiquement deux choses en commentaire : « c'est où ? » et « comment on y va ? ». Aucune réponse simple n'existe aujourd'hui. **Cible prioritaire.** Voyageurs internationaux, qui réservent 2 à 6 mois à l'avance, achètent des circuits de 5 à 12 jours plutôt que des sorties à la journée, paient par carte, et comparent inconsciemment le site à GetYourGuide. Cibles secondaires servies par le même produit : diaspora togolaise, expatriés à Lomé, marché local. **Ce que le design doit produire chez ce visiteur, dans l'ordre :** ce pays est beau et je ne le connaissais pas → ces gens sont de vrais opérateurs, pas une brochure institutionnelle → je peux réserver ici en confiance. **L'écran le plus important n'est pas la page d'accueil, c'est la fiche site.** La majorité du trafic arrive par une recherche Google ou un lien partagé pointant directement vers un lieu. La fiche site doit fonctionner seule, sans contexte. --- ## 2. Direction artistique Nom de la direction : **Drapeau**. Vert dominant, jaune en information, rouge en action, sur fond blanc. ### 2.1 Palette et rôles | Rôle | Hex | Usage | | --- | --- | --- | | Vert | `#0B6D53` | Surfaces structurantes, grands blocs, en-têtes de section, texte de marque | | Vert profond | `#08543F` | Fonds de hero, calques sur photo, survol du vert | | Vert tinte | `#E7F1ED` | Fonds de badge neutre, états sélectionnés discrets | | Jaune | `#FECC58` | Badges, mises en avant, étiquettes d'information. **Toujours avec du texte `#5C4409` dessus, jamais de texte blanc ni jaune sur blanc** | | Rouge | `#D61E42` | Action unique et principale : « Réserver ». Un seul par écran | | Encre | `#171512` | Texte principal | | Gris texte | `#6B6459` | Texte secondaire, métadonnées | | Ligne | `#E2DED3` | Bordures et séparateurs, toujours en 0,5 px | | Blanc | `#FFFFFF` | Fond de page et de carte | | Brique | `#8A1F11` | Erreurs uniquement, **toujours accompagnée d'une icône et d'un texte**, jamais la couleur seule | Contraintes vérifiées, à respecter sans exception : - Le jaune a un contraste de 1,5:1 sur blanc. Il est **interdit en texte**. Il ne vit qu'en aplat de fond avec texte foncé (14:1). - Le vert (6,3:1) et le rouge (5,1:1) passent en AA avec du texte blanc. - Le rouge ne sert jamais à autre chose qu'à réserver. Les erreurs utilisent la brique. ### 2.2 Typographie - **Titres :** Anton, ou à défaut Archivo Black. Uniquement au-dessus de 24 px. Jamais en corps de texte, jamais en libellé de bouton. - **Interface et corps :** Inter. Deux graisses seulement, 400 et 500. - Échelle : 48 / 34 / 24 px pour les titres, 16 px corps, 14 px interface, 12 px métadonnées. Rien en dessous de 12 px. - Casse phrase partout. Jamais de capitales intégrales, jamais de Casse De Titre. - Interlignage 1,15 sur les titres, 1,6 sur le corps. ### 2.3 Formes et espacements - Rayons : 8 px pour les boutons et champs, 12 px pour les cartes, 16 px pour les blocs médias. - Bordures : 0,5 px `#E2DED3`. Jamais 1 px, jamais 2 px sauf pour accentuer une offre recommandée. - Aucune ombre portée nulle part, sauf l'anneau de focus clavier. - Aucun dégradé, sauf le calque de lisibilité sur la vidéo (section 4.1). - Rythme vertical : 96 px entre sections en desktop, 56 px en mobile. Marge interne des cartes : 16 px. - Largeur de contenu maximale : 1200 px, centrée. ### 2.4 Les six règles qui font tenir cette direction Cette palette peut basculer en « site de ministère du tourisme » si elle est mal exécutée. C'est le principal risque du projet. Ces six règles l'évitent : 1. **Le vert est un canvas, pas une barre de navigation.** Le vert remplit de grandes sections entières. La barre de navigation, elle, est blanche ou transparente sur la vidéo. Une barre verte horizontale en haut de page est le marqueur numéro un du site officiel. 2. **Pas de mise en page centrée symétrique.** Titres alignés à gauche, surdimensionnés, photos à fond perdu, compositions asymétriques. 3. **Une seule photo par écran, grande.** Jamais de mosaïque, jamais de collage. 4. **Aucun carrousel automatique.** 5. **Zéro texte institutionnel.** Pas de « bienvenue sur notre plateforme », pas de mot du fondateur, pas de « nos valeurs ». 6. **Un seul bouton rouge par écran.** Tout le reste est en contour vert ou en lien texte. ### 2.5 Interdits Fond crème avec serif à fort contraste et accent terracotta. Glassmorphisme. Dégradés violets ou bleus. Emojis dans l'interface. Icônes remplies. Photos de banque d'images. Illustrations vectorielles génériques de personnages. Compteurs animés de statistiques. Bandeau de cookies bloquant en plein écran. --- ## 3. Élément signature **Les cornes du logo servent de marqueur de carte.** Le pictogramme rouge `#D61E42`, 20 px, remplace la punaise standard sur la carte interactive et sur toutes les cartes du site. C'est l'élément par lequel la marque doit être reconnue. Il ne fait rien d'autre : il ne décore pas les titres, il ne remplit pas les puces de liste. Le second élément signature est la **silhouette verticale du Togo utilisée comme colonne porteuse de la page d'accueil** (section 4.2). --- ## 4. Écran 1 — page d'accueil ### 4.1 Hero vidéo **Contenu.** Vidéo de fond en boucle, muette, plein cadre. **Spécification technique — importante, la cible arrive par Google et le temps de chargement compte :** - Ne pas intégrer d'iframe YouTube en hero. Utiliser une boucle de 8 à 12 secondes extraite de la vidéo source, en MP4 (H.264) plus WebM, 3 Mo maximum, 1920 × 1080. - Attributs : `autoplay muted loop playsinline preload="metadata"`. - Un attribut `poster` avec une image fixe : c'est elle l'élément mesuré par le navigateur, elle doit être optimisée en priorité. - Si `prefers-reduced-motion` est actif, ou si la connexion est lente (`saveData`, 2G, 3G), afficher uniquement l'image poster. Ne jamais charger la vidéo dans ce cas. - La vidéo complète reste accessible en action secondaire : un lien texte blanc « Voir le film · 2 min » ouvrant une lightbox où l'iframe YouTube est chargée à la demande, jamais avant. - Source de la vidéo complète : https://www.youtube.com/watch?v=o3sxFwR5WD8 **Composition du hero.** - Hauteur : 88 vh en desktop, 70 vh en mobile. Jamais 100 vh, il faut que le haut de la section suivante soit visible. - Calque de lisibilité : aplat `#08543F` à 45 % d'opacité sur toute la surface, plus une bande basse plus dense pour asseoir le texte. Aplat, pas de dégradé décoratif. - Barre de navigation transparente posée sur la vidéo, logo en blanc, liens en blanc, sélecteur FR / EN à droite. Elle devient blanche avec le logo en couleur au défilement. - Titre aligné à gauche, en Anton, 64 px desktop et 38 px mobile, blanc, sur trois lignes maximum. Texte : « Le Togo se visite du nord au sud. Voici comment. » - Sous-titre en Inter 18 px, blanc à 85 % : « Des guides vérifiés, du transport, des circuits. Réservez directement auprès de ceux qui vivent sur place. » - Une seule action : bouton rouge « Découvrir les sites ». À côté, en lien texte blanc souligné : « Voir le film · 2 min ». - En bas du hero, alignée à gauche : une ligne de 3 chiffres sobres, sans animation ni compteur — « 5 régions · 40 sites répertoriés · 12 guides vérifiés ». Texte blanc 14 px, séparé par des points médians. ### 4.2 Carte interactive du Togo C'est le cœur de la page d'accueil et le second élément signature. Elle occupe la section immédiatement sous le hero. **Forme.** Le Togo est un ruban vertical d'environ 550 km de long pour 50 à 150 km de large, soit un ratio proche de 1:4. Ne pas la déformer, ne pas la faire pivoter, ne pas la recadrer. Exploiter cette verticalité. **Mise en page desktop.** Deux colonnes. À gauche, sur environ 38 % de la largeur, la carte SVG du Togo occupant toute la hauteur de la section (environ 720 px). À droite, le contenu synchronisé : nom de la région survolée ou sélectionnée, une phrase de caractérisation, et la liste de ses sites sous forme de lignes cliquables avec vignette carrée 56 px, nom, et prix d'appel. Cette disposition est délibérée : la carte n'est pas une illustration posée à côté du texte, elle est la colonne qui structure la page. **Mise en page mobile.** Carte centrée à environ 55 vh de haut, puis la liste des sites en dessous. La sélection fonctionne dans les deux sens : toucher une région filtre la liste, toucher une ligne de la liste met la région en surbrillance. **Les cinq régions**, du nord au sud, à tracer en chemins SVG distincts : Savanes, Kara, Centrale, Plateaux, Maritime. Grand Lomé est un district autonome à l'intérieur de la région Maritime — le signaler par un point plus gros, pas par une sixième zone. **États des régions.** | État | Remplissage | Contour | Libellé | | --- | --- | --- | --- | | Repos | `#E7F1ED` | `#0B6D53` 0,5 px | `#171512` 12 px, posé à droite de la zone | | Survol | `#0B6D53` | `#08543F` | `#FFFFFF` | | Sélectionné | `#08543F` | `#08543F` | `#FFFFFF` 500 | | Atténué (filtre actif) | `#F2F0EA` | `#E2DED3` | `#6B6459` | Transition de 150 ms sur le remplissage uniquement. Pas de déplacement, pas d'agrandissement de zone, pas de rebond. **Marqueurs de site.** Le pictogramme des cornes en `#D61E42`, 20 px, positionné aux coordonnées réelles. Au survol : agrandissement à 1,15 et apparition d'une carte flottante de 240 px contenant une photo en 3:2, le nom du site, la région, et « à partir de X FCFA ». Au clic : navigation vers la fiche site. **Contrôles au-dessus de la carte.** Une ligne de puces filtrantes, fond `#FFFFFF`, bordure 0,5 px, actif en `#0B6D53` avec texte blanc : Tout · Culture et vodun · Cascades et randonnée · Plages et lagunes · Faune · Patrimoine Unesco. Le filtrage **atténue** les marqueurs non concernés au lieu de les faire disparaître, pour que la carte ne bouge jamais. **Option « Voir les circuits ».** Un interrupteur qui trace le corridor nord-sud en ligne jaune `#FECC58` de 3 px reliant les sites d'un même circuit, avec les étapes numérotées. C'est ce qui transforme la carte en outil de vente pour le produit multi-jours. **Trois exigences non négociables.** 1. Sous la carte, une **liste HTML réelle de tous les sites**, groupée par région, avec des liens vrais. La carte n'est pas le seul chemin d'accès : elle n'est ni indexable, ni utilisable au lecteur d'écran, et le référencement est le canal d'acquisition principal. 2. Chaque région et chaque marqueur est un élément focalisable au clavier, avec `aria-label` explicite et anneau de focus visible. 3. Pas de fournisseur de tuiles cartographiques ici. La carte du pays est un SVG dessiné à la main : plus léger, sur charte, sans clé d'API. Une carte tierce n'apparaît que sur la fiche site, pour la localisation précise. ### 4.3 Suite de la page d'accueil Dans cet ordre, chacune séparée de 96 px : 1. **Trois circuits mis en avant.** Grille de trois cartes. Photo 3:2, badge jaune de durée, titre, une ligne de parcours (« Lomé → Kpalimé → Kara → Koutammakou »), prix d'appel, lien texte vert « Voir le circuit ». Une seule des trois porte une bordure verte de 2 px et un badge « Le plus réservé ». 2. **Comment ça marche.** Trois étapes numérotées — ici la numérotation est légitime, c'est une vraie séquence : choisir un site ou un circuit, réserver en ligne ou demander un devis, retrouver son guide sur place. Texte court, pas d'illustration. 3. **Bande verte pleine largeur : les guides.** Fond `#0B6D53`, texte blanc. Titre, une phrase, et une rangée de 4 portraits ronds de 88 px avec prénom, région et langues parlées. Action en contour blanc : « Voir tous les guides ». 4. **Avant de partir.** Quatre liens vers les pages pratiques : formalités d'entrée, quand venir, comment circuler, argent et paiement. Présentation en liste bordée, pas en cartes. Ce bloc sert autant le référencement que la levée d'objection. 5. **Pied de page.** Fond `#171512`, texte `#B8B2A6`. Colonnes : régions, circuits, à propos, devenir partenaire. Logo en blanc. Aucune inscription à une infolettre en surcouche. --- ## 5. Écran 2 — fiche site L'écran le plus important. Il doit convertir quelqu'un qui n'a jamais entendu parler d'Explore Togo. **Structure verticale, dans cet ordre exact :** 1. **Hero** — photo unique à fond perdu, 60 vh mobile et 70 vh desktop, calque `#08543F` à 40 %. Badge jaune en haut à gauche portant la région. En bas : nom du site en Anton, puis une ligne de métadonnées en 13 px blanc — classement patrimonial le cas échéant, temps de trajet depuis Lomé, durée de visite conseillée. 2. **Barre d'action collante.** Apparaît au défilement, en bas sur mobile et en haut sur desktop. Fond blanc, bordure supérieure 0,5 px. À gauche « À partir de » plus le prix. À droite le bouton rouge « Réserver ». 3. **Comment y aller.** Trois lignes comparées, chacune avec icône, libellé, durée et coût estimé : avec chauffeur, en transport en commun, en circuit organisé. C'est le bloc différenciant du produit, il vient avant la description. 4. **C'est où.** Carte de localisation de 280 px de haut, marqueur aux cornes, plus trois repères de distance depuis des villes connues. 5. **Quand y aller.** Douze pastilles mensuelles colorées selon trois états — idéal en `#0B6D53`, possible en `#E7F1ED`, déconseillé en `#F2F0EA` — suivies d'une phrase d'explication. 6. **Ce qu'on y fait.** Quatre points maximum, une ligne chacun. Pas de paragraphe. 7. **Offres réservables.** Voir écran 3. 8. **Avis.** Note, nombre d'avis, trois avis développés avec prénom, pays et date. Photos des visiteurs en vignettes carrées. 9. **À combiner avec.** Deux ou trois sites proches, en cartes horizontales. Ce bloc augmente le panier et répond à « j'ai une semaine, je fais quoi ». 10. **Avant de visiter.** Bloc sur fond `#E7F1ED`, bordure 0,5 px. Droit d'entrée, tenue attendue, restrictions de photographie, règles de respect des lieux sacrés. Rédigé sobrement, jamais sur un ton d'avertissement. 11. **Questions fréquentes** en accordéon. --- ## 6. Écran 3 — offres et modèle hybride Deux types d'offres coexistent. **La distinction doit être lisible dès la liste, jamais découverte au moment de payer.** **Offre à confirmation immédiate.** Badge jaune « Confirmation immédiate ». Bouton rouge plein « Réserver ». Concerne les produits standardisés à prix et capacité fixes : journée guidée, guide à la demi-journée, transfert, départ groupé à date fixe. **Offre sur devis.** Badge `#E7F1ED` texte `#08543F` « Sur mesure ». Bouton contour vert « Demander un devis », accompagné en dessous d'une ligne 11 px avec icône horloge : « Réponse sous 24 h ». Concerne les circuits multi-jours, les groupes de six personnes et plus, les dates libres, la logistique nord. Structure commune d'une carte d'offre : badge, titre, ligne de métadonnées (point de départ, durée, langues), puis en pied de carte le prix à gauche et l'action à droite. --- ## 7. Écran 4 — tunnel de réservation immédiate Quatre étapes, avec un indicateur de progression discret en haut. **Aucune création de compte demandée** : le compte se crée automatiquement après paiement à partir du numéro de téléphone. 1. Date, nombre de participants, point de départ. 2. Options : langue du guide, type de véhicule, repas. 3. Coordonnées, dont un numéro WhatsApp présenté comme le canal de contact du guide, pas comme un champ marketing. 4. Paiement. Carte bancaire en premier pour la cible internationale, mobile money ensuite (Mixx by Yas et Flooz, les deux, ils se partagent le marché togolais à 58 / 42). Acompte de 30 % pour réserver, solde sur place — l'afficher clairement, c'est un argument de conversion. **Écran de confirmation :** récapitulatif, photo et prénom du guide, bouton WhatsApp, ajout au calendrier, et un lien « Mon voyage » consultable hors connexion. --- ## 8. Écran 5 — flux devis Quatre états à concevoir. C'est là que la plupart des plateformes perdent leurs clients. 1. **Demande envoyée** — confirmation du délai annoncé, rappel de ce qui a été demandé, canal de réponse. 2. **Devis reçu** — détail ligne par ligne, ce qui est inclus et ce qui ne l'est pas, **date d'expiration visible**, deux actions : accepter, ou demander une modification. 3. **Acompte** — même écran de paiement que l'étape 4 du tunnel immédiat. 4. **Confirmé** — identique à la confirmation de réservation immédiate. Prévoir aussi l'état **devis expiré**, avec relance en un clic. Sans lui, 20 à 30 % des demandes se perdent mécaniquement. --- ## 9. Écran 6 — profil guide Ce que la cible internationale regarde avant de payer. Portrait rond de 120 px, prénom et nom, région d'attache, badge de vérification en `#0B6D53`. Langues parlées en puces. Nombre de sorties réalisées et note. Un paragraphe à la première personne, écrit par le guide, pas un texte marketing. Les sites qu'il couvre. Ses avis. Bouton WhatsApp en contour vert. Bouton rouge « Réserver avec ce guide ». --- ## 10. Utilisation des photos Des photos réelles seront fournies. Règles : - Une seule photo par section, grande, à fond perdu quand c'est possible. - Ratios : 3:2 pour les hero desktop, 4:5 pour les hero mobile, 1:1 pour les vignettes de liste, 3:2 pour les cartes. - Aucun filtre, aucune bichromie, aucune teinte de marque appliquée. La palette est déjà saturée, le traitement photo la rendrait illisible. - Le seul calque autorisé sur une photo est l'aplat `#08543F` de lisibilité. - Chaque photo porte une légende nommant le lieu et la région, en 12 px `#6B6459`. - Privilégier les photos où des personnes sont présentes — guides, visiteurs — plutôt que des paysages vides. Elles convertissent nettement mieux sur ce type de produit. - Prévoir un état de chargement : rectangle `#F2F0EA` aux bonnes proportions, sans animation de miroitement. --- ## 11. Contenu réel à utiliser **Les cinq régions**, du nord au sud, avec leur chef-lieu : Savanes (Dapaong), Kara (Kara), Centrale (Sokodé), Plateaux (Atakpamé), Maritime (Lomé). Grand Lomé est un district autonome au sein de la région Maritime. **Sites par région** — utiliser ces noms, ne pas en inventer : - **Savanes** — Grottes de Nano, cascades de Tantigou, parc national de la Fosse aux Lions, peintures rupestres de Namoudjoga. - **Kara** — Koutammakou, la vallée des Tamberma, inscrite au patrimoine mondial de l'Unesco ; pays kabyè, autour de Pya et Landa ; mont Kabyè. - **Centrale** — parc national de Fazao-Malfakassa, faille d'Aledjo, Sokodé. - **Plateaux** — mont Agou, point culminant du pays à 986 m ; Kpalimé ; cascade de Womé ; cascade d'Akloa près de Badou ; château Viale ; forêt de Kloto ; plateau de Danyi. - **Maritime** — Lomé et son Grand Marché, marché des féticheurs d'Akodessewa, monument de l'Indépendance, Musée national ; Togoville et le lac Togo ; Agbodrafo et la maison des esclaves ; Aného ; plages de Baguida et Avépozo. **Thèmes de filtrage** : culture et vodun, cascades et randonnée, plages et lagunes, faune, patrimoine Unesco. **Ton des textes.** Direct, concret, jamais promotionnel. On nomme les choses plutôt que de les vendre. « 7 h de route depuis Lomé, dernière portion en piste » vaut mieux que « une aventure inoubliable au cœur du Togo authentique ». Les erreurs disent ce qui s'est passé et quoi faire, sans s'excuser. Les états vides sont une invitation à agir, pas un constat de vide. **Prix.** Toutes les valeurs chiffrées de ce brief et des maquettes sont des valeurs de remplissage. Afficher le prix en euros pour la cible internationale, avec l'équivalent en FCFA en dessous et en plus petit. --- ## 12. Qualité minimale exigée - Responsive de 390 px à 1440 px, testé aux deux extrêmes. - Focus clavier visible partout, contraste vérifié, `prefers-reduced-motion` respecté. - Aucun texte en dessous de 12 px. - Zones tactiles de 44 px minimum. - Toutes les pages de contenu sont du HTML réel et indexable, avec une structure d'URL par région et par site. - Aucune donnée stockée dans le navigateur pour les maquettes : l'état vit en mémoire.