Wireframe e struttura del sito internet

  • 1,009 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,009
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
41
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Daniele Moraschi Email: [email_address] Accademia di Belle Arti LABA di Brescia Computer Graphics Wireframe e struttura del sito
  • 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. 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. 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).
  • 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.
  • 8.  
  • 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.
  • 10.  
  • 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.
  • 12.  
  • 13. GERARCHIE I siti web ruotano attorno alla Homepage, che collega gerarchicamente tutte le sotto pagine.
  • 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.
  • 15.  
  • 16. Il primo step diventa quindi la definizione dei contenuti del sito, e l'organizzazione degli stessi, anche qualora il sito fosse già esistente.
  • 17.  
  • 18.  
  • 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?
  • 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.
  • 21.  
  • 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.
  • 23.  
  • 24. LOGO
  • 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.
  • 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.
  • 27.  
  • 28.  
  • 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