Come funziona

Questa è una sala revisione privata per il tuo progetto. Pietro e il suo team hanno preparato dei deliverable da farti rivedere a ogni tappa (le chiamiamo "gate"). Quando è il tuo turno, il gate attivo appare qui sotto.

Prenditi il tempo che ti serve. Apri i documenti collegati a ogni gate. Poi, in base al tipo di gate: seleziona l'opzione che preferisci, approva così com'è, o lascia un feedback specifico. Pietro viene notificato nel momento in cui invii. La tua scelta viene registrata in modo immutabile — utile se in futuro ci sarà qualche dubbio su cosa era stato deciso.

I gate "lockati" qui sotto sono placeholder per le tappe future — si sbloccheranno man mano che procediamo.

Tutto quello che hai già approvato resta qui, in sola lettura: usa i link delle fasi a sinistra per tornarci quando vuoi. Le fasi approvate non accettano più feedback — la decisione resta quella.

Fase 4: Storytelling

Ecco la narrazione allo scroll, scena per scena. La tua approvazione fissa il modo in cui la storia si svolge mentre si scorre.

Storyboard scroll

In revisione

Ecco la narrazione allo scroll, scena per scena: dicci se il racconto scorre.

Questo è lo schema della narrazione allo scroll, non l’aspetto finale.

1 · Stamattina

2 · Mentre tu lavori

3 · I primi tre giorni

4 · Mentre leggi

5 · Stanotte

6 · Quando vuoi tu

7 · Da domani

8 · Prima di decidere

9 · Adesso

10 · Prima di chiudere

Attività

Materiali pubblicati per la tua revisione.

In attesa della tua revisione.

Già approvato

Sola lettura. Qui non c'è nulla da fare: lo teniamo per farti ritrovare quello che avevamo deciso.

Fase 1: Discovery & Archetipi

Questa fase è approvata. La lasciamo qui consultabile: puoi rivedere i materiali quando vuoi, non serve più alcuna azione.

Discovery & Archetipi

Approvato

Approvato. Questo è ciò che hai confermato.

1 · Analisi archetipica

Personalità del brand e posizionamento di mercato.

Archetipo primario: Eroe (Hero) + Magician (accento)

L'Eroe non racconta il trucco. Entra ogni mattina, guarda cosa è cambiato nella notte e decide la mossa. Lo strumento che ha in mano se lo è costruito da solo, e resta in mano sua.

Posizionamento di mercato

Marketing Hackers è l'agenzia che fa il lavoro, non il fornitore che consegna uno strumento da usare. Il sito nasce in due o tre giorni dal brief, poi il marketing va avanti tutti i giorni, con 42 lavorazioni quotidiane sul mercato del cliente e 1.276 operazioni al mese. Quasi quaranta agenti specializzati raccolgono, scrivono, traducono e correggono, mentre le scelte di strategia le prende ogni mattina una persona che di marketing vive, sui dati raccolti nella notte. Il motore lo abbiamo costruito noi e resta dietro le quinte, perché quello che il cliente compra è il lavoro fatto e le decisioni prese. Un'agenzia tradizionale fattura le ore dell'analisi, quindi la fa una volta all'anno e poi va a intuito, noi la rifacciamo ogni notte. Il piano dei contenuti resta del cliente anche il giorno in cui smette con noi. Marketing Hackers lavora in una forma sua, e la differenza con chi fa questo mestiere non sta nel prezzo ma in come è fatto il servizio: nessun ufficio in cui venire, nessun referente che fa da tramite, cose definite dentro un processo con cinque punti in cui decide il cliente. Quello che non si paga è esattamente quello che qui non c'è, ed è per questo che i prezzi sono questi senza che scenda la qualità: la tecnologia la costruiamo noi e non la rivendiamo. Chi vuole incontrare qualcuno di persona e avere una persona dedicata che segue tutto sta cercando un altro modo di lavorare, legittimo, che però non è questo. Qui non si compra flessibilità: si compra prevedibilità, cioè sapere cosa arriva e quando.

2 · Font & palette

Linguaggio visivo e motivazioni di design.

Marketing Hackers

Ogni giorno qualcuno cerca quello che vendi, e trova qualcun altro.

