Stai cercando una guida su come realizzare la progettazione grafica del tuo sito web?
Beh, sei atterrato nell’articolo giusto!
Come ti immagini parlare semplicemente di grafica di un sito internet racchiude all’interno un mondo, nel quale cercheremo di darti delle coordinate precise.
Andando avanti nel testo troverai concetti di UI e UX, alcuni dei principali tool utilizzati da professionisti e non per la progettazione di un sito web, oltre che decine di link utili per velocizzare la creazione della grafica del tuo sito.
Iniziamo questo percorso.
Grafica sito web: da dove partire
Quando si parla dell’impostazione grafica di un sito web, spesso ci riferiamo a quella che in termini tecnici viene definita UI (User Interface).
L’UI non è altro che l’interfaccia, o per meglio dire l’insieme di schermate, con cui un utente interagisce quando utilizza un prodotto digitale, come ad esempio un sito.
Per progettare l’interfaccia grafica è obbligatorio prima aver chiarito alcuni aspetti legati all’esperienza utente (UX), come ad esempio:
- Chi sono gli utenti che navigheranno all’interno del sito web;
- Cosa cercano, quali sono le loro aspettative;
- In che modo riusciranno a soddisfare le loro aspettative.
Senza andare troppo nello specifico andiamo a vedere nei prossimi paragrafi alcune nozioni di UX e UI necessarie per progettare un sito web.
Alcune basi della UX
Come detto il design della UX è quella disciplina che analizza come gli utenti interagiscono con un prodotto digitale, con l’obiettivo di migliorarne l’esperienza di utilizzo.
Quali sono gli step fondamentali per raggiungere questo obiettivo? Vediamoli per punti:
- Comprendere gli utenti, le loro abitudini tecnologiche ma anche le loro aspettative;
- Costruire dei moduli digitali facilmente testabili (wireframe);
- Testarli direttamente con gli utenti per raccogliere feedback e applicarli alla costruzione del sito web.
Partiamo dal primo punto, che è fondamentale per riuscire ad adattare la struttura e i contenuti del sito web a quelle che sono le esigenze degli utenti.
Un modello utilizzato per questa prima fase di ricerca e analisi è quello delle user personas.
Questo modello spesso risulta troppo astratto e, per questo, il consiglio è quello di intervistare direttamente o utilizzando strumenti digitali (come ad esempio un semplice google form) quelli che saranno gli utilizzatori finali.
Il secondo punto ha come obiettivo quello di arrivare velocemente a uno scheletro delle pagine del sito web, che potrai utilizzare per testare come gli utenti interagiscono con quello che stai realizzando.
Il wireframe (appunto scheletro) è una schematizzazione primordiale dei contenuti del sito (testi, immagini, pulsanti) che puoi realizzare con diversi strumenti.
Ad esempio con MIRO puoi utilizzare la libreria di componenti già configurati per dar vita velocemente allo scheletro del tuo sito web.
Il terzo punto è quello che coinvolge direttamente gli utenti, mostrandogli il wireframe per raccogliere feedback direttamente da loro.
Analizzando le loro difficoltà puoi trovare eventuali migliorie da apportare alla struttura del sito web.
Ovviamente questa fase di test non si interrompe dopo aver realizzato il wireframe, ma può essere ripetuta dopo aver realizzato la grafica del sito web e anche al termine dello sviluppo.
Arrivati alla definizione del wireframe entra in gioco la UI.
Principi fondamentali di design applicati alla UI
Come accennato il design della UI corrisponde alla progettazione in alta definizione delle schermate che poi saranno utilizzate dagli utenti finali.
La progettazione grafica del sito web deve tener conto di aspetti funzionali, estetici e di marketing.
Per realizzare l’interfaccia grafica di un sito web è fondamentale avere almeno un’infarinatura dei principi base del graphic design, come ad esempio:
- La gerarchia visiva dei contenuti;
- L’utilizzo di font e colori;
- L’utilizzo degli spazi vuoti per organizzare gli elementi.
Oltre a questo ci sono degli aspetti che l’UI Designer non può tralasciare:
- La consistenza tra la grafica del sito web e il brand, oltre che tra gli elementi che lo compongono;
- L’accessibilità del sito web.
La consistenza è la capacità di un sito web di mantenere costanti alcuni elementi grafici così da permettere all’utente di avere delle linee guida nella navigazione, oltre a rendere il sito esteticamente più gradevole.
Per fare un esempio, i pulsanti principali dovrebbero avere all’interno del sito sempre lo stesso raggio del bordo, i font utilizzati negli h1 (titoli di pagina) dovrebbero essere sempre uguali anche nel peso e nelle dimensioni (o almeno nelle pagine che hanno la stessa struttura).
Colori, font e stile del sito dovrebbero essere consistenti anche con la personalità del brand: il sito di Mcdonald’s è frizzante e colorato, ed utilizza elementi grafici e immagini vivaci, mentre il sito di Gucci è elegante, organizzato e stiloso.
L’accessibilità invece è la capacità di un portale web di fornire informazioni utili e servizi anche agli utenti con disabilità .
Alcuni interventi in questo senso sono, ad esempio, segnalare dei link con colori e sottolineature, mantenere un contrasto elevato tra testi e sfondi
Alcuni suggerimenti pratici per la grafica di un sito internet
Cerchiamo di vedere alcuni suggerimenti pratici per realizzare la grafico di un sito web:
- Utilizza 1 o massimo 2 font per tutti i testi;
- Scegli 4 o 5 colori, tra cui un colore chiaro per lo sfondo e uno acceso per i pulsanti;
- Definisci la gerarchia dei font prima di creare la grafica;
- Se sei alle prime armi, prendi ispirazione e cerca di replicare delle grafiche che trovi online.
I principali tool per progettare la grafica di un sito web
Dopo aver visto alcuni principi teorici, analizziamo due dei principali tool utilizzati da professionisti e non per realizzare la grafica di siti web e applicazioni mobile.
Adobe XD
Adobe XD è uno strumento che è inserito all’interno della famosissima suite di Adobe (per chi non la conoscesse, comprende Photoshop, Indesign, Illustrator e molti altri software).
È un software abbastanza giovane che può essere utilizzato solamente con dei piani a pagamento, abbonandosi all’intera suite o al singolo strumento.
XD è consigliato in particolare per chi ha già dimestichezza con i vari software adobe visto che la sua interfaccia è molto simile ad esempio a Illustrator.
Inoltre XD dialoga bene con i file prodotti con gli altri strumenti della suite.
Dentro le tavole da disegno è possibile inserire testi, immagini, video e forme di ogni genere per costruire la grafica del proprio sito web.
P.s. piccolo spoiler, dopo aver acquisito Figma, l’Adobe ha dismesso i futuri sviluppi di XD.
Figma
Figma è lo strumento più utilizzato per la progettazione grafica di interfacce web.
È uno strumento su cui è possibile lavorare sia scaricando la versione desktop che accedendo dal browser sul sito ufficiale.
Figma può essere utilizzato sia nella versione gratuita, con delle limitazioni sul numero di utenti e progetti, che con dei piani in abbonamento.
Uno dei plus di Figma, che come detto è stato acquistato dall’Adobe, è la sua community che nel tempo ha creato plugin e guide. Strumenti che permettono di velocizzare tantissimo il lavoro.
Risorse utili per realizzare la grafica di un sito web
Per concludere questo articolo abbiamo raccolto una carrellata di risorse utili che potrai utilizzare per progettare il tuo primo sito web.
Sono piattaforme che ti consentono di scaricare o scegliere: icone, immagini, palette colori, font.
Per generare una palette colori per il tuo sito web ti consigliamo di utilizzare:
- Coolors, un portale che permette di consultare palette di tendenza o generare la propria palette personalizzata;
- Adobe Color, ti permette di creare delle palette in base a diverse regole di armonia dei colori (colori analoghi, monocromatici, complementari, ecc.)
Per trovare immagini e icone da utilizzare all’interno del tuo sito web alcune librerie gratuite sono:
Infine per scegliere i font da utilizzare nella UI del sito web ti consigliamo di sfogliare i Google Fonts, una libreria varia di font gratuiti che puoi utilizzare nei tuoi progetti digitali.
