Gerald Bala - Elementor Startup

12 errori da evitare quando si realizza una pagina web

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, avendo 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. Se non commetti nessuno degli errori che ho elencato in questo articolo, sentiamoci che magari cominciamo a collaborare 😀

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.

Ma andiamo subito al sodo, ecco a te i 12 errori da evitare quando si realizza una pagina web:

1 CONTENUTO NON DIVISO IN BLOCCHI

Molto spesso vedo siti in cui lo 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.

Ma tutto questo non basta, 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

Si, 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 ad 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 però alla versione mobile, li 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 ottieni 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 piazzandoci sotto uno sfondo colorato?

Non farlo.

Semplicemente non sarebbe per nulla gradevole alla vista.

Inoltre, non va bene separare gli elementi di una stessa sezioni in più blocchi.

Il lettore potrebbe pensare che si sta parlando di un argomento diverso.

     

 

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 al nostro occhio.

 

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”, stai attento 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.
  1. 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.

 

È tutto? Magari…

Tutto quello che hai letto è la minima parte delle cose di cui bisogna tener 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 ?

Per il momento è tutto, ma voglio chiederti un piccolo favore.

Ci ho messo davvero tanto tempo a scrivere questo articolo e a preparare le varie immagini.

L’unica cosa che ti chiedo in cambio è questa:

Se pensi che possa essere utile a qualche tua amico inviaglielo oppure condividilo sulla tua bacheca di facebook.

Mi renderesti davvero felice!

Piaciuto il post? Condividilo con un amico a cui può essere utile!

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on print
Share on email

Elementor è un plugin gratuito di Wordpress, ma per sbloccare tutte le sue potenzialità avrai bisogno della versione PRO