Da domani trova te. Intercettiamo chi non ti conosce ancora e teniamo il filo con chi ha già comprato. Cambia il posto dove cercano, non il fatto che ti trovino.

Quanto costa per te

AaPoppins (titoli)Ma la volpe col suo balzo ha raggiunto il quieto Fido

AaOpen Sans (testo)Il testo dei paragrafi dà il tono a ogni pagina: leggibile, calmo, preciso. I paragrafi del sito finito avranno esattamente questa resa.

Bianco carta, superficie dominante
#F7F7F5Nero del marchio, testo, bottoni e sezioni àncora
#1A1B1EVerde segnale, riempimento dell'azione
#0EF617Blu di appoggio, collegamenti e stati
#3474C7Grigio profondo, testo lungo e seconda superficie scura
#2E3033Grigio chiaro, filetti sul chiaro e note sullo scuro
#A0A4A8Poppins e Open Sans sono i caratteri del marchio e restano. Poppins ha forme geometriche e chiuse che tengono bene le dimensioni molto grandi, e qui i titoli sono la scenografia del sito, non un'etichetta sopra un paragrafo. Open Sans regge blocchi lunghi senza affaticare, e serve davvero perché le sezioni sul metodo e sui prezzi hanno cose concrete da spiegare. Il contrasto non lo fa un terzo carattere decorativo, lo fa il salto di scala tra un titolo enorme e un testo piccolo e ordinato. Sui colori il lavoro è stato solo di ruoli e i sei valori del marchio restano intatti. La superficie dominante è il bianco carta, perché chi legge deve sentirsi in buone mani, e una pagina scura con sopra un verde acceso comunica laboratorio per addetti ai lavori invece di lavoro fatto bene. Il nero non viene declassato, cambia mestiere. Da superficie diventa àncora, cioè il colore del testo, dei bottoni, del piede e di poche sezioni piene in cui il racconto si ferma. Il ritmo dello scroll nasce dal salto tra le due superfici, la scenografia la fa la scala della tipografia. Sul verde c'è una regola di leggibilità che non si tratta. Su bianco carta il verde misura 1,38 a 1 ed è illeggibile, quindi sul chiaro non è mai una parola colorata, vive come riempimento di un bottone con la scritta nera sopra, che arriva a 11,7 a 1, oppure come filetto e segno grafico. Dentro le sezioni scure il verde torna leggibile anche come testo di accento, sempre a 11,7 a 1. Il blu porta collegamenti e stati sul chiaro, dove misura 4,38 a 1: regge per i comandi e per i collegamenti in evidenza, resta appena sotto la soglia di 4,5 chiesta per il testo piccolo, quindi dentro un paragrafo il collegamento si riconosce anche dalla sottolineatura e non solo dal colore. Il grigio profondo porta il testo lungo sul chiaro a 12,3 a 1 e fa da seconda superficie scura più morbida del nero pieno, il grigio chiaro fa i filetti sul chiaro e le note dentro le sezioni scure, dove misura 6,9 a 1.

3 · Flusso delle sezioni

Struttura della pagina e scopo di ogni sezione.

⛰AperturaPrima schermata su bianco carta, con il titolo grande in nero che dice il problema del lettore con le sue parole e il sottotitolo che lo ribalta. Sotto restano solo i tre numeri che reggono la promessa e i due bottoni, il preventivo e la discesa nella pagina. Il verde compare qui una volta sola, come riempimento del bottone principale con la scritta nera sopra.

✓Come lavoriamoIl metodo in quattro movimenti, dal capire cosa vendi alle fonti approvate una per una, dalla produzione alla parte che nessuno vede. I componenti aggiuntivi come tracciamento, local, multilingua e visibilità sugli assistenti AI vengono nominati dentro le frasi e portano alla pagina del servizio a cui appartengono, senza diventare voci di pari livello. La frase sulle pagine che chiudono la vendita è il primo aggancio alla pagina delle sales landing page. Il sistema è a moduli: ogni componente ha un prezzo di partenza e si aggancia al servizio a cui appartiene. Chi vuole fare campagne o pubblicare contenuti il tracciamento deve averlo, perché è la condizione che rende misurabile tutto il resto.

