Queste 9 leggi non sono nella documentazione di Figma, non sono nei tutorial YouTube, non sono nei corsi da 50€ che si trovano sulle piattaforme di e-learning. Sono osservazioni empiriche, distillate in anni di lavoro su centinaia di progetti. Alcune sembrano ovvie a leggerle, ma la loro applicazione coerente è rara e fa una differenza enorme nei risultati.

Questa guida è un manifesto editoriale ad alto potere di condivisione: ogni legge è illustrata con un esempio prima/dopo, una metrica di successo, e il motivo per cui il 90% dei freelance e delle agenzie continua a violarla. È complementare alla guida sugli strumenti di grafica web 2026 e al workflow perfetto di sviluppo web: qui lo sguardo è sul risultato finale, non sul processo.

L'obiettivo è chiaro: dare a chiunque realizzi siti web (freelance, agenzia, o in-house) un framework mentale che può essere applicato da domani, su qualsiasi progetto, con un impatto misurabile sui risultati.

Legge 1: La homepage non è una vetrina, è un imbuto

La differenza fondamentale tra un sito da 500€ e uno da 50.000€ si vede nei primi 5 secondi. Un sito economico mostra: logo gigante, slider con 5 immagini, testo "benvenuti nel nostro sito", e 12 voci di menu. Un sito professionale mostra: una promessa chiara, una dimostrazione visiva del valore, e un'unica azione primaria (CTA).

Prima

• Logo centrato che occupa il 40% dello spazio
• Slider con 5 immagini rotanti che l'utente non guarda
• Hero text generico ("Soluzioni innovative per la tua azienda")
• 12 voci di menu orizzontali
• Sfondo bianco, tipografia Times New Roman

Dopo

• Logo piccolo in alto a sinistra, 3 voci di menu contestuali
• Singola immagine statica o video loop di 8 secondi, mai slider
• Hero text specifico: "Triplichi le conversioni del tuo e-commerce in 90 giorni, senza aumentare il traffico"
• CTA primario ben visibile: "Prenota una call gratuita di 30 minuti"
• Tipografia sans-serif moderna (Inter, Söhne, GT America)

Metrica di successo

Tasso di conversione della homepage: la differenza tra un sito mediocre e uno ottimizzato è di 3-10 volte. Un e-commerce con tasso di conversione dello 0,5% può arrivare al 2-5% solo con l'ottimizzazione della homepage.

Perché il 90% la ignora

Perché i clienti giudicano il sito dal numero di sezioni e dal design "bello da vedere", non dai risultati. Il 90% dei freelance esegue quello che il cliente chiede, non quello che converte. La formazione del cliente sull'importanza del conversion-focused design è la prima cosa da fare.

Legge 2: Un'unica CTA per schermata, ripetuta con intelligenza

Il tasto "acquista ora" o "contattaci" deve essere una scelta consapevole in ogni schermata. Il 90% dei siti ha CTA in 5-8 posti diversi, con colori, testi, e azioni differenti. L'utente è paralizzato dalla scelta e finisce per non cliccare nulla.

Prima

• Bottone verde in alto a destra ("Contattaci")
• Bottone blu al centro ("Scopri di più")
• Bottone arancione in fondo ("Iscriviti alla newsletter")
• Bottone rosso in sidebar ("Acquista")
• Bottone nero nel footer ("Lavora con noi")

Dopo

• Un unico colore per il CTA primario (es. verde)
• Un'azione chiara ripetuta in 3-4 posizioni strategiche (fine hero, fine di ogni sezione di contenuto, footer)
• Testo del bottone orientato al valore: non "Invia" ma "Prenota la tua call gratuita"
• Azioni secondarie (newsletter, login) in stile testuale, senza competere per attenzione

Metrica di successo

Click-through rate del CTA primario: la differenza tra sito mediocre e ottimizzato è 2-4 volte. Su 10.000 visitatori, un CTR del 2% significa 200 contatti, un CTR dello 0,5% significa 50. Lo stesso traffico, risultato quadruplicato.

Perché il 90% la ignora

