Come creare grafiche web da zero

Condividi su facebook
Condividi su twitter
Condividi su linkedin

Il sito web è il principale strumento di marketing che ogni attività dovrebbe avere. Un sito web efficace, infatti, può aiutare la tua attività ad acquisire nuovi clienti, supportando la crescita del tuo business, come un addetto alle vendite che lavora 24 ore su 24 e 7 giorni su 7. Per questo motivo, è importante creare grafiche web che rispecchino l’identità aziendale e soprattutto efficaci, cioè capaci di convertire i visitatori in clienti fidelizzati. L’interfaccia grafica del sito web è la parte del sito web che consente all’utente di interagire con il sito stesso, pertanto dovrà essere progettata in modo da consentire all’utente un’esperienza di navigazione ottimale.

Progettare la struttura e la grafica del sito web prima ancora di mettersi davanti al pc è il segreto per la realizzazione di siti web aziendali di successo. In questo articoli vedremo qual è il flusso di lavoro corretto per la creazione di grafiche web e quali strumenti utilizzare.

Indice

 

INFOGRAFICA COME CREARE GRAFICHE WEB

 

Come creare la grafica per il tuo sito web: definisci gli obiettivi

Se devi creare la grafica per il tuo sito web o per il sito web di un tuo cliente, la prima cosa che devi chiederti è quale obiettivo vuoi raggiungere con il nuovo design, quali sono i problemi di business che il tuo design dovrà risolvere. Ogni attività ha le sue peculiarità ed obiettivi di business differenti, pertanto quando progetti la grafica del sito internet dovrai tenere conto di questi aspetti e progettare la migliore soluzione creativa che possa concretamente rispondere alle problematiche del business, supportandolo nella sua crescita. In questa fase di briefing con il cliente, dovrai cercare di chiarire ciò che il cliente vuole comunicare attraverso il sito web e quale funzione dovrà svolgere il sito stesso. Nel caso di un restyling grafico, dovrai inoltre cercare di capire che cosa funziona nel vecchio design e ciò che invece non funziona e deve essere modificato. Tieni sempre a mente che il design è uno strumento per risolvere problemi di business, pertanto assicurati di elaborare la migliore strategia creativa in risposta alle sue specifiche esigenze.

Studia il target e la concorrenza

Tra le competenze di un grafico sito web non deve mancare il marketing. Come ti ho anticipato all’inizio dell’articolo, il sito web è uno strumento di marketing molto potente, ma per assolvere a questa funzione deve essere progettato in maniera corretta. Dopo aver individuato le criticità del business, le problematiche da risolvere e gli obiettivi da raggiungere con il nuovo design, studia la concorrenza per capire quali soluzioni sono state adottate da altri web designer in risposta alle stesse problematiche. Se individui delle soluzioni efficaci, consultando anche altri siti di grafica, potrai utilizzarle all’interno del tuo nuovo progetto di web design. Ricorda di analizzare anche il target di riferimento, in modo tale da poter individuare le soluzioni migliori di design per consentire al tuo target di interagire in maniera positiva con il sito web.

Progetta la struttura del sito web: il wireframe

Guida web designer wireframe

A questo punto puoi iniziare a progettare la struttura del sito web realizzando un wireframe, ovvero una bozza del sito web, cioè uno schema dell’interfaccia del sito web a blocchi. Ti consiglio di utilizzare un foglio di carta e la matita. Carta e penna, infatti, ad oggi sono gli strumenti che consentono di trovare le migliori idee, lasciando fluire la creatività. Può sembrare superfluo, ma in realtà questa è la fase fondamentale di un progetto di web design. E’ in questa fase che si definisce il posizionamento dei vari elementi all’interno del layout delle pagine web. Completato il lavoro, potrai presentare il wireframe al tuo cliente per ricevere un primo feedback. 

Inizia a creare la grafica del sito web: progetta una style guide

Prima di mettersi al pc a disegnare la grafica del sito web, è importante aver già definito una style guide, ovvero l’aspetto degli elementi grafici del sito web, quali la palette cromatica, la tipografia, i pulsanti, le icone… Prima ancora di progettare la style guide, potresti anche completare una moodboard insieme al cliente, per capire qual è il look & feel che dovrà avere il sito web. 

Definire in anticipo la style guide è molto importante, poichè detta le linee di stile da seguire dall’inizio alla fine del progetto, evitando che a metà del progetto ci si dimentichi di quello che si era già fatto e si inizi per esempio a cambiare colori, dimensione dei titoli, ecc.

All’interno della style guide dovrai dunque definire la tipografia, ovvero il font che utilizzerai, la scala delle dimensioni del font. l’ampiezza dell’interlinea, la palette cromatica, l’aspetto dei pulsanti, ecc. 

