soluzioni web
costruire un sito

Partiamo considerando i valori di base ricerchiamo connessione logica dell’obiettivo,

• cosa farà il nostro sito per l’utente?
• rispetto il payoff? Costruiamo la tagline
• Spieghiamo cosa fa l’azienda e il sito di questa per l’utente, creiamo la welcome blurb

Output del processo: dati testuali di orientamento di partenza

Prepariamo i dati di web architecture, sito istituzionale quindi home, chi, referenze, contatti, prodotti… quanti, quali.

Organizziamo il menu, le etichette, la navigazione

Elementi salienti da ricordare: la legge di Hic, menu mono livello, struttura ampia,nel caso non fosse possibile allora scomposizione, personalizzazione, diffusione

Obiettivi di marketing:

• Awareness, positioning
• Ottenere nuovi clienti online

Target: Analizzare sesso ed età del pubblico

Payoff: Sintetizzare vocazione e valori del brand

Prepariamo i dati di web architecture, sito istituzionale quindi home, chi, referenze, contatti, prodotti… quanti, quali.

Organizziamo il menu, le etichette, la navigazione

Elementi salienti da ricordare: la legge di Hic, menu mono livello, struttura ampia,nel caso non fosse possibile allora scomposizione, personalizzazione, diffusione

A seguire scomporre dei contenuti per limitare la profondità del menù, valutare la personalizzazione del menu in base al target, se serve aggiungere infine una proposta di "profumo dell’informazione"

Output del processo: organigramma strutturale

Partiamo con la creazione di contenuti, sarà grazie a questi e alla loro contestualizzazione rispetto i dati di payoff, tagline, welcome blurb che declineremo il brand del sito.

Creiamo un bisogno

Soddisfiamo il bisogno appena creato

Distinguiamoci dai competitor

Prendiamo gli elementi visivi del nostro racconto e cerchiamoli su google, il nostro racconto che lettering userà (mi raccomando più di uno, dimentichiamo il minimalist), colori, textures, accostamenti…

Output del processo: moodboard

Struttura home: ricordiamo che sempre ma in particolar modo per siti istiuzionali Brand è tutto, ampio spazio all’emozionalità, ampia spazio di testata emozionale.

Posizionamento del marchio in alto a sx, per le leggi di convenzione il logo è cliccabile e porta in home, per la legge di Fitts quindi il menu non potrà essere molto distante dal logo;

aggiungiamo la tagline e la welcome blurb.

Progettiamo uno starting point,

aggiungiamo una parte sotto la testa per definire un po’ di testo e diffondere un po’ di profumo dell’informazione

ricordiamo i 5 parametri di Krugg cioè definire una chiara gerarchia visiva, sfruttare le convenzioni, scomporre le pagine in aree ben definite, ricordarsi di Rendere ovvio ciò che è cliccabile, minimizzare il "rumore".

Chiudiamo con un piede in cui inseriamo dati di rimarcazione, accessori, eventuali footer-sitemap, ed elementi di affidabilità: premi, paner, etc..

Struttura di massima del template interno: riduciamo lo spazio di testata, manteniamo posizione e struttura degli elementi di navigazione, il logo, il piede. Aggiungiamo il menu di navigazione secondario o locale. Definiamo la griglia di scomposizione e la gabbia. Per ultimo se presente nella precedente ricerca iconica aggiungiamo gli elementi di ornato per contestualizzare la pagina.

Ancora ricordiamo i 5 parametri di Krugg cioè definire una chiara gerarchia visiva, sfruttare le convenzioni, scomporre le pagine in aree ben definite, ricordarsi di rendere ovvio ciò che è cliccabile, minimizzare il "rumore"

*in questa fase è opportuno valutare la progettazione delle varianti di breakpoint su mobile

Output del processo: wireframe

Ora finalmente possiamo definire il visual:

Prendiamo i valori del brief, i dati del nostro precedente moadboard, se necessario approfondiamo su qualche stock-photo del caso.

Si utilizzi un programma di fotoritocco per comporre la testata.

Recuperiamo gli spazi preposti nel wireframe, prepariamo la testata, struttura asimmetrica (ideale per la progettazione visual si veda "presentation zen" di Garr Reynold), si predisponga la disposizione immagine e tagline di header.

Ancora nell’editor raster o in altro programma vettoriale o direttamente in codice

Utilizziamo i lettering scelti nel moadboard per definire titoli e testi, gestire negli spazi composizioni partendo da composizione classica occhiello > titolo > sommario > testo, inserire nelle colonne, aggiungere catenacci e titoletti, infine le immagini e se servono didascalie.

Output del processo: bozza del visual

Ora si parte col codice