Perché la moltiplicazione dei CTA sembra "dare più opzioni" all'utente, e sembra quindi più democratica. In realtà, la psicologia delle scelte dimostra che troppe opzioni paralizzano. La regola è: una decisione principale per pagina, con la CTA che guida l'utente verso quella decisione.

Legge 3: La tipografia fa il 60% del lavoro visivo

La maggior parte dei siti web economici usa tipografie di sistema (Arial, Times New Roman, Helvetica di default) o font generici Google Fonts (Open Sans, Roboto, Lato) senza personalizzazione. La tipografia è la prima cosa che l'occhio registra, e un font ben scelto e ben impostato può trasformare un design mediocre in uno professionale con il solo cambio del font.

Prima

• Open Sans 16px per il body
• Open Sans Bold 24px per i titoli
• Interlinea 1.4, allineamento justified
• Nessuna gerarchia visiva

Dopo

• Inter o Söhne 16-18px per il body, con line-height 1.6
• Stesso font, weight 600, 32-40px per H1, 24-28px per H2
• Allineamento a sinistra (no giustificato che crea fiumi bianchi)
• Scala tipografica con 5-6 livelli definiti (H1, H2, H3, body, small)
• Tracking e kerning ottimizzati per la leggibilità

Metrica di successo

Tempo medio di permanenza sulla pagina: una tipografia di qualità aumenta la leggibilità del 30-50%, e l'utente resta più a lungo. Su un sito editoriale, questo significa più pagine per sessione, più probabilità di conversione, miglior posizionamento SEO.

Perché il 90% la ignora

Perché la tipografia è invisibile quando funziona e molto visibile quando non funziona. Il cliente non sa che il sito è brutto per via del font, lo sa che "non è professionale". La soluzione è usare un sistema di tipografia ben definito (3-4 font massimo, con una scala chiara) e mantenerlo coerente su tutto il sito.

Legge 4: Il bianco è il colore più importante

Un errore classico dei siti economici è riempire ogni spazio con contenuti, immagini, o elementi decorativi. Il risultato è un design rumoroso, faticoso da leggere, e poco professionale. Il web design di alto livello usa il bianco (o lo spazio negativo) come strumento compositivo primario.

Prima

• Sidebar sinistra piena di widget, banner, social
• Sidebar destra con "articoli recenti", "tag cloud", "categorie"
• Contenuto principale compresso in 600px centrali
• Margini ridotti al minimo
• Footer con 4 colonne di link

Dopo

• Nessuna sidebar, contenuto principale a tutta larghezza
• Spazio verticale generoso tra le sezioni (80-120px)
• Margini interni dei contenuti aumentati del 50%
• Footer con 2-3 colonne essenziali, molto spazio
• Sezioni con sfondo alternato (bianco / grigio chiaro) per separare visivamente

Metrica di successo

Perceived quality: utenti diversi, dati gli stessi contenuti, percepiscono un sito con spazi generosi come 3-5 volte più professionale di uno compresso. Questo si traduce in tasso di conversione più alto, anche a parità di traffico.

Perché il 90% la ignora

Perché il cliente vuole "tanto contenuto in ogni schermata", e il freelance asseconda. Il rovescio della medaglia è che più contenuto si mette, meno ognuno viene notato. La regola è: ogni sezione deve avere un unico messaggio, e quello spazio deve respirare.

Legge 5: Le immagini devono essere specifiche, mai generiche

La differenza tra un sito economico e uno professionale si vede nelle immagini. Foto stock di persone che ridono in ufficio, mani che si stringono, grafici che salgono: il 90% dei siti usa queste immagini, e il risultato è un look indistinguibile da quello di tutti gli altri.

Prima

• Foto stock di una squadra felice in ufficio
• Foto stock di una donna che usa un laptop
• Foto stock di una stretta di mano
• Foto stock di un grafico con freccia in su
• Icone generiche (foglio Word, telefono, indirizzo)

Dopo

• Foto reali del team, del prodotto, o del servizio (anche scattate con smartphone, vanno bene se ben composte)
• Foto del processo di lavoro, dietro le quinte
• Screenshot reali del prodotto o del software, mai mockup stock
• Icone custom disegnate per il brand, in stile coerente
• Per e-commerce, foto prodotto su sfondo neutro, con più viste e dettagli

