L'80% del design è spaziatura e dimensioni del testo. Il colore e il font contano, ma contano molto meno dello spazio bianco, della gerarchia visiva e della coerenza.

Per questo un sito minimale è la scelta migliore. Un sito pulito e semplice sembra intenzionale. Un sito "creativo" fatto da qualcuno che non è un designer sembra un sito "creativo" fatto da qualcuno che non è un designer. Meno fai, meglio verrà.

Un colore, più bianco e nero

Ti basta un solo colore perché funzioni.

Come scegliere il colore

1. Vai su un qualsiasi color picker (cerca "color picker" su Google, ne appare uno direttamente nei risultati)
2. Scegli un colore che ti piace. Fine. Non c'è nessuna scienza segreta. Il blu non "comunica fiducia" più del verde. Scegli qualcosa che ti sembra giusto e che si legga su sfondo bianco
3. Usa quel colore solo per le cose importanti: pulsanti CTA, link, accenti. Non per gli sfondi, non per tutti i titoli.

La tua palette completa

• Sfondo: bianco (o un bianco caldo tipo #FAFAFA se il bianco puro sembra troppo clinico)
• Testo principale: nero o grigio molto scuro (#1A1A1A o #111111)
• Testo secondario: grigio medio (#6B7280 o simile)
• Colore accento: quello che hai scelto. Usalo con parsimonia

Dark mode

Dobbiamo parlarne un attimo. Molti siti vibe-coded escono in dark mode perché l'AI tende a usarla di default e sembra "figa" a prima vista. Il problema è che la dark mode è molto più difficile da fare bene rispetto alla light mode. Contrasto sbagliato, grigi sbagliati, testo che brilla. Ti consiglio di restare con lo sfondo bianco, perché sembra più elegante. A meno che il tuo prodotto non sia per ingegneri, allora vai pure con la dark mode.

Scegli un solo font

Abbinare i font è un'abilità che ai designer richiede anni, quindi usa un solo font.

Ecco 4 font che funzionano sempre, sono gratuiti e con cui non puoi sbagliare:

Inter - Il font più usato nel web design moderno. Pulito, leggibile, neutro. Se non sai cosa scegliere, scegli Inter e non pensarci più. Funziona per titoli, testo, pulsanti, tutto.

DM Sans - Un po' più morbido e amichevole di Inter. Buona scelta se il tuo prodotto ha un tono più caldo. Molto leggibile anche a dimensioni piccole.

Space Grotesk - Ha più personalità dei primi due. Forme delle lettere leggermente particolari che danno carattere senza essere eccentriche. Buono se vuoi sembrare "tech ma non freddo".

Instrument Sans - Il più recente dei quattro. Moderno, equilibrato, con un'eleganza discreta. Se vuoi qualcosa che sembri fresco senza essere trendy, questo funziona.

Vai su Google Fonts, cerca ciascuno di questi quattro nomi, scrivi il tuo titolo nel campo anteprima e scegli quello che ti sembra giusto. Non c'è una risposta sbagliata tra questi quattro.

Un consiglio: scarica i font e servili dal tuo sito, non da Google Fonts. La seconda opzione di solito rallenta i siti e non è necessaria.

Dedicherò più tempo a questo che a colori o font, perché è davvero la cosa che separa i siti amatoriali da quelli professionali. Ed è la cosa che la maggior parte delle persone ignora completamente.

Dimensioni del testo

Un sistema semplice che funziona per quasi tutti i siti:

• Titolo hero: 48-64px su desktop, 32-40px su mobile
• Sottotitolo: 18-20px
• Titoli sezione: 32-40px su desktop, 24-28px su mobile
• Testo corpo: 16-18px
• Testo piccolo (didascalie, footer): 14px

La gerarchia funziona quando il visitatore capisce subito cosa è importante e cosa è secondario. Se tutto è della stessa dimensione, niente spicca. Se il titolo è grande e il sottotitolo è chiaramente più piccolo, l'occhio sa dove andare.

Un errore molto comune: fare il testo del corpo troppo piccolo. Se il testo è 14px o meno, le persone su mobile faranno fatica a leggerlo.

Margini e padding

Regola 1: usa più spazio di quanto pensi sia necessario. Se pensi che 40px tra due sezioni bastino, prova con 80px. Ti sembra troppo? Probabilmente è giusto così.

Regola 2: sii coerente. Se usi 80px tra la hero e la sezione del problema, usa 80px tra ogni sezione. Se usi 16px tra un titolo e il paragrafo sotto, usa 16px ovunque.

Regola 3: il contenuto non deve mai toccare i bordi. Su desktop, il contenuto dovrebbe avere margini laterali generosi. La maggior parte dei siti moderni usa una larghezza massima del contenuto tra 1000px e 1200px, centrata. Su mobile, 20-24px di padding su ogni lato.

Allineamento

Allinea tutto a sinistra o al centro. Scegline uno e mantienilo per tutta la pagina. La hero può essere centrata, ma il testo del corpo è quasi sempre meglio allineato a sinistra (si legge più facilmente).

Non mischiare allineamento a sinistra e al centro nella stessa sezione. Sembra un errore, anche se l'hai fatto apposta.

Icone

Abbiamo parlato delle immagini nello Step 0 (versione breve: non usare foto stock, non usare immagini AI, fai molta attenzione con le tue foto). Ma potresti volere qualche elemento visivo per spezzare il testo. Le icone sono la risposta.

Dove trovarne di belle:

• Lucide (lucide.dev): Il set di icone più pulito in circolazione. Linee sottili e coerenti. Oltre 1.400 icone. Se devi sceglierne uno solo, scegli questo.
• Phosphor Icons (phosphoricons.com): Più opzioni di stile rispetto a Lucide (regular, bold, thin, fill, duotone). Stessa qualità.
• Heroicons (heroicons.com): Fatte dal team di Tailwind CSS. Due stili: outline e solid. Set più piccolo ma sufficiente per la maggior parte dei siti.

Le regole per usare bene le icone:

1. Stessa dimensione. Se un'icona è 24px, tutte le icone in quella sezione sono 24px. Dimensioni diverse sembrano un bug.
2. Stesso peso. Se usi icone con linee sottili (stroke width 1.5 o 2), tutte le icone devono avere lo stesso spessore di linea. Mischiare un'icona outline con una solid è una di quelle cose in cui il visitatore pensa "qualcosa non va" senza sapere perché.
3. Stesso colore. Le icone possono essere del tuo colore accento o del colore del testo scuro. Scegline uno e usalo per tutte. Icone multicolore sparse per la pagina sembrano adesivi.
4. Stesso set. Non mischiare icone da Lucide e Phosphor. Hanno stili leggermente diversi. L'occhio umano nota queste differenze anche quando non riesci a nominarle.

Mostrare il tuo prodotto

Se il tuo prodotto ha un'interfaccia, una dashboard o qualcosa di visivo, uno screenshot è la migliore immagine possibile per il tuo sito. È reale, è specifico e dice al visitatore "questo è un prodotto vero, non una landing page per qualcosa che non esiste ancora".

Qualche consiglio per screenshot che non sembrino terribili:

• Usa dati di esempio realistici, non "Lorem ipsum" o "Test 123"
• Se l'interfaccia ha parti non finite, fai lo screenshot solo della sezione migliore
• Metti lo screenshot in un mockup di browser o dispositivo
• Non ingrandire lo screenshot fino a farlo pixellare. Fai lo screenshot su un monitor 4K se vuoi che sia molto nitido.

‍

Ora assicuriamoci che il tuo sito non faccia schifo prima di andare live

‍