Grafica per il Web
Creare la bozza di un sito web
Per realizzare la grafica del sito web sviluppiamo quello che è il layout.
Per realizzare il Layout di un sito web, per prima cosa è meglio procurarsi carta e penna e iniziare a disegnare, facendo qualche schizzo del risultato che si vuole ottenere.
Questo primo passaggio in linguaggio tecnico si chiama "layout wireframe".
Con questo termine "Schema Wireframe" si indica una bozza in cui vengono messe in evidenza tutte le parti significative come testi, immagini, video, form per i contatti, ecc., rappresentandole attraverso dei blocchi.
Il layout di un sito web
Una volta chiarita la disposizione grafica degli elementi del sito da realizzare, occorre mettersi davanti al computer e disegnare la grafica del sito web.
Un suggerimento è quello di lavorare con una griglia, cioè definire uno schema di misure in pixel, (soprattutto riguardo alla larghezza della pagina web) sul quale andare ad inserire poi i contenuti.
Spesso si fa riferimento alle griglie di Bootstrap che si sviluppa su un sistema di dodici colonne sulle quali vengono ripartiti testi ed immagini.
Progettare la grafica di un sito web responsive
Parliamo di Responsive design riguardo all’adattabilità dell’interfaccia del sito e dei suoi contenuti a seconda del dispositivo col quale questo viene visualizzato. Infatti navigando un sito Responsive da smartphone, iphone o tablet tutti i contenuti saranno visualizzati correttamente senza la necessità di dover ingrandire i testi o immagini. I blocchi di testi e immagini prenderanno diverse posizioni all'interno della pagina, a seconda del dispositivo con cui la stiamo navigando.
Il responsive design migliora l’esperienza del navigatore del sito.
In genere, in ottica responsive, si parla di "mobile-first" nella creazione dello schema del sito web. Significa che iniziamo a progettare lo schema delle colonne dei contenuti a partire dalle misure del layout su smartphone e quindi sulle risoluzioni più basse, per poi arrivare a sviluppare quelle più alte fino a quella dello schermo del PC, chiamato desktop, o delle TV digitali moderne.
Occorre prendere in considerazione molti diversi elementi e le loro trasformazioni da un dispositivo all'altro, dal menu che nelle risoluzioni più piccole viene ridotto ad un simbolo cliccabile, per non ostacolare la navigazione, ai contenuti che si adattano, fino alle immagini e ai video incorporati, che vengono ridimensionati.
Gli elementi essenziali di un sito web
Le immagini sono un elemento determinante del sito web, devono essere a buona risoluzione ed avere il giusto spazio.
Gli utenti sono bombardati da informazioni come testo, che spesso non leggono più ed è necessario scegliere le immagini giuste per riuscire a catturare la sua attenzione.
Oltre alle immagini è importante la definizione di uno schema di colori, individuando i colori principali e quelli secondari.
Usa il colore per mettere in risalto le informazioni principali e per le "call to action", ovvero le azioni che gli utenti sono chiamiati a compiere (telefonare, riempire un form, scegliere un prodotto, ecc).
Se vuoi saperne di più leggi questa pagina sul Colore nel web.
Tra gli elementi grafici di un sito web è importante anche scelta del font, infatti i testi devono essere chiari e leggibili, ed insieme all'ordine dei blocchi di testo, occorre scegliere un carattere facilmente leggibile per rendere i contenuti comprensibili al meglio.
Quando abbiamo individuato uno stile è opportuno mantenerlo uniforme e coordinato in tutte le pagine per rendere il tuo brand del cliente riconoscibile ed aiutare l'utente nella sua User experience (UX), cioiè la sua esperienza di navigazione del sito.
La struttura fissa della pagina web
All’interno del sito ci sono delle parti che si ripetono uguali in tutte le pagine:
- l’header, cioè l’intestazione, con il logo del brand evidente
- i recapiti dei contatti, immediatamente visibili per essere contattati con facilità
- il menu, fondamentale per la navigabilità del sito
- il footer, cioè i contenuti posti a piè pagina, che possono comprendere i recapiti, i link ai social network, le informazioni relative alla Privacy policy, e Cookie policy obbligatoria.
Importante è anche l'impostazione grafica del form dei contatti, per invogliare l'utente a compilarlo.