Metrica di successo

Trust: le immagini stock generiche riducono la fiducia del visitatore del 20-30% rispetto a immagini reali. Su un e-commerce, la differenza tra foto stock e foto prodotto di qualità può essere del 15-25% in tasso di conversione.

Perché il 90% la ignora

Perché le foto stock sono "gratis" (o poco costose) e "bello da vedere", e il cliente le preferisce a foto reali che richiederebbero un fotografo o un investimento in shooting dedicato. La soluzione è educare il cliente sul ROI delle immagini specifiche e, quando il budget non c'è, usare foto stock di alta qualità (Unsplash, Pexels curate) ma sempre contestualizzate al messaggio.

Legge 6: La velocità è un design feature

Un sito lento non è un sito con un problema tecnico: è un sito con un problema di design. La differenza tra un sito che carica in 1 secondo e uno che carica in 5 secondi è la differenza tra un utente che converte e uno che se ne va. La velocità va progettata, non corretta dopo.

Prima

• 15 plugin attivi, di cui 8 caricati su ogni pagina
• Immagini non ottimizzate, 2-5MB ciascuna
• Font Google Fonts caricati con 6 pesi inutilizzati
• JavaScript sincrono che blocca il rendering
• Nessuna cache, ogni richiesta genera 30+ query database

Dopo

• Massimo 15-20 plugin, caricati solo dove servono (conditional loading)
• Immagini WebP/AVIF, 100-300KB ciascuna, dimensioni corrette
• 2 pesi font (regular e bold) caricati con display=swap
• JavaScript differito, CSS critico inline
• Hosting gestito con cache server, CDN globale, HTTP/3

Metrica di successo

Largest Contentful Paint (LCP) sotto 2.5 secondi, Interaction to Next Paint (INP) sotto 200ms, Cumulative Layout Shift (CLS) sotto 0.1. Questi sono i Core Web Vitals che Google usa per il ranking SEO dal 2021.

Perché il 90% la ignora

Perché la velocità è invisibile in fase di progettazione: il cliente vede il sito sul suo Mac con fibra ottica e lo percepisce come veloce. Solo quando va in produzione, su mobile 4G, il problema emerge. La soluzione è testare il sito su Lighthouse e PageSpeed Insights prima della consegna, e richiedere un budget di ottimizzazione performance come parte del progetto.

Legge 7: Il design mobile-first non è una feature, è un vincolo

Il 65% del traffico web globale è da mobile. Progettare per desktop e adattare a mobile è sbagliato: il sito mobile non è una versione ridotta, è il sito. La versione desktop è il bonus.

Prima

• Progetto iniziato da desktop a 1440px
• Elementi compressi su mobile per mancanza di spazio
• Menu hamburger con 12 voci tutte nello stesso ordine
• Form con campi affiancati che su mobile diventano illeggibili
• Tabelle desktop mostrate male su mobile

Dopo

• Progetto iniziato da mobile a 375px
• Layout a colonna singola, elementi full-width
• Menu contestuale, massimo 4-5 voci principali
• Form a colonna singola, campi ben distanziati (altezza minima 44px per touch)
• Tabelle trasformate in card stack su mobile

Metrica di successo

Mobile usability score in Google Search Console: deve essere al 100% per tutte le paghe. Conversion rate mobile vs. desktop: per un e-commerce ben progettato mobile-first, il tasso mobile può essere superiore al desktop.

Perché il 90% la ignora

Perché i designer lavorano su schermi grandi e tendono a progettare per l'ambiente che li circonda. Inoltre, i clienti spesso chiedono prima la versione desktop perché "è più facile giudicare il design". La soluzione è imporre il mobile-first come metodo di lavoro, e mostrare al cliente entrambe le versioni ad ogni review.

Legge 8: L'accessibilità è un moltiplicatore, non un costo

