-
1
Brief per un sito istituzionale
Obiettivi di comunicazione:
Obiettivi dell'aziendaCreare un nuovo trend nel mercatoCreare consenso e curiositàObiettivi di marketing:
Awareness, positioningOttenere nuovi clienti onlineTarget:
Analizzare sesso ed età del pubblicoPayoff:
Sintetizzare vocazione e valori del brand
-
2
Costruiamo il sito istituzionale
Partiamo considerando i valori di base ricerchiamo connessione logica dell’obiettivo,
cosa farà il nostro sito per l’utente?rispetto il payoff? Costruiamo la taglineSpieghiamo cosa fa l’azienda
e il sito di questa per l’utente, creiamo la welcome
blurbOutput del processo: dati testuali di orientamento di partenza
-
3
Struttura del sito
Prepariamo i dati di web architecture, sito istituzionale quindi home, chi, referenze, contatti, prodotti… quanti, quali.
Organizziamo il menu, le etichette, la navigazioneElementi salienti da ricordare:
la legge di Hic, menu mono livello, struttura ampia,nel caso non fosse possibile allora scomposizione,
personalizzazione,
diffusionea 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
-
4
Branding del sito
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 bisognoSoddisfiamo il bisogno appena creatoDistinguiamoci dai competitorPrendiamo 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
-
5
La struttura dell’interfaccia
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’informazionericordiamo 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..
-
6
Struttura dell'interfaccia
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
-
7
Il visual
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 codiceUtilizziamo 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
-
8
Ora si parte col codice
Procediamo ora con la preparazione del primo esecutivo tramite codice, predisponiamo cartelle file di reset, etc..
indietro
