Aller au contenu
wasabi web designDevis gratuit

Étude de cas · Création de site

O’18 : le site d’un fast-food de Lorient, en affiche street-food

Un site vitrine fait main pour un fast-food fait maison : une direction affiche street-food, une performance mesurée et du SEO local, sans CMS ni cookies.

Le site O’18 affiché sur un ordinateur portable
Client
O’18, Lorient
Prestation
Création complète
Mise en ligne
Juillet 2026
Stack
Site statique · o2switch
Lighthouse mobile
99100 en accessibilité, bonnes pratiques et SEO, le 4 octobre 2026
Décalage visuel
0CLS 0 · TBT 0 ms, sur mobile
Adresses au plan du site
26Pages, piliers locaux et articles du blog

01 Point de départ

Le défi

O’18 venait d’ouvrir et n’avait pas de site : une carte qui évolue, des horaires qui changent, et des clients qui cherchent sur mobile. Il fallait une présence en ligne rapide à charger, simple à tenir à jour et visible sur les recherches locales à Lorient.

  • Un restaurant qui venait d’ouvrir, sans site
  • Une carte et des horaires qui changent
  • Une visibilité locale à construire

02 Direction artistique « Affiche street-food »

Un fast-food en affiche de rue.

Le site emprunte aux affiches collées dans la rue : titres serrés en Bebas Neue, bleu marine et jaune, bordures d’encre et ombres dures décalées, comme du papier imprimé posé de travers. Les étiquettes penchent, les sections se suivent par des bords déchirés, un ruban défile sous l’accueil, et le pied de page souhaite « Bon appétit » en lettres géantes. Derrière l’affiche, un site statique : la carte et les horaires sortent d’un seul fichier, et le badge « Ouvert maintenant » se calcule sur les horaires réels.

  • Site statique fait main, sans CMS
  • Carte et horaires générés depuis une source unique
  • Données structurées et blog SEO local

La palette

  • Bleu marine#0B2A6BCouleur principale
  • Jaune#F5C518Accent, prix, étiquettes
  • Crème#F6EEDCFond clair
  • Crème chaude#EBDFC0Sections alternées
  • Encre#0E0E0EBordures, ombres, pied de page
  • Marine profond#071A46Fonds sombres

Les typographies

  • Bebas Neue · Titres

    Une seule graisse, des capitales serrées

  • Archivo Narrow · Étiquettes et boutons

    Graisse 700 en capitales ; le texte courant est en Archivo

Le décodeur

Chaque fonction du site a sa forme. En petit, ce qu’elle fait ; en gros, comment le site la présente.

  • Détail du site O’18 : l’affiche Détail du site O’18 : l’affiche
    Sur le site · La page d’accueil L’affiche Chaque plat vedette a son affiche : nom en lettres géantes, prix en étiquette penchée, numéro fantôme en fond, et « Fait maison · Produit frais » qui tourne autour de l’assiette.
  • Détail du site O’18 : les trois règles Détail du site O’18 : les trois règles
    Sur le site · Les engagements Les trois règles Produit frais, fait minute, sauces maison : trois cartes bordées d’encre, à l’ombre dure, légèrement de travers.
  • Détail du site O’18 : les onglets et les prix Détail du site O’18 : les onglets et les prix
    Sur le site · La carte Les onglets et les prix Un onglet par famille, chaque plat numéroté, son prix en menu et seul sur des étiquettes jaunes.
  • Détail du site O’18 : le panneau du midi Détail du site O’18 : le panneau du midi
    Sur le site · La formule du midi Le panneau du midi Trois formules en lignes, le prix d’appel en très grand, et « MIDI » répété en filigrane.
  • Détail du site O’18 : les polaroïds Détail du site O’18 : les polaroïds
    Sur le site · L’histoire Les polaroïds L’histoire du lieu, et deux plats en polaroïds posés de travers, avec leur étiquette « Depuis 2026 ».
  • Détail du site O’18 : le panneau bleu Détail du site O’18 : le panneau bleu
    Sur le site · Le contact Le panneau bleu « Une question ? Écrivez-nous » : le téléphone, l’adresse et le formulaire sur un panneau bleu marine.
  • Détail du site O’18 : le mot de la fin Détail du site O’18 : le mot de la fin
    Sur le site · Le pied de page Le mot de la fin « Bon appétit à Lorient » en lettres géantes, jaune et crème sur l’encre.

03 La visite

Visitez le site, page par page

Choisissez une page : elle s’affiche en entier, sur ordinateur et sur téléphone. Faites défiler chaque écran pour la parcourir.

Page à afficher
Accueil du site O’18 sur ordinateur, capture de la page entière
Accueil du site O’18 sur téléphone, capture de la page entière

Accueil. L’affiche du plat vedette, les trois règles, la carte en entier, la formule du midi, l’histoire, l’accès et les questions fréquentes.

Page pilier du site O’18 sur ordinateur, capture de la page entière
Page pilier du site O’18 sur téléphone, capture de la page entière

Page pilier. Smash burger à Lorient : la technique, le tableau des six burgers, où les déguster, et les articles pour aller plus loin.

Les actus du site O’18 sur ordinateur, capture de la page entière
Les actus du site O’18 sur téléphone, capture de la page entière

Les actus. Les articles en cartes bordées d’encre, chacun avec son étiquette de rubrique.

Article du site O’18 sur ordinateur, capture de la page entière
Article du site O’18 sur téléphone, capture de la page entière

Article. C’est quoi, un smash burger ? L’essentiel en résumé coché, puis la technique expliquée.

Contact du site O’18 sur ordinateur, capture de la page entière
Contact du site O’18 sur téléphone, capture de la page entière

Contact. Nous trouver : le plan du quartier, les horaires, l’accès, puis le formulaire.

04 Méthodologie

L’approche en 5 étapes

  1. Cadrage

    Identité, arborescence et charte définies avec le client.

  2. Maquette

    Direction affiche street-food : typographies fortes, visuels des plats.

  3. Dev

    Site statique HTML, CSS et JavaScript natif, sans CMS.

  4. SEO

    Données structurées, pages piliers locales et blog maillé.

  5. Lancement

    Déploiement sur o2switch et suivi d’indexation.

Très satisfait des deux sites réalisés pour mes entreprises. Sébastien a bien compris nos besoins, le rendu est moderne et nos clients nous trouvent facilement en ligne.

O’18Fast-food fait maison, Lorient

Ouvert à de nouveaux projets

Et si c’était le vôtre ?

Parlez-moi de votre activité : je vous envoie sous 48 h un devis gratuit et des recommandations concrètes pour vous lancer.

SébastienFondateur de Wasabi Web Design, à Arras