Grafica sito web: perché è importante
Gli elementi da non dimenticare nella grafica di un sito web.
Una buona composizione visiva, una struttura organizzata e pochi effetti scenici sono il primo passo per aspirare ad un sito con alte prestazioni. Ma come mettere in pratica tutto ciò? Come creare la giusta struttura e grafica web? Nel nostro articolo di oggi definiremo come creare un sito web che metta in evidenza i propri punti di forza, ma che soprattutto piaccia ai visitatori.
Grafica di un sito web: da dove iniziare
La struttura del sito web nasce da una bozza grafica, disegnata a mano, dove si dispongono i vari elementi del layout. Una volta elaborato il bozzetto manuale su carta, si trasforma in un wireframe, un prototipo grafico su computer che definisce l’architettura del progetto. Si posizionano tutti gli elementi del sito: logo, menu, immagini e sezioni, ma senza usare colori.
Per creare la struttura del wireframe ci sono tanti diversi tool gratuiti che si possono utilizzare come ad esempio moqups. Tramite questo programma è possibile creare progetti utilizzando componenti e forme per comporre il layout delle pagine web: basta semplicemente selezionare call to action, icone, breadcrumbs e tutti gli elementi che occorrono dal menu, personalizzare dimensioni e colori per ottenere un wireframe dettagliato.
La fase successiva invece, inizia utilizzando il wireframe come base al quale si aggiungono colori, stili, font e contenuti, ottenendo il mockup. La struttura diventa così sempre più viva e complessa. Che tool si utilizza in questo caso? Adobe XD è il più famoso e completo, tra le varie funzionalità permette anche di creare prototipi che si adattano alle misure dei vari dispositivi, per avere una visione completa del proprio progetto su ogni device.
Ma come si scelgono i vari elementi grafici da inserire nel sito?Grafica web: come scegliere colori e font
Affinchè un sito web sia efficace va prestata attenzione alla scelta dei colori. Per cercare ispirazione un tool utile è Picular, un motore di ricerca per i colori: inserendo una parola chiave, restituisce come risultato idee di colore per i propri progetti.
La scelta dei colori che vanno a comporre la palette prende in considerazione diversi fattori: deve essere coerente ma dare anche enfasi ai propri punti di forza e elementi importanti, non dimenticando di valutare il settore di appartenenza, il prodotto o servizio di cui ci si occupa e soprattutto il target a cui ci si rivolge.
Esistono comunque due regole precise, per mantenere bilanciati i colori nella palette di un sito web:
- palette di 3 colori: utilizzandone uno per lo sfondo, uno di base e l’ultimo per evidenziare elementi a cui si vuole dare maggior risalto. Ad esempio le informazioni di contatto per essere raggiunto dai clienti o un link ad una sezione importante
- palette a contrasto: sfruttare immagini con un colore predominante e creare un contrasto per far risaltare gli elementi grazie a tonalità opposte nella ruota di colore.
Un altro elemento importantissimo è il font.
La semplicità premia! Meglio un font ben comprensibile, a cui poter dare un peso diverso, che un font illeggibile dove i caratteri non si distinguono.
La dimensione corretta è considerata 16 pixel che garantisce una facile lettura da tutti i dispositivi.
La parola d’ordine: armonia.
Più il font ha dettagli semplici, meglio sarà percepito da ogni visitatore.
Grafica web: le call to action
Un sito web si compone di tante sezioni, alcune che guidano i visitatori a compiere delle azioni mentre altre meno significative. Le call to action rimandano alle sezioni del sito in cui gli utenti devono fare qualcosa: acquistare un prodotto, iscriversi alla newsletter, compilare un modulo di contatto. Questi pulsanti devono perciò essere evidenziati. In che modo?Rendendoli colorati e staccati dal testo.
In alcuni casi, come negli ecommerce, è bene anche renderli fissi, in modo che l’utente possa sempre vederli facilmente anche quando scorre la pagina.
Percorsi di navigazione
Durante la fase di analisi del sito web, vanno valutati i diversi percorsi di navigazione che porteranno l’utente verso lo scopo che è stato prefissato. Le sezioni principali che devono essere notate dall’utente devono occupare la parte più alta della pagina. L’utente infatti, si muove con lo sguardo prima in alto a sinistra per poi muoversi a destra e in basso, formando una F. Meglio evitare animazioni che possono far scappare gli utenti.
Ora che hai letto tutti i nostri consigli sulla grafica di un sito web, non puoi lasciare nulla al caso! Ogni elemento del tuo sito web va analizzato e studiato nel dettaglio.
Nella realizzazione di un sito web intervengono tanti soggetti diversi, che analizzano costantemente il lavoro, apportano miglioramenti e ottimizzazioni costanti. Affida a noi di IMPRIMIS il tuo sito, avrai al tuo fianco una web agency affidabile, che realizzerà un progetto personalizzato su di te.
Hai bisogno di affiancamento per il tuo sito web?
ContattaciALCUNI APPROFONDIMENTIDAL NOSTRO BLOG
Mobile first design: come ottimizzare un ecommerce?
1 Agosto 2019
5 consigli per ottimizzare la user experience
17 Luglio 2019