Oltre alla moodboard, per definire la style guide dovrai tenere in considerazione l’identità visiva del brand. Se l’azienda ha già un logo e una solida brand identity, anche la grafica del sito web dovrà essere perfettamente in linea con l’identità visiva dell’azienda. Se l’azienda non ha un logo, è opportuno rivolgersi ad uno studio grafico per loghi per progettare l’identità visiva dell’azienda prima di procedere con il progetto di web design.

La tipografia

Quando progetti la tipografia del sito web, oltre alla scelta accurata del font, dovrai definire l’interlinea, ovvero lo spazio tra una riga e l’altra, e la dimensione dei caratteri per titoli e paragrafi.

Partiamo dalla scelta del font. Ti consiglio di utilizzare lo stesso font per titoli e paragrafi, soprattutto se sei alle prime armi. Se vuoi, puoi utilizzare un font per i paragrafi e un altro font per i titoli, ma dovrai accostarli in maniera accurata. Puoi trovare alcuni esempi di combinazioni di font su fontpair.co. Scegli un font che sia ben leggibile, in modo tale da agevolare gli utenti nella fruizione dei contenuti. Se non sai da dove partire, puoi scegliere un font gratuito tra quelli proposti in Google Fonts, una raccolta di font selezionati proprio per il web. 

scala delle dimensione del font

In quanto alle dimensioni del font, dovrai differenziarle in base al tipo di dispositivo: per i dispositivi desktop scegli un valore compreso tra 16 e 20pt, per i tablet tra 15 e 19pt e per smartphone tra 12 e 16pt.

Definisci poi la scala delle dimensioni del font, per distinguere i titoli h11, h2, h3, ecc. dal paragrafo. Puoi calcolare la scala delle dimensioni in modo molto rapido sul sito modularscale.com. Dovrai impostare la dimensione di partenza e la ratio della scala. Per siti di marketing, che richiedono un elevato impatto visivo, con titoli che si differenziano molto dai paragrafi, scegli una ratio tra 1,8 e 2,0. Per blog e siti di informazione puoi scegliere un valore intermedio intorno a 1,5-1,6 mentre per siti di e-commerce, dove i titoli si differenziano poco dal restante testo, scegli un valore intorno a 1,2.

Per l’interlinea, ti consiglio di impostare un valore di 1,4-1,5em.

La palette cromatica

La scelta dei colori è davvero molto importante e deve essere effettuata con molta attenzione. Innanzitutto bisogna partire dal colore del brand. Se il business ha già un’identità visiva ben definita, è possibile che sia già stata definita una palette cromatica per l’immagine coordinata. In questo caso, per mantenere un’identità visiva coerente, bisognerebbe utilizzare la stessa palette cromatica. In alternativa, si può identificare un colore primario da cui derivare una palette cromatica composta da 5 colori RGB. Per farlo puoi utilizzare il tool gratuito Adobe Color, che, a partire da un colore principale, è in grado di generare una palette cromatica sfruttando diverse regole di armonia colore, ad esempio monocromatica, triade, colori analoghi, tonalità.

 

Progetta il sito web con Adobe XD

A questo punto puoi iniziare a disegnare il layout grafico del sito web utilizzando un software come Adobe xd, che consente anche la prototipazione del sito web.

Per prima cosa dovrai definire le dimensioni della tavola da disegno, Ti consiglio di utilizzare la dimensione per siti web pari a 1920x1080px. Poi inserisci una griglia. Ti consiglio di adottare il framework Bootstrap e di utilizzare una griglia a 12 colonne larga 1440px. Potresti decidere di utilizzare anche una griglia orizzontale, adottando il sistema css grid, per rendere la grafica del sito web ancora più ordinata.

Adobe XD offre la possibilità di salvare tra le risorse del documento i colori, gli stili carattere e i componenti, ad esempio i bottoni, in modo tale da poterli richiamare più facilmente all’interno di tutto il progetto.

A questo punto puoi iniziare ad inserire gli elementi progettati nel wireframe applicando anche lo stile grafico. Ti consiglio di evitare testi segna posto come il Lorem Ipsum. In questa fase potresti già inserire i testi che hai richiesto al copywriter, così da poter mostrare al cliente il progetto completo. Inserire testi ed immagini reali, consente al cliente di comprendere meglio l’intero progetto nella sua interezza. Adobe XD mette a tua disposizione anche numerosi plugin per espandere le funzionalità di questo programma. Per inserire contenuti verosimili nel tuo progetto, puoi utilizzarne alcuni come UI Faces, se hai bisogno di inserire immagini di persone, e Data Populator.

Terminato il progetto, e dopo aver ricevuto l’approvazione da parte del tuo cliente, dovrai esportare gli elementi grafici che serviranno allo sviluppatore web per realizzare il sito web.

