Benvenut* o bentornat* a questa nuova lezione di Dimensione Tutorial!

Oggi voglio parlare della prototipazione di un sito web.
Se non conoscessi il termine prototipazione, te lo spiego immediatamente: è la fase della progettazione nella quale si crea un prototipo, ossia la prima rappresentazione di un prodotto o di un sistema, nel nostro caso di un sito web.
In questa fase tutto ciò che dobbiamo fare è dare forma e organizzazione visiva alle pagine, per poi poter passare alla fase di codifica. Essendo un lavoro strettamente grafico, non avremo tasti o link da cliccare, ma semplici disegni su cui distribuire e ordinare i contenuti.

Quando vorrai creare un sito da te, ricordati che dovrai fare uno studio per ogni tipo di pagina, dando priorità alla home. Se, per esempio, dovessi progettare un sito per un negozio di abbigliamento online, in prima fase creerai la home, successivamente una pagina prodotto (che verrà riproposta identica per ogni capo o accessorio) e una pagina per le categorie (che verrà riproposta sia per "intimo" che per "scarpe" che per ogni tipologia di prodotto).
Inoltre, durante la progettazione pensa anche alla compatibilità della struttura che proporrai con gli altri device, ossia a quali piccoli cambiamenti apportare alla versione per smartphone, tablet e altri supporti digitali.
Tutte le versioni non potranno fare a meno di essere differenti le une dalle altre, ovviamente, ma dovranno essere comunque coerenti tra di loro.

Ora ti mostro ogni singolo step di questo procedimento.
Come spunto per spiegare ho usato parte della home di un sito disegnato da me per un esame. Per "cliente" avevo una giovanissima azienda produttrice di birra artigianale conservata o lavorata, ora non ricordo, con un metodo particolare che coinvolgeva cera o miele d'api.


Moodboard



La moodboard è una tavola su cui mostrare in maniera sintetica e completa lo stile da proporre nel nostro progetto una volta ultimato. Presenta colori, testi, forme, immagini e suggestioni visive relative ai contenuti del sito.
Nel caso della mia moodboard, ho inserito ogni colore della palette in un quadrato di uguale dimensione per mostrare l'ordine e la semplicità del mio progetto. La linea verde a sinistra sta a indicare l'aspetto di eventuali divisori per separare le varie aree all'interno di una stessa pagina, mentre le icone in basso ci dicono che nel sito avremo dei simboli in grafica vettoriale. In alto abbiamo parte del logo e alcune immagini ad indicarci cos'altro dobbiamo aspettarci dal sito.
Ti invito a notare che ci sono molte aree bianche nella tavola: stanno a indicare che il bianco occuperà l'intero sfondo e che avremo molte zone vuote.


Mappa del sito


La mappa del sito è una rappresentazione grafica dell'organizzazione dei contenuti all'interno del sito.
Ogni pagina è rappresentata con il titolo ad essa attribuito e i collegamenti sono mostrati con delle frecce.
Dalla mappa in alto possiamo vedere come tutte le pagine partano dalla "home" grazie a uno o più menu: è possibile però far aprire alcune pagine da altri punti del sito, ma sarà più difficile accedervi, quindi è preferibile avere la "home" come punto di partenza o al massimo un suo sottomenu. Ad esempio, se avessimo un e-commerce da progettare, ogni singolo prodotto sarà collegato a una categoria, quindi a un sottomenu di "home" e non alla "home" stessa. Tipo, se volessimo acquistare una t-shirt, dovremmo passare da "home" a "donna" o a "abbigliamento" e da lì a "magliette". 



Prototipo




Anche se l'obbrobrio che ho incollato qui in alto ti fa dire "ma che è 'sto schifo?", è accettabilissimo in ambito lavorativo come prototipo di un sito web. Questo perché in prima fase non occorre né precisione, né talento artistico, ma chiarezza nell'esposizione dell'idea. Potrai infatti facilmente capire come sono suddivisi gli spazi, dove si trova il logo, dov'è la call to action e dove e quanti sono i testi.
Tutto ciò che devi fare è un abbozzo che mostri come e dove disporre i contenuti.


Wireframe




Un altro alleato della progettazione è il wireframe. Come puoi vedere da te, è una versione più chiara, ordinata e precisa del prototipo, seppur ancora priva dei contenuti che andremo a inserire nel sito.
I colori non sono ancora presenti perché sposterebbero l'attenzione dagli spazi, i quali sono i protagonisti del wireframe. L'obiettivo principale è infatti comprendere se l'occhio dell'osservatore si sta spostando sugli elementi più importanti.
In questo mio studio, per esempio, la domanda che mi sono posta è "l'utente vedrà per prima la call to action o sarà attirato da altro?". Se la risposta fosse stata "altro", avrei dovuto rivedere il progetto.
Una delle possibili ragioni per cui l'utente non dirige il proprio sguardo subito sul nostro elemento principe può essere che abbiamo riempito troppo la pagina di contenuti, perciò attenzione alla quantità!
Il riquadro centrale è riconoscibile come immagine grazie all'enorme X che la contrassegna; se però non ti dovesse piacere così come l'ho rappresentata io, puoi colorare l'intera area in grigio o nero. Come ho scritto sopra, in questa fase non devi usare i colori ma puoi aiutarti con l'utilizzo coerente di bianchi, neri e grigi. In ogni caso, ti sconsiglio di usare più di una tonalità di grigio.
Per iniziare a impratichirti ti invito a sfogliare i wireframe di altri designer e ispirarti ai progetti che percepisci come più funzionali.


Mockup




Ecco l'ultimissima fase: il mockup!
Qui è rappresentata la pagina così come si desidera che appaia, con tutti i contenuti ben definiti (testi, immagini, ecc...). Non è consigliabile apportare modifiche al progetto una volta che i clienti hanno dato l'ok al mockup, perché così facendo tradiresti le loro aspettative.


Bene, qui concludo quest'ultima lezione!
Nel prossimo tutorial parleremo della progettazione di versioni responsive del nostro sito.

A presto!