29
Daniele Moraschi Email: [email protected] Accademia di Belle Arti LABA di Brescia Computer Graphics Wireframe e struttura del sito

Wireframe e struttura del sito internet

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Wireframe e struttura del sito internet

Daniele Moraschi

Email: [email protected]

Accademia di Belle Arti LABA di Brescia

Computer Graphics

Wireframe e struttura del sito

Page 2: Wireframe e struttura del sito internet

La categorizzazione dei contenuti è un'attività su cui si punta poco

l'attenzione nonostante sia imprescindibile, indipendentemente dalla tipologia del sito che vogliamo

realizzare.

Molto spesso raggruppiamo e strutturiamo i contenuti partendo da quello che è ovvio per noi, basandoci

in questo modo sui nostri modelli mentali personali.

Page 3: Wireframe e struttura del sito internet

Di fronte a un sistema informativo gli utenti cercano di costruirsi dei modelli

mentali.

Attraverso questi modelli l'utente valuta le relazioni tra i temi proposti

cercando di indovinarne l'intera struttura.

Non sempre l'architettura delle informazioni corrisponde alle

aspettative degli utenti.

Page 4: Wireframe e struttura del sito internet

La suddivisione dei contenuti in aree e sezioni incide direttamente sulla

"findability": la capacità che hanno gli utenti di reperire in maniera semplice e intuitiva le informazioni ricercate.

Page 5: Wireframe e struttura del sito internet
Page 6: Wireframe e struttura del sito internet

In molti casi, una progettazione efficace del sito web è frutto di un

bilanciamento ottimale tra il rapporto dei menu principali in homepage e il

contenuto delle sotto pagine.

Per contenuto si intendono informazioni e dati, che posso essere testuali o di altro tipo (es. orario dei treni, mappe,

software da scaricare etc).

Page 7: Wireframe e struttura del sito internet

Una struttura poco nidificata può generare elenchi di menu lunghi, che

mandano in confusione l'utente.

Una struttura eccessivamente profonda potrebbe "seppellire" le informazioni

sotto troppi strati di menu, rendendole inaccessibili.

Page 8: Wireframe e struttura del sito internet
Page 9: Wireframe e struttura del sito internet

SEQUENZE

Il modo più semplice e familiare per organizzare le informazioni potrebbe essere quello di inserirlo all'interno di

una sequenza.

L'ordine sequenziale può essere cronologico: dal più generico fino a

quello più specifico; o anche alfabetico, come gli indici, le enciclopedie e i

glossari.

Page 10: Wireframe e struttura del sito internet
Page 11: Wireframe e struttura del sito internet

I siti web più complessi possono sempre essere organizzati seguendo

una sequenza logica, ma ogni pagina della sequenza può

avere collegamenti a una o più pagine correlate, parentesi d'informazione,

sezioni relative ad altri siti web.

Page 12: Wireframe e struttura del sito internet
Page 13: Wireframe e struttura del sito internet

GERARCHIE

I siti web ruotano attorno alla Homepage, che collega

gerarchicamente tutte le sotto pagine.

Page 14: Wireframe e struttura del sito internet

La più semplice forma di struttura gerarchica del sito è quella a stella,

detta anche hub-and-spoke.

Il sito è composto da un unico livello gerarchico.

La navigazione tende ad essere un

semplice elenco di sottopagine, oltre al link che riporta alla home page.

Page 15: Wireframe e struttura del sito internet
Page 16: Wireframe e struttura del sito internet

Il primo step diventa quindi la definizione dei contenuti del sito, e l'organizzazione degli stessi, anche qualora il sito fosse già esistente.

Page 17: Wireframe e struttura del sito internet
Page 18: Wireframe e struttura del sito internet
Page 19: Wireframe e struttura del sito internet

Avere in mente gli argomenti da includere nel sito è solo il primo passo.

Una volta individuati; come vanno presentati sul sito? Come devono essere strutturati? In che rapporto

stanno i contenuti tra di loro?

Page 20: Wireframe e struttura del sito internet

WIREFRAME

E' prima bozza del sito.

Non ha elementi di web design ma ne definisce visivamente la struttura,

traducendo in immagine ciò che prima era solo testo scritto.

Page 21: Wireframe e struttura del sito internet
Page 22: Wireframe e struttura del sito internet

E' solitamente composto da vari blocchi senza colore detti anche

ingombri; con un testo bozza al loro interno piuttosto che una didascalia.

Serve a vedere la struttura delle pagine e il comportamento dei loro contenuti.

Page 23: Wireframe e struttura del sito internet
Page 24: Wireframe e struttura del sito internet

LOGO

Page 25: Wireframe e struttura del sito internet

Il wireframe presenta, sotto forma di immagine, gli elementi di una pagina e

le modalità di navigazione.

E’ il passo intermedio tra il progetto e il web design.

Fornisce le indicazioni sui pesi comunicativi dei vari elementi, sul

funzionamento di determinate aree, su cosa potrebbe fare l’utente ecc.

Page 26: Wireframe e struttura del sito internet

Usando i wireframes possiamo scatenare una serie di quesiti e

domande a cui nessuno aveva pensato finora.

Inoltre contribuiscono a mantenere

una traccia “su carta” delle decisioni che vengono prese sulla struttura del

sito.

Page 27: Wireframe e struttura del sito internet
Page 28: Wireframe e struttura del sito internet
Page 29: Wireframe e struttura del sito internet

Links

http://wireframes.linowski.ca/

http://en.wikipedia.org/wiki/Website_wireframe

http://www.wireframeshowcase.com/

http://www.digital-web.com/articles/redesigning_the_expressionengine_site

http://www.loop11.com/wireframe-usability-testing/

http://it.wikipedia.org/wiki/Mappa_mentale