Successfully reported this slideshow.
Università degli Studi di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Laboratorio di Internet...
CHE COSA FAREMO OGGI: FASE 3 3 4 5 6 7 Web  design Visual  design Sviluppo Redazione dei contenuti Pubblicazione 1 Definiz...
L’obiettivo della fase di  Web Design <ul><li>sviluppare la concezione generale del sito dal punto di vista della sua “arc...
Le attività e i  prodotti  della fase di  Web Design 1 2 3 Nell’ambito delle possibilità del CMS usato story-board mappa  ...
Ogni nodo rappresenta una pagina del sito (a differenza della scaletta logica) HOME  PAGE PAGINA 1.1 PAGINA 1.2 PAGINA 1.3...
Esempio Mappa del sito Scaletta logica dei contenuti Scheda prodotto Scheda prodotto Scheda prodotto Home Condizioni  di v...
Esempio
NAVIGAZIONE <ul><li>La struttura di navigazione deve permettere all’utente di muoversi all’interno della struttura del sit...
Vari tipi di navigazione B C D E A HOME D1 D2 D3 A2 A1 A2.2 A2.3 A2.1 navigazione orizzontale navigazione trasversale navi...
Una struttura di navigazione tipica A B C D E D1 D2 D3 pagina D1 contenuti della pagina navigazione globale  navigazione l...
Esempio A B C D E pagina home
Esempio A B C D E D1 D2 D3 pagina D
Esempio A B C D E D1 D2 D3 pagina D1
Esempio A B C D E B1 B2 B3 pagina B
Esempio A B C D E B1 B2 B3 pagina B2
Esempio pubblicità pubblicità contenuti
Esempio
Una variante: navigazione locale in orizzontale Strutturalmente, è la stessa cosa <contenuti Linea Cash>
Un’altra variante: navigazione locale in menu a tendina
Un’altra variante: navigazione globale a tab (metafora dello schedario) A B C D E
 
Struttura a schedario con navigazione locale A B C D E D1 D2 D3 pagina D1 A B C D E pagina D1 D1 D2 D3
inserzione pubblicitaria <contenuti della pagina>
<contenuti: Idee regalo fino a 10.99 euro>
Navigazione a tre livelli
Il problema degli accessi multipli alla stessa pagina
Esempio
Scorciatoie scorciatoia Inglese FAQ Contattaci Mappa del sito Le sedi La missione L’azienda Punti di noleggio Auto Lanostr...
La gabbia logica delle pagine <ul><li>Una volta consolidata la mappa del sito e individuate le principali sequenze di navi...
Esempio Area Riservata Novità dal negozio Promozioni Titolo Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ...
 
