Retour à l’accueil
Landing page
Maquette exemple
2026
Nekomichi
Nekomichi est une maquette exemple : un izakaya imaginaire à Rouen, dont l’identité, le site et la campagne d’affichage ont été conçus en solo. Un site Framer d’une page en trois formats, une carte complète consultable en ligne et des animations faites sur mesure.
Le contexte : un bar de quartier à faire découvrir
Nekomichi est un projet de démonstration, réalisé en solo en 2026. La marque est fictive : un izakaya, le bar japonais où l’on s’arrête après le travail, imaginé à Rouen. Un restaurant de quartier a besoin d’un site qui donne envie de pousser la porte, qui montre la carte sans PDF illisible et qui affiche ce que la loi demande à un restaurant.
L’objectif : une démonstration pour les commerces de bouche
Le projet montre ce qu’un site peut apporter aux restaurants, bars et commerces de bouche : une identité, un site Framer d’une page en trois formats (ordinateur 1440, tablette 810, téléphone 390), une carte complète consultable sur le site et téléchargeable en PDF, et une campagne d’affichage avec un panneau et deux affiches.
Maquette web
La direction artistique : un bar de quartier
Plutôt qu’un décor de carte postale, un bar de quartier. Le nom est traduit en 猫道, « le chemin du chat », et sert de logo. Une mascotte, un chat dessiné en SVG, est réservée aux fonds vert, noir ou crème. La palette associe un rouge franc, le noir, le crème et le vert, avec des photos de salle et de plats. Dela Gothic One porte les titres et Zen Kaku Gothic New le texte, deux polices Google Fonts.
Des animations faites sur mesure
Les animations sont des composants de code React créés pour le projet : un rideau noren qui se lève à l’ouverture, une carte en wagons qui défile à l’horizontale au scroll, un texte de présentation qui passe du gris au noir, un bouton Réserver en anneau qui tourne en continu et des avis en polaroïds qui défilent en boucle.
Parcours mobile
Les difficultés rencontrées
Trois points demandaient une attention particulière : faire défiler la carte à l’horizontale sans la tronquer sur téléphone, garder des animations accessibles, et afficher les obligations d’un restaurant sans alourdir la page.
Les solutions apportées
Le composant de la carte mesure sa propre largeur et passe en version compacte sous 600 px. Les animations sont coupées quand l’appareil demande moins de mouvement, les boutons sans texte ont un nom accessible, et un filtre rouge assure le contraste du texte sur la photo de l’accueil. Les allergènes, l’avertissement sur l’alcool, les horaires et les moyens de paiement avec leurs logos officiels figurent sur la page. Les avis sont inventés et signalés comme fictifs.
La carte en wagons
Aperçus
Souvenirs de table
Accueil sur mobile
Page d’accueil complète
Retour aux projets
