Web Design

540 views
481 views

Published on

Information Architecture

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
540
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Design

  1. 1. Sulla progettazione del WEB Lezione n.1 Prof. Silvano Natalizi, classe VA liceo tecnico
  2. 2. Come progettare un sito web <ul><li>Jane ama la cultura giapponese, per questo ha acquistato una compagnia </li></ul><ul><li>Il cui sito attuale è quello in figura </li></ul><ul><li>Che cosa non vi piace ? </li></ul><ul><li>Che cosa vi piace ? </li></ul><ul><li>Vedete qualche problema ? </li></ul><ul><li>Prendete appunti </li></ul>
  3. 3. Problemi del sito
  4. 4. Da dove si parte ? <ul><li>Occorre seguire un processo di progettazione </li></ul><ul><li>Per prima cosa disegnare un blueprint (modello) (stampino) </li></ul><ul><li>Costruire un sito web è un po’ come costruire una casa </li></ul><ul><li>Si parte da un disegno </li></ul><ul><li>Information Architecture (IA) è il processo che consente </li></ul><ul><ul><li>di spezzare il contenuto del sito in parti e </li></ul></ul><ul><ul><li>di organizzarle gerarchicamente </li></ul></ul><ul><ul><li>con relazioni logiche </li></ul></ul>
  5. 5. Information Architecture <ul><li>Ogni pezzo di informazione è un contenuto (testo, immagini, …) che vive su di una singola pagina. </li></ul><ul><li>IA è strettamente collegata anche alla costruzione del sistema di navigazione del sito </li></ul><ul><li>Se fate male la progettazione di IA, c’è anche la possibilità di progettare in maniera pessima il sistema di navigazione </li></ul><ul><li>Se il vostro sito non ha una solida IA, sarà disorganizzato e disorientante per i vostri utenti, che andranno da qualche altra parte a cercare quello che gli interessa </li></ul>
  6. 6. Esempio di Information Architecture
  7. 7. Il processo IA inizia chiedendo a Jane quale contenuto desidera avere per il sito web
  8. 8. Modello di Information Architecture
  9. 9. Ricaviamo dal testo di Jane le sezioni per IA
  10. 10. Il diagramma IA per il sito web Red Lantern
  11. 11. La navigazione <ul><li>Occorre pensare alla navigazione, due volte nel processo di disegno </li></ul><ul><li>Primo: quando pensate agli elementi di navigazione, come bottoni, barre di nav, mentre lavorate nel layout globale del sito </li></ul><ul><li>Secondo: quando cominciate a scrivere il codice e a costruire gli elementi di layout che hanno a che fare con gli utenti che cercano la strada nel sito e con il collegare le pagine insieme </li></ul><ul><li>Occorre iniziare con l’organizzare una navigazione al livello top </li></ul><ul><li>IA è importante non solo per organizzare il contenuto del sito, ma anche la navigazione </li></ul>
  12. 12. Determina il top level navigation <ul><li>La navigazione al livello top è l’elemento di navigazione preminente </li></ul><ul><li>Spesso questa top navigazione collega la home pagina alle sezioni sottostanti del disegno IA </li></ul>
  13. 13. Stile di navigazione
  14. 14. Cominciare a pensare quale tipo di menù meglio si adatta al nostro sito
  15. 15. Mostrate a Jane alcuni disegni iniziali <ul><li>I primi disegno devono essere in bianco e nero e su carta </li></ul><ul><li>In questo modo l’attenzione di Jane sarà focalizzata esclusivamente sui più importanti aspetti funzionali del layout (invece che sul colore dello sfondo, etc…) </li></ul><ul><li>I disegni devono porre a Jane questioni del tipo: </li></ul><ul><ul><li>Voglio una grande immagine all’inizio della pagina ? </li></ul></ul><ul><ul><li>Quante colonne devono trovarsi nella pagina ? </li></ul></ul><ul><ul><li>Dove deve andare il menù di navigazione ? </li></ul></ul>
  16. 16. Il primo disegno mostrato a Jane <ul><li>Jane non gradisce questa soluzione perché è simile al sito esistente, con la sola differenza della sezione del contenuto divisa in due colonne </li></ul><ul><li>In questo stadio del disegno non occorrono molti dettagli </li></ul>
  17. 17. Secondo disegno
  18. 18. Terzo disegno
  19. 19. Quarto disegno
  20. 20. Quinto disegno
  21. 21. Jane sceglie il terzo disegno
  22. 22. Creare una storyboard
  23. 23. A Jane piace la storyboard
  24. 24. Fare un prototipo della storyboard <ul><li>Costruire un prototipo con il codice html/css ha qualche vantaggio </li></ul><ul><li>Anche se il vostro disegno può sembrare buono sulla carta, non potrebbe funzionare tecnicamente quando il vostro codice è pronto </li></ul><ul><li>Il prototipo dà l’opportunità di correggere rapidamente eventuale errori prima di investire troppo tempo nel costruire un prodotto finale raffinato </li></ul><ul><li>Inoltre, se dovete lavorare con i clienti, un prototipo vi dà qualcosa da mostrargli. </li></ul><ul><li>Così da ottenere un utile feedback e poter fare iterativamente delle variazioni e correzioni </li></ul>
  25. 25. Codice HTML del sito web
  26. 26. Css prima parte
  27. 27. Css seconda parte
  28. 28. Css terza parte
  29. 29. Ed ecco il nuovo sito ristritturato
  30. 30. bibliografia <ul><li>Titolo : Head First Web Design </li></ul><ul><li>Publisher : Oreilly </li></ul><ul><li>Author : Elthan Watrall – Jeff Siardo </li></ul>

×