P3 · L'indice dei lavori Proposta di direzione, non il sito: testi campione, niente copy definitivo.
01

Identità

Proposta di direzione, non il sito

Misure reali; in una finestra stretta le più grandi si riducono per restare intere.

  • sfondo · carta #F4F2EC · 82% della superficie
  • testo #111312 · 16.66:1 sulla carta
  • primario · inchiostro #111312 · bottoni e una sola banda (8%)
  • su primario #0EF617 · 12.63:1, solo su #111312
  • secondario · filetti #D9D6CE · linee e riga attiva (8%)
  • accento · link e cifre #0A7A12 · 4.93:1 (2%)
  • testo secondario #5E5F61 · 5.71:1, mai su #D9D6CE
display · Mona Sans 700, stretch 87.5% · clamp(2.5rem, 1.5rem + 4vw, 6rem) · 700 Indice dei lavori
titoli · Mona Sans 700 · clamp(1.25rem, 1rem + .6vw, 1.5rem) · 700 Titolo di cella
cifre · Mona Sans 700 tabulari · clamp(2rem, 1.5rem + 2vw, 3rem) · 700 1.240
corpo · Atkinson Hyperlegible Next 400 · 1rem · 400 Testo di esempio, una riga leggibile.
etichette · Atkinson Hyperlegible Next 500 · 0.875rem · 500 LUOGO · ANNO · ESEMPIO

Nome nella barra · Mona Sans 800, stretch 75%, 1rem

Marketing Hackers

Display · stretch 87.5%

Indice dei lavori

Trama · griglia a punti 8px

Piede di pagina · il nome a tutta larghezza della griglia · esempio

Marketing Hackers
02

Navigazione

Proposta di direzione, non il sito
Italia · esempioAudit gratuito a voce
Marketing Hackers
Italia · esempio Audit gratuito a voce
Marketing Hackers
03

Bottoni e link

Proposta di direzione, non il sito
Riposo
Link all'indice
Hover
Link all'indice
Focus
Link all'indice
Disabilitato
Link non attivo
04

Card e righe

Proposta di direzione, non il sito
Card
Schermata di esempio: blog di viaggio

Blog · Estero · 2024 · esempio

Diario d'isola

+38%

richieste dal sito · gen–giu 2026 · fonte: Google Analytics · esempio

Apri la cella
Riga di elenco

Passa o metti il fuoco su una riga: la tavola cambia lavoro. Le pillole filtrano per luogo. Lavori di esempio.

Schermata di esempio: sito di un tour operator
Viaggi in quotaSito · Estero · 2025 · esempio
Riga di tabella

Piani · prezzi di esempio, non un listino

Voce Base290 €/meseCrescita590 €/mesePro990 €/meseSu misura1.490 €/mese
Sito a celle
Pagine per luogo
Rapporto mensile
Audit a voce
Revisione trimestrale

  • Base290 €/mese

    • Sito a celle
    • Pagine per luogo
    • Rapporto mensile
    • Audit a voce
    • Revisione trimestrale

  • Crescita590 €/mese

    • Sito a celle
    • Pagine per luogo
    • Rapporto mensile
    • Audit a voce
    • Revisione trimestrale

  • Pro990 €/mese

    • Sito a celle
    • Pagine per luogo
    • Rapporto mensile
    • Audit a voce
    • Revisione trimestrale

  • Su misura1.490 €/mese

    • Sito a celle
    • Pagine per luogo
    • Rapporto mensile
    • Audit a voce
    • Revisione trimestrale
Campo di modulo
Rispondiamo entro due giorni lavorativi · esempio
05

Una composizione di sezione

Proposta di direzione, non il sito

Risultati · esempio

Quattro numeri di esempio

Una misura per cella, il periodo e la fonte sotto ogni cifra.

+38%

richieste dal sito · gen–giu 2026 · fonte: Google Analytics · esempio

1.240

visite organiche al mese · giu 2026 · fonte: Search Console · esempio

1,6 s

caricamento su telefono · giu 2026 · fonte: PageSpeed · esempio

12

pagine nuove · gen–giu 2026 · fonte: sitemap · esempio

Sei anelli · esempio · metti il fuoco su una cella

06

Movimento

Proposta di direzione, non il sito

Scorri o passa col puntatore: i modelli si muovono davvero.

Movimento quieto · esempio

Si muove solo lo stato: puntatore, fuoco, apertura, filtro, sotto i 250ms. Niente valori legati allo scroll. La meccanica dell'indice vive nella sezione 04 · Card e righe.

Domande che si aprono · esempio

Risposta di esempio: una telefonata, poi un riepilogo scritto.

Scendi: ogni banda qui sotto appare una volta, al 20% di visibilità.

Banda 01 · esempio

Una banda di celle che entra di 8px

240ms · soglia .2 · una volta

Banda 02 · esempio

Una banda di celle che entra di 8px

240ms · soglia .2 · una volta

Banda 03 · esempio

Una banda di celle che entra di 8px

240ms · soglia .2 · una volta
07

Linguaggio

Proposta di direzione, non il sito
  1. Griglia a punti da 8px sotto le bande di carta: radial-gradient(rgba(17,19,18,.06) 1px, transparent 1px), background-size 8px 8px.
  2. Schermate piatte, raggio 0, cornice 1px #D9D6CE, nessuna ombra.
  3. Cifre in Mona Sans 700 clamp(2rem, 1.5rem + 2vw, 3rem) tabulari, unità e periodo nell'etichetta sotto; icone 16px, tratto 1,5px.

Schermata piatta · cornice 1px

Schermata di esempio: sito di una villa

Cifra tabulare

1.240

visite al mese · giu 2026 · fonte: Search Console · esempio

Icone 16px · tratto 1,5px