In questo nuovo articolo ti elenchiamo gli errori più comuni in cui si cade quando ci si trova a creare un sito web. Spesso anche i professionisti commettono alcuni di questi errori, magari per distrazione o abitudine.

Evitare i 12 errori più comuni ti permetterà di creare siti web che performano meglio, aumentare il traffico sulla tua piattaforma e, naturalmente, aiutare i tuoi cliente a incrementare il loro business. 

Vedremo assieme, attraverso alcuni screenshot esplicativi, quali sono gli errori che vengono commessi più spesso e le relative best practices.

Inoltre scopriremo le funzionalità di Elementor, un page builder di WordPress che ti garantisce molta libertà di azione e ti permette di creare siti funzionali, performanti, ma anche belli.

Se non sai cosa è Elementor o lo conosci soltanto superficialmente, non preoccuparti. In questa guida ai 12 errori da evitare quando si crea un sito web ti spiegheremo tutto passo passo.

Elementor: un plugin da oltre un milione di installazioni

Elementor ormai conta più di un milione di installazioni attive e questo vuol dire che tantissimi siti web vengono creati ogni giorno grazie a questo fantastico plugin.

Tantissimi però lo usano per realizzare i loro primi progetti, con scarsa conoscenza di web design e compiono errori che spesso e volentieri compromettono l’esperienza utente.

Sei uno di questi?

Per scoprirlo continua a leggere.

Ma sulla base di cosa ho scritto questo articolo?

Da quando ho deciso di dedicarmi al web design non smetto di leggere e formarmi sull’argomento. Oltre ai più classici libri seguo diversi blog e siti del settore.

Effettivamente alcuni spunti li ho presi da diversi articoli interessanti che mi sono capitati sottomano e che mi hanno fatto riflettere.

Tantissime cose che ho elencato qui sotto io le ho sempre date per scontate, pensando che potessero essere informazioni poco utili da divulgare.

Mi sono dovuto ricredere guardando diversi siti web di persone che mi chiedevano consigli.

Alla fine, dicevo a tutti le stesse cose.

Perciò riprendendo un po’ lo stile di altri articoli che ho letto in precedenza, ho deciso di realizzare questa piccola guida, sperando che possa esserti d’aiuto e che tu la possa usare come punto di riferimento quando realizzi le tue pagine web.

I 12 errori da evitare quando si realizza una pagina web

1. Contenuto non suddiviso in blocchi

Molto spesso i siti presentano uno sfondo omogeneo e i contenuti vengono presentati senza una logica che permetta al lettore di capire quando si passa da un argomento all’altro.

Dividere le sezioni che parlano di argomenti diversi in blocchi può aiutare tantissimo.

Per farlo puoi alternare il colore di sfondo, passando, ad esempio, dal bianco al grigio chiaro, come vedi nell’immagine di esempio:

 

    

In questo modo il visitatore, a colpo d’occhio, riuscirà a cogliere il passaggio da un argomento all’altro.

Con Elementor è semplicissimo compiere questa azione: basta cliccare su “modifica sezione”, andare sul “tab stile” e scegliere un colore di sfondo.

Importante è ricordare che ogni blocco dovrà avere un ampio “spazio di respiro” per rendere più fruibile il contenuto della sezione.

Questo spazio di respiro non è nient’altro che il vuoto che c’è tra l’inizio/fine della sezione e il contenuto al suo interno.

In Elementor questo spazio è identificato come “rientro” (o“padding” in inglese), e lo si può modificare nel tab “AVANZATO” delle sezioni (ma anche dei widget e delle colonne).

Per non sbagliare, imposta sempre un rientro tra i 100 e i 150 px sia in alto sia in basso nella sezione.

 

2. Spazio non uniforme tra gli elementi

Questo mi capita di vederlo praticamente sempre.

Lo spazio di respiro di cui ti ho parlato poco fa deve essere sempre lo stesso, in tutte le sezioni!

Questo aiuta visivamente a individuare ancora meglio i diversi blocchi. Guardando l’immagine che ho preparato riuscirai a capire perfettamente cosa intendo.

 

      

 

3. Rientro non abbastanza ampio

Nel primo punto ti ho anche detto che l’ideale sarebbe avere un rientro tra i 100 e i 150 pixel, e guardando questa immagine potrai subito capire perché:

     

Inserire il contenuto a ridosso dell’inizio della sezione senza usare il rientro può disturbare enormemente e non aiuterà il lettore ad individuare le differenze tra i diversi blocchi.

Con il giusto rientro, tutto diventa più ordinato.

 

4. Testo sovrapposto poco contrastato

Quando si usa un’immagine come sfondo di una sezione bisogna sempre stare attenti che il testo sovrapposto sia ben leggibile.

Per farlo basta aggiungere un colore, sovrapposto all’immagine, con opacità ridotta.

      

In Elementor, modificando una sezione, ci basterà andare sul tab ‘stile e poi cliccare su ‘sfondo overlay’. A questo punto potremo scegliere un colore da sovrapporre all’immagine.

Se vuoi inserire delle scritte bianche, il consiglio è sempre quello di usare un colore molto scuro, in modo che ci sia il maggior contrasto possibile tra scritta e immagine.

Solitamente si usa il colore nero in overlay per avere il maggiore contrasto possibile, ma come puoi vedere dall’esempio se ne possono usare anche altri.

 

5. Troppi stili diversi nella stessa pagina

La cosa peggiore che tu possa fare è usare uno stile diverso per ogni scritta o elemento della pagina.

 

     

