Errori comuni di web design

È 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.

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.

Per evitare che le parti logiche si confondano, tenetele separate e inserite un ampio spazio (almeno 120 pixel) tra di esse.

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.

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.

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.

È 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à.

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).

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.

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.

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.

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.

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.

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.

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.

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 rapidamente e facilmente ciò di cui hanno bisogno. Non sovraccaricateli di informazioni eccessive. È sufficiente avere da 5 a 7 voci di menu.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

Gli accenti di design (come il grassetto) funzionano bene quando sono pochi. Se ne mettete troppi, ostacolerete la lettura della pagina.

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.

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.

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.

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 nel testo si utilizzano caratteri sans-serif, evitare del tutto il corsivo.

È 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.