Corso Laboratorio Internet – Prof. Roberto Polillo
Università degli Studi di Milano Bicocca – Anno Accademico 2010-11
8. W...
3 4 5 6 7
Web
design
Visual
design
Sviluppo Redazione
dei contenuti
Pubblicazione
1
Definizione
dei requisiti
Documento
de...
L’obiettivo della fase di Web Design
 sviluppare la concezione generale del sito dal punto
di vista della sua “architettu...
mappa
del sito
documento
dei requisiti
gabbia logica
delle pagine
prototipo
di navigazione
Progettazione
della architettur...
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
...
Scheda
prodotto
Scheda
prodotto
Scheda
prodotto
Home
Condizioni
di vendita
Mappa
del sitoContattiNews
Iscrizione
ai serviz...
Navigazione
 La struttura di navigazione deve permettere
all’utente di muoversi all’interno della struttura del
sito lung...
B C D EA
HOME
D1 D2 D3A2A1
A2.2 A2.3A2.1
navigazione orizzontale
navigazione trasversale
navigazione verticale
Tipi di nav...
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...
Esempio
A B C D E
pagina home
R.Polillo – Ottobre 2010
10
Esempio
A B C D E
D1
D2
D3
pagina D
R.Polillo – Ottobre 2010
11
Esempio
A B C D E
D1
D2
D3
pagina D1
R.Polillo – Ottobre 2010
12
Esempio
A B C D E
B1
B2
B3
pagina B
R.Polillo – Ottobre 2010
13
Esempio
R.Polillo – Ottobre 2010
A B C D E
B1
B2
B3
pagina B2
14
pubblicità
pubblicità
contenuti
Esempio
R.Polillo – Ottobre 2010
15
Esempio
R.Polillo – Ottobre 2010
16
<contenuti Linea Cash>
Esempio
R.Polillo – Ottobre 2010
17
Esempio: http://www.prototipoong.ilbello.com
R.Polillo – Ottobre 2010
18
Esempio
R.Polillo – Ottobre 2010
19
Esempi
 www.tangonet.it
 www.rpolillo.it
 www.comproj.weebly.com
 http://prototipoong.weebly.com
 www.casadiemma.webs...
A B C D E
La metafora dello schedario
R.Polillo – Ottobre 2010
21
R.Polillo – Ottobre 2010
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
inserzione pubblicitaria
<contenuti della pagina>
Esempio
R.Polillo – Ottobre 2010
24
<contenuti: Idee regalo fino a 10.99 euro>
Esempio
R.Polillo – Ottobre 2010
25
Navigazione a tre livelli
R.Polillo – Ottobre 2010
26
Menu che si modificano
 Il menu è l’”ancora di salvezza” per l’utente
nella navigazione: non devono MAI cambiare
R.Polill...
R.Polillo – Ottobre 2010
R.Polillo – Ottobre 2010
R.Polillo – Ottobre 2010
R.Polillo – Ottobre 2010
R.Polillo – Ottobre 2010
R.Polillo – Ottobre 2010
Esempio
R.Polillo – Ottobre 2010
Menu che non si vedono (!)
R.Polillo – Ottobre 2010
35
Accessi multipli a una stessa pagina
36
R.Polillo – Ottobre 2010
Esempio
R.Polillo – Ottobre 2010
37
R.Polillo – Ottobre 2010
Inglese FAQ
Contattaci Mappa del sito
Le sedi
La missione
L’azienda
Punti di noleggio
Auto
Lanostra flotta
Registrazione
I...
Orientamento
 Bread-crumbs
 Evidenziazione voce selezionata
 Simboli grafici/colori per distinguere le sezioni
R.Polill...
R.Polillo – Ottobre 2010
R.Polillo – Ottobre 2010
R.Polillo – Ottobre 2010
R.Polillo – Ottobre 2010
Esempi
 www.tangonet.it
 www.rpolillo.it
 www.comproj.weebly.com
 http://prototipoong.weebly.com
 www.casadiemma.webs...
La gabbia logica
Consolidata la mappa del sito e individuate le principali
sequenze di navigazione, dobbiamo decidere:
1. ...
Area Riservata
Novità dal negozioPromozioni
Titolo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmo...
R.Polillo – Ottobre 2010
Header
HOME > Prodotti per le persone > Previdenza
Versione
stampa
Brochure
PDFPrevidenza
Caratteristiche del prodotto
Lor...
Header
Footer
Interfaccia
navigazione
Interfaccia Navigazione
Funzioni
contestuali
e di supporto
Path di navigazione
TITOL...
800x600
1024x768
dimensione
della pagina
Occorre scegliere la “risoluzione video privilegiata”
Layout fisso
R.Polillo – Ot...
1024x768
800x600
Layout liquido
R.Polillo – Ottobre 2010
52
Prototipo di navigazione
• Prototipo “wireframe” del sito
• Serve a rendere vivo il progetto sulla carta, dando la
“percez...
Marca
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore e dolore magna ...
55
R.Polillo – Ottobre 2010
R.Polillo – Ottobre 2010
56
Blog di default
/ altro tema predefinito
 Usare i temi wireframe (eventualmente provatene più
d’uno):
 Blank Centered (navigazione orizzontale centrata)
 Blank ...
Verifiche e convalide:
 Verifiche:
• Layout generale
• Struttura dei menu
• Navigazione
• Etichette (termini usati, lungh...
Che cosa dovete portare alla revisione della fase
3 (Web Design)
1. Mappa del sito
2. [Gabbie logiche delle pagine]
3. Pro...
Queste slides…
Queste slide sono disponibili con licenza Creative Commons
(attribuzione, non commerciale, condividi allo s...
Upcoming SlideShare
Loading in...5
×

8. Web design

1,443

Published on

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

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

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

No notes for slide

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
  1. A particular slide catching your eye?

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

×