Errori comuni di web design

Semplici suggerimenti per il layout e il design che vi aiuteranno a creare una pagina web straordinaria


Nikita Obukhov
Fondatore e CEO di Tilda
Migliaia di persone in tutto il mondo creano siti web su Tilda. Questo articolo si basa su una recente ricerca condotta da me e dai miei colleghi. Abbiamo analizzato gli errori più comuni che le persone commettono quando creano siti web utilizzando la nostra piattaforma. Ecco un elenco di cose da fare e da non fare, applicabile a qualsiasi strumento o servizio di web design utilizzato.
Errori comuni nella progettazione delle pagine di atterraggio
1. Il contenuto non è suddiviso in blocchi logici
È più facile per gli utenti digerire le informazioni se queste sono raggruppate in blocchi logici. Impostate un padding di 120-80 pixel e separate i blocchi di testo utilizzando sfondi colorati.
C'è poco spazio tra gli insiemi di informazioni correlate. Inoltre, questo design ha bisogno di blocchi di colore per dividere i contenuti in gruppi logici. Di conseguenza, le informazioni sono difficili da digerire e non è chiaro quale testo debba essere abbinato a ciascun blocco.
I padding sono sufficientemente grandi e i blocchi sono separati dal colore, il che rende immediatamente chiara una cosa: questi blocchi contengono diversi tipi di contenuto.
2. Spazi irregolari tra gli elementi di una pagina web
Gli spazi della stessa dimensione devono essere disposti intorno ai blocchi logici. In caso contrario, la pagina risulterà disordinata e gli utenti potrebbero non dare la stessa importanza a ciascuna sezione.
Spazi di diverse larghezze hanno un aspetto disomogeneo e danno l'impressione che le informazioni aziendali siano legate all'intestazione, anche se ogni blocco ha la stessa importanza.
Gli spazi della stessa dimensione intorno ai titoli e al corpo del testo aiutano a percepire i blocchi logici come portatori di informazioni ugualmente importanti.
3. Il padding è troppo piccolo: gli utenti non possono suddividere il contenuto in blocchi logici.
Per evitare che le parti logiche si confondano, tenetele separate e inserite un ampio spazio (almeno 120 pixel) tra di esse.
Il padding stretto fa sì che i blocchi si attacchino l'uno all'altro. Questo sovraccarica la pagina e crea confusione: il visitatore del sito web è portato a credere che si tratti di un unico pezzo di testo solido e non di parti diverse.
Il padding è sufficientemente ampio, per cui la differenza tra questi due blocchi è immediatamente visibile
4. Basso contrasto per la copia di testo su un'immagine
Il contrasto tra testo e sfondo deve essere sufficiente. Per far risaltare la copia, posizionate un filtro contrastante sopra l'immagine. Il nero è un colore molto diffuso, ma si possono usare anche colori vivaci, mescolandoli tra loro.

Un'altra possibilità è quella di usare un'immagine contrastante fin dall'inizio e di posizionare la copia sopra una sezione scura di una fotografia.
L'immagine è troppo chiara, il che rende difficile la lettura del testo.
Un filtro applicato alla foto rende la copia facilmente leggibile
5. Troppi stili in una pagina
Troppi stili tipografici e di design in una pagina la fanno sembrare poco professionale e difficile da leggere. Per evitare questo problema, limitatevi a un solo carattere e a due opzioni di peso. Ad esempio, normale e grassetto.
A causa dei troppi stili tipografici utilizzati, non è chiaro dove sia l'enfasi.
Un carattere, un colore e due opzioni di peso. La tipografia della pagina appare ordinata e chiara.
6. Il blocco con sfondo colorato è troppo stretto
Evitate di enfatizzare con il colore gli elementi stretti della pagina. Non ha un bell'aspetto. Ad esempio, le intestazioni sono già ben evidenziate, grazie alle loro dimensioni, al peso dei caratteri e ai padding. Volete evidenziare un punto particolare della pagina? Utilizzate uno sfondo a colori per l'intero blocco, compresi i titoli e la copia del testo.
I titoli posizionati su uno sfondo colorato interrompono la continuità della pagina e appaiono come elementi separati e indipendenti.
Sia l'intestazione che la relativa copia di testo condividono lo stesso sfondo. Ciò dimostra che appartengono allo stesso insieme logico.
7. Troppa copia di testo all'interno di colonne strette
È difficile leggere quando c'è molto testo in colonne strette, perché i visitatori del sito web devono saltare da una riga all'altra. Inoltre, non ha un bell'aspetto! È meglio ridurre il numero di colonne e accorciare il testo. Altrimenti, nessuno lo leggerà.
Le colonne lunghe e delineate sono difficili da leggere
In queste colonne c'è poco testo, quindi è facile da leggere.
8. Testo troppo centrato
La centratura del testo sulla pagina funziona bene quando c'è poco testo, altrimenti è difficile per gli utenti navigare in modo efficiente. Allo stesso tempo, aumentate la dimensione del carattere a partire da 24 pixel.