☰Dal primo giornoLa linea del tempo dei due o tre giorni, con le cinque approvazioni del cliente in mezzo. Serve ad abbassare la paura del cantiere lungo e a mostrare che il controllo resta suo. Chiude con la scorciatoia per chi un sito ce l'ha già e gli va bene.

◈Le proveI siti online che si aprono dal telefono, il report mensile, il portale dove il cliente segue il lavoro e approva ogni passaggio. Prova che si può toccare al posto degli aggettivi, con il rimando alla pagina dei lavori.

→Chi decideLa persona sopra la macchina. Gli agenti raccolgono, analizzano, scrivono e correggono, la scelta la fa un professionista ogni mattina sui dati della notte prima. È la sezione che tiene il soggetto della frase su di noi e separa questo sito da qualunque software in vendita. Prima àncora scura della pagina, dove il racconto si ferma e cambia respiro dopo le prove.

⛰Le cose veloci le fai tuIl pezzo piu' sottovalutato del sito, e va spiegato per quello che e': dopo la consegna il cliente non resta fermo ad aspettare noi. Le modifiche si chiedono scrivendo in chat all'AI, ma si possono anche fare a mano direttamente sulla pagina, vedendo il risultato mentre cambia. Le immagini si generano al volo con BrandPix, che e' il nostro strumento: nascono gia' nello stile del marchio perche' e' collegato al brandbook, e vengono messe al loro posto senza passaggi intermedi. Si fanno riscrivere sezioni intere e si creano pagine nuove, quando usano un modello che esiste gia'. La sezione deve far capire che il sito resta in mano al cliente, non che gli diamo un pannello di amministrazione. Qui vive anche l'azione secondaria, l'analisi gratuita del proprio sito, che raccoglie chi non e' ancora pronto al preventivo. Il collegamento con gli altri strumenti fai-da-te di Marketing Hackers arrivera'' piu' avanti.

✓Da dove partiLe due strade di ingresso al lavoro continuativo, il sito nuovo, da 762 euro per il monopagina e 1.379 per il multipagina oppure il centro contenuti costruito sul sito che il cliente ha già. Poi il prezzo dei contenuti a pezzo e la libertà di cambiare ritmo quando vuole. Accanto alle due strade, e tenuta distinta da esse, la sales landing page, un lavoro puntuale di una pagina sola costruita attorno a una campagna, che si ordina anche da sé da 279 euro, 1.175 nella versione immersiva. I tre servizi si raggiungono da dentro queste frasi, non da un elenco di riquadri.

☰DomandeLe obiezioni vere nell'ordine in cui arrivano, dai tempi dei primi movimenti a chi scrive davvero i contenuti, dal dover rifare il sito a cosa resta al cliente se un giorno smette.

◈Il preventivoUltima scena e unica azione della pagina, la più grande di tutte. Si racconta cosa si vende, quante lingue servono e a che ritmo si vuole pubblicare, e il calcolo arriva in due minuti. Seconda àncora scura, così l'azione finale è il punto di massimo contrasto di tutta la pagina.

→Passaggi e societàPiede della pagina. I passaggi verso quello che resta sul dominio attuale — strumenti, area riservata, guide e trend, risorse gratuite — ognuno con una riga che dice cosa si trova dall'altra parte e perché andarci. Qui compare Sentinel, l'unità specializzata di Marketing Hackers. La struttura tiene pronto il posto per le società collegate, che si racconteranno quando saranno abbastanza da meritare una sezione propria. Nella versione inglese guide e trend non compaiono.

Fase 2: Design

Questa fase è approvata. La lasciamo qui consultabile: puoi rivedere i materiali quando vuoi, non serve più alcuna azione.

Direzione visiva

Approvato

Approvato. Questo è ciò che hai confermato.

Leggi il Design Rationale completo

Tre direzioni per la nuova home

Marketing Hackers — prima schermata e una scena chiave, per ognuna delle tre.

---

Da dove partiamo

Il sito nuovo deve fare una cosa che quello attuale non fa: farvi sembrare quello che siete. Guardando i
vostri due lavori che considerate il metro — Deux North e Deep Tibet — la differenza con una pagina
qualunque non sta negli effetti. Sta in tre cose molto concrete.

