11 errori di progettazione che gli acquirenti di temi WordPress commettono solitamente

Ti sei mai ritrovato a creare un sito Web con il tema WordPress, ma il risultato finale non assomigliava per niente alla demo del tema? Ho elencato 11 errori di progettazione comuni che sono spesso trascurati dai creatori di siti Web.

Hai trovato il tema WordPress perfetto. La demo del tema sembrava impeccabile. Al tuo cliente è piaciuto molto e ha concordato con te di effettuare un acquisto. L'hai acquistato, installato e hai iniziato a modificare il tema in base alle esigenze del cliente.

Hai cambiato il logo, cambiato i colori del tema, inserito le immagini dello slider e il contenuto, ma alla fine il sito web che hai creato non assomiglia affatto alla demo. Sai che qualcosa non va, ma non riesci a rilevare cosa. Suona familiare?

Negli ultimi 5 anni, lavorando come designer nel settore dei temi WordPress, ho visto innumerevoli esempi di bellissimi siti Web creati con i nostri temi WordPress.

Ma ogni tanto vedo un sito Web con una solida base ma con un paio di piccoli errori di progettazione, che rovinano l'esperienza complessiva. Sto parlando di piccole piccole cose che possono essere facilmente riparate da chiunque.

So che è difficile individuare questi difetti, soprattutto se non sei un designer. Per questo motivo, ho deciso di scrivere un post sul blog su come migliorare il sito Web del tuo cliente per avere un aspetto ancora migliore.

Aggiungi questo post del blog ai preferiti e sfoglia l'elenco qui sotto la prossima volta che creerai un sito Web con il tema WordPress. Ci vorranno solo un'ora o due per rimuovere tutte le imperfezioni, ma il risultato sarà migliore del 100%.

1. Scarso contrasto del testo sul dispositivo di scorrimento

Ho parlato di cose da fare e da non fare di immagini di scorrimento, quindi ora sarò breve. I principi sono semplici:

• Se il colore del testo sul dispositivo di scorrimento è bianco, scegli uno sfondo scuro. Se il testo del dispositivo di scorrimento è scuro, scegli uno sfondo chiaro.
• Assicurati che l'area in cui appare il testo non abbia troppo rumore visivo sullo sfondo. Lo sfondo disordinato riduce la leggibilità del testo sulla parte anteriore e una proposta di valore principale scritta sul dispositivo di scorrimento potrebbe non essere rilevata.

Fortunatamente per te, la maggior parte dei nostri temi include l'opzione di uno sfondo solido semitrasparente dietro il testo. I nostri temi WordPress più recenti hanno anche un'ombra applicata a tutto il testo sul dispositivo di scorrimento, quindi il contrasto è ancora migliore.

2. Immagini del dispositivo di scorrimento troppo grandi

Quando guardo i siti Web realizzati con i nostri temi WordPress, noto abbastanza spesso che gli utenti utilizzano immagini di slider troppo grandi. Avere un'immagine di scorrimento che occupa il 100% dell'altezza dello schermo è accettabile solo se sei un fotografo e le foto sono il tuo prodotto finale. In altri casi, stai al sicuro e attieniti ai consigli sul tema. Manterrà il perfetto equilibrio visivo del tuo sito web.

3. Scarso spazio bianco (negativo).

Lo spazio bianco o negativo nel web design è uno spazio vuoto tra widget, blocchi di testo, immagini o qualsiasi altra parte del sito web, che aiuta a organizzare tutto e fornire un flusso logico e chiaro per l'utente finale.

Non importa quanto ci proviamo, come proteggiamo ogni possibile aspetto del tema WordPress, gli utenti trovano sempre un modo per distruggere lo spazio bianco.

Fortunatamente per te, stiamo utilizzando un potente Page Builder nei nostri temi, il che significa che puoi regolare facilmente le tue spaziature sul sito web. Page Builder ti consente di modificare i padding del widget, i padding della riga e ti consente di modificare la dimensione della grondaia tra le colonne.

Non parlerò di dettagli e preferisco darvi alcuni esempi pratici.

• Nella maggior parte dei casi, i creatori di siti Web utilizzano troppo poco spazio bianco, il che non consente al contenuto di respirare, quindi di solito, più spazio bianco si applica, migliore è il risultato che si ottiene.
• Mostra la relazione tra gli elementi con la spaziatura. Gli elementi che vanno insieme, ad esempio il titolo del post del blog e la data del post, dovrebbero essere più vicini degli elementi che hanno uno scopo diverso, come la data del post del blog e l'intestazione della pagina.
• Sii coerente con la spaziatura. Ciò significa che ogni singola riga del tuo sito web dovrebbe avere la stessa quantità di spazio bianco in alto, in basso, a sinistra e a destra.

