laboratorio internet 7: web design
DESCRIPTION
Slide per il corso di Laboratorio Internet tenuto da R.Polillo all'Università degli Studi di Milano Bicocca (info in www.rpolillo.it)TRANSCRIPT
![Page 1: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/1.jpg)
Università degli Studi di Milano BicoccaDipartimento 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
![Page 2: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/2.jpg)
CHE COSA FAREMO OGGI: FASE 3
3 4 5 6 7Web
designVisual design
Sviluppo Redazionedei contenuti
Pubblicazione
1Definizionedei requisiti
Documento dei requisiti
Prototipo di navigazione
Prototipo funzionale
Prototipo editoriale
Sistema on line
Prototipo di comunicazione
2Avviamentodel progetto
Piano di qualità
Gestione del sito
![Page 3: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/3.jpg)
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 per le prime verifiche di usabilità e da mostrare al committente
• … senza ancora sviluppare la grafica in dettaglio
![Page 4: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/4.jpg)
story-board
mappa del sito
documentodei requisiti
gabbia logicadelle pagine
prototipodi navigazione
Progettazione della architettura dell’informazione
Costruzione delprototipo di navigazione
Verificae convalida
Le attività e i prodotti della fase di Web Design
1
23
Nell’ambito delle possibilità del CMS usato
![Page 5: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/5.jpg)
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)
![Page 6: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/6.jpg)
Schedaprodotto
Schedaprodotto
Schedaprodotto
Home
Condizioni di vendita
Mappa del sitoContattiNews Iscrizione
ai serviziArea
riservataProdotti CarrelloDati
utenteChi siamo
Chitarre nuove
Chitarre usate
Ordina prodottoAccessori
Il negozio Le marche trattate
Dove siamo
Esempio
Mappa del sitoScaletta logica dei contenuti
![Page 7: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/7.jpg)
Esempio
![Page 8: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/8.jpg)
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
![Page 9: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/9.jpg)
B C D EA
HOME
D1 D2 D3A2A1
A2.2 A2.3A2.1navigazione orizzontale
navigazione trasversale
navigazione verticale
Vari tipi di navigazione
![Page 10: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/10.jpg)
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
EA
HOME
D1 D2 D3A2A1
A2.2 A2.3A2.1
D
![Page 11: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/11.jpg)
Esempio
A B C D E
pagina home
![Page 12: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/12.jpg)
Esempio
A B C D E
D1
D2
D3
pagina D
![Page 13: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/13.jpg)
Esempio
A B C D E
D1
D2
D3
pagina D1
![Page 14: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/14.jpg)
Esempio
A B C D E
B1
B2
B3
pagina B
![Page 15: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/15.jpg)
Esempio
A B C D E
B1
B2
B3
pagina B2
![Page 16: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/16.jpg)
pubblicità
pubblicità
contenuti
Esempio
![Page 17: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/17.jpg)
Esempio
![Page 18: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/18.jpg)
<contenuti Linea Cash>
Una variante: navigazione locale in orizzontale
Strutturalmente, è la stessa cosa
![Page 19: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/19.jpg)
Un’altra variante: navigazione locale in menu a tendina
![Page 20: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/20.jpg)
A B C D E
Un’altra variante: navigazione globale a tab (metafora dello schedario)
![Page 21: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/21.jpg)
![Page 22: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/22.jpg)
A B C D E
D1 D2 D3
pagina D1
A B C D E
pagina D1
D1
D2
D3
Struttura a schedario con navigazione locale
![Page 23: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/23.jpg)
inserzione pubblicitaria
<contenuti della pagina>
![Page 24: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/24.jpg)
<contenuti: Idee regalo fino a 10.99 euro>
![Page 25: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/25.jpg)
Navigazione a tre livelli
![Page 26: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/26.jpg)
Il problema degli accessi multipli alla stessa pagina
![Page 27: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/27.jpg)
Esempio
![Page 28: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/28.jpg)
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
Scorciatoie
scorciatoia
![Page 29: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/29.jpg)
La gabbia logica delle pagine
Una volta 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
![Page 30: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/30.jpg)
Area Riservata
Novità dal negozioPromozioni
TitoloLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua
TitoloLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore e dolore magna aliqua
TitoloLorem 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
![Page 31: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/31.jpg)
![Page 32: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/32.jpg)
Header
HOME > Prodotti per le persone > Previdenza
Versione stampa
BrochurePDFPrevidenza
Caratteristiche del prodottoLorem 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.
ErogazioneLorem 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 prodottoIMMAGINE
Numero verdeIMMAGINE
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
Esempio
![Page 33: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/33.jpg)
Header
Footer
Interfaccia navigazione
Interfaccia Navigazione
Funzionicontestuali
e di supporto
Path di navigazione
TITOLO
MENU DI 3° LIVELLO
CORPO
AzioneLink
contenutoTitolo
TitolettoLorem 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.
TitolettoLorem 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.
IMMAGINEGRAFICO
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.
![Page 34: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/34.jpg)
800x600
1024x768
dimensione della pagina
Layout fisso
Occorre scegliere la “risoluzione video privilegiata”
![Page 35: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/35.jpg)
1024x768
800x600
Layout liquido
![Page 36: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/36.jpg)
Il prototipo di navigazione
![Page 37: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/37.jpg)
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)
![Page 38: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/38.jpg)
MarcaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua
MarcaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua
MarcaLorem 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
![Page 39: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/39.jpg)
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
![Page 40: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/40.jpg)
Verifiche e convalide:
Verifiche:• Layout generale• Struttura dei menu• Navigazione• Etichette (termini usati, lunghezza)
Convalida:• Primo test di usabilità
![Page 41: Laboratorio internet 7: Web design](https://reader036.vdocuments.net/reader036/viewer/2022062704/5557eb94d8b42ab6258b52ed/html5/thumbnails/41.jpg)
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