Se dovete includere molto testo, usate i blocchi con copia del testo pieghevole (su Tilda, usate i blocchi TX12, TX16N o il pulsante BF703).
I testi lunghi e centrati non sono facili da leggere
Un breve pezzo di testo sotto l'intestazione (entrambi centrati) fa bella figura su una pagina
9. La copia del testo è sovrapposta a una parte essenziale dell'immagine.
Evitate di coprire con il testo parti significative o piccoli dettagli di un'immagine. In questo modo si oscura l'immagine e si rende il testo illeggibile. Provate a posizionare le righe di testo in modo diverso, ad esempio centrate, allineate a sinistra o addirittura in verticale.
Questa intestazione ostacola il volto della donna. Con tanti piccoli dettagli, è difficile leggere il testo.
L'immagine e il testo sono facili da leggere e formano una buona composizione.
10. Uso improprio della gerarchia visiva
Affinché la gerarchia delle informazioni sia chiaramente visibile su una pagina, il titolo in copertina dovrebbe essere più grande del resto delle intestazioni o almeno della stessa dimensione. Questo vale soprattutto se il titolo è lungo, ad esempio.
L'intestazione del frontespizio è sproporzionatamente più piccola dell'intestazione successiva, il che crea confusione. Perché? Fa apparire il secondo titolo più in evidenza
L'intestazione del frontespizio è più grande di quella del blocco successivo, in modo che la pagina risulti coerente.
Lo stesso principio si applica alla gerarchia visiva all'interno di un blocco logico. Il titolo dovrebbe essere l'elemento di design più grande della pagina, seguito da un sottotitolo più piccolo e meno evidente. I titoli delle caratteristiche che seguono devono essere sensibilmente più piccoli dell'intestazione e dello stesso peso. I caratteri più piccoli devono essere utilizzati per le descrizioni delle caratteristiche.

