Vai al contenuto
SEO Atelier
SEO Atelier

Come è nato questo sito

Prima di fare siti per gli altri abbiamo rifatto il nostro: tre bozze della home, una scelta e le regole che ne sono venute.

Chiedi un preventivo
Schermata della bozza A, particolare: ritagli di cartamodelli, forbici e imbastiture, alcuni con l'etichetta di una pagina (Schede prodotto, Carrello, Servizio, Manutenzione)
Bozza A

Il primo lavoro dello studio

Il primo sito che abbiamo fatto da studio è il nostro. Prima di proporre un metodo ai clienti l'abbiamo provato su di noi: le stesse misure, le stesse bozze, le stesse regole.

La parte tecnica, dal vecchio WordPress attaccato al sito nuovo in Next.js, la raccontiamo nella scheda del nostro sito. Qui raccontiamo l'altra metà: come abbiamo deciso che aspetto avrebbe avuto.

Il brief

Per chi
Titolari di piccole e medie imprese e professionisti, in tutta Italia
La materia
La sartoria, come modo di costruire la pagina e non come decorazione
Le immagini
Illustrazioni generate di attrezzi da sarto: niente volti, niente loghi
La velocità
LCP sul telefono entro 1,5 s: un obiettivo, da verificare sul sito pubblicato

Dal brief delle bozze, ottobre 2026. La velocità si verifica dopo la pubblicazione.

Tre bozze, tre direzioni

Tre bozze statiche della home, con gli stessi testi: cambia solo il modo in cui la sartoria diventa la materia del design. Le mostriamo come schermate, perché le bozze non sono pagine del sito.

A. Il tavolo di taglio

L'idea

La home è il tavolo del sarto visto dall'alto: ogni tessera è un pezzo di cartamodello e porta il nome di una pagina del sito. Il sito si taglia sulle ricerche dei clienti, e la pagina lo fa vedere.

La parte interattiva

«Prendi le misure del tuo sito»: scrivi il tuo lavoro e la tua città, e quattro ricerche diventano quattro pagine (home, prezzi, modulo, comuni serviti).

Schermata della bozza A, versione desktop: un mosaico di ritagli di cartamodelli, forbici e imbastiture, alcuni con il nome di una pagina, e in mezzo il pannello nero con il titolo «Siti su misura, già posizionati»
Bozza A, schermata desktop (1440 px), ottobre 2026
Schermata della bozza A sul telefono: il pannello nero con il titolo e il bottone rosso, poi due colonne di ritagli, alcuni con il nome di una pagina
Bozza A sul telefono (390 px)

La palette

  • #ffffffFondo, carta da modello
  • #e4e4e4Superfici
  • #0a0a0aTesto
  • #5e5e5eTesto secondario
  • #d92b21Rosso imbastitura, l'azione

I caratteri

Bricolage Grotesque, una famiglia sola, pesi 400, 500 e 600

Siti su misura, già posizionati

B. Il campionario

L'idea

Lo studio come il cassetto degli attrezzi di una sartoria: dodici attrezzi, uno per ogni mestiere. Niente volti: l'attrezzo dice chi lavora e cosa fa.

La parte interattiva

Nella sezione dei dodici mestieri scegli un attrezzo e leggi cosa fa quel mestiere; sul muro d'apertura, passando sopra un attrezzo, il pannello dice a quale mestiere appartiene.

Schermata della bozza B, versione desktop: un muro di attrezzi da sarto su tessere loden chiaro, stucco e osso, con un pannello nero ancorato in basso e il titolo «Siti su misura, già posizionati»
Bozza B, schermata desktop (1440 px), ottobre 2026
Schermata della bozza B sul telefono: il muro di attrezzi in alto e sotto il pannello nero con il titolo e la frase che presenta lo studio
Bozza B sul telefono (390 px)

La palette

  • #dedad3Fondo, stucco
  • #d3cec6Superfici
  • #0a0a0aTesto
  • #57534dTesto secondario
  • #3f5a3cVerde loden, l'azione

I caratteri

Libre Franklin 700 per i titoli, Source Serif 4 400 e 600 per i testi

Schermata della bozza B, particolare: il titolo «Un atelier di siti» in Libre Franklin e i paragrafi in Source Serif 4, su fondo stucco

C. Su misura

L'idea

La promessa dello studio come un manifesto in cui una parola è un oggetto: nel titolo un metro da sarto prende il posto della parola «misura». Il resto procede per verbi di bottega: misuriamo, disegniamo, tagliamo, cuciamo.

