3 importanti aree di design su cui concentrarsi per ogni creazione di siti web

Benvenuti alla parte 3, l'ultimo post della nostra mini serie "Efficaci Divi Web Design Principles" in cui stiamo esplorando pratiche di design efficaci per aiutare a potenziare i nuovi web designer e coloro che si identificano come qualcuno senza "un occhio per il design".

Ora che ci siamo occupati della preparazione e dell'apprendimento di come avere un occhio migliore per il design e abbiamo esaminato alcuni principi di design efficaci da avere nella nostra cassetta degli attrezzi, ci concentreremo su 3 aree molto importanti del design che sono fondamentali per ottenere un sito ben strutturato.

Andiamo subito!

3 importanti aree di design su cui concentrarsi per ogni creazione di siti web

Se ti sei tenuto al passo con i primi due post di questa serie, mi hai sentito sottolineare che non c'è giusto o sbagliato quando si tratta di design, ma insieme ai principi di design efficaci che abbiamo esaminato, ci sono alcuni importanti , aree pratiche del design su cui mi concentro per garantire ogni volta un sito web di successo e piacevole per gli occhi. E la parte migliore è che queste idee sono trasferibili a qualsiasi tipo di settore o stile di web design!

1) Tipografia e caratteri

Il tuo sito può avere bellissime immagini, colori accattivanti ed elementi di design piacevoli, ma se il tipo non sembra o non si adatta allo stile del sito, può essere un importante deterrente. Dal momento che non stiamo entrando nelle basi della tipografia in questa serie, fai riferimento al nostro post sui 50 termini di tipografia che ogni web designer dovrebbe conoscere (e capire) se desideri saperne di più sulle basi. Una comprensione dei caratteri crenatura, guida, tracciamento, sans e sans-serif sarà molto utile per la persona che cerca di migliorare nel tipo e nel design.

Lascia che ti offra alcune linee guida pratiche sulla tipografia a cui mi attengo come web designer Divi di successo con clienti che differiscono notevolmente negli stili di design e nei diversi settori:

Usa caratteri che si abbinano bene con l'industria/il design del tuo sito – Nel primo post di questa serie, ho ricordato un esempio in cui ho progettato un sito con immagini e colori fantastici, ma il carattere non corrispondeva bene. In breve, era un sito di produzione industriale e il carattere che inizialmente usavo era uno stile più moderno ed elegante che in effetti non si adattava all'aspetto e al marchio dell'azienda.

Ciò non significa che non puoi essere creativo con i caratteri o che devi corrispondere allo status quo del settore, ma in pratica, se stai lavorando su un sito di servizi professionali, probabilmente non vorrai un over- il miglior font artistico coinvolto. E viceversa, se stai lavorando a qualcosa con un'atmosfera unica, forse artistica, forse Arial o Helvetica non corrisponderanno all'atmosfera che stai cercando. Questo mi porta al prossimo punto di miscelazione e corrispondenza dei caratteri.

Mantieni da 2 a 3 caratteri: un principio di progettazione di base che ha resistito alla prova del tempo per decenni è quello di limitare il numero di caratteri utilizzati. Troppi font distraggono il lettore, spesso confondono la gerarchia e, francamente, finiscono per sembrare un vecchio volantino occidentale in cerca di una ricompensa per un fuorilegge. Spesso mi attengo a un carattere per intestazioni e titoli, quindi in genere uso un carattere sans-serif facilmente leggibile per tutto il testo del mio paragrafo. A volte avrò un carattere di terzo stile per il menu principale, ma il carattere del mio menu è spesso semplificato con i miei titoli.

Per ulteriori idee su come accoppiare i caratteri, fare riferimento a questo post precedente sull'abbinamento dei caratteri nel web design: 7 principi chiave rivelati e spiegati

Avere elementi visivi con il tuo testo: una discreta quantità di testo nei tuoi contenuti è eccezionale. In effetti, si consiglia di avere almeno 300 parole per pagina per aiutare dal punto di vista SEO. Ma attenzione ad avere troppo testo e non abbastanza ausili visivi. Per libri, blog, articoli e altri contenuti di lunga durata, è previsto molto testo, ma se stai progettando una bella pagina di destinazione accattivante, troppi contenuti annoieranno l'utente prima che guardi oltre. Spesso progetto con la mentalità che la prima pagina dovrebbe essere l'imbuto di vendita che porta i clienti attraverso la porta POI possono immergersi in più pagine, blog e altre risorse per informazioni più dettagliate.

