J.Preti— Visual Artist & Creative Developer
CARTE DE RESTAURANT — SITE WEB & APP MOBILE

Terra

La carte de Terra : le plat du moment, figues rôties, brebis et miel de maquis, sur l’ambiance Nocturne
Terra · /menu — accueil
Défiler
ClientTerra Menu
Année2026
RôleSite web & app mobile
01 — Intention

Une carte de restaurant qu’on ouvre à table , sur son téléphone, dans sa langue. Le restaurateur la tient à jour lui-même — plats, photos, prix, traductions — et lui choisit une ambiance .

Le défi — une carte aussi soignée que la salle, lisible sur un téléphone, dans la langue de qui la lit — et que le restaurateur met à jour seul, sans attendre personne.

La réponse — une carte en ligne en quatre langues, trois ambiances, trois typographies, trois mises en page ; un back-office où l’on règle l’apparence, les plats, leurs photos et leurs traductions, ouvert par un code reçu par e-mail.

Next.jsReactTypeScriptResend
02 — ParcoursCapture réelle · 66 s

De la table au back-office

03 — Écrans
01 / 05

La carte

Éditorial : un plat en grand, deux en vis-à-vis, les autres en grille. Une catégorie par onglet ; chaque plat s’ouvre sur sa fiche.

/menu · Entrées & à partager
02 / 05

Galerie

Les photos d’abord, deux par rangée, le nom et le prix sur un voile — en Playfair Display italique.

/menu · Naturel, Élégant, Galerie
03 / 05

Liste

Une ligne par plat : vignette, nom, description, prix. La plus dense des trois mises en page.

/menu · Côtier, Condensé, Liste
04 / 05

Fiche du plat

La photo à gauche, le plat à droite : description, ingrédients, note du chef, provenance, allergènes. Échap ramène à la carte, à la même hauteur.

/menu · Figues rôties, brebis & miel de maquis
05 / 05

Langues

Français, anglais, allemand, espagnol : l’interface change de langue, et les plats avec elle une fois traduits dans le back-office.

/menu · Boissons
La carte — TerraGalerie — TerraListe — TerraFiche du plat — TerraLangues — Terra
/menu · Entrées & à partager/menu · Naturel, Élégant, Galerie/menu · Côtier, Condensé, Liste/menu · Figues rôties, brebis & miel de maquis/menu · Boissons
01 / 05
Planche 01 — deux plats en vis-à-vis, le nom posé sur la photo
04 — Détails
Détail 01 — le plat du moment : son label, son sous-titre, son nom, son prix
Détail 02 — la note du chef, la provenance, les allergènes
Détail 03 — un plat dans le back-office : sa photo, son prix, sa catégorie, son label
Détail 04 — la connexion : un code à six chiffres reçu par e-mail, valable dix minutes
05 — Ambiances
Nocturne · MinimalNaturel · Élégant
Naturel · Élégant — TerraNocturne · Minimal — Terra
La même carte, deux réglages du back-office : l’ambiance et la typographie changent, la mise en page reste.
06 — Charte de la carte
Nocturne
#181512fond
#201C18cartes
#252018panneaux
#F0EDE6texte
#9A9288texte 2
#3A3530filets
#D4956Aaccent
Naturel
#ECEBE5fond
#F6F3EEcartes
#FAF8F3panneaux
#1C1916texte
#8A8278texte 2
#D4CEC6filets
#C4855Aaccent
Côtier
#EDF2F0fond
#F4F8F6cartes
#F9FCFApanneaux
#1A2422texte
#70888Atexte 2
#BDD0CCfilets
#4A8C78accent
Typographie
Terra
Le nom — Barlow Condensed 900, capitales, quelle que soit la typographie choisie
Loup de mer en croûte de sel 36 €
Condensé — Barlow Condensed 900 en capitales, le prix en 700 italique
Tataki de thon rouge, agrumes & sésame noir 28 €
Élégant — Playfair Display italique, le prix en 700
Figues rôties, brebis & miel de maquis 18 €
Minimal — DM Sans 600, −0,025 em, le prix dans la même graisse
Figues de Corse rôties au four, fromage de brebis affiné, miel de maquis AOP, noix torréfiées, roquette sauvage.
Texte courant — Barlow 300 (DM Sans en Minimal)

Trois typographies au choix du restaurateur pour les noms des plats et les prix ; le nom du restaurant reste en Barlow Condensed. Toutes servies par la carte elle-même : aucune requête vers Google à l’ouverture.

07 — Téléphone
Carte — Nocturne, Éditorial
Fiche du plat
Côtier, Condensé — la liste
Naturel, Élégant — la galerie, les langues
08 — Back-office
La Carte — les 22 plats, filtrés par catégorie ; un clic ouvre le plat
Un plat — photo, prix, catégorie, label, description, provenance, allergènes, ingrédients, note du chef, traductions
Réglages — nom, sous-titre, ambiance, typographie, mise en page
Connexion — un code à six chiffres reçu par e-mail
01 / 04
PlatsAjoutés, modifiés, retirés ; la photo s’envoie par glisser-déposer, ou par son adresse
TraductionsAnglais, allemand, espagnol, champ par champ, sous le texte français
ApparenceTrois ambiances, trois typographies, trois mises en page : vingt-sept cartes possibles
AccèsUn code à six chiffres envoyé par e-mail, valable dix minutes, cinq essais ; aucun lien vers l’administration sur la carte
09 — Crédits
Direction artistique et développementJulien Preti
LivrablesCarte en ligne en quatre langues, back-office, connexion par code e-mail
OutilsNext.js, React, TypeScript, Resend
RestaurantTerra, restaurant de démonstration : une carte d’exemple
Photographies des platsUnsplash