Share
Nella parte precedente della serie, abbiamo analizzato la definizione e l'importanza dell'elemento "barra laterale" nei blog di WordPress e abbiamo verificato i layout con una, due, tre e quattro barre laterali (e senza barre laterali).
In questa seconda parte, vedremo come progettare una barra laterale e ordinare gli elementi, in particolare i widget, all'interno di esso.
Uno dei motivi principali per cui i visitatori non prestano attenzione alle barre laterali equivale a scarse scelte di design. Altri motivi potrebbero essere l'utilizzo di troppi o troppi elementi, la visualizzazione di contenuti noiosi e non interessanti e di non ordinare correttamente gli elementi, e così via.
Trascurare di progettare la barra laterale significa visualizzazioni di pagina inferiori, clic sugli annunci più bassi, tassi di conversione più bassi e vendite inferiori. Anche se non ti stai aspettando alcun introito dal tuo sito Web WordPress e ti aspetti che la gente legga il tuo contenuto, devi comunque progettare bene la tua barra laterale per poter guidare i tuoi visitatori con i tuoi elementi della barra laterale di navigazione.
Passeremo attraverso tre fattori principali di un buon design della sidebar: dimensioni, colori e basi tipografiche.
Il senso comune per la larghezza della barra laterale è di ridurre la larghezza della barra laterale (s) rispetto all'area del contenuto principale. Si tratta di un approccio sensato poiché il contenuto principale è quasi sempre l'elemento più importante di una pagina Web e un'area di contenuto ristretta con barre laterali ampie de-enfatizza il contenuto.
Una larghezza tra il 20% e il 40% di solito è la scelta migliore per una singola barra laterale e se utilizzerai più di una barra laterale, ti suggerisco di non superare una larghezza totale del 50% (20% + 20% e 15% + 35%, ad esempio).
Per una singola barra laterale, puoi anche utilizzare l'approccio Rapporto aureo, dove la larghezza della barra laterale è circa il 38% della larghezza dell'area del contenuto principale. Puoi trovare maggiori informazioni su Golden Ratio in Jarel Remick's Il Golden Ratio in Web Design articolo su Nettuts+.
Per quanto riguarda l'altezza, non c'è molto da discutere se non "the fold". La piega è la linea di fondo sullo schermo del visitatore, dove il visitatore deve scorrere prima di vedere il resto della pagina. Avevo l'abitudine di consigliare ai miei clienti di cercare di rimanere "above the fold" ma dal momento che ci sono molti e diversi dispositivi (quindi dimensioni dello schermo) e le persone sono molto abituate a scorrere, la vita sotto le pieghe non è più così spaventosa.
Detto questo, dovresti fare attenzione al fatto che gli elementi sopra la Piegatura sono i primi elementi che vedranno i visitatori. Ne parleremo sull'ultimo argomento, "Ordinare gli elementi della barra laterale".
Oh, a proposito, davvero, dovresti fare attenzione a non superare l'altezza dell'area del contenuto principale. Se le barre laterali sono più a lungo rispetto al contenuto, sembra molto brutto.
Ricorda il motto del design, "less is more"? Bene, possiamo leggerlo come "more is less", anche.
I colori potrebbero attrarre e distrarre. Se usi tanti colori come la barra laterale in alto, nessuno di questi elementi colorati e brutti avrà la massima attenzione - avranno la minima attenzione.
Ma se utilizzi solo pochi colori per pochi elementi (che devi attirare maggiormente i visitatori), attireranno maggiormente l'attenzione. È necessario tenere presente che per far apparire un widget, è necessario ripristinare gli altri. "Contrasto" è la parola chiave qui.
Le immagini possono essere un'eccezione, però. Mentre tutte le cose che ho detto sopra si applicano anche alla grafica digitale, le foto potrebbero essere utilizzate per attirare l'attenzione separatamente dagli elementi colorati. Ma come puoi immaginare, troppe immagini distraggono anche il visitatore - ecco perché la pubblicità può o non può essere notata in base al design della tua barra laterale.
Suggerisco che, se possibile, dovresti usare le immagini sbiadite (che si dissolvono al passaggio del mouse) nei widget della barra laterale. Prova a vedere se è bello o no.
La tipografia è sempre importante per un buon design. Con una buona tipografia, potresti non aver bisogno di nient'altro per rendere la tua pagina web un bell'aspetto.
Con le barre laterali che progetto, mi piace impostare leggermente la dimensione del font (dal 10% al 20%) più grande del contenuto principale. Attira l'attenzione ma non distoglie il visitatore dal contenuto principale: i visitatori vedono ciò che vogliono vedere e questa è la cosa che mireremmo a fare. Non dimenticare che a volte il testo più piccolo potrebbe essere anche attraente.
Mi piace anche allineare i titoli al centro e il testo a destra, ma tu puoi - e tu dovrebbero - fai tutto ciò che ritieni adatto al tuo design. Finché non sembrano disordinati e non correlati, fa bene a te.
Anche se hai solo due elementi della barra laterale o dieci, dovresti considerare di ordinare quegli elementi come una pratica cruciale. Farlo correttamente aumenterà sicuramente i clic e le vendite e, facendolo nel modo sbagliato, potrebbe crollarli!
Pensa al importante elementi che dovrebbero assolutamente essere visti da tutti i visitatori, e il non così importante quelli che non devono necessariamente essere visti da ogni singola persona che visita il tuo sito web.
Ad esempio: mentre i moduli e i pulsanti di iscrizione o gli elenchi dei post più recenti / popolari sono considerati "importanti", non possiamo dire lo stesso per gli ultimi elenchi di commenti o blogrolls. Una volta identificati quelli "importanti", puoi ordinarli tra loro e avere una barra laterale ben ordinata.
Inoltre, dovresti considerare la piega: quali elementi dovrebbero essere in cima e quali potrebbero essere nella parte inferiore della barra laterale? Avere gli elementi più importanti (come un modulo di iscrizione via e-mail e un elenco di post popolari e possibilmente una pubblicità) above the fold andrà a beneficio sia di te che dei tuoi visitatori.
Non credo che tu debba seguire regole rigide per un buon design, ma ci sono sempre "linee guida" per creare disegni migliori. Questa serie è una di quelle linee guida e spero che ti sia piaciuta.
Hai qualcosa da aggiungere o migliorare? Condividi le tue idee con noi lasciando un commento!
Accentsconagua