Guide
Errori di web design: cosa fa sembrare un sito poco professionale nel 2026
Un sito non appare amatoriale perché gli manca l’effetto wow. Lo diventa quando gerarchia, spazi, parole, immagini e interazioni non aiutano più a capire dove siamo, che cosa conta e cosa possiamo fare.
La risposta breve
Il design professionale non coincide con uno stile di moda. Rende riconoscibili contenuto, priorità, navigazione e azioni in ogni dispositivo e stato d’uso. Un errore è dimostrabile quando crea ambiguità, incoerenza, ostacoli o perdita di informazione; non quando qualcuno preferisce semplicemente un altro colore.
Gian Luca Partengo
Sviluppatore e designer web dal 1995 · Aggiornato
Quando un sito sembra poco professionale?
La sensazione nasce spesso in pochi secondi, ma per correggerla bisogna tradurla in elementi osservabili.
Riconosci titoli, gruppi e priorità
Distingui link, pulsanti e stati
Leggi senza fatica o zoom forzato
Navighi e agisci su ogni dispositivo
Trovi coerenza fra promessa e dettaglio
Un progetto credibile riduce il lavoro necessario per interpretare la pagina. Non elimina la personalità: la rende comprensibile.
Come distinguere il gusto personale da un errore di web design?
“Non mi piace” è un’opinione. “Non riesco a capire, leggere o completare” descrive un problema che può essere verificato.
Preferenza
Una scelta può non piacere senza essere sbagliata
Minimalismo, brutalismo, illustrazione o fotografia possono funzionare se sostengono identità e compito. Lo stile, da solo, non è una diagnosi.
Uso
L’errore ostacola un compito reale
Se una persona non trova un servizio, non riconosce un collegamento o perde dati durante l’interazione, il problema supera il gusto.
Sistema
L’incoerenza moltiplica le interpretazioni
Lo stesso elemento non dovrebbe cambiare forma, colore o comportamento senza motivo. Ogni eccezione costringe a imparare di nuovo l’interfaccia.
Prova
Il giudizio deve indicare pagina, stato e conseguenza
Viewport, contrasto, ordine del focus, testo, destinazione e comportamento rendono una critica ripetibile. “È vecchio” o “non è moderno” non bastano.
La regola professionale
Prima si descrive ciò che accade, poi si misura l’impatto e soltanto dopo si propone una soluzione. Un restyling non è una cura se non conosce il problema.
Come riconoscere una gerarchia visiva che non guida il visitatore?
Dimensione, posizione, contrasto e spazio devono costruire un ordine leggibile, non una gara permanente fra elementi.
Un ingresso riconoscibile
La prima area dovrebbe chiarire attività, destinatario e proposta senza richiedere di ricomporre slogan, video e badge scollegati.
Una scala tipografica intenzionale
Titolo, sottotitolo, corpo e metadati devono avere differenze percepibili. Dieci dimensioni quasi uguali producono rumore, non gerarchia.
Contrasto usato per orientare
Il contrasto non serve soltanto a rendere leggibile il testo: separa livelli, azioni e stati senza trasformare ogni elemento in un accento.
Ordine visivo e ordine logico
La composizione dovrebbe seguire la sequenza con cui il contenuto viene compreso. Una posizione spettacolare non giustifica un ordine confuso.
Gruppi che mostrano relazioni
Elementi vicini sembrano appartenere allo stesso tema. Spazi e contenitori devono chiarire questa relazione, non contraddirla.
Un solo elemento dominante per momento
Popup, ticker, chat, badge, video e pulsanti concorrenti sottraggono priorità al contenuto principale e rendono la pagina inquieta.
Quando la tipografia rende difficile leggere un sito?
Un carattere può essere coerente con il brand e diventare comunque illeggibile per dimensione, misura, interlinea o peso.
Scala
Dimensioni elastiche, con limiti sensati
Il testo deve adattarsi senza diventare minuscolo sul telefono o enorme su un monitor ampio. Un valore fluido va sempre contenuto fra un minimo e un massimo.
Misura
La misura del testo deve seguire il suo ruolo
Una breve introduzione e un lungo testo continuo non richiedono la stessa misura. Larghezza, corpo e distanza di lettura vanno progettati insieme, senza colonne strette lasciate accanto a vuoti accidentali.
Ritmo
Interlinea e paragrafi devono far respirare il pensiero
Righe attaccate, paragrafi senza pausa e titoli separati dal contenuto sbagliato rendono anche un testo semplice faticoso da seguire.
Caricamento
Il font deve funzionare anche mentre arriva
Famiglie, pesi e fallback vanno limitati e verificati. Un sistema tipografico non dovrebbe produrre salti vistosi o testo invisibile durante il caricamento.
Non esiste una misura universale valida per ogni font e lingua. Il controllo va eseguito sul testo reale, nei viewport reali e con lo zoom del browser.
Come usare spaziatura, densità e ritmo senza creare vuoti accidentali?
Lo spazio non è ciò che resta dopo aver posizionato i componenti. È uno degli strumenti con cui la pagina spiega struttura e priorità.
Sezioni distinguibili
Titolo, testo e blocco successivo richiedono distanze coerenti. Parti attaccate sembrano un errore; distanze casuali spezzano il racconto.
Griglie complete
Le righe di card devono chiudersi in modo intenzionale. Un singolo box lasciato sotto tre colonne comunica una struttura non risolta.
Margini sicuri
Testo e controlli non devono vivere contro i bordi dello schermo o del contenitore. Il margine protegge lettura, tocco e percezione di qualità.
Allineamenti condivisi
Titoli, immagini e azioni che iniziano su assi diversi senza motivo producono instabilità. Una griglia coerente rende leggibili anche pagine dense.
Densità proporzionata al compito
Un pannello operativo può essere compatto; una pagina commerciale richiede pause e priorità più nette. La stessa densità non serve ogni contesto.
Niente vuoto accidentale
Lo spazio ampio può creare enfasi. Se nasce invece da colonne sbilanciate, testi troppo stretti o media assenti, appare come contenuto mancante.
Come rendere riconoscibili link e call to action?
Colore, forma, posizione, testo e stato devono permettere di riconoscere che cosa è azionabile prima di provarlo.
Riconoscibilità
Il colore da solo non basta
Nel testo corrente una sottolineatura o un altro segnale persistente aiuta a distinguere i collegamenti. Nei menu e nei pulsanti il contesto può fornire la stessa informazione.
Parole
L’etichetta deve anticipare la destinazione
“Scopri il servizio” è più utile di “clicca qui”. L’attributo title non sostituisce un testo visibile e comprensibile e non è obbligatorio su ogni link.
Priorità
Primaria e secondaria non devono sembrare uguali
Due azioni con identico peso mettono la decisione sul visitatore. La composizione deve dichiarare quale passo è principale e quale alternativa.
Stati
Hover, focus, attivo e disabilitato sono parte del design
L’hover non esiste sul touch e il focus non può essere cancellato. Ogni stato importante deve restare percepibile nel dispositivo che lo produce.
Una CTA non corregge una pagina confusa
Ingrandire il pulsante non risolve una proposta incomprensibile. Prima si costruiscono contesto, prova e priorità; poi si rende evidente l’azione coerente.
Come verificare palette, contrasto, light e dark mode?
Partire dall’identità del brand è corretto. Copiare semplicemente i colori del logo in ogni componente non lo è.
Ruoli
Ogni colore deve avere un compito stabile
Sfondo, superficie, testo, bordo, accento, errore e successo richiedono ruoli definiti. Valori casuali moltiplicati pagina per pagina dissolvono l’identità.
Leggibilità
Il contrasto si verifica nelle combinazioni reali
Non basta approvare due colori isolati. Testo, pulsante, bordo, focus, overlay e immagine di sfondo vanno controllati nello stato in cui vengono mostrati.
Significato
Informazioni e azioni non dipendono soltanto dal colore
Testo, icona, forma o posizione devono sostenere il significato. Chi non distingue una tonalità deve poter capire comunque stato e azione.
Temi
Light e dark mode richiedono due verifiche complete
Invertire fondo e testo non basta. Immagini, loghi, ombre, controlli nativi, grafici e focus devono rimanere leggibili in entrambi i temi e rispettare la preferenza iniziale.
Per requisiti, obblighi e test completi consulta anche la guida all’accessibilità dei siti web.
Come scegliere immagini che siano utili, nitide e leggere?
Non esiste un limite universale in kilobyte o una sola dimensione corretta. Esiste una risorsa adatta al suo uso e consegnata nel modo più efficiente possibile.
Una funzione riconoscibile
Una fotografia può dimostrare un lavoro, spiegare un prodotto o costruire atmosfera. Se non svolge alcun compito, il suo costo visivo e tecnico va rimesso in discussione.
Taglio pensato per il contenitore
Il soggetto non dovrebbe scomparire quando cambia rapporto. Hero, card e anteprima social possono richiedere ritagli diversi della stessa sorgente.
Sorgenti responsive
Attributi srcset e sizes o l’elemento picture permettono al browser di scegliere una risorsa coerente con viewport, densità e formato supportato.
Formato e compressione scelti sul caso
AVIF, WebP, JPEG, PNG e SVG risolvono esigenze differenti. La qualità va controllata sul soggetto reale, non affidata a una soglia identica per ogni immagine.
Dimensioni dichiarate e layout stabile
Width, height o aspect-ratio aiutano il browser a riservare lo spazio. Un’immagine che sposta improvvisamente testo e pulsanti rende la pagina fragile.
Testo alternativo contestuale
Un’immagine informativa richiede un alt utile nel contesto. Una decorativa richiede alt vuoto: descrivere ogni ornamento aggiunge rumore anziché accessibilità.
Per approfondire consegna, priorità e peso delle risorse leggi perché un sito diventa lento.
Come distinguere il responsive reale da un desktop rimpicciolito?
Una pagina deve riorganizzare contenuto e interazioni in base allo spazio e al dispositivo, senza perdere informazione o funzione.
Layout
Il contenuto rifluisce senza tagli o scroll laterale
Colonne, tabelle, media e testi vanno verificati anche con zoom e caratteri ingranditi. Nascondere ciò che non entra non è responsive design.
Ordine
La priorità può cambiare con il contesto
Su uno schermo stretto contenuti secondari possono spostarsi, comprimersi o aprirsi su richiesta, purché il percorso principale resti evidente.
Interazione
Controlli toccabili e sufficientemente distanziati
Icone minuscole e azioni adiacenti aumentano gli errori. WCAG 2.2 definisce criteri minimi per dimensione o spaziatura dei target.
Contenuto
Il messaggio non cambia accidentalmente fra dispositivi
Tagli di testo, CTA mancanti e immagini con soggetti fuori campo possono trasformare la stessa pagina in due esperienze commerciali diverse.
Quando le animazioni aiutano e quando distraggono?
Una transizione utile mostra relazione, stato o continuità. Un effetto applicato ovunque compete con il contenuto e può creare disagio.
Funzione
Ogni movimento risponde a una domanda
Dove è finito l’elemento? L’azione è stata ricevuta? Che cosa si è aperto? Se l’animazione non chiarisce nulla, deve giustificare il proprio costo.
Controllo
Autoplay e movimento persistente non prendono il comando
Video, slider e ticker devono permettere pausa o arresto quando richiesto. Il contenuto non dovrebbe muoversi mentre una persona tenta di leggerlo o usarlo.
Stabilità
L’effetto non blocca o sposta l’interfaccia
Animazioni pesanti, reveal tardivi e layout che cambiano durante il caricamento fanno percepire il sito come meno solido, anche se il visual è sofisticato.
Preferenza
prefers-reduced-motion viene rispettato
Chi ha richiesto meno movimento deve ricevere una variante ridotta o statica. La preferenza non è un invito a disattivare anche feedback indispensabili.
Effetto wow non significa efficacia
Un sito può sorprendere per cinque secondi e restare difficile da usare. La qualità emerge quando l’effetto sostiene il messaggio senza diventare il messaggio.
Perché template, builder e AI non sostituiscono la progettazione?
Questi strumenti possono accelerare composizione e sviluppo. Non prendono automaticamente le decisioni che rendono coerente un sito reale.
Gerarchie generiche
La stessa hero, la stessa sequenza e le stesse card vengono applicate ad attività con obiettivi diversi perché erano già disponibili nel modello.
Componenti senza regole condivise
Se pulsanti, spazi e titoli vengono modificati localmente per far entrare il contenuto, il design system si dissolve pagina dopo pagina.
Testi costretti dentro il layout
Titoli abbreviati, righe orfane e informazioni omesse sono spesso il risultato di una gabbia scelta prima di conoscere il contenuto.
Breakpoint corretti soltanto nella demo
Il componente funziona con tre parole e un’immagine perfetta; cede con traduzioni, prezzi, nomi lunghi, errori o dati reali.
Effetti e dipendenze rimasti per inerzia
Slider, librerie, font e varianti non usate continuano a essere caricati perché rimuoverli richiederebbe comprendere davvero il progetto.
Assenza di regia finale
Un output generato può sembrare finito. Serve comunque qualcuno che verifichi identità, contenuto, stati, responsive, accessibilità e manutenzione.
Per confrontare piattaforma, fai-da-te e progetto professionale consulta la guida dedicata a Wix e ai siti economici.
Quali controlli fare sul design di un sito esistente?
Il controllo deve usare pagine, contenuti e azioni reali. Una demo vuota o una sola larghezza non rappresentano il prodotto pubblicato.
-
01
Chiarisci il messaggio iniziale
Mostra la homepage a una persona che non conosce l’attività e chiedi chi siete, che cosa offrite e quale passo dovrebbe compiere.
-
02
Osserva la gerarchia senza leggere tutto
Titoli, gruppi, prove e azioni devono emergere anche durante una scansione veloce, senza che ogni elemento chieda la stessa attenzione.
-
03
Prova testo reale, zoom e lingua lunga
Controlla interlinea, misura, pesi e ritagli con contenuti veri, zoom del browser e la versione linguistica che occupa più spazio.
-
04
Controlla griglie, margini e righe complete
Cerca box attaccati, colonne vuote, card isolate, assi incoerenti e grandi spazi che sembrano errori o contenuti mancanti.
-
05
Riconosci e usa tutte le azioni
Link, pulsanti, menu, modali e form devono avere etichette, priorità e stati comprensibili con mouse, touch e tastiera.
-
06
Verifica immagini e ritagli
Controlla qualità, funzione, alt, dimensioni dichiarate, sorgenti responsive e stabilità del layout su connessione lenta.
-
07
Attraversa viewport e temi
Non limitarti a un telefono e a un desktop. Prova larghezze intermedie, orientamento, light e dark mode e preferenze di movimento.
-
08
Completa il percorso senza puntatore
Il focus deve seguire un ordine logico, restare visibile e non essere coperto. Apertura, chiusura, errore e successo devono essere percepibili.
Come progetto un’identità visiva che resti utilizzabile?
Grafica, contenuto e codice vengono decisi insieme: il design non arriva prima come immagine da imitare né dopo come decorazione.
Metodo GLP
Il sistema deve reggere oltre la homepage perfetta
Parto da attività, pubblico, contenuti e azioni. Costruisco poi una grammatica visiva con ruoli, componenti e comportamenti verificabili.
La qualità non dipende da un singolo effetto. Dipende dalla coerenza mantenuta quando cambiano pagina, lingua, dispositivo, tema, stato e quantità di contenuto.
- Gerarchia e priorità definite prima dei dettagli
- Tipografia, spazi e palette governati da token
- Componenti semantici con stati completi
- Immagini preparate per ruolo e viewport
- Light, dark mode e preferenze rispettate
- Test su contenuti e percorsi realmente pubblicati
Obiettivo
Il sito non porta contatti
Se il problema riguarda messaggio, prova e percorso commerciale, serve una diagnosi più ampia della sola interfaccia.
Analizza il percorsoConformità
Accessibilità del sito
Contrasto e focus sono soltanto una parte. Obblighi e verifica WCAG richiedono un perimetro specifico.
Approfondisci l’accessibilitàPrestazioni
Perché il sito è lento
Immagini, font e animazioni incidono anche sul caricamento. La guida dedicata separa cause, misure e interventi.
Controlla la velocitàProgetto
Sito e identità su misura
Architettura, visual design, sviluppo e controlli fanno parte dello stesso progetto, con perimetro e prezzi dichiarati.
Consulta servizi e prezziFonti primarie e documentazione verificata
Le indicazioni tecniche derivano da standard e documentazione ufficiale. Non da soglie universali o ricette commerciali.
-
W3C — Web Content Accessibility Guidelines 2.2Apri la fonte
Criteri verificabili per contrasto, reflow, focus, dimensione dei target, movimento e uso dell’interfaccia.
-
W3C WAI — Understanding Use of ColorApri la fonte
Perché il colore non può essere l’unico mezzo per distinguere informazione, azione o stato.
-
W3C WAI — Images TutorialApri la fonte
Ruolo delle immagini informative e decorative e scelta contestuale del testo alternativo.
-
W3C WAI — Menus TutorialApri la fonte
Struttura, stile e comportamento da tastiera dei menu di navigazione e applicativi.
-
Google Search Central — Image SEO best practicesApri la fonte
Immagini responsive, formati supportati, qualità, velocità e testo alternativo utile nel contesto.
-
web.dev — TypographyApri la fonte
Dimensione, misura, interlinea, scala fluida e preferenze che rendono il testo realmente leggibile.
-
web.dev — User interface patternsApri la fonte
Adattamento dei componenti e della navigazione ai diversi form factor senza ridurre il mobile a un desktop piccolo.
-
web.dev — prefers-reduced-motionApri la fonte
Uso della preferenza di sistema per offrire una variante con meno animazioni e movimento decorativo.
Fonti controllate il 18 settembre 2026. Standard, browser e documentazione possono evolvere: prima di un audit va sempre verificata la versione corrente.
Domande frequenti sugli errori di web design
Risposte dirette per distinguere estetica, usabilità, accessibilità e qualità del progetto.
Come capire se un sito sembra poco professionale?
Verifica se attività, priorità, navigazione e azioni sono comprensibili; se tipografia, spazi e componenti sono coerenti; e se il percorso funziona su mobile, tastiera, light e dark mode. Il gusto personale viene dopo questi controlli.
Un sito professionale deve avere un design minimalista?
No. Può essere ricco, editoriale, illustrato o essenziale. Deve però governare gerarchia, densità, contrasto e interazioni in modo coerente con identità, contenuto e obiettivo.
Ogni link deve avere l’attributo title?
No. Il link deve avere una destinazione reale e un nome accessibile significativo. Il title è utile soltanto quando aggiunge informazione e non sostituisce un testo visibile chiaro.
I link devono essere sempre sottolineati?
Nel testo corrente la sottolineatura è un segnale molto efficace. In menu, card o pulsanti il contesto e la forma possono rendere il link riconoscibile anche senza sottolineatura. Il colore o il solo hover non dovrebbero essere l’unico indizio.
Quanto deve pesare un’immagine per il web?
Non esiste una soglia universale. Dipende da dimensione visiva, contenuto, qualità necessaria, formato, densità e ruolo. Serve consegnare una sorgente proporzionata e controllarne l’effetto sulla pagina reale.
Tutte le immagini devono avere una descrizione nell’alt?
Tutte le immagini img devono avere l’attributo alt, ma non sempre una descrizione. Le informative richiedono un testo contestuale; quelle puramente decorative devono usare alt vuoto per essere ignorate dalle tecnologie assistive.
Dark mode e light mode sono obbligatori?
Non esiste un obbligo generale di offrire entrambi i temi. Se vengono proposti, devono essere completi, leggibili, coerenti e preferibilmente rispettare la scelta del sistema senza lampi o stati intermedi incoerenti.
Un’animazione rende il sito più moderno?
Non automaticamente. È utile quando spiega relazione, cambiamento o feedback. Movimento decorativo continuo, reveal che ritardano il contenuto e transizioni non riducibili possono peggiorare esperienza e credibilità.
Un template o l’AI possono produrre un buon design?
Possono produrre una buona base o accelerare alcune fasi. Non sostituiscono la regia su identità, contenuti reali, responsive, stati, accessibilità e manutenzione. La qualità dipende da come l’output viene governato e verificato.
Quando conviene rifare la homepage invece di correggerla?
Quando gerarchia, messaggio, componenti e responsive dipendono da una struttura che rende ogni correzione locale incoerente o fragile. Prima di decidere serve però una diagnosi del sito esistente e dei suoi obiettivi.
Prossimo passo
Il tuo sito sembra datato o poco professionale, ma non vuoi rifarlo al buio?
Pagina Zero permette di vedere una nuova homepage progettata sulla tua attività prima di decidere sul progetto completo. È riservata a siti esistenti e alle richieste che posso valutare personalmente come adatte.