Un barbier, cinq directions de design complètes : Classique, Sombre, Street, Minimal et Suisse. Changez en direct, d’un clic ou avec une flèche du clavier, et toute la marque change de visage sans perdre le parcours de conversion. Une démo faite de ma propre initiative pour montrer l’étendue de la direction artistique sur une seule page.
01 / LE PROBLÈME
« Montrez-moi un exemple » : la question qui bloque le projet.
Quand un commerce de quartier demande une landing page, la discussion bute sur le goût. Le gérant n’arrive pas à décrire le style qu’il veut, et trois références Pinterest ne tranchent rien : chacun imagine autre chose. Résultat : une série de retouches qu’on pourrait éviter si l’on voyait la même page dans plusieurs styles, côte à côte.
J’ai pris un barbier fictif, Navalha, et j’ai construit cinq directions artistiques complètes de la même landing pour régler exactement ça : s’accorder sur le goût avant de produire.
02 / L’APPROCHE
Même structure, cinq habillages.
La règle que je me suis fixée : le parcours de conversion ne change pas. Accroche, prestations avec prix, galerie, équipe, témoignages et contact avec bouton WhatsApp apparaissent dans les cinq styles, dans le même ordre. Ce qui change, c’est la direction artistique : typographie, palette, rythme, ornements.
Classique, c’est du sépia et un serif vintage. Sombre, du noir et or, haut de gamme. Street, de l’orange néon, un fort contraste, des lettres géantes. Minimal, du noir sur blanc avec beaucoup d’air. Suisse, une grille et de fins filets rouges avec des prestations numérotées. Cinq marques, une seule anatomie de conversion.
03 / LA RÉALISATION
Changement instantané, sans framework, une seule page.
Sélecteur en direct. Un sélecteur fixe en bas change le style instantanément, au clic ou à la flèche du clavier. Chaque direction est une fonction qui renvoie le HTML complet de la page ; changer, c’est un nouveau rendu plus un retour en haut. Pas de rechargement, pas de clignotement.
Cinq polices avec du caractère. Fraunces pour Classique, Bebas Neue pour Sombre et Street, une sans-serif pour Minimal, du gras pour Suisse. La police porte la moitié de l’identité ; j’ai choisi chacune pour tirer le style dans une direction différente.
La conversion préservée partout. Un prix pour chaque prestation, un bouton de réservation WhatsApp, et le contact avec adresse et horaires apparaissent dans les cinq, parce que changer de style ne doit jamais coûter la conversion.
C’est un seul fichier HTML avec Tailwind et un peu de JS natif. Pas de build, pas de back-end : on l’ouvre et ça marche.
04 / RÉSULTAT
Cinq propositions sur un écran, le goût tranché en un clic.
La démo devient un outil de vente : au lieu d’envoyer des maquettes éparses, j’ouvre Navalha avec le client et je change de style devant lui. En quelques secondes, il montre ce qui lui plaît, et le projet démarre avec la direction artistique déjà décidée.
Cinq directions complètes, six sections et six prestations avec prix, sur une seule page qui change de visage sans perdre le parcours de conversion. L’étendue en design se prouve en direct au lieu de se promettre.
Directions
5
Sections
6
Prestations
6
Fichier
1 HTML
