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
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
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
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
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
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)
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
Esempio
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
B C D EA
HOME
D1 D2 D3A2A1
A2.2 A2.3A2.1navigazione orizzontale
navigazione trasversale
navigazione verticale
Vari tipi di navigazione
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
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
pubblicità
pubblicità
contenuti
Esempio
Esempio
<contenuti Linea Cash>
Una variante: navigazione locale in orizzontale
Strutturalmente, è la stessa cosa
Un’altra variante: navigazione locale in menu a tendina
A B C D E
Un’altra variante: navigazione globale a tab (metafora dello schedario)
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
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
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
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
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
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
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.
800x600
1024x768
dimensione della pagina
Layout fisso
Occorre scegliere la “risoluzione video privilegiata”
1024x768
800x600
Layout liquido
Il prototipo di navigazione
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)
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
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
Verifiche e convalide:
Verifiche:• Layout generale• Struttura dei menu• Navigazione• Etichette (termini usati, lunghezza)
Convalida:• Primo test di usabilità
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