Quindi, si tratta di widget. Dovrebbero avere la stessa quantità di spazi vuoti e margini applicati, indipendentemente da dove appaiano sulla pagina. La coerenza porterà equilibrio al tuo sito Web e attirerà l'attenzione sulla cosa che conta: il contenuto.

4. Cattiva compatibilità con i dispositivi mobili

La procedura e le regole sono le stesse del desktop sopra. Devi comunque prestare attenzione allo spazio bianco, ma per i dispositivi mobili ci sono un paio di regole aggiuntive:

• Uno di questi è un design adatto alle dita. Poiché le dita sono i nostri strumenti per spostarsi all'interno del sito Web durante la navigazione da dispositivo mobile, è necessario adattare la pagina ad esse. Quando progettiamo un tema WordPress, ci assicuriamo che i pulsanti e gli elementi cliccabili non siano inferiori a 50px. Se stai aggiungendo elementi di terze parti al tema WordPress, assicurati che siano abbastanza grandi. Inoltre, assicurati che quei componenti utilizzabili non si attacchino troppo tra loro per evitare clic errati.
• Ottimizza le immagini per la velocità. Molte persone accedono ai siti Web in movimento, il che significa una connessione inaffidabile, a volte scarsa. Cerca di eliminare un caricamento lento del sito (su dispositivo mobile) e ottimizza le tue immagini.
• Testa il tuo sito web su un vero dispositivo mobile. Puoi ridimensionare la finestra del browser per vedere la visualizzazione mobile, ma quando hai finito con tutte le regolazioni, dai un'occhiata a come appare il sito web sul dispositivo mobile effettivo.

I sistemi operativi, i browser e l'esperienza utente complessiva differenziano tra desktop e dispositivi mobili e potrebbero verificarsi alcune disuguaglianze.

Google ha sviluppato un test ottimizzato per i dispositivi mobili, uno strumento per verificare se il tuo sito Web è ottimizzato per i dispositivi mobili.

Ci assicuriamo che ognuno dei nostri temi WordPress lo superi facilmente.

5. Usare colori che non vanno di pari passo.

Scegliere la giusta combinazione di colori è una cosa complicata. Se hai talento, puoi seguire il tuo istinto. Altrimenti, usa gli strumenti fatti apposta per quello.

Ti mostro un esempio:

La maggior parte dei nostri temi WordPress sono realizzati con colori primari e secondari. Se il tuo logo assomiglia a quello di Shell, la decisione di scegliere il colore primario e quello secondario è semplice. Il rosso verrà utilizzato come colore principale per gli inviti all'azione. Quello giallo sarà un colore secondario, utilizzato per sfondi ed elementi di supporto.

Se il tuo logo assomiglia al logo di Starbucks ed è composto da un solo colore, dovrai trovare quello secondario.

Un'opzione è scegliere lo stesso colore verde sia per il colore primario che per quello secondario, ma lo sconsiglierei vivamente.

Se non possiedi l'istinto di un designer e scegliere le combinazioni di colori è difficile per te, ho una soluzione per te, chiamata Coolors. È uno strumento semplice da usare per creare bellissime combinazioni di colori.

