Your SlideShare is downloading. ×
0
Daniele Moraschi Email:  [email_address] Accademia di Belle Arti LABA di Brescia Computer Graphics Wireframe e struttura d...
La categorizzazione dei contenuti è un'attività su cui si punta poco l'attenzione nonostante sia imprescindibile, indipend...
Di fronte a un sistema informativo gli utenti cercano di costruirsi dei modelli mentali.  Attraverso questi modelli l'uten...
La suddivisione dei contenuti in aree e sezioni incide direttamente sulla "findability": la capacità che hanno g...
 
In molti casi, una progettazione efficace del sito web è frutto di un bilanciamento ottimale tra il rapporto dei menu prin...
Una struttura poco nidificata può generare elenchi di menu lunghi, che mandano in confusione l'utente. Una struttura ecces...
 
SEQUENZE Il modo più semplice e familiare per organizzare le informazioni potrebbe essere quello di inserirlo all'interno ...
 
I siti web più complessi possono sempre essere organizzati seguendo una sequenza logica,  ma ogni pagina della sequenza pu...
 
GERARCHIE I siti web ruotano attorno alla Homepage, che collega gerarchicamente tutte le sotto pagine.
La più semplice forma di struttura gerarchica del sito è quella a stella, detta anche hub-and-spoke. Il sito è composto da...
 
Il primo step diventa quindi la definizione dei contenuti del sito, e l'organizzazione degli stessi, anche qualora il sito...
 
 
Avere in mente gli argomenti da includere nel sito è solo il primo passo.  Una volta individuati; come vanno presentati su...
WIREFRAME E' prima bozza del sito.  Non ha elementi di web design ma ne definisce visivamente la struttura, traducendo in ...
 
E' solitamente composto  da vari blocchi senza colore detti anche ingombri; con un testo bozza al loro interno piuttosto c...
 
LOGO
Il wireframe presenta, sotto forma di immagine, gli elementi di una pagina e le modalità di navigazione. E’ il passo inter...
Usando i wireframes possiamo scatenare una serie di quesiti e domande a cui nessuno aveva pensato finora. Inoltre contribu...
 
 
Links http://wireframes.linowski.ca/ http://en.wikipedia.org/wiki/Website_wireframe http://www.wireframeshowcase.com/ http...
Upcoming SlideShare
Loading in...5
×

Wireframe e struttura del sito internet

1,129

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,129
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
48
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Wireframe e struttura del sito internet"

  1. 1. Daniele Moraschi Email: [email_address] Accademia di Belle Arti LABA di Brescia Computer Graphics Wireframe e struttura del sito
  2. 2. 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.
  3. 3. 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.
  4. 4. 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.
  5. 6. 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).
  6. 7. 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.
  7. 9. 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.
  8. 11. 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.
  9. 13. GERARCHIE I siti web ruotano attorno alla Homepage, che collega gerarchicamente tutte le sotto pagine.
  10. 14. 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.
  11. 16. Il primo step diventa quindi la definizione dei contenuti del sito, e l'organizzazione degli stessi, anche qualora il sito fosse già esistente.
  12. 19. 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?
  13. 20. 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.
  14. 22. 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.
  15. 24. LOGO
  16. 25. 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.
  17. 26. 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.
  18. 29. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×