La parte interattiva

La frase dei prezzi: scegli il tipo di sito (vetrina, aziendale, e-commerce) e cambiano il prezzo e cosa comprende.

Schermata della bozza C, versione desktop: fondo senape e il titolo «Siti su … già posizionati», con un metro da sarto al posto della parola mancante, il bottone blu, il collegamento ai prezzi e una frase di due righe
Bozza C, schermata desktop (1440 px), ottobre 2026
Schermata della bozza C sul telefono: il titolo con il metro da sarto in mezzo e il bottone blu a tutta larghezza
Bozza C sul telefono (390 px)

La palette

  • #e1ac10Fondo, senape
  • #c99a0cSenape scuro
  • #0b0b0bTesto
  • #4d3d0aTesto secondario
  • #24338fBlu reale, l'azione

I caratteri

Schibsted Grotesk, una famiglia sola, pesi 400, 600 e 800

Schermata della bozza C, particolare: il titolo «Dodici mestieri» in Schibsted Grotesk 800 e il paragrafo in Schibsted Grotesk 400, con una piccola immagine di forbici, su fondo senape

Perché
la A

Abbiamo scelto la A: fa capire cosa si compra, pezzo per pezzo.

Forbici da sarto nere aperte su un cartamodello bianco, con spilli dalla testa rossa

Cosa ci ha convinto

  • il mosaico di ritagli: le stesse immagini ripetute sembrano fatte apposta e danno il colpo d'occhio del tavolo di taglio;
  • le ricerche che diventano pagine: con «Prendi le misure» scrivi il tuo lavoro e la tua città e vedi nascere le pagine del tuo sito;
  • i prezzi a gradini, più grande il sito e più alta la tessera, chiari a colpo d'occhio.

Delle tre, la A è quella che spiega il metodo. Fa vedere un sito come un insieme di pezzi, ognuno con il suo nome, tagliati sulle ricerche dei clienti: è quello che facciamo, detto senza la parola SEO.

Della B ci piaceva come racconta i dodici mestieri, e infatti i mestieri sono rimasti, con il loro attrezzo, nella pagina dell'atelier. Della C, il coraggio del colore; ma la pagina era lunga e rumorosa, e il senape pieno stanca presto.

Il rischio della A lo conoscevamo: bianco, nero e rosso sono una strada battuta. Per questo i cartamodelli restano ovunque, e ogni segno ha una regola scritta: quando si usa, dove e perché.

Dopo la scelta, le regole

Dove si agisce

  • Un solo bottone per ogni scelta
  • Il rosso solo dove si agisce
  • Due testi per i bottoni, sempre quelli

Come si legge

  • Collegamenti sempre sottolineati
  • Una famiglia di caratteri, tre pesi
  • Titoli in due righe al massimo

Come si compone

  • Tessere ad angolo vivo, senza ombre
  • Ogni sezione con il suo titolo
  • Nessuna cella lasciata vuota

Ogni immagine, scelta fra tre

Le immagini delle pagine sono illustrazioni generate: attrezzi da sarto su carta bianca, in luce di finestra, con un solo filo rosso. Ognuna è nata in tre varianti; abbiamo tenuto quella che regge meglio il suo spazio, e le altre due restano in archivio.

Qui accanto due esempi: le forbici dei ritagli della home e l'ago di chi cuce, uno dei dodici mestieri che trovi nell'atelier.

Le forbici dei ritagli della home

  • Forbici da sarto nere aperte su un cartamodello bianco, con spilli dalla testa rossa
    Scelta
  • Forbici nere al centro di un cartamodello attraversato da una linea ondulata, con due gruppi di spilli
    Scartata
  • Forbici nere in basso, sotto la curva del cartamodello, con gli spilli sparsi in due gruppi
    Scartata

L'ago di chi cuce

  • Un ago d'acciaio infilato con un filo rosso lungo, su un foglio di carta velina
    Scelta
  • Un ago d'acciaio su fogli di carta velina, con un filo rosso corto e mosso
    Scartata
  • Un ago d'acciaio su carta velina stropicciata, con un filo rosso lungo che scende a onde
    Scartata

Raccontaci il tuo sito

Il tuo sito passa dalle stesse misure, dalle stesse prove e dalle stesse regole. Scrivici cosa fai e dove lavori: ti rispondiamo con una proposta e un prezzo.

Chiedi un preventivo