Vai alla loro app e inserisci il codice colore esadecimale (nel mio caso #006241) del tuo colore primario nella parte inferiore della colonna. Quindi bloccalo, facendo clic sull'icona del lucchetto e premendo la barra spaziatrice.

Suggerimento: non sai come ottenere il codice esadecimale del tuo logo? Controlla se esiste un'utile estensione di Chrome per questo.

Il mio risultato è simile a questo.

Come puoi vedere, tutti i colori sono cambiati, ma il tuo colore principale rimane lo stesso. Se non hai ottenuto il colore che ti piace, continua a premere la barra spaziatrice.

Se l'unico motivo per scegliere il colore secondario è utilizzarlo sul sito Web e quel colore non apparirà da nessun'altra parte, non scegliere un colore troppo potente. Nel nostro caso, l'arancione brillante è fuori.

Devi scegliere un colore più tenue, che non distrugga il tuo marchio e supporti senza problemi il tuo colore principale, nel nostro caso, il verde.

La mia scelta personale sarebbe la seconda beige (#d8c99b) perché funzionerebbe perfettamente con il verde e sicuramente non la supererà.

Forse questo particolare colore beige non è il colore perfetto, ma è un'opzione abbastanza buona. Ecco perché. Quando scegli un colore, prova a pensare a come apparirà il testo scuro o bianco su di esso.

Nel mio esempio, il testo scuro sembrerebbe perfetto, ma l'aggiunta di un po' più di contrasto e la scelta di un colore beige più chiaro lo renderebbe ancora migliore.

Fortunatamente per te, l'app Coolors ha un'altra fantastica funzionalità. È possibile selezionare diverse tonalità di ogni colore. Passa il mouse su una colonna colorata e fai clic sulla prima icona, chiamata "Sfumature alternative". Quindi seleziona le tonalità più luminose o più scure e tieni sempre a mente il contrasto.

Ho fatto una rapida demo su come questi due colori funzionerebbero insieme. A tale scopo, ho preso il nostro tema WordPress Adrenaline e l'ho convertito nel sito Web di Starbucks.

Sono rimasto colpito dalla rapidità con cui ho cambiato completamente il tema Adrenaline WordPress in qualcos'altro, letteralmente in 2 minuti. Tutto quello che dovevo fare era cambiare due colori, caricare l'immagine personalizzata dell'eroe e caricare un logo personalizzato. Provate voi stessi.

6. Non ingombrare la navigazione del tuo sito web

Struttura la navigazione del tuo sito web in modo leggibile e digestivo. Raggruppa le cose meno importanti nei menu a discesa o includile nella barra in alto o nel piè di pagina. Rendi logica la gerarchia di navigazione e assicurati che tutti gli stessi livelli del menu abbiano la stessa priorità.

Ad esempio, i termini e gli accordi sono generalmente meno importanti dell'invito all'azione principale, pertanto non possono apparire entrambi allo stesso livello. Inserisci i Termini in un piè di pagina e un invito all'azione principale nell'intestazione.

Mantieni pulita la tua navigazione principale, con un massimo di 5 o 6 opzioni.

7. Il logo è troppo grande

C'è una frase famosa, che tutti riceviamo dal nostro cliente a un certo punto: "rendere il logo più grande". Il tuo lavoro, come creatore di siti Web, è quello di educare il tuo cliente, che non è necessario avere un logo largo 400 px perché i visitatori del sito Web non vengono sul tuo sito Web per vedere quanto è bello il tuo logo.

Carica le dimensioni del logo, consigliate dall'autore del tema WordPress. Probabilmente sanno meglio quale dimensione del logo funziona meglio con il tema particolare.

Il logo è solo una delle tante cose sul sito Web e deve giocare armoniosamente con altri contenuti.

Se non mi credi, dai un'occhiata a qualsiasi grande marchio sul world wide web e vedrai che il 98% di loro ha un logo, abbastanza grande da supportare tutti i contenuti. L'utente deve sapere quale marchio sta dietro al sito web, ma deve anche concentrarsi sui servizi, sulle offerte e sui principali call to action.

8. Scarsa qualità del logo

Mi è successo una volta, che ho ottenuto il logo in formato Microsoft Word (.doc). Quello che voglio dire è che i clienti troveranno sempre un modo per sorprenderti.

Per quanto riguarda il logo, è importante averlo nelle migliori condizioni possibili, pixel-perfect. A tale scopo, avrai bisogno di un formato vettoriale (.pdf, .ai, .svg, .eps). Quindi devi andare alla tua applicazione vettoriale preferita (ad esempio Adobe Illustrator) ed esportare quel logo nella dimensione consigliata dal creatore del tema. Questa è la migliore possibilità per te di ottenere il logo più nitido.

Se ottieni il logo in un .png, potrebbe funzionare bene, ma può perdere un po' di nitidezza durante il ridimensionamento. Se il ridimensionamento rovina il logo, vai su fiverr.com e investi $ 5 per ridisegnarlo in un formato vettoriale. Un altro piccolo investimento per un grande risultato.

9. Scarsa qualità dell'immagine

La situazione migliora ogni anno, ma trovo ancora aziende che non dedicano sufficiente attenzione o risorse a foto di qualità.

Se hai un sito web che vende un particolare prodotto, le immagini di qualità hanno probabilmente l'impatto maggiore sul potenziale cliente e svolgono un ruolo cruciale, quando un potenziale cliente decide se acquistare un prodotto o meno.

Se il tuo cliente non ti ha fornito foto di alta qualità o se non le ha, è tuo compito convincerlo a investire $ 100 e acquistarle online.

Un'eccellente fonte di foto di alta qualità è Shutterstock, dove puoi ottenere 50 immagini per $ 99 al mese. È sufficiente per un piccolo sito Web e avrà un enorme impatto sugli utenti del tuo sito Web e sulla fiducia generale nel marchio del tuo cliente.

Suggerimento: quando scegli una foto, cerca di evitare foto generiche, raffinate e non realistiche. Un esempio è un ragazzo caucasico, con denti bianchissimi e una pelle impeccabile.

Può avere un effetto negativo, ma sicuramente non avrà alcun impatto sui visitatori. Prova a trovare immagini con un po' di genuinità. Per semplificare, usa immagini che abbiano un aspetto realistico.

10. Non applicare uno stile ai plugin di terze parti

Nel processo di creazione di un nuovo tema WordPress, facciamo sempre una ricerca della nicchia per cui stiamo creando un tema. Siamo sempre desiderosi di includere tutte le funzionalità necessarie nel tema, ma a volte il tuo cliente vuole solo qualcos'altro. Questo è il momento in cui i plugin di WordPress entrano in gioco.

Niente di sbagliato in questo. Dopo aver installato e incluso il plug-in nel tema WordPress, dai un'occhiata a come appare sul front-end.

Noto spesso che i nostri clienti dimenticano di modellare pulsanti, forme e colori nello stesso stile del resto del tema.

L'applicazione di classi CSS già scritte al tuo plug-in di 3 parti richiederà solo 10 minuti, ma alla fine avrà un impatto significativo.

Se non hai le conoscenze per farlo, possiamo farlo per te.

11. Cattiva leggibilità

C'è una famosa affermazione secondo cui la tipografia è il 95% del web design, quindi fallo bene.

Se usi i widget allo stesso modo in cui abbiamo realizzato la demo del tema, non ci saranno problemi, dato che ci impegniamo molto per una buona leggibilità, ma se stai modificando il layout e lo stile dei caratteri, fai assicurati di seguire le regole seguenti:

• Ogni riga dovrebbe contenere 60-80 caratteri inclusi gli spazi.
• Se stai impostando un'altezza di linea personalizzata, moltiplica la dimensione del carattere con un valore compreso tra 1,4 e 1,6. Se hai una dimensione del carattere di 16px, l'altezza della linea dovrebbe essere compresa tra 22,4 e 25,6.
• Lascia abbastanza spazio intorno al testo.
• Non utilizzare un colore del testo troppo chiaro. Tutto più luminoso di #777777 ha un impatto negativo sulla leggibilità.
• Non utilizzare caratteri più piccoli di quelli consigliati. Il minimo che puoi raggiungere è 14px, ma ti consiglio di scegliere 16px o 18px .
• Fai attenzione con l'installazione di caratteri personalizzati nel tema. Alcuni tipi di carattere sono creati solo per le intestazioni e non funzionano bene su dimensioni più piccole. Alcuni font sono realizzati per la stampa e non funzionano bene sugli schermi e alcuni font sono semplicemente realizzati male. Pensaci due volte quando vuoi sostituire il carattere del tema WordPress predefinito in qualcos'altro. Se vuoi ancora cambiarlo, vai sul sicuro e scegli quelli popolari.

• Usa l'allineamento corretto. Nel 95% dei casi, l'allineamento del testo a sinistra è la strada da percorrere. Nell'altro 5%, ti permetto di utilizzare l'allineamento centrato, ma assicurati di usarlo solo per brevi testi di supporto.

L'allineamento a destra (tranne che per le lingue da destra a sinistra) e l'allineamento giustificato sono fuori questione. Periodo.

Conclusione:

La prossima volta che creerai un sito Web per il tuo cliente, sfoglia l'elenco sopra e prova a correggere tutte quelle piccole imperfezioni. Ci vorranno solo un'ora o due, ma alla fine otterrai un risultato molto migliore, il che significa un cliente più felice e una migliore referenza. Inoltre, ci farai un favore perché avremo un fantastico esempio dal vivo da sfoggiare.

Se hai qualche domanda, sentiti libero di commentare qui sotto.

EDIT: questo articolo è stato tradotto in olandese – fatemi sapere nei commenti qui sotto se volete tradurlo nella vostra lingua.