Le fasi del design di un sito web

Di Giuseppe Argento

Nel , il processo che guida il design di un sito web per un cliente richiede un' attenta valutazione del cliente stesso e dei suoi obiettivi.

la strategia nel definire il design di un sito web

La prima fase consiste nel definire la conoscenza del cliente e conseguentemente elaborare la strategia alla base del design.

L’obiettivo è allineare le risposte alle domande “chi è il cliente?” , “cosa vuole realizzare?” e "come vuole che questo venga espresso visualmente sul proprio sito web?".

E' fondamentale arrivare a capire quanto più possibile la rappresentazione a livello identitario che il cliente ha di se stesso.

Un' informazione altrettanto importane in questa fase viene anche dall' "audience" di riferimento del cliente, quindi dalla risposta alla domanda "chi sono i suoi clienti?".

Farsi spiegare dettagliatamente i servizi che il cliente offre e come fino ad oggi sono stati "comunicati" al pubblico di riferimento.

Da un punto di vista metodologico queste informazioni devono essere ricavate da un briefing iniziale e lo strumento per eccellenza, oltre che ovviamente l'intervista personale, è rappresentato da un questionario (che raccomando sintetico e focalizzato sui punti importanti) da sottoporre al cliente e ai suoi collaboartori chiave.

la storia aziendale
unicità del cliente
pubblico di riferimento del cliente
offerta del cliente

Dall'analisi delle risposte a questi quesiti ora sappiamo chi è il cliente come brand..

'Quale è l'obiettivo del sito web?' e 'quale è l'obiettivo dei tuoi clienti nel visitare il tuo sito web?' sono le domande di questa fase.

Capire cosa il cliente vuole ottenere dal suo sito web è fondamentale per impostare e guidare lo sviluppo del sito rispetto alla comunicazione, per definire le aree del sito web e quali funzionalità implementare.

A questo punto passiamo ai contenuti.

Sicuramente possiamo esprimere un parere su quali contenuti comunicare, ma è importante seguire le indicazioni che emergono dal racconto del cliente.

Aspetto e rappresentazione.

'Come vorresti che appaia agli utenti il tuo sito web?'. Si tratta di capire cosa piace o non piace in termini visuali al cliente.

Showcase

Mostriamo al cliente una serie di esempi visuali anche di siti web dello stesso settore, per indicare ma soprattutto per capire cosa piace o non piace al cliente.

comunicazione visuale
struttura dei contenuti di un sito web
elementi della comunicazione visuale di un sito web
website showcase
creazione del wireframe del sito web

Una volta sicuri degli aspetti visuali che piacciono al cliente, iniziamo a creare il wireframe, l'organizzazione schematica degli elementi delle pagine web senza contenuti.

Esistono molti strumenti per realizzare un wireframe, quello di tendenza è Figma, uno strumento che ha come caratteristica utile il design collaborativo nell'editing dei file. Io personalmente utilizzo Photoshop e Illustrator.

logo design

Definita visualmente la strutturazione delle pagine e dei contenuti, passiamo al design vero e proprio del sito web.

Partiamo dal logo e dai colori del brand. Se non esistono dobbiamo crearli e tutte le informazioni raccolte nella prima fase per definire l'identità e l'unicità del cliente ci guideranno nel processo creativo.

Creiamo la "Brand Style Guide", che contiene tutti gli elementi della brand identity quindi logo, colori e tipografia da utilizzare per ogni supporto in cui avviene la comunicazione, dunque anche offline (brochure, visit cards, packaging), che costituisce la brand identity.

E' importante quando abbiamo definito la brand identity e fatto delle scelte visuali, spiegarle al cliente in termini di significato identitari.

Approvazione

Una volta approvati il logo, i colori e la tipografia, applichiamo questi elementi al wireframe e creiamo il design completo del sito web, inserendo immagini e contenuti reali.

Ancora una volta gli strumenti migliori sono Figma, Photoshop e Illustrator

A questo punto abbiamo il design del sito web completo che, approvato dal cliente, andrà convertito in codice e quindi andranno fatte altre valutazioni e scelte questa volta nell'ambito della programmazione. La fase successiva sarà il coding del sito web.

Photo of a dusk skyline above a grassy rockface covered in trees.
Photo of the sea and sky on the horizon with the foundations of a demolished house.
Photo of the sea with mist covering the rocky formations near the shore.
Photo of the foundations of a building on a cliff overlooking a lighthouse.