Cerca di seguire delle linee guida.
Eccoti alcuni esempi:

• Stabilisci un font per i titoli e uno per il corpo del testo e usa solo quelli.
• Stessa cosa per la grandezza del carattere: per i testi imposta una grandezza intorno ai 20px e poi sali gradualmente. Puoi tenerti sui 24px per titoli h3, aumentare fino a 36 per gli h2 ed arrivare a 48 per gli h1.
• Attenzione alla versione mobile: in questo caso bisogna usare dimensioni leggermente più piccole.
• Scegli la tua palette di colori e usa solo quella. Non ci dovrebbero essere più di 2 o massimo 3 colori su una pagina web. Ed è molto importante che siano gli stessi della tua brand identity!
• Replica lo stile di un elemento uguale. Se su un pulsante hai usato gli angoli arrotondati, non avrebbe molto senso fare gli altri perfettamente rettangolari.

Più in generale, non sforzarti di voler mettere in risalto ogni singolo elemento altrimenti otterrai l’effetto contrario. Quando tutto è troppo vistoso non ci sarà nulla che attirerà veramente l’attenzione di un visitatore.

 

6. Elementi enfatizzati con colore di sfondo

Stai pensando di voler mettere bene in risalto un titolo utilizzando uno sfondo colorato? Non farlo!

Non sarebbe per nulla gradevole alla vista. Inoltre, non va bene separare gli elementi di una stessa sezione in più blocchi. Il lettore potrebbe pensare che si sta parlando di un argomento diverso.

     

Piuttosto raggruppa gli elementi che appartengono alla stessa sezione inserendoli in blocchi dal colore uniforme.

 

7. Troppo testo in poco spazio

Quando hai delle colonne molto strette riduci sempre al minimo indispensabile il testo. Cerca di non superare le 2 o 3 righe.

Uno dei casi che ti si potrebbe presentare è quello che vedi nell’immagine, ovvero una lista di servizi affiancati.

 

     

Se inserisci troppo in queste colonne così piccole, nessuno andrà a leggerlo.

Due righe sintetiche e scritte bene si leggono molto più volentieri, visto che non richiedono un grosso sforzo agli occhi.

 

8. Blocchi di testo allineati al centro

Vuoi che il tuo lettore legga facilmente quello che scrivi o preferisci metterlo in difficoltà?

Scrivendo dei blocchi di testo allineati al centro non aiuterai per niente la lettura.

L’occhio del visitatore dovrà spostarsi ogni volta che va a capo invece di andare agilmente a inizio riga, e questo farà desistere dal leggere tutto il testo anche una persona veramente interessata.

     

Prova invece a dividere un grande blocco di testo in più sezioni con poche righe scritte. Sarà tutto molto più leggibile.

 

9. Non rispettare le parti importanti di una foto

Quando crei la “hero”, ovvero il primo blocco del tuo sito, fai attenzione alle parti importanti dell’immagine di sfondo.

Il volto di una persona infatti, non va mai coperto con del testo per due motivi:

1. Una figura umana aiuta il visitatore a identificarsi in quello che vede e noi non vogliamo rovinare tutto questo.
   In più il viso di una persona rivolto verso la “call to action” aiuta l’utente a concentrarsi su quest’ultima.

2. Il volto è una parte molto dettagliata dell’immagine e sovrapporre un testo ne compromette seriamente la leggibilità.

Meglio quindi provare delle soluzioni alternative, come il testo disposto su due righe e allineato a sinistra o a destra.

 

     

Con Elementor puio risolvere facilmente creando una sezione a due colonne in cui inserite l’immagine come sfondo.

A questo punto basta mettere il titolo e il pulsante nella colonna di sinistra (o di destra) e lasciare libera l’altra parte.

 

10. Gerarchia visiva non rispettata

Dare un ordine agli elementi è fondamentale, ma questo ordine deve essere percepito dal lettore, non può essere solo nella tua testa.

Fai molta attenzione alla grandezza dei titoli ad esempio.

 

     

Come puoi vedere nell’immagine, il titolo principale deve essere sempre più grande degli altri perché deve essere visto per primo.

Non avrebbe senso rendere più grandi i titoli dei vari paragrafi. Potrebbero essere letti per primi e un visitatore distratto non capirebbe qual è l’argomento principale.

 

11. Usare troppi colori

Come abbiamo visto per gli stili, usare troppi colori non va mai bene.

      

Può sembrarti utile perché attira l’attenzione, ma in realtà disturba la vista e da al sito un aspetto decisamente poco professionale.

Potresti avere il miglior prodotto o servizio del secolo, ma se lo presenti nel modo sbagliato nessuno lo vorrà.

 

12. Uso del bordo nei pulsanti

C’è solo un motivo per cui dovresti usare il bordo in un pulsante, ovvero quando il pulsante è trasparente.

     

Se il pulsante è già colorato e per di più è posto sopra uno sfondo con immagine, non ha senso aggiungerci anche un bordo.

I motivi? Gli stessi di cui abbiamo parlato fino ad ora.

Sovraccaricare gli elementi non va bene, rende difficile la lettura ed è un pugno in un occhio.

Se è utile, condividilo!

È tutto? Magari…

Quello che hai letto è solo una minima parte degli aspetti da tenere in conto quando si crea una pagina web, ma se le rispetti tutte sei già ad un ottimo punto. Quantomeno il tuo sito avrà un’aria più professionale.

Adesso è davvero tutto!

Se ti è piaciuto questo articolo o pensi che possa essere utile a qualche professionista che conosci, inviaglielo oppure condividilo sui tuoi social.