Gli elementi ricorrenti del layout

All’interno della grafica di una pagina web, sia che essa sia una landing page, un’articolo informativo o una pagina prodotto, ci sono alcuni elementi che sono sempre presenti. Il primo di questi elementi è l’header, ovvero l’intestazione. All’interno dell’header vanno inseriti il logo del brand e il menu del sito web. Ti consiglio di posizionare il logo. Fai attenzione alla dimensione del logo che deve essere ben visibile ma non deve costituire un elemento di distrazione per il visitatore. Per quanto riguarda il menu del sito web, assicurati di progettarlo in maniera tale da facilitare la navigazione degli utenti. Dovrai quindi inserire le pagine più importanti, mentre quelle meno importanti, come la Privacy Policy, inseriscile nel footer. 

L’altro elemento ricorrente all’interno di tutto il sito web e proprio il footer o piè di pagina. Qui puoi inserire alcune informazioni obbligatorie come la partita IVA dell’azienda e il link alla Privacy & cookie policy.

un altro elemento che a mio avviso dovrebbe essere presente in ogni pagina del sito web è il modulo di contatto, per consentire ai visitatori di poter contattare l’azienda in modo semplice e rapido. Progetta un modulo di contatto con una grafica semplice e chiara, che sia ben leggibile e che non richieda di inserire troppe informazioni obbligatorie che scoraggerebbero l’utente a proseguire nella compilazione. Qualora avessi la necessità di far compilare molti campi da parte del visitatore, potresti utilizzare un modulo multi-step. Ricorda inoltre di inserire una checkbox non precompilata per l’accettazione della privacy policy.

Le immagini

Le immagini rivestono un ruolo fondamentale all’interno della grafica del sito web, in quanto sono in grado di coinvolgere gli utenti suscitando le loro emozioni. Per creare grafiche accattivanti e dall’elevato impatto visivo devi quindi utilizzare le giuste immagini ed assicurarti che siano di qualità. Non utilizzare foto sfocate o sgranate. Se non hai la possibilità di realizzare delle fotografie di qualità o di farle fare ad un fotografo professionale, puoi utilizzare immagini stock di qualità, come quelle che trovi su Adobe Stock. Oltre alle fotografie, puoi realizzare infografiche chiare e di impatto. 
Poichè le immagini possono rendere molto lento il caricamento delle pagine web, ove possibile esportale in formato svg. Il formato svg, da utilizzare sicuramente per i loghi,  è un formato vettoriale che genera file di dimensioni molto ridotte, ma, essendo vettoriale, l’immagine mantiene la sua qualità in qualsiasi dimensione. Per quanto riguarda le fotografie, assicurati di fornire allo sviluppatore l’immagine compressa e nelle dimensioni corrette. Ricordati di fornire le immagini anche in formato @2x per i display retina.
 

Il layout responsive

Oltre alla progettazione del layout grafico per i dispositivi desktop, ricordati di adattare la grafica anche per i dispositivi mobili. E’ importante che gli utenti mobili, da cui proviene la maggior parte del traffico di un sito web, possano visualizzare correttamente il sito web, sperimentando una buona esperienza di navigazione. Pertanto, al variare della viewport, bisognerà fornire agli utenti un layout grafico differente. Come breakpoint, puoi impostare 1024px, sotto i quali verrà visualizzata la versione per tablet, e 767px, sotto i quali verrà servita la versione per smartphone. Nel paragrafo relativo alla style guide, inoltre, ti ho spigato anche quali sono le dimensioni dei font che dovresti rispettare sui diversi dispositivi di navigazione.

A chi rivolgersi per la creazione di grafiche per siti web

La figura professionale che si occupa della progettazione grafica per siti web è il grafico sito web o web designer. 

Il grafico web, quindi, è colui che si occupa di disegnare le pagine web e dell’impaginazione del sito, a differenza dello sviluppatore web, che si occupa della realizzazione di siti web utilizzando il codice html e css e i linguaggi di programmazione, come php e javascript. 

Se cerchi un professionista per disegnare un sito web, contattaci compilando il form che trovi su ogni pagina del nostro sito web. 

PRENOTA ORA LA TUA
STRATEGIA CREATIVA

Non perdere tempo e prenota il tuo posto! Al fine di poter offrire un servizio puntuale e di qualità, avviamo un numero limitato di progetti ogni mese.

FAQ

Vorrei ricevere informazioni sui vostri servizi. Come posso contattarvi?

Se vuoi contattarci e ricevere informazioni sui nostri servizi, compila il modulo sottostante. Ti risponderemo entro pochissimo tempo.

ISCRIVITI ALLA NEWSLETTER

Ricevi le nostre guide e i nostri consigli via email