Capitolo 4 · Sito su misura · Prototipo
Ordinare con la cartina
Una paninoteca a San Vito Lo Capo con i panini che si chiamano come i posti intorno — Monaco, Zingaro, Uzzo, Makari — e un sito che li dispone come sulla costa.
- Cliente
- Sicilia Bedda
- Settore
- paninoteca, San Vito Lo Capo
- Anno
- 2026
Il problema
Metà clienti turisti, metà residenti; un menu di ventotto voci già in due lingue; un solo gesto che conta, scrivere su WhatsApp per ordinare. Niente form, niente carrello: ogni passaggio in più è un panino in meno.
Cosa abbiamo fatto
La mappa c’era già: nei nomi dei panini e nel logo, che è la sagoma della Sicilia. L’abbiamo solo usata. Il menu si percorre come la costa, da un luogo all’altro, e il bottone di WhatsApp non bisogna mai cercarlo.
In una riga
Il menu e il territorio sono lo stesso indice.
Tav. II La stessa schermata ridotta allo schema: dove cade l’occhio. 
Tav. III A un quarto della pagina. 
Tav. IV A metà. 
Tav. V A tre quarti.
Le misure
La prima schermata arriva in 0,32 s1, senza una riga di JavaScript2, e mentre carica la pagina si sposta di 03. In tutto sono 1,21 MB4, in 32 richieste.
- Largest Contentful Paint. Misurato il 23 ottobre 2026 sul prototipo, telefono 390×844, 4G lento simulato · 1,6 Mbit/s · 150 ms, CPU 4× rallentata. Il nostro limite è 2,50 s. ↩
- Il prototipo è HTML e CSS: lo script arriva quando serve una funzione, non prima. ↩
- Cumulative Layout Shift: quanto si sposta la pagina mentre arriva. Il nostro limite è 0,1; zero vuol dire che niente salta. ↩
- Peso dopo il caricamento, immagini e fotogrammi compresi. ↩
La tavolozza
- #4f2b14
- #eee6da
- #d6c7b7
- #a7907b
- #8fa83c
Presa dai pixel delle sue schermate, non da un file di progetto.
I caratteri
- Titoli
- Helvetica Neue
- Testo
- SF Pro