Esempio Header HOME  >  Prodotti per le persone  > Previdenza Versione  stampa Brochure PDF Previdenza Caratteristiche del...
Header Footer Interfaccia  navigazione Interfaccia Navigazione Funzioni contestuali  e di supporto Path di navigazione TIT...
Layout fisso Occorre scegliere la “risoluzione video privilegiata” 800x600 1024x768 dimensione  della pagina
Layout liquido 1024x768 800x600
Il prototipo di navigazione
Prototipo di navigazione <ul><li>Prototipo “wireframe” del sito </li></ul><ul><li>Serve a rendere vivo il progetto sulla c...
Esempio Marca Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolor...
<ul><li>Usare i temi wireframe (eventualmente provatene più d’uno):  </li></ul><ul><ul><li>Blank Centered (navigazione ori...
Verifiche e convalide: <ul><li>Verifiche: </li></ul><ul><li>Layout generale </li></ul><ul><li>Struttura dei menu </li></ul...
Che cosa dovete portare alla revisione della fase 3 (Web Design) <ul><li>Mappa del sito </li></ul><ul><li>[Gabbie logiche ...
Upcoming SlideShare
Loading in …5
×

Laboratorio internet 7: Web design

1,140 views

Published on

Slide per il corso di Laboratorio Internet tenuto da R.Polillo all'Università degli Studi di Milano Bicocca (info in www.rpolillo.it)

Published in: Education, Business
  • Be the first to comment

Laboratorio internet 7: Web design

  1. 1. Università degli Studi di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Laboratorio di Internet / Laboratorio di progettazione (mod.1) Anno Accademico 2009-2010 LEZIONE 7 FASE 3: WEB DESIGN Roberto Polillo
  2. 2. CHE COSA FAREMO OGGI: FASE 3 3 4 5 6 7 Web design Visual design Sviluppo Redazione dei contenuti Pubblicazione 1 Definizione dei requisiti Documento dei requisiti Prototipo di navigazione Prototipo funzionale Prototipo editoriale Sistema on line Prototipo di comunicazione 2 Avviamento del progetto Piano di qualità Gestione del sito
  3. 3. L’obiettivo della fase di Web Design <ul><li>sviluppare la concezione generale del sito dal punto di vista della sua “architettura informativa” </li></ul><ul><ul><li>Struttura del sito </li></ul></ul><ul><ul><li>Meccanismi di navigazione </li></ul></ul><ul><li>costruire un primo prototipo per le prime verifiche di usabilità e da mostrare al committente </li></ul><ul><li>… senza ancora sviluppare la grafica in dettaglio </li></ul>
  4. 4. Le attività e i prodotti della fase di Web Design 1 2 3 Nell’ambito delle possibilità del CMS usato story-board mappa del sito documento dei requisiti gabbia logica delle pagine prototipo di navigazione Progettazione della architettura dell’informazione Costruzione del prototipo di navigazione Verifica e convalida
  5. 5. Ogni nodo rappresenta una pagina del sito (a differenza della scaletta logica) HOME PAGE PAGINA 1.1 PAGINA 1.2 PAGINA 1.3 PAGINA 1.3.2 PAGINA 1.3.1 PAGINA 1.1.2 PAGINA 1.1.1 LIVELLO 0 LIVELLO 1 LIVELLO 2
  6. 6. Esempio Mappa del sito Scaletta logica dei contenuti Scheda prodotto Scheda prodotto Scheda prodotto Home Condizioni di vendita Mappa del sito Contatti News Iscrizione ai servizi Area riservata Prodotti Carrello Dati utente Chi siamo Chitarre nuove Chitarre usate Ordina prodotto Accessori Il negozio Le marche trattate Dove siamo
  7. 7. Esempio
  8. 8. NAVIGAZIONE <ul><li>La struttura di navigazione deve permettere all’utente di muoversi all’interno della struttura del sito lungo i percorsi più frequentemente seguiti, rapidamente e senza fatica </li></ul>
  9. 9. Vari tipi di navigazione B C D E A HOME D1 D2 D3 A2 A1 A2.2 A2.3 A2.1 navigazione orizzontale navigazione trasversale navigazione verticale
  10. 10. Una struttura di navigazione tipica A B C D E D1 D2 D3 pagina D1 contenuti della pagina navigazione globale navigazione locale B C D E A HOME D1 D2 D3 A2 A1 A2.2 A2.3 A2.1 D
  11. 11. Esempio A B C D E pagina home
  12. 12. Esempio A B C D E D1 D2 D3 pagina D
  13. 13. Esempio A B C D E D1 D2 D3 pagina D1
  14. 14. Esempio A B C D E B1 B2 B3 pagina B
  15. 15. Esempio A B C D E B1 B2 B3 pagina B2
  16. 16. Esempio pubblicità pubblicità contenuti
  17. 17. Esempio
  18. 18. Una variante: navigazione locale in orizzontale Strutturalmente, è la stessa cosa <contenuti Linea Cash>
  19. 19. Un’altra variante: navigazione locale in menu a tendina
  20. 20. Un’altra variante: navigazione globale a tab (metafora dello schedario) A B C D E
  21. 22. Struttura a schedario con navigazione locale A B C D E D1 D2 D3 pagina D1 A B C D E pagina D1 D1 D2 D3
  22. 23. inserzione pubblicitaria <contenuti della pagina>
  23. 24. <contenuti: Idee regalo fino a 10.99 euro>
  24. 25. Navigazione a tre livelli
  25. 26. Il problema degli accessi multipli alla stessa pagina
  26. 27. Esempio
  27. 28. Scorciatoie scorciatoia Inglese FAQ Contattaci Mappa del sito Le sedi La missione L’azienda Punti di noleggio Auto Lanostra flotta Registrazione I tuoi noleggi I tuoi dati Area clienti Servizi HOME Condizioni Preventivo Noleggio Offerte speciali
  28. 29. La gabbia logica delle pagine <ul><li>Una volta consolidata la mappa del sito e individuate le principali sequenze di navigazione, dobbiamo decidere: </li></ul><ul><li>La struttura dei menu (e le voci che li compongono) </li></ul><ul><li>La ripartizione delle pagine nelle diverse aree logiche (o spazi logici): titoli, banner, aree contenuti, ecc. </li></ul><ul><li>Gli ingombri di massima di ciascuna area logica </li></ul>
  29. 30. Esempio Area Riservata Novità dal negozio Promozioni Titolo Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua Titolo Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore e dolore magna aliqua Titolo Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore e dolore magna aliqua Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua Area Riservata Nuovo | Usato | Accessori | Ordina prodotto Prodotti Home Prodotti nuovi <menu prodotti nuovi> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed imperdiet, est eu sollicitudin pretium, justo sapien volutpat erat, nec vulputate lacus metus at augue. Donec id nibh sit amet erat suscipit viverra. Vivamus ac dui. Aenean sed mauris. In metus. Suspendisse placerat, lorem quis dictum ornare, neque tellus hendrerit metus, sed gravida enim dolor id ipsum. Nulla fermentum. Vestibulum pretium pellentesque urna. Nulla enim tortor, feugiat condimentum, laoreet quis, dapibus et, sem. Duis blandit pede vitae dui. Nam pulvinar. Aliquam fermentum, lectus eu imperdiet luctus, dui nibh scelerisque purus, ut laoreet tortor ipsum in orci. Proin rutrum dui a nulla. Donec volutpat, massa sit amet semper cursus, felis quam pharetra metus, a porta magna augue id augue. Donec urna pede, volutpat ultrices
  30. 32. Esempio Header HOME > Prodotti per le persone > Previdenza Versione stampa Brochure PDF Previdenza Caratteristiche del prodotto Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Target - Nam porttitor pretium eros. - Aliquam quis dui sed nulla mattis tristique. - Nulla ut justo in arcu viverra elementum. Erogazione Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Contattaci per richiedere ulteriori informazioni. Scarica il modulo di contratto da presentare alla filiale. IMMAGINE <ul><li>L'allarme pensionistico </li></ul><ul><li>Prodotti per le persone </li></ul><ul><li>Previdenza </li></ul><ul><li>Terzo tempo </li></ul><ul><li>Informativa Aziende </li></ul><ul><li>I nostri risultati </li></ul><ul><li>Il Gruppo </li></ul><ul><li>Glossario </li></ul><ul><li>FAQ </li></ul>- Linea 1 - Linea 2 - Linea 3 - Linea 4 - Linea 5 Risposte del consulente Campagna prodotto IMMAGINE Numero verde IMMAGINE Richiesta moduli FAQ di sezione Ricerca Filiali Contatta il consulente Mappa Cerca Contatti Credit Legal Accessibilità Qual è il tuo gap previdenziale? Il tuo risparmio fiscale
  31. 33. Header Footer Interfaccia navigazione Interfaccia Navigazione Funzioni contestuali e di supporto Path di navigazione TITOLO MENU DI 3° LIVELLO CORPO Azione Link contenuto Titolo Titoletto Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Titoletto - Nam porttitor pretium eros. - Aliquam quis dui sed nulla mattis tristique. - Nulla ut justo in arcu viverra elementum. Titoletto Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Contattaci per richiedere ulteriori informazioni. Scarica il modulo di contratto da presentare alla filiale. IMMAGINE GRAFICO Qual è il tuo gap previdenziale? Il tuo risparmio fiscale Area destinata ai link che attivano un’azione come ad esempio “Versione Stampa”. Il link deve essere sempre alla stessa altezza del titolo. Area per scaricare la brochure relativa al prodotto in formato pdf. Il link deve essere sempre alla stessa altezza del titolo. Area corpo del testo. Il contenuto della pagina è organizzato in paragrafi con il testo sempre allineato a sx e in tondo. L’area può, inoltre, contenere dei link. I paragrafi non devono essere più lunghi di 4 righe. Link ai tool per il calcolo del gap previdenziale e per il calcolo del risparmio fiscale. Area destinata all’inserimento di un’immagine o grafico. Dimensione max immagine: xxx. Link Link di navigazione verso una pagina di approfondimento strettamente collegata al contenuto della pagina. Ove previsto.
  32. 34. Layout fisso Occorre scegliere la “risoluzione video privilegiata” 800x600 1024x768 dimensione della pagina
  33. 35. Layout liquido 1024x768 800x600
  34. 36. Il prototipo di navigazione
  35. 37. Prototipo di navigazione <ul><li>Prototipo “wireframe” del sito </li></ul><ul><li>Serve a rendere vivo il progetto sulla carta, dando la “percezione fisica” della navigazione del sito: </li></ul><ul><li>Aspetti: menu, layout delle pagine (liquido/fisso), labelling </li></ul><ul><li>Bianco e nero : permette di concentrarsi solo sugli aspetti strutturali (se si usa un CMS, usare il/I tema/I più semplice/i) </li></ul>
  36. 38. Esempio Marca Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua Marca Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua Marca Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua
  37. 39. <ul><li>Usare i temi wireframe (eventualmente provatene più d’uno): </li></ul><ul><ul><li>Blank Centered (navigazione orizzontale centrata) </li></ul></ul><ul><ul><li>Blank Top (navigazione orizzontale) </li></ul></ul><ul><ul><li>Blank Left (navigazione verticale sinistra) </li></ul></ul><ul><ul><li>Blank Right (navigazione verticale destra) </li></ul></ul>Esempio: www.webs.com
  38. 40. Verifiche e convalide: <ul><li>Verifiche: </li></ul><ul><li>Layout generale </li></ul><ul><li>Struttura dei menu </li></ul><ul><li>Navigazione </li></ul><ul><li>Etichette (termini usati, lunghezza) </li></ul><ul><li>Convalida: </li></ul><ul><li>Primo test di usabilità </li></ul>
  39. 41. Che cosa dovete portare alla revisione della fase 3 (Web Design) <ul><li>Mappa del sito </li></ul><ul><li>[Gabbie logiche delle pagine] </li></ul><ul><li>Prototipo di navigazione eseguibile </li></ul>

×