La homepage di Elegant Themes è attualmente un perfetto esempio di ciò.

In questo esempio, vediamo un titolo accattivante, un paragrafo di testo con un pulsante di invito all'azione e una bella grafica visiva che si lega al messaggio che mantiene l'utente coinvolto. Questo è un ottimo esempio da seguire quando si organizza una discreta quantità di testo con elementi visivi.

Una volta ho avuto una bellissima prima pagina progettata con testo e immagini e quando l'ho consegnata al mio cliente per apportare modifiche di base, hanno scaricato quello che sembrava un piccolo capitolo di un libro nella prima pagina che ha completamente rovinato il flusso del design Ho creato. Quindi lascia che sia una lezione e sappi che mentre il contenuto è ottimo, deve essere posizionato di conseguenza!

Un'altra grande risorsa a cui fare riferimento sono 20 tendenze tipografiche a cui prestare attenzione nel 2016 poiché queste tendenze sono ancora molto valide oggi e andranno avanti.

2) Gestione delle immagini e del colore

Simile alla tipografia, tendo a mantenere al massimo 2 o 3 colori primari per le build del mio sito web. A meno che non si tratti di un'azienda o di un'organizzazione con una pletora di colori nel marchio, trovo che troppi colori (soprattutto se non si abbinano bene) possono essere molto fonte di distrazione e spesso confusi. Ecco alcune linee guida a cui mi attengo quando mescolo colori e immagini:

Colori di base e colori di accento – Un metodo che ho trovato di grande successo in progetti recenti è quello di prendere il marchio di un cliente e, se non lo fanno già, scegliere un bel colore di accento per call to action, link, ecc. Ad esempio, su questo sito, ho preso il marchio del logo con il grigio e l'arancione e ho aggiunto un sottile e scuro verde acqua/blu per aiutare a rendere l'arancione "pop" come colore di accento primario.

Semplifica il colore con le immagini: un modo per unire il design e le immagini in modo ottimale è abbinare i colori del sito Web con alcune delle immagini principali. Questo esempio è un po' raro in quanto sono stato in grado di abbinare i colori del sito Web all'abbigliamento del mio cliente, creando una sensazione molto snella tra le immagini e il colore del sito Web.

Ho preso un bel colore marrone e arancione dal vestito dei miei clienti e sono stato in grado di riunire l'intero sito in un bel look in uniforme. Ora ti troverai raramente in una situazione in cui puoi brandizzare un intero sito da un'immagine, ma questo stesso principio può essere applicato quando usi immagini di sfondo con inviti all'azione, ecc!

In pratica, se non sei sicuro di come scegliere determinati colori, ecco 10 strumenti per la selezione dei colori

Evita i colori troppo vivaci : vedo spesso i designer più recenti usare verdi, rosa, gialli super brillanti, ecc. Non indicherò alcun cattivo esempio qui, ma sono sicuro che hai visto molti siti in cui i colori ti hanno fatto voltare le spalle e non voler mai guardare indietro. Di certo non c'è niente di sbagliato nei colori vivaci, assicurati solo che non diano quell'effetto. È qui che ricevere critiche costruttive e feedback da altri designer può dare i suoi frutti.

La mia raccomandazione è di utilizzare colori abbastanza neutri per i colori di base come testo, grafica di sfondo, ecc., quindi utilizzare colori più vivaci per call to action, collegamenti e aree del design della pagina che attirano maggiormente l'attenzione. Se sei nuovo nel design e il colore non è un'area comoda per te, sentiti libero di fare riferimento alle nostre tecniche di corrispondenza dei colori per i web designer di WordPress che forniranno molte opzioni su come scegliere meglio i colori.

3) Invito all'azione forte

Infine, un'area molto importante del web design è quella di avere call to action (CTA) forti e chiare. Uno dei problemi più comuni di un web design scadente è avere contenuti testuali pesanti senza un chiaro invito all'azione. Il contenuto è ottimo, ma se sono tutte informazioni e nessuna conversione, il tuo cliente non sarà sicuramente soddisfatto. Ti consiglio di far risaltare i tuoi CTA dagli altri elementi del tuo design con un colore accento o un bel effetto al passaggio del mouse.

Ecco un esempio di come ho implementato un invito all'azione per un cliente recente.