La prima: niente barra di navigazione piena nella prima schermata. Un menù con sette voci dice al
lettore "sei su un sito", e da lì in poi legge un sito. Togliendolo, la prima schermata diventa una pagina
di apertura e il lettore si trova dentro un racconto.

La seconda: la prima schermata non spiega tutto. Questo è possibile solo perché la pagina si muove
mentre scorrete. Una pagina ferma deve dire tutto subito, e infatti finisce per contenere titolo,
paragrafo, due bottoni e una fila di numeri tutti insieme. Una pagina che si muove può permettersi di
aprire con una frase sola e tenere il resto per dopo. È esattamente il motivo per cui possiamo essere più
coraggiosi qui di quanto si potrebbe essere altrove.

La terza: il testo è abbondante e composto bene. Deep Tibet ha molto da leggere, e si legge volentieri
perché la larghezza delle righe è giusta, l'interlinea è controllata e gli allineamenti sono precisi.
Quello che rende una pagina costosa non è la decorazione: è la precisione. Nella direzione C, per dirne
una, le due righe del titolo gigante sono state misurate e ritagliate una a una perché finissero esatte
sul margine destro. Sono cinque pixel. Si vedono.

Su una cosa non abbiamo trattato: il verde. Sul fondo chiaro il verde del marchio ha un contrasto di
1,38 a 1, cioè è illeggibile. In tutte e tre le direzioni non è mai una parola scritta su chiaro: è il
riempimento del bottone, con la scritta nera sopra, che arriva a 11,7 a 1. Sul nero il verde torna a
essere una parola e lo usiamo come tale. Il blu dei collegamenti è appena sotto la soglia per il testo
piccolo, quindi i collegamenti sono sempre anche sottolineati.

---

A · La superficie

Come si muove: un rettangolo nero, uno solo, attraversa tutta la pagina cambiando ruolo — cresce fino
a diventare la stanza scura, si stringe nel telaio che tiene i vostri siti, si assottiglia nella riga sotto
il nome di chi decide, e alla fine esce dai bordi e diventa il campo del preventivo.

Nella prima schermata il rettangolo sta dentro la frase, e le lettere che ci finiscono dentro cambiano
colore: nere sulla carta, bianche sul nero. Non è un effetto grafico. È il nero del vostro marchio che
smette di essere un colore di sfondo e diventa una cosa che lavora — e che continuerà a lavorare per tutta
la pagina, sempre lo stesso pezzo, mai duplicato, mai scomposto.

Sotto la frase c'è silenzio, un filetto con quattro tacche e un solo bottone. Niente altro. Il paragrafo,
i numeri e le prove arrivano scorrendo, ed è per questo che la piega si può permettere di essere così
vuota.

La seconda immagine mostra il rettangolo nel suo secondo mestiere: si è ribaltato in chiaro, occupa la
metà bassa dello schermo, e contiene tre siti veri, mostrati alla larghezza che hanno sul telefono. Il
titolo scende dentro il telaio e lì si inverte. Sopra, in nero, una sola frase: ogni sito che consegnate
passa i test di Google 100 su 100, e si apre adesso.

Perché ha senso per voi: è l'unica delle tre che nessuno potrebbe ricavare da un modello, e la sola in
cui la forma che si muove diventa struttura invece di fare una piroetta. È anche la più leggera: la prima
schermata non ha nemmeno un'immagine, quindi si apre istantaneamente.

Il suo rischio, detto chiaro: è severa. Un titolare che deve sentirsi in buone mani non si scalda
davanti a un rettangolo. Il rimedio non è addolcire la piega, è quello che arriva subito dopo: i lavori
veri alla terza scena, una faccia alla quarta.

---

B · La colonna

Come si muove: una colonna stretta e scura resta ferma sul lato destro mentre le stanze le passano
davanti, e dentro cambia il sito che sta mostrando; a un certo punto si allarga fino a prendere tutto lo
schermo e diventa la stanza dove si racconta chi decide.

È la direzione più vicina a Deep Tibet, con una differenza sostanziale: nella colonna non c'è una
fotografia, c'è un vostro sito consegnato, mostrato alla sua larghezza vera da telefono, senza cornici
finte e senza ombre. In cima alla colonna una striscia dichiara che cos'è e qual è l'indirizzo. Il testo
non ci finisce mai sopra: le due metà si guardano.

