Skip to content
Eidos Studio

Chapter 4 · Bespoke website · Prototype

Ordering by the map

A sandwich shop in San Vito Lo Capo whose sandwiches are named after the places around it — Monaco, Zingaro, Uzzo, Makari — and a site that lays them out like the coastline.

Client
Sicilia Bedda
Field
sandwich shop, San Vito Lo Capo
Year
2026
Ordering by the map
Plate I The whole site, scrolling with the page.

The problem

Half tourists, half locals; a twenty-eight-item menu already in two languages; one gesture that matters, messaging on WhatsApp to order. No form, no cart: every extra step costs a sandwich.

What we did

The map was already there: in the sandwich names and in the logo, which is the outline of Sicily. We just used it. You move through the menu like along the coast, from one place to the next, and you never have to look for the WhatsApp button.

In one line

The menu and the coastline are the same index.

  • Ordering by the map — The same screen reduced to its layout: where the eye lands.
    Plate II The same screen reduced to its layout: where the eye lands.
  • Ordering by the map — A quarter of the way down.
    Plate III A quarter of the way down.
  • Ordering by the map — Halfway.
    Plate IV Halfway.
  • Ordering by the map — Three quarters down.
    Plate V Three quarters down.

The measurements

The first screen arrives in 0.32 s1, without a single line of JavaScript2, and the page shifts by 03 while it loads. In all, 1.21 MB4 across 32 requests.

  1. Largest Contentful Paint. Measured on 23 October 2026 on the prototype, 390×844 phone, simulated slow 4G · 1.6 Mbit/s · 150 ms, CPU slowed down 4×. Our limit is 2.50 s. ↩
  2. The prototype is HTML and CSS: scripts arrive when a feature needs them, not before. ↩
  3. Cumulative Layout Shift: how much the page moves while it arrives. Our limit is 0.1; zero means nothing jumps. ↩
  4. Weight after load, images and frames included. ↩

The palette

  • #4f2b14
  • #eee6da
  • #d6c7b7
  • #a7907b
  • #8fa83c

Taken from the pixels of its screens, not from a design file.

The typefaces

Headings
Helvetica Neue
Text
SF Pro