Un sito accessibile non è solo etico o un obbligo di legge (in Italia la Legge Stanca lo richiede per i siti della PA, in Europa l'European Accessibility Act 2025 lo estende a molti settori privati). È anche un moltiplicatore di risultati: il 15-20% della popolazione ha qualche forma di disabilità, e un sito non accessibile esclude automaticamente questa fetta di utenti.

Prima

• Contrasto insufficiente (testo grigio su sfondo bianco)
• Bottoni con etichette vaghe ("clicca qui", "scopri")
• Form senza label espliciti, solo placeholder
• Video senza sottotitoli
• Navigazione impossibile da tastiera

Dopo

• Contrasto WCAG AA minimo (4.5:1 per testo normale)
• Bottoni con etichette descrittive ("Scarica la guida PDF", "Prenota la consulenza")
• Form con label sempre visibili, errori espliciti, focus visibile
• Video con sottotitoli e trascrizione
• Skip link, focus order corretto, ARIA labels dove necessario

Metrica di successo

Lighthouse Accessibility score sopra 95. Numero di errori in WAVE (Web Accessibility Evaluation Tool) pari a zero per le pagine principali. Per un e-commerce, l'accessibilità migliora la SEO (Google premia i siti accessibili) e aumenta la base di clienti raggiungibili del 15-20%.

Perché il 90% la ignora

Perché l'accessibilità è percepita come costo aggiuntivo e come "roba da avvocati". In realtà, integrare l'accessibilità fin dall'inizio del progetto costa poco (5-10% del budget) e retrofit dopo è costoso (30-50% del budget). La regola è: accessibilità come vincolo di progetto dal primo giorno, non come attività finale.

Legge 9: Ogni pagina deve avere un unico obiettivo misurabile

La differenza tra un sito da 500€ e uno da 50.000€ si vede nella chiarezza degli obiettivi. Un sito economico ha pagine che "presentano l'azienda" in modo generico. Un sito professionale ha pagine con un obiettivo specifico e misurabile: contatto, download, acquisto, registrazione, visualizzazione di un video.

Prima

• Homepage: "benvenuti, chi siamo"
• Chi siamo: storia dell'azienda, valori, mission
• Servizi: descrizione generica dei servizi offerti
• Contattaci: form generico + mappa + indirizzo
• Nessuna misurazione del successo

Dopo

• Homepage: 1 CTA (contatto), 1 obiettivo (generare lead qualificati)
• Chi siamo: 1 CTA (contatto), 1 obiettivo (costruire fiducia per la conversione)
• Servizi: 1 CTA per servizio (preventivo, demo, call), obiettivo diverso per pagina
• Case study: 1 CTA (contatto), 1 obiettivo (dimostrare expertise)
• Blog: nessun CTA aggressivo, obiettivo (SEO, lead nurturing, educazione)
• Ogni pagina ha KPI misurato con GA4 e heatmap

Metrica di successo

Per ogni pagina, almeno un KPI: tasso di conversione, tempo medio, scroll depth, micro-conversioni. Un sito professionale sa dire "questa pagina converte al 4,2%, voglio portarlo al 6% nei prossimi 3 mesi". Un sito economico non sa dire nulla di tutto ciò.

Perché il 90% la ignora

Perché richiede un cambio di mentalità da "sito come brochure" a "sito come strumento di business". I freelance che fanno siti da 500€ non hanno le competenze (o la volontà) di impostare analytics avanzati, definire funnel, e misurare i risultati. La soluzione è offrire ai clienti un servizio di CRO (Conversion Rate Optimization) continuativo, che diventa una fonte di reddito ricorrente.

Le 9 leggi in sintesi: il framework operativo

Le 9 leggi possono essere condensate in un framework operativo in 5 punti, applicabile a qualsiasi progetto:

1. Prima misura, poi progetta: prima di disegnare, definisci gli obiettivi di business e gli KPI. Se non sai cosa misurare, non sai cosa ottimizzare.
2. Poi semplifica: ogni pagina ha un obiettivo, una CTA, un messaggio. Se una sezione non serve, toglila.
3. Tipografia e spazio bianco: imposta questi due elementi con cura, e il 60% del design è fatto.
4. Mobile-first: parti da 375px, scala verso l'alto, non il contrario.
5. Test, misura, itera: dopo il lancio, monitora le metriche e ottimizza continuamente.

Come applicare le 9 leggi al tuo prossimo progetto

Un metodo pratico per integrare queste leggi in qualsiasi progetto, dal primo brief alla consegna finale.

Prima del progetto: brief e obiettivi

1. Chiedi al cliente: "Qual è l'azione più importante che un visitatore dovrebbe fare sul tuo sito?"
2. Chiedi: "Come misurerai il successo di questo sito nei prossimi 6 mesi?"
3. Definisci 3-5 KPI misurabili e i loro target numerici

Durante il progetto: design e sviluppo

1. Mobile-first, sempre
2. Una CTA per schermata, una gerarchia tipografica chiara
3. Spazio bianco generoso, immagini specifiche
4. Performance integrata nel processo, non aggiunta alla fine
5. Accessibilità come vincolo, non come checklist finale

Dopo il lancio: ottimizzazione continua

1. Monitora GA4 + Search Console + Hotjar o Microsoft Clarity
2. A/B test su CTA, hero, form, pagine di servizio
3. Aggiorna contenuti trimestralmente, design annualmente
4. Report trimestrale al cliente con numeri e prossime azioni

Domande frequenti

Queste leggi funzionano per qualsiasi tipo di sito?

Sì, con adattamenti. Le 9 leggi sono state distillate su e-commerce, siti corporate, blog editoriali, SaaS, e portali. Il framework è universale, l'applicazione specifica varia per settore. Per un e-commerce, le leggi 2, 4, 6 sono critiche. Per un SaaS, le leggi 1, 5, 9 sono critiche. Per un blog editoriale, le leggi 3, 6, 7 sono critiche.

Quanto costa applicare tutte le 9 leggi?

Per un sito da 5.000-10.000€ di budget, le 9 leggi sono applicabili con poco overhead. Per un sito da 1.000-2.000€ di budget, alcune leggi richiedono compromessi: si può usare un template premium ben fatto invece di design custom, o foto stock di alta qualità invece di shooting dedicati. La qualità del risultato dipende dalla coerenza con cui le leggi sono applicate, non dal budget assoluto.

Un cliente può applicare le 9 leggi da solo?

In parte sì, ma il valore aggiunto di un professionista è enorme. Le leggi 1, 2, 9 richiedono competenze di strategia e marketing. Le leggi 3, 4, 5 richiedono competenze di design. Le leggi 6, 7, 8 richiedono competenze tecniche. Un professionista esperto le integra tutte, un cliente fai-da-te di solito ne trascura 3-4.

Le 9 leggi cambieranno nel 2027?

Alcune sì, altre sono stabili. Le leggi 3 (tipografia), 4 (spazio bianco), 5 (immagini specifiche), 8 (accessibilità) sono abbastanza stabili nel tempo. Le leggi 1 (CTA), 2 (CTA singola), 9 (obiettivi misurabili) evolvono con i pattern di interazione (es. voice UI, interfacce conversazionali). Le leggi 6 (velocità), 7 (mobile-first) evolvono con la tecnologia (es. 5G, AI integrata nel browser).

Cosa distingue un web designer professionista da uno improvvisato?

L'applicazione coerente di queste 9 leggi, unita alla capacità di spiegarle al cliente e di difendere le scelte di design anche quando sembrano controintuitive. Il professionista è pagato per il giudizio, non per il numero di schermate prodotte.

Riferimenti ufficiali

Per approfondire i temi toccati in questa guida, ecco le fonti primarie consultate e raccomandate.

• Lighthouse - auditing performance e accessibilità.
• Web Vitals - metriche Google per il web.
• WCAG 2.2 - standard accessibilità W3C.
• WAVE - valutatore accessibilità.
• Hotjar - heatmap e registrazioni sessioni.
• Microsoft Clarity - alternativa gratuita a Hotjar.
• Google Analytics 4 - analytics web.
• Google Search Console - monitoraggio SEO.
• Stripe Press - An Elegant Puzzle - libro su sistemi e design di prodotto.
• Refactoring UI - libro pratico su web design.
• Strumenti grafica web 2026 mrtux.it - tool design 2026.
• Workflow perfetto sviluppo web mrtux.it - framework 7 stadi.

Questa guida è un manifesto editoriale: verrà aggiornata annualmente con nuove leggi e con l'evoluzione di quelle esistenti. Per suggerimenti o correzioni, l'area commenti è aperta.