Il taglio è 66 e 34, non a metà. Una colonna che occupa esattamente mezza pagina è una metà; una colonna
più stretta è un oggetto.

A sinistra c'è il testo abbondante che il metro chiede: la frase grande, un filetto, un'etichetta, due
paragrafi con la giusta larghezza di riga, il bottone e il collegamento all'analisi gratuita.

La seconda immagine è il momento in cui la colonna ha vinto: nero pieno, la frase sulle sette del mattino
che passa dietro la spalla, il ritratto vero, e in alto a destra 1.276 scritto in contorno verde.

Perché ha senso per voi: è la più immediatamente convincente per un titolare di PMI, perché nella prima
schermata non promette, mostra. La cosa che vendete è una pagina che si apre, e qui si apre subito.

Il suo rischio, detto chiaro: nella sagoma somiglia alla direzione B che avete già bocciato. La
differenza c'è ed è grossa — dentro la colonna c'è un lavoro vero e non un ritratto di repertorio, e non
c'è la barra di navigazione — ma è una differenza che va guardata, non intuita.

---

C · Le ore

Come si muove: la superficie della pagina cambia valore man mano che si scende, dal chiaro della
mattina al nero delle tre e quaranta e ritorno, mentre la colonnina di margine a sinistra tiene l'ora e le
etichette come la costola di una rivista.

La prima schermata è un titolo a piena larghezza su due righe che toccano esattamente tutti e due i
margini, un filetto, e sotto un blocco di testo composto su due colonne: a sinistra l'etichetta, a destra
il testo. È l'impaginazione di un servizio da rivista, non di una pagina di vendita.

La seconda immagine è la stessa identica impaginazione con i valori rovesciati: nero, l'ora in verde,
"Di notte lavoriamo. Di mattina decidiamo." e sotto i tre numeri che quella frase deve sostenere — i 47
minuti ogni notte per controllare quali pagine Google ha davvero indicizzato, i 110 controlli tecnici degli
ultimi tre mesi, le 256 fonti approvate una per una. Non sono riquadri e non sono un listino: sono righe di
un articolo.

In basso, la riga che annuncia l'ora successiva. Serve a dire al lettore dove sta andando prima che ci
arrivi.

Perché ha senso per voi: è la più solida. Regge tantissimo testo senza stancare, ed è la direzione in
cui la precisione si vede di più — quei titoli che finiscono esatti sul margine sono la firma di chi sa
comporre.

Il suo rischio, detto chiaro: non ha un'immagine. È bellissima di sola tipografia, ma chi la guarda per
due secondi non vede un vostro lavoro.

---

Quale sceglierei

A. Perché è l'unica in cui l'oggetto che si muove serve a qualcosa, e perché trasforma un vincolo — il
nero del marchio, che non si tocca — nel protagonista della pagina.

E aggiungerei una cosa presa da B: nella scena dei lavori, invece di tre siti affiancati, un sito solo
alla volta, a tutta altezza, con la striscia che dichiara cos'è. Così si tiene l'apertura di A e la prova
di B nella stessa pagina.

Se preferite andare sul sicuro, C. Se la priorità è che un titolare capisca in due secondi cosa comprare, B.

---

Cosa mi serve da voi per andare avanti

1. La direzione, e se volete l'innesto di cui sopra.
2. Nella prima schermata i tre numeri non ci sono più: sono scesi nella schermata successiva, dove c'è
spazio per comporli invece di allinearli in fila. Confermate?
3. Quali tre lavori mostriamo davvero, con i permessi dove servono. Nelle immagini ho messo Royal Strutture,
Limbas e Gibbs Corporation come segnaposto. Va aggiunto il vostro centro contenuti.
4. Il ritratto di Pietro va sul sito? È l'elemento che più vi separa da un'agenzia anonima, ma è una scelta
personale e non la do per scontata.
5. Sentinel nel piede: una riga che spiega cos'è, oppure solo il nome?

La superficie