Questo aiuterà i visitatori del sito a distinguere le informazioni più importanti da quelle meno importanti.
L'intestazione è più piccola rispetto ai titoli delle caratteristiche e sembra meno significativa, anche se in questo contesto è più importante
L'intestazione è l'elemento più evidente della pagina e, nonostante i titoli delle caratteristiche siano scritti in caratteri più piccoli, sono comunque ben visibili.
11. Un insieme logico viene suddiviso in due
Un'immagine o una galleria a schermo intero che segue un testo assomiglia a un blocco separato e indipendente. Se si aggiunge un padding intorno alla galleria, sia la copia del testo che le immagini appariranno come un insieme logico, grazie allo sfondo condiviso.
Una galleria a schermo intero appare disgiunta dall'intestazione precedente e sembra un blocco a sé stante.
La galleria condivide lo stesso sfondo dell'intestazione che la precede, facendo apparire solida l'intera composizione.
12. Il titolo è troppo grande e troppo lungo
Un carattere molto grande è perfetto per una frase breve. Se il titolo è lungo, utilizzate un carattere di dimensioni più piccole. In questo modo sarà più facile da leggere e si lascerà spazio a tutti gli altri elementi di design della pagina.
L'intestazione troppo grande occupa l'intera copertina, mentre gli elementi di design si contendono lo spazio e l'intestazione è difficile da leggere.
Questa pagina è ben composta, tutti gli elementi di design sono in equilibrio tra loro e il testo è di facile lettura.
13. Uso errato dello stile dei bordi per i pulsanti
I bordi sono necessari quando un pulsante è trasparente. L'aggiunta di un bordo per un pulsante a colori non ha senso. È solo un'altra caratteristica di design senza senso che sovraccarica la pagina e ne rende difficile la lettura.
14. Troppi colori
L'uso di troppi colori in una pagina crea confusione. Inoltre, non è chiaro quali siano le parti più importanti. Uno o due colori sono sufficienti per dare peso visivo a ciò che è veramente importante.
Ci sono troppi colori vivaci nella pagina; questo crea confusione.
Un accento di colore crea varietà e non distrae dal contenuto della pagina
15. Menu sovraccarico
Le persone visitano i siti web per trovare soluzioni ai loro problemi, aiutatele! Utilizzate il menu per aiutare le persone a navigare nel sito e a trovare ciò di cui hanno bisogno in modo rapido e semplice. Non sovraccaricateli di informazioni eccessive. È sufficiente avere da 5 a 7 voci di menu.
Questo menu contiene troppe informazioni, rendendo più difficile la navigazione del sito web.
Un menu semplice permette di trovare facilmente ciò di cui si ha bisogno
Errori comuni di web design editoriale
1. Testo lungo e solido
Un muro di testo rende difficile la lettura. Per facilitare la navigazione, dividetelo in paragrafi o introducete delle interruzioni come frasi d'impatto, citazioni o immagini.
Un muro di testo è difficile da guardare
Elementi come citazioni o immagini facilitano la lettura del testo.
2. Il titolo è posizionato alla stessa distanza tra due paragrafi.
Un titolo non deve essere "appeso" tra i capitoli a una distanza simile perché appartiene al paragrafo che segue. La spaziatura sopra un titolo dovrebbe essere 2-3 volte maggiore di quella sotto di esso. Allo stesso tempo, la distanza sotto un titolo dovrebbe essere all'incirca uguale allo spazio tra i paragrafi o leggermente superiore. In questo modo, il titolo rimanda visivamente al testo successivo.
L'intestazione è posizionata a una distanza uguale tra i paragrafi sopra e sotto di essa, e non è chiaro a quale paragrafo appartenga.
Grazie all'uso del padding sotto l'intestazione, è evidente che l'intestazione appartiene al testo che la segue.
3. Nessun ordine logico
In tipografia, il contrasto viene utilizzato per dividere visivamente diversi livelli di testo e stabilire una gerarchia rigorosa. I titoli principali devono essere i più evidenti della pagina; i sottotitoli devono essere molto più piccoli, ma comunque ben visibili.
Il titolo e i sottotitoli hanno più o meno le stesse dimensioni, non c'è una chiara gerarchia.
È chiaro che il titolo è più importante del sottotitolo.
4. Spaziatura diversa sopra e sotto i blocchi
Se i blocchi hanno lo stesso peso, devono avere lo stesso aspetto e la stessa sensazione e devono essere posizionati alla stessa distanza l'uno dall'altro.
Se lo spazio tra l'intestazione e l'immagine di un autore è troppo stretto, sembra che l'autore abbia a che fare più con l'intestazione che con il testo che segue.
Grazie alla stessa spaziatura sopra e sotto l'immagine, i blocchi appaiono uguali
5. La didascalia è posizionata troppo vicino all'immagine
Da un lato, l'illustrazione e la sua didascalia formano un unico insieme, ma si tratta di due elementi separati e le didascalie non devono interferire con l'immagine.
La didascalia è incollata all'immagine e interferisce con la percezione (sia dell'immagine che del testo).
C'è molto spazio bianco tra l'immagine e la sua didascalia, ma è chiaro che la didascalia appartiene all'immagine.
6. C'è troppo poco spazio tra il sottotitolo e il paragrafo.
Il sottotitolo e il testo che lo segue sono strettamente legati, ma se lo spazio tra i paragrafi di un articolo è maggiore di quello tra il sottotitolo e il paragrafo successivo, l'articolo appare disarticolato.
Lo spazio tra un sottotitolo e un paragrafo è minore di quello tra i paragrafi stessi.
La spaziatura sotto il sottotitolo è leggermente più grande della spaziatura tra i paragrafi.
7. Gli elementi di spicco sono posizionati troppo vicini al testo principale
Gli elementi utilizzati come espressioni di enfasi, come frasi chiave o citazioni, sono oggetti indipendenti. Per farli risaltare davvero, posizionateli a 75-120 pixel dal testo principale.
C'è troppo poco spazio tra il testo principale e gli elementi di spicco.
La citazione spicca grazie all'ampia imbottitura.
8. Elementi a basso contrasto
Se volete enfatizzare una determinata frase, siate audaci, fate in modo che la frase chiave sia più grande del testo principale di 10-15 pixel. Fate in modo che la frase chiave si distingua dal resto del testo.
La frase chiave si confonde con il resto del copy, sembra disordinato
La frase chiave risalta bene grazie alle grandi dimensioni del carattere e alla spaziatura sufficiente intorno al testo.
9. Sfondo a colori per un blocco di testo stretto
Se si desidera mettere in evidenza una piccola sezione della pagina, ad esempio le informazioni sull'autore, è sufficiente impostare un padding sufficiente intorno ad essa per creare l'impressione di spazio. Non collocate questa sezione su uno sfondo colorato: sembrerebbe fuori luogo.
Non utilizzare il colore per il sottotitolo. L'uso di un carattere più grande e di un padding dovrebbe essere sufficiente a farlo risaltare nella pagina.
10. Spazio vuoto tra due immagini a schermo intero
Quando si utilizzano diverse immagini a schermo intero in una sequenza, evitare di lasciare uno spazio tra di esse. Il bordo sarà comunque visibile e non è necessario aggiungere un elemento supplementare. Non aggiunge nulla, non ha senso.
Lo spazio bianco tra le immagini a schermo intero non ha senso e non ha un aspetto gradevole
In questo esempio c'è un flusso armonioso tra le immagini
11. Troppi accenti di design utilizzati
Gli accenti di design (come il grassetto) funzionano bene quando sono pochi. Se ne mettete troppi, ostacolerete la lettura della pagina.
Molte parole sono segnate in grassetto, in modo che la copia del testo appaia interrotta.
Poche parole marcate catturano l'attenzione e non interferiscono con il resto del testo.
12. Troppi stili tipografici
Il design non deve interferire con la leggibilità. Meno stili tipografici ci sono, meglio sono visibili gli elementi importanti. È sufficiente enfatizzare i titoli e i sottotitoli e usare il contrasto per le frasi chiave.
Ci sono troppi accorgimenti tipografici in questo testo; distraggono il lettore.
Pochi stili tipografici, accenti chiari e rispetto della gerarchia del testo.
13. Centrare il testo in un articolo lungo
La centratura viene solitamente applicata ai titoli e alle citazioni per distinguerli dal resto del testo. Un testo lungo allineato al centro è difficile da leggere.
Il testo centrato appare disordinato, difficile da leggere
Il testo allineato a sinistra è più facile da vedere
14. L'intestazione è troppo vicina all'immagine
Un titolo è un elemento di design individuale. Non deve essere posizionato troppo vicino a un'immagine che lo segue. Per ottenere una combinazione vincente, impostate un padding non inferiore a 60 pixel e aggiungete un sottotitolo: questo aprirà il contenuto della pagina e porrà la giusta enfasi dove deve essere.
L'intestazione è troppo vicina all'immagine, non c'è "aria" in questa pagina
Il titolo è separato dall'immagine da un sottotitolo e si riferisce all'intera sezione, non solo all'immagine.
15. Uso non necessario del corsivo
Il corsivo viene utilizzato per enfatizzare una parola o una breve frase nel testo. Non è immediatamente visibile come il grassetto, ma permette di enfatizzare dove necessario.

Non usate il corsivo per il corpo del testo e per i titoli. Se si utilizzano caratteri sans-serif nella copia del testo, evitare del tutto il corsivo.
La frase risalta grazie alla dimensione e alla spaziatura dei caratteri, quindi il corsivo non è necessario.
I corsivi sono al posto giusto e aggiungono la giusta enfasi.
16. I blocchi sono spostati rispetto al centro e tra loro.
È possibile individuare questo fastidioso errore se si fa una piccola pausa dopo aver modificato la pagina (cambiando la dimensione dei caratteri, l'allineamento o la spaziatura) e si guarda di nuovo il risultato.
In questo esempio, l'intestazione è spostata a sinistra e il testo è spostato a destra.
Tutti gli elementi del testo sono in armonia tra loro

Se questo articolo vi è piaciuto, condividetelo con i vostri amici! Grazie ✌️
Vedi anche:
Libro di testo gratuito su come progettare, impostare e gestire
landing page ad alta conversione

Guida pratica gratuita all'animazione web con esempi e tecniche,

e consigli su come utilizzarli