In questo caso, l'invito all'azione principale del cliente per gli utenti del sito Web è quello di registrarsi per gli aggiornamenti via e-mail, quindi immediatamente, abbiamo il logo che salta fuori da un'immagine di sfondo più scura, un po' di testo con un'opportunità immediata di registrarsi prima ancora di scorrere verso il basso. Idealmente, vuoi attirare l'attenzione dell'utente sul tuo invito all'azione. Ecco dove avere un colore o un effetto accento vibrante su un sito è estremamente vantaggioso.

Ecco alcune linee guida a cui mi attengo quando si tratta di call to action:

Termina la tua home page con un forte invito all'azione: il più delle volte, i design della mia home page sono quasi un riassunto del sito nel suo insieme. Ad esempio, se un sito ha una struttura come questa:

• Chi siamo
• Servizi
• Testimonianze
• Blog
• Contatto

Farò un invito all'azione per ciascuna di queste sezioni nella home page, quindi un design finale ed elegante per l'invito all'azione principale, che in questo caso sarebbe la registrazione. Ecco un ottimo esempio di ciò che intendo:

La prima pagina incapsula essenzialmente l'intero sito ed è un punto di partenza da cui gli utenti possono fare clic per visualizzare gallerie, video e ulteriori informazioni. Forse quella mentalità ti aiuterà come nei progetti della tua homepage!

Avere un invito all'azione nella barra laterale - Non dimenticare l'opportunità di un forte invito all'azione nella barra laterale! Soprattutto se hai un sito con post di blog o altre pagine che utilizzano frequentemente una barra laterale. Questa è una grande opportunità per inserire un'e-mail aggiuntiva per la registrazione, un pulsante di donazione o un collegamento a un altro CTA principale.

Simile al sito sopra, uno dei principali inviti all'azione per il mio sito personale è un'iscrizione via e-mail e mentre questo è in primo piano e al centro della mia home page, volevo essere sicuro di renderlo molto evidente anche nel mio post sul blog e nelle pagine dei tutorial .

Qui, ce l'ho in alto a destra di ogni modello di post insieme a una forte immagine sopra e sotto il modulo di iscrizione principale. Quindi, se disponi di pagine con barre laterali, ricorda che quelle aree sono immobili di valore per un forte invito all'azione! E vuoi essere sicuro e rendere evidente il tuo CTA e preferibilmente nella parte superiore della barra laterale che verrà visualizzata per prima sul cellulare sotto il contenuto principale.

Avere un invito all'azione dopo il contenuto della sottopagina – Infine, e forse il più trascurato, è ricordarsi di avere un invito all'azione sulle tue pagine normali! Ho ammesso di averlo trascurato fino a poco tempo fa, quando è stato richiesto da un cliente. L'esempio seguente ha un forte invito all'azione alla fine delle pagine dei servizi principali.

Quando un utente del sito Web visualizza quella pagina, acquisirà tutte le informazioni, quindi avrà la possibilità di contattare il mio cliente se interessato con un'immagine piacevole e accogliente a destra e un pulsante CTA a sinistra supportato da un'arancia vibrante che aiuta quella sezione salta fuori dalla pagina. Sì, lo so che ho detto in un post precedente che di solito metto i miei CTA nel mezzo o a destra, ma questo layout sembrava funzionare bene

Conclusione della serie

Bene, spero che questa serie ti abbia aiutato a ispirarti con alcuni buoni principi e tattiche di web design che puoi applicare ai tuoi sforzi di web design! Facciamo un breve riassunto di ciò che abbiamo esaminato nell'intera mini serie:

Parte 1

• Preparare la tua mentalità
• Come imparare le tendenze del buon design
• Ottieni feedback e critiche costruttive sul tuo lavoro

Parte 2

• Segui la regola dei terzi
• Layout e flusso
• Gerarchia visiva

Parte 3

• Tipografia e caratteri
• Immagini e colore
• Invito all'azione forte

Di nuovo, interi studi accademici sono stati dedicati al buon design, quindi stiamo solo grattando la superficie qui, ma la mia speranza è che questi principi e pratiche abbiano aiutato a indirizzare quelli di voi che vogliono migliorare nel design nella giusta direzione. Se hai altri principi o metodi di progettazione che ti hanno aiutato e che vorresti condividere, sentiti libero di farcelo sapere nei commenti qui sotto!

Ecco a tutti noi che diventiamo ogni giorno migliori Web Designer Divi!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!