Il nero del marchio smette di essere un colore di sfondo e diventa una cosa che lavora. Nella prima schermata il rettangolo sta dentro la frase e le lettere che ci finiscono dentro cambiano colore, nere sulla carta e bianche sul nero: il titolo si legge davanti e dietro. Sotto c'è silenzio, un filetto con quattro tacche e un solo bottone, niente altro — il paragrafo, i numeri e le prove arrivano scorrendo, ed è per questo che la piega si può permettere di essere così vuota. La seconda immagine mostra il rettangolo nel suo secondo mestiere: ribaltato in chiaro, occupa la metà bassa dello schermo e contiene tre siti veri alla larghezza che hanno sul telefono, mentre il titolo scende dentro il telaio e lì si inverte. È l'unica delle tre che nessuno potrebbe ricavare da un modello, ed è anche la più leggera, perché la prima schermata non ha nemmeno un'immagine. Il suo rischio è la severità: un titolare che deve sentirsi in buone mani non si scalda davanti a un rettangolo, e il rimedio non è addolcire la piega ma quello che arriva subito dopo, i lavori veri e una faccia. Come si muove: Un rettangolo nero, uno solo, attraversa tutta la pagina cambiando mestiere: cresce fino a diventare la stanza scura, si stringe nel telaio che tiene i vostri siti, si assottiglia nella riga sotto il nome di chi decide, e alla fine esce dai bordi e diventa il campo del preventivo.

La superficieApri pagina completa →

La colonna

È la direzione più vicina a Deep Tibet, con una differenza sostanziale: nella colonna non c'è una fotografia, c'è un vostro sito consegnato, mostrato alla sua larghezza vera da telefono, senza cornici finte e senza ombre, con una striscia in cima che dichiara cos'è e qual è l'indirizzo. Il testo non ci finisce mai sopra: le due metà si guardano. Il taglio è 66 e 34, non a metà, perché una colonna che occupa esattamente mezza pagina è una metà mentre una colonna più stretta è un oggetto. A sinistra c'è il testo abbondante che il metro chiede: la frase grande, un filetto, un'etichetta, due paragrafi alla giusta larghezza di riga, il bottone e il collegamento all'analisi gratuita. La seconda immagine è il momento in cui la colonna ha vinto: nero pieno, la frase sulle sette del mattino che passa dietro la spalla, il ritratto vero, e in alto a destra 1.276 scritto in contorno verde. È la più immediatamente convincente per un titolare di PMI, perché nella prima schermata non promette ma mostra. Il suo rischio è che nella sagoma somiglia alla direzione già bocciata: la differenza c'è ed è grossa, ma va guardata invece che intuita. Come si muove: Una colonna stretta e scura resta ferma sul lato destro mentre le stanze le passano davanti, e dentro cambia il sito che sta mostrando; a un certo punto si allarga fino a prendere tutto lo schermo e diventa la stanza dove si racconta chi decide.

La colonnaApri pagina completa →

Le ore

La prima schermata è un titolo a piena larghezza su due righe che toccano esattamente tutti e due i margini, un filetto, e sotto un blocco di testo composto su due colonne, l'etichetta a sinistra e il testo a destra: è l'impaginazione di un servizio da rivista, non di una pagina di vendita. La seconda immagine è la stessa identica impaginazione con i valori rovesciati, il nero, l'ora in verde e i tre numeri che la frase deve sostenere — i 47 minuti ogni notte per controllare quali pagine Google ha davvero indicizzato, i 110 controlli tecnici degli ultimi tre mesi, le 256 fonti approvate una per una. Non sono riquadri e non sono un listino: sono righe di un articolo. In basso, la riga che annuncia l'ora successiva dice al lettore dove sta andando prima che ci arrivi. È la più solida delle tre, regge tantissimo testo senza stancare, ed è quella in cui la precisione si vede di più: le righe del titolo sono state misurate e ritagliate una a una perché finissero esatte sul margine destro. Il suo limite è che non ha un'immagine, quindi chi la guarda per due secondi non vede un vostro lavoro. Come si muove: La superficie della pagina cambia valore man mano che si scende, dal chiaro della mattina al nero delle tre e quaranta e ritorno, mentre la colonnina di margine a sinistra tiene l'ora e le etichette come la costola di una rivista.

Le oreApri pagina completa →

Il link scade il 5 settembre 2026