Backindietro

  • 1

    Brief per un sito istituzionale

    Obiettivi di comunicazione:

    elenco puntatoObiettivi dell'azienda

    elenco puntatoCreare un nuovo trend nel mercato

    elenco puntatoCreare consenso e curiosità

    Obiettivi di marketing:

    elenco puntatoAwareness, positioning

    elenco puntatoOttenere nuovi clienti online

    Target:

    elenco puntatoAnalizzare sesso ed età del pubblico

    Payoff:

    elenco puntatoSintetizzare vocazione e valori del brand

    Brief
  • 2

    Costruiamo il sito istituzionale

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

    elenco puntatocosa farà il nostro sito per l’utente?

    elenco puntatorispetto il payoff? Costruiamo la tagline

    elenco puntatoSpieghiamo 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

    Sito istituzionale
  • 3

    Struttura del sito

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

    elenco puntatoOrganizziamo il menu, le etichette, la navigazione

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

    elenco puntatoa 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

    Interfaccia
  • 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.

    elenco puntatoCreiamo un bisogno

    elenco puntatoSoddisfiamo il bisogno appena creato

    elenco puntatoDistinguiamoci dai competitor

    elenco puntatoPrendiamo 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

    branding
  • 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.

    elenco puntato 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;

    elenco puntatoaggiungiamo la tagline e la welcome blurb.

    elenco puntatoProgettiamo uno starting point,

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

    elenco puntatoricordiamo 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”.

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

    struttura dell'interfaccia
  • 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.

    elenco puntatoAncora 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

    struttura web
  • 7

    Il visual

    Ora finalmente possiamo definire il visual:

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

    elenco puntatoSi utilizzi un programma di fotoritocco per comporre la testata.

    elenco puntatoRecuperiamo 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.

    elenco puntatoAncora nell’editor raster o in altro programma vettoriale o direttamente in codice

    elenco puntatoUtilizziamo 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

    visual
  • 8

    Ora si parte col codice

    Procediamo ora con la preparazione del primo esecutivo tramite codice, predisponiamo cartelle file di reset, etc..

    codice web

Perchè quando diventiamo tutti uguali diventa solo una questione di prezzo!
What Studio facciamo la differenza.

Privacy Policy | Cookie Policy

Chiudi
^
INFORMATIVA: Questo sito utilizza cookie di profilazione (propri e di altri siti) per inviarti pubblicità in linea con le tue preferenze. Se vuoi saperne di più o negare il consenso a tutti o ad alcuni cookie clicca qui. Se accedi a un qualunque elemento sottostante questo banner acconsenti all'uso dei cookie.