Site internet pour un restaurant qui vivait sur Instagram : Holy
Une sandwicherie dont toute l'identité vivait sur Instagram. On a repris sa palette, son lettrage et sa voix pour en faire un site qui lui ressemble, jusqu'à un burger qui se déplie au scroll et un tableau de bord qui parle de coups de fil. Voir holy-belleile.fr
Le client : une sandwicherie qui fait vraiment tout elle-même
Holy, c'est de la restauration rapide qui refuse le raccourci : les pains sont pétris et cuits sur place tous les jours, les steaks sont frais, le steak végé est maison, la panure du poulet est maison, et les huit sauces aussi. À la carte, des sandwichs qu'on compose soi-même, des smash burgers, des pizzas romaines façonnées à la main, des frites maison. Une reprise d'établissement, avec une équipe qui vient d'arriver et qui a envie qu'on le sache.
- L'équipe se présente par ses surnoms, pas par des fiches de poste : le gérant, le chef, celui qui invente les recettes, celle qui ne laisse rien passer. Sur un lieu comme celui-là, les gens reviennent pour des personnes autant que pour un burger.
- Le fait maison descend jusqu'à l'ingrédient, y compris là où personne ne regarde : le pain de la veille est récupéré pour faire la panure. C'est l'argument central du lieu, et il ne se résume pas en un slogan.
- Le ton du lieu est décalé et franc, du genre à préciser sur sa carte qu'il n'a pas de poulailler, désolé. Un site trop lisse aurait effacé exactement ce qui fait qu'on s'en souvient.
- La commande se prend au téléphone, en plein service. Tout ce que le site a à faire, c'est amener au bon plat, puis au bouton d'appel, sans étape en trop.
La direction artistique : leur identité, pas la nôtre
Holy avait déjà une identité forte, dessinée sur ses visuels de réseaux sociaux : un lettrage rond, du vert, du crème, du rouge corail, des contours noirs épais. On n'a rien plaqué par-dessus. On a échantillonné leurs propres couleurs et cherché la typographie qui prolonge leur lettrage, puis on a construit le site autour.
-
Une palette relevée sur leurs visuels, pas choisie dans un nuancier
- Ce qu'on voit
- Cinq couleurs, toutes reprises de leur communication existante : le crème du fond de carte, le vert du logo, le rouge corail des titres, le jaune du cheddar et des frites, et un noir profond pour les contours. Les sections alternent ces fonds au fil de la page, crème, crème plus dense, noir, vert plein.
- Pourquoi ça lui va
- Un client qui suit le restaurant sur les réseaux et qui arrive sur le site doit se sentir au même endroit, sans avoir à le vérifier. Reprendre les couleurs du lieu plutôt qu'en proposer de nouvelles, c'est ce qui fait que le site est reconnu avant d'être lu.
- #f7ead0 Crème fond des cartes de la carte
- #1a1714 Noir contours épais, ombres dures et texte
- #2f9e44 Vert le vert du logo, fonds pleins et liens actifs
- #e8472b Rouge corail titres, boutons d'appel et pastilles
- #f4ba1b Jaune accent cheddar et frites, chiffres mis en avant
La palette du site, relevée sur les pages en ligne. -
Un lettrage rond et rebondi pour les titres, du texte sobre en dessous
- Ce qu'on voit
- Les grands titres sont dans une seule police, ronde et joueuse, avec une seule graisse. Les sous-titres passent dans une grotesque très noire, et le texte courant dans une sans serif neutre. Trois familles, chacune à sa place, aucune ne déborde sur le rôle de l'autre.
- Pourquoi ça lui va
- Une carte de sandwicherie s'annonce en gros et se lit en petit. Le titre doit avoir l'énergie d'une devanture, la ligne de plat doit rester froidement lisible dans la rue, sur un téléphone, en pleine lumière. Mettre la police joueuse partout aurait été charmant deux minutes et illisible ensuite.
-
Chewy
grands titres, une seule graisse
Compose ton sandwich
-
Bricolage Grotesque
sous-titres et éléments d'interface
Le concept maison
-
Inter
texte courant
Pain pétri et cuit maison, frais du jour.
Spécimen composé dans la police du site, réglages compris. Selon ta machine, le navigateur peut lui substituer la police de repli prévue. -
L'esthétique autocollant : trait noir épais, ombre dure, coins ronds
- Ce qu'on voit
- Chaque bloc du site est une carte crème posée sur un trait noir de trois pixels, avec une ombre décalée sans aucun flou, comme un autocollant collé sur la page. Les boutons sont des pilules qui s'enfoncent vraiment quand on appuie dessus.
- Pourquoi ça lui va
- C'est la grammaire visuelle de leurs affiches, transposée à l'écran. Elle a un effet secondaire utile : une zone cliquable entourée d'un trait noir épais et d'une ombre franche se repère au premier coup d'oeil, y compris par quelqu'un qui tient son téléphone d'une main en marchant.
-
Ombre dure
Aucun flou, décalage franc de six pixels : la carte a l'air posée sur la page, comme un autocollant. C'est celle du site de Holy.
-
Ombre floue
Le repoussoir, pour comparer : le flou fait glisser la carte vers le vocabulaire des applications et efface le trait de contour.
L'ombre du site, à sa couleur et à son décalage réels. Survole l'échantillon de gauche. -
Photos réelles quand elles existent, dessin assumé quand elles manquent
- Ce qu'on voit
- Le site mélange deux registres : les vraies photos du restaurant, et une série d'icônes dessinées à contour noir, une par famille de produit. Là où il manque une photo, on affiche une tuile colorée avec son icône, et jamais une image de banque.
- Pourquoi ça lui va
- Sur un site de restaurant, une photo générique de burger sous éclairage de studio se repère instantanément et abîme la confiance. Un dessin assumé, lui, ne prétend pas être une photo du lieu. Et le jour où le restaurant prend une vraie photo, elle remplace la tuile sans rien casser.
Quand la photo existe
Une vraie photo, prise au restaurant.
Quand elle manque
Une tuile de leur vert, avec l'icône dessinée de la famille de produit. Jamais une image de banque.
-
Tout est légèrement de travers, exprès
- Ce qu'on voit
- La photo du hero est dans un cadre incliné, la pastille « 100% maison » penche dans l'autre sens, deux icônes débordent du cadre, et le mot « faits maison » du titre est contouré en corail.
- Pourquoi ça lui va
- Une grille parfaitement d'aplomb dit sérieux et administratif. Ici on vend du fait main, joyeux et un peu bordélique. Trois degrés d'inclinaison suffisent à faire passer le message avant qu'on ait lu un mot.
holy-belleile.fr
Ouvrir holy-belleile.fr
Pourquoi ce projet existe
Avant le site, toute la présence en ligne de Holy tenait dans un fil Instagram et une page Facebook. La carte y était publiée en photo, plusieurs fois, à plusieurs mois d'écart. Un client affamé devait faire défiler des semaines de publications pour savoir si le burger végé existait toujours, et à quel prix.
- Un fil de réseau social n'a pas de page carte. Il a une carte publiée au printemps, une autre en été, et un client qui ne sait pas laquelle est vraie.
- Le fait maison est l'argument qui justifie les prix du lieu. Noyé entre deux photos de service, il ne se lit plus. Sur un site, il peut être écrit à sa place, produit par produit.
- Le restaurant recevait des appels pour des questions déjà répondues cent fois : c'est ouvert ? c'est vraiment fait maison ? c'est quoi vos pizzas ? Chaque réponse écrite sur le site est un appel de moins pendant le service.
- Le gérant n'avait aucun moyen de savoir ce que le site lui rapportait, et n'avait pas envie d'apprendre à lire un outil d'analyse d'audience pour le découvrir.
Les détails qui font la différence
Voici les 9 touches qu'un modèle de site acheté sur étagère n'aurait jamais produites pour Holy, parce qu'elles ne se déduisent pas d'un secteur d'activité : elles se déduisent d'une conversation avec quelqu'un qui connaît son métier.
-
Leur burger de marque se déplie tout seul quand on descend la page
Le restaurant avait une affiche montrant un burger en coupe, étage par étage. On l'a découpée en neuf couches, et on a mesuré la position réelle de chacune sur le fichier d'origine pour pouvoir les empiler exactement comme dans le dessin. Quand la section arrive à l'écran, le burger se déplie du pain du bas vers le haut, au rythme des trois étapes du « compose ton sandwich » posées à côté. Ce n'est pas une animation achetée sur étagère : c'est leur propre visuel, remis en mouvement. Sans JavaScript, ou pour quelqu'un qui a demandé à son téléphone de réduire les animations, le burger reste affiché déplié et parfaitement lisible.
- Pain du bas
- Steak smashé
- Cheddar
- Rondelles d'oignon
- Tomate, tranche basse
- Tomate, tranche haute
- Salade
- Oignons frits
- Pain du haut
Les 9 couches, de la base au sommet. -
Le numéro de téléphone est un bouton, sur chaque écran, tout le temps
Il est collé en haut du site en corail, il est dans le hero, il est en bas de la carte, en bas des spécialités, sur la page de l'événement d'été, et dans le pied de page. Nulle part il n'est écrit en petit à côté d'un pictogramme d'enveloppe. Quand la commande se prend à la voix, le bouton d'appel n'est pas un élément de contact parmi d'autres, c'est la conversion.
-
Un avis client posé juste en face du plat dont il parle
Les avis ne sont pas parqués dans une section « ils nous font confiance » en bas de page. Celui qui parle des frites est dans la section des frites, celui qui parle du burger est dans la section des burgers. La note et les avis récents sont récupérés chez Google au fil de l'eau, avec une sélection de secours au cas où le service ne réponde pas, pour qu'une panne chez un tiers ne laisse jamais un trou dans la page.
-
« Ouvert maintenant », calculé à l'heure du restaurant
L'indication d'ouverture est calculée sur le fuseau horaire français, pas sur celui du visiteur. Un détail invisible en France, décisif pour un touriste qui consulte le site avec un téléphone encore réglé sur son pays de départ : il verra l'état réel de la cuisine, pas une soustraction fausse de deux heures.
-
La carte se lit comme une carte, pas comme un catalogue en ligne
Le sommaire est une rangée de pastilles qui reste collée sous l'en-tête pendant qu'on descend, chacune avec l'icône dessinée de sa catégorie. Les lignes de plat sont reliées à leur prix par des points de conduite, comme sur un menu imprimé. Et quand un prix n'est pas connu avec certitude, la ligne affiche « en magasin » plutôt qu'un chiffre inventé ou un blanc.
-
Deux versions du texte, une pour le pouce, une pour le bureau
Les trois étapes de composition ont chacune deux formulations : la version longue sur grand écran, une version raccourcie sur téléphone. Personne ne le remarquera jamais, et c'est précisément le but : sur mobile, la phrase tient sur une ligne au lieu de trois, et l'étape suivante reste visible.
Grand écran
Bœuf, poulet pané, steak végé… avec tes légumes frais.
Téléphone
Bœuf, poulet pané, steak végé.
-
Le menu mobile fonctionne sans une ligne de JavaScript
Il s'ouvre, il se ferme, le pictogramme se transforme en croix, et le lecteur d'écran suit. Le site n'a besoin de JavaScript qu'à un seul endroit, le burger qui se déplie. Conséquence concrète : sur un réseau de bord de mer qui rame, la navigation répond avant la fin du chargement.
-
Un tableau de bord privé qui parle restauration, pas statistiques
Le gérant a une page à lui, habillée exactement comme le site du restaurant, pas comme un panneau d'administration greffé dessus. Elle ne lui annonce pas des sessions ni un taux de rebond : elle lui dit combien d'appels sont partis du site, combien d'itinéraires ont été demandés, combien de fois la carte a été ouverte. Les indicateurs sont rangés par ordre d'importance pour un restaurateur, les appels en premier. Chaque matin, un point de la veille est rédigé automatiquement en français courant, et quand quelque chose bloque, un bouton « demander à alysis » ouvre directement la discussion avec l'atelier. Elle s'installe sur l'écran d'accueil de son téléphone comme une application.
-
Même les messages d'erreur sont rassurants
Si le tableau de bord n'arrive pas à récupérer les chiffres, il n'affiche pas un code d'erreur : il explique que le site public fonctionne normalement, et que c'est uniquement le tableau de bord qui est aveugle. Un restaurateur qui voit une erreur sur son site en plein service a le droit de savoir en une phrase si ses clients sont impactés.
Ce qu'on a adoré sur ce projet
Ce projet nous a laissé de bons souvenirs, et pas ceux qu'on attendait.
-
Découper leur affiche en neuf morceaux
Ouvrir leur visuel de burger, l'éplucher couche par couche, mesurer où se pose exactement chaque tranche pour que rien ne flotte, c'est le genre d'après-midi méticuleux et un peu absurde qu'on adore. Le résultat n'appartient qu'à eux, parce qu'il est fait de leur propre dessin.
-
Écrire dans leur voix plutôt que dans la nôtre
On a gardé leurs formules, y compris les plus improbables, et on a retenu une vanne en trois lignes dans le pied de page. Un site de restaurant qui fait sourire deux secondes est plus fidèle qu'un site parfaitement neutre.
-
Descendre le fait maison jusqu'à la panure
L'anti-gaspi du pain récupéré pour paner le poulet ne figurait nulle part dans leur communication. C'est pourtant l'histoire la plus convaincante du lieu. La sortir d'une conversation de cuisine pour la mettre sur une page, c'est exactement notre travail.
-
Voir le gérant regarder ses appels plutôt que ses pages vues
Construire un tableau de bord dont le premier chiffre est le nombre de coups de fil partis du site, et le faire tenir dans les couleurs du restaurant, ça change complètement la nature de la conversation qui suit.
Ce qu'on n'a pas fait, et pourquoi
Un site se juge autant à ce qu'il refuse qu'à ce qu'il contient. Chaque fonctionnalité en plus est une chose de plus à comprendre pour le visiteur, et une promesse de plus à tenir pour Holy. Voici ce qu'on a écarté, et ce qui nous ferait changer d'avis.
-
Pas de commande en ligne ni de réservation de table.
Le service se prend au téléphone. Une commande qui tombe dans une tablette que personne ne regarde en plein coup de feu fabrique des clients en colère et abîme la réputation qu'on essayait de construire. Le site amène donc à l'appel. Le jour où le besoin devient réel, c'est un ajout à prix fixe, annoncé d'avance sur la page des prix, et non une refonte.
-
Pas de formulaire de contact.
Un formulaire crée une boîte de réception à surveiller, et une attente de réponse. Sur un lieu où l'on décroche pendant le service et pas le soir, promettre un canal écrit qu'on ne relèvera pas aurait été une mauvaise promesse. La page contact donne l'essentiel, les horaires, le numéro et l'itinéraire.
-
Pas de flux de réseau social embarqué dans la page.
Une galerie qui recharge en direct les dernières publications alourdit chaque visite, casse le jour où la plateforme change ses règles, et déporte l'attention hors du site. On montre une sélection d'images, et on renvoie vers le compte pour la suite.
-
Pas de dates figées pour l'événement d'été.
Les dates changent chaque saison. Un site qui affiche celles de l'an dernier ment à ses visiteurs. La page annonce l'événement, précise que les dates se confirment chaque année, et renvoie au compte du restaurant pour le détail.
-
Pas de photo pour chaque produit.
Prendre soixante photos correctes de plats demande une vraie séance, en dehors du service. En attendant, une tuile colorée avec son icône dessinée dit honnêtement ce qu'elle est. Les photos arrivent au fil du temps et remplacent les tuiles une par une.
Le site est en ligne
Le meilleur moyen de juger ce travail est de l'ouvrir sur ton téléphone.
holy-belleile.fr