E-commerce

La grafica del tuo sito n. 8

Progettazione grafica del sito

Dopo aver dato uno sguardo a come preparare i materiali per il nostro e-commerce e quali sono le cose da tenere in considerazione è giunto il momento di progettare il sito a livello di interfaccia grafica. Abbiamo già visto in precedenza come con WordPress e Woocommerce sia possibile personalizzare, attraverso temi e plugins, sia l’aspetto del sito che le sue funzionalità. Ovviamente, come per tutte le cose, arrivare ben preparati alla fase di sviluppo ridurrà notevolmente i tempi ed i costi legati al sito, l’interfaccia grafica è proprio una delle fasi più importanti in questo senso. Anche se non realizzeremo il sito da soli può essere di grande aiuto avere un’idea di massima di ciò che va fatto e dell’aspetto che vogliamo dare al sito. Il web-design è una disciplina complessa che comprende sia l’aspetto visuale, il marketing e l’ottimizzazione del sito, per questo motivo è necessario andare per steps e considerare le varie fasi una per una.

Creare un Wireframe

La prima cosa che va creata in termini di progettazione grafica del sito è il wireframe. Il wireframe è uno schema che rappresenta lo scheletro delle nostre pagine, una ricostruzione sommaria senza dettagli grafici che serve per decidere dove e come posizionare tutti i vari elementi che compongono le varie pagine del sito. Un wireframe può essere creato a mano, facendo degli schizzi su carta o può essere creato utilizzando software grafici adatti allo scopo. Una volta decisa la pagina che vogliamo creare andremo ad impilare, uno sotto l’altro, tutti i componenti della pagina, divisi in sezioni organizzate seguendo il percorso logico di acquisto adatto ai nostri prodotti o servizi e tenendo in considerazione a quale punto del percorso si trovano i nostri utenti. La maggior parte delle pagine inizierà con un header, un’intestazione spesso composta da immagini e titolo della pagina, è molto comune, nell’header,  trovare uno slider, cioè un componente che fa scorrere diverse immagini e messaggi in maniera automatica. Questa parte iniziale delle pagine è anche detta contenuto “above the fold”, ovvero il contenuto che è immediatamente accessibile senza dover scrollare la pagina in basso. Tutto ciò che si trova al di sotto del “fold” viene chiamato “corpo” della pagina e generalmente contiene vari componenti alternati in diversi sezioni. Nel creare un wireframe non è necessario che il nostro bozzetto sia fedele graficamente al risultato voluto ma è opportuno utilizzare elementi di notazione comuni in modo da poter comunicare al designer o allo sviluppatore la posizione dei vari elementi in pagina.

Creare un Mockup ad alta definizione

Il passo successivo al wireframe è chiamato “mockup”, si tratta di un prototipo statico, una rappresentazione visuale del sito, non cliccabile, generalmente creata con software grafici appositi come Adobe Photoshop, Sketch o Adobe XD. Un mockup serve a definire in maniera completa l’aspetto del sito, prima di tradurlo in codice, ci permette di testare varie combinazioni di fonts e colori, il tipo di foto che verranno utilizzate, tutto nell’ottica di risparmiare tempo (e denaro). Il mockup al contrario del wireframe, deve essere il più dettagliato possibile ed in questo senso è molto utile inserire foto e testi reali in questa fase anche per rendersi conto dell’impatto che questi andranno a creare sulle nostre pagine. Per questi motivi, generalmente il mockup va affidato a mani esperte, un grafico potrebbe essere in grado ma generalmente ci si riferisce a designers veri e propri che conoscono anche le limitazioni della tecnologia e dello sviluppo di codice e ne terranno conto durante la progettazione grafica del sito. Inutile avere un bel “disegnino” del nostro sito se poi la maggior parte delle “acrobazie” grafiche andranno ignorate perché troppo lunghe o troppo costose in termini di realizzazione… Un buon web-designer non solo può produrre grafiche eccellenti ma conosce perfettamente le tecnologie con cui queste “riproduzioni grafiche” verranno sviluppate e ne terrà conto in fase progettuale.

Creare un prototipo demo funzionale

Una volta ottenuto un mockup che soddisfi le nostre esigenze al livello di business e quelle dell’utente in termini di accessibilità ed usabilità, è il momento di creare un demo cliccabile. Un demo altro non è che una versione ridotta del nostro sito, con il numero minimo di prodotti e servizi attivi per testare le funzionalità e tutto il flusso a cui l’utente sarà sottoposto per effettuare l’acquisto. Un demo serve ad esplorare le migliori tecnologie utilizzabili ed anche a far emergere tutti quei problemi progettuali che vanno necessariamente risolti prima dello sviluppo vero e proprio. Generalmente il demo è ospitato su un dominio di proprietà dello sviluppatore o dell’agenzia a cui abbiamo affidato il lavoro, in alcuni casi potrebbe essere realizzato “in locale” ovvero sul computer del designer o dello sviluppatore e presentato durante un meeting. Lo scenario migliore è ovviamente di averlo online in modo da poterlo testare su diversi dispositivi mobili e non. Inoltre avere un demo accessibile online ci permetterà di familiarizzare con il back-end, ovvero l’interfaccia di gestione del sito con cui dovremo necessariamente avere a che fare nella gestione giornaliera del nostro sito. Pensare di costruire un sito senza conoscerne il funzionamento è una forma di “follia” che, purtroppo, affligge moltissime aziende ed imprenditori senza esperienza.