Capitolo 3 · Sito su misura · Prototipo
Aperto adesso
Il negozio di frutta e verdura di Lillo e Sonia, con il salad bar: dal banco del mattino al frullato del pomeriggio, e in testata, sempre, se sono aperti.
- Cliente
- Fruttaland
- Settore
- frutta, verdura e salad bar
- Anno
- 2026
Il problema
Fruttaland vende la stessa merce in due modi: la spesa, dove conta sapere cosa c’è e se si fa in tempo, e il banco fresco, che si sceglie d’impulso. Online esisteva solo una pagina Facebook, che non rispondeva a nessuna delle due domande.
Cosa abbiamo fatto
Il sito segue la frutta: «il frullato che bevi era nel banco stamattina». Un girato fa da fondale a tutta la pagina, dal cassone al bicchiere. Quello che serve a chi è per strada — aperto adesso, a che ora chiude, scrivi su WhatsApp — non scorre via: resta in testata dall’inizio alla fine.
In una riga
«Siete aperti?» ha sempre una risposta in vista.
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,55 s1, senza una riga di JavaScript2, e mentre carica la pagina si sposta di 0,0843. In tutto sono 2,54 MB4, in 102 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
- #2d1a31
- #4a3c4d
- #6b6247
- #ece6f5
- #c7a6ff
Presa dai pixel delle sue schermate, non da un file di progetto.
I caratteri
- Titoli
- Bricolage Grotesque
- Testo
- Public Sans