8. Web design

1,687 views

Published on

Slides dal corso di Laboratorio Internet del prof.R.Polillo, Università di Milano Bicocca, A.A.2010-11

Published in: Education
  • Be the first to comment

8. Web design

  1. 1. Corso Laboratorio Internet – Prof. Roberto Polillo Università degli Studi di Milano Bicocca – Anno Accademico 2010-11 8. WEB DESIGN R.Polillo – Ottobre 2010 1
  2. 2. 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 Che cosa faremo oggi R.Polillo – Ottobre 2010 2
  3. 3. L’obiettivo della fase di Web Design  sviluppare la concezione generale del sito dal punto di vista della sua “architettura informativa”  Struttura del sito  Meccanismi di navigazione  costruire un primo prototipo (“di navigazione”) per le prime verifiche di usabilità e da mostrare al committente  … senza ancora sviluppare la grafica in dettaglio R.Polillo – Ottobre 2010 3
  4. 4. 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 1 2 3 Nell’ambito delle possibilità del site builder usato Web design: attività e prodotti R.Polillo – Ottobre 2010 4
  5. 5. HOME PAGE PAGINA 1.1 PAGINA 1.2 PAGINA 1.3 PAGINA 1.3.2PAGINA 1.3.1PAGINA 1.1.2PAGINA 1.1.1 LIVELLO 0 LIVELLO 1 LIVELLO 2 Ogni nodo rappresenta una pagina del sito (a differenza della scaletta logica) La mappa del sito R.Polillo – Ottobre 2010 5
  6. 6. Scheda prodotto Scheda prodotto Scheda prodotto Home Condizioni di vendita Mappa del sitoContattiNews Iscrizione ai servizi Area riservataProdotti Carrello Dati utenteChi siamo Chitarre nuove Chitarre usate Ordina prodotto Accessori Il negozio Le marche trattate Dove siamo Mappa del sito Scaletta logica dei contenuti Esempio R.Polillo – Ottobre 2010 6
  7. 7. Navigazione  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 R.Polillo – Ottobre 2010 7
  8. 8. B C D EA HOME D1 D2 D3A2A1 A2.2 A2.3A2.1 navigazione orizzontale navigazione trasversale navigazione verticale Tipi di navigazione R.Polillo – Ottobre 2010 8
  9. 9. A B C D E D1 D2 D3 pagina D1 contenuti della pagina navigazione globale navigazione locale B C D EA HOME D1 D2 D3A2A1 A2.2 A2.3A2.1 D Struttura di navigazione tipica R.Polillo – Ottobre 2010 9
  10. 10. Esempio A B C D E pagina home R.Polillo – Ottobre 2010 10
  11. 11. Esempio A B C D E D1 D2 D3 pagina D R.Polillo – Ottobre 2010 11
  12. 12. Esempio A B C D E D1 D2 D3 pagina D1 R.Polillo – Ottobre 2010 12
  13. 13. Esempio A B C D E B1 B2 B3 pagina B R.Polillo – Ottobre 2010 13
  14. 14. Esempio R.Polillo – Ottobre 2010 A B C D E B1 B2 B3 pagina B2 14
  15. 15. pubblicità pubblicità contenuti Esempio R.Polillo – Ottobre 2010 15
  16. 16. Esempio R.Polillo – Ottobre 2010 16
  17. 17. <contenuti Linea Cash> Esempio R.Polillo – Ottobre 2010 17
  18. 18. Esempio: http://www.prototipoong.ilbello.com R.Polillo – Ottobre 2010 18
  19. 19. Esempio R.Polillo – Ottobre 2010 19
  20. 20. Esempi  www.tangonet.it  www.rpolillo.it  www.comproj.weebly.com  http://prototipoong.weebly.com  www.casadiemma.webs.com  http://www.prototipoong.webs.com  http://www.prototipoong.ilbello.com 20 R.Polillo – Ottobre 2010
  21. 21. A B C D E La metafora dello schedario R.Polillo – Ottobre 2010 21
  22. 22. R.Polillo – Ottobre 2010
  23. 23. A B C D E D1 D2 D3 pagina D1 A B C D E pagina D1 D1 D2 D3 Schedario con navigazione locale R.Polillo – Ottobre 2010 23
  24. 24. inserzione pubblicitaria <contenuti della pagina> Esempio R.Polillo – Ottobre 2010 24
  25. 25. <contenuti: Idee regalo fino a 10.99 euro> Esempio R.Polillo – Ottobre 2010 25
  26. 26. Navigazione a tre livelli R.Polillo – Ottobre 2010 26
  27. 27. Menu che si modificano  Il menu è l’”ancora di salvezza” per l’utente nella navigazione: non devono MAI cambiare R.Polillo – Ottobre 2010 27
  28. 28. R.Polillo – Ottobre 2010
  29. 29. R.Polillo – Ottobre 2010
  30. 30. R.Polillo – Ottobre 2010
  31. 31. R.Polillo – Ottobre 2010
  32. 32. R.Polillo – Ottobre 2010
  33. 33. R.Polillo – Ottobre 2010
  34. 34. Esempio R.Polillo – Ottobre 2010
  35. 35. Menu che non si vedono (!) R.Polillo – Ottobre 2010 35
  36. 36. Accessi multipli a una stessa pagina 36 R.Polillo – Ottobre 2010
  37. 37. Esempio R.Polillo – Ottobre 2010 37
  38. 38. R.Polillo – Ottobre 2010
  39. 39. 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 scorciatoia Scorciatoie 39 R.Polillo – Ottobre 2010
  40. 40. Orientamento  Bread-crumbs  Evidenziazione voce selezionata  Simboli grafici/colori per distinguere le sezioni R.Polillo – Ottobre 2010 40
  41. 41. R.Polillo – Ottobre 2010
  42. 42. R.Polillo – Ottobre 2010
  43. 43. R.Polillo – Ottobre 2010
  44. 44. R.Polillo – Ottobre 2010
  45. 45. Esempi  www.tangonet.it  www.rpolillo.it  www.comproj.weebly.com  http://prototipoong.weebly.com  www.casadiemma.webs.com  http://www.prototipoong.webs.com  http://www.prototipoong.ilbello.com 45 R.Polillo – Ottobre 2010
  46. 46. La gabbia logica Consolidata la mappa del sito e individuate le principali sequenze di navigazione, dobbiamo decidere: 1. La struttura dei menu (e le voci che li compongono) 2. La ripartizione delle pagine nelle diverse aree logiche (o spazi logici): titoli, banner, aree contenuti, ecc. 3. Gli ingombri di massima di ciascuna area logica R.Polillo – Ottobre 2010 46
  47. 47. Area Riservata Novità dal negozioPromozioni 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 Esempio Area Riservata Nuovo | Usato | Accessori | Ordina prodotto ProdottiHome 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 R.Polillo – Ottobre 2010
  48. 48. R.Polillo – Ottobre 2010
  49. 49. Header HOME > Prodotti per le persone > Previdenza Versione stampa Brochure PDFPrevidenza 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 L'allarme pensionistico Prodotti per le persone •Previdenza •Terzo tempo Informativa Aziende I nostri risultati Il Gruppo Glossario FAQ -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 CercaContatti Credit Legal Accessibilità Qual è il tuo gap previdenziale? Il tuo risparmio fiscale Esempio
  50. 50. 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. R.Polillo – Ottobre 2010 50
  51. 51. 800x600 1024x768 dimensione della pagina Occorre scegliere la “risoluzione video privilegiata” Layout fisso R.Polillo – Ottobre 2010 51
  52. 52. 1024x768 800x600 Layout liquido R.Polillo – Ottobre 2010 52
  53. 53. Prototipo di navigazione • Prototipo “wireframe” del sito • Serve a rendere vivo il progetto sulla carta, dando la “percezione fisica” della navigazione del sito: • Aspetti: menu, layout delle pagine (liquido/fisso), labelling • Bianco e nero: permette di concentrarsi solo sugli aspetti strutturali (se si usa un CMS, usare il/I tema/I più semplice/i) R.Polillo – Ottobre 2010 53
  54. 54. 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 Esempio R.Polillo – Ottobre 2010 54
  55. 55. 55 R.Polillo – Ottobre 2010
  56. 56. R.Polillo – Ottobre 2010 56 Blog di default / altro tema predefinito
  57. 57.  Usare i temi wireframe (eventualmente provatene più d’uno):  Blank Centered (navigazione orizzontale centrata)  Blank Top (navigazione orizzontale)  Blank Left (navigazione verticale sinistra)  Blank Right (navigazione verticale destra) Esempio: www.webs.com R.Polillo – Ottobre 2010 57
  58. 58. Verifiche e convalide:  Verifiche: • Layout generale • Struttura dei menu • Navigazione • Etichette (termini usati, lunghezza)  Convalida: • Primo test di usabilità R.Polillo – Ottobre 2010 58
  59. 59. Che cosa dovete portare alla revisione della fase 3 (Web Design) 1. Mappa del sito 2. [Gabbie logiche delle pagine] 3. Prototipo di navigazione eseguibile R.Polillo – Ottobre 2010 59
  60. 60. Queste slides… Queste slide sono disponibili con licenza Creative Commons (attribuzione, non commerciale, condividi allo stesso modo) a chiunque desiderasse utilizzarle, per esempio a scopo didattico, senza necessità di preventiva autorizzazione. La licenza non si estende alle immagini fotografiche e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che sono stati indicati, ove possibile. L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle. R.Polillo – Ottobre 2010 60

×