8. web design

Corso Laboratorio Internet – Prof. Roberto Polillo

Università degli Studi di Milano Bicocca – Anno Accademico 2010-11

8. WEB DESIGN

R.Polillo – Ottobre 2010

1

3 4 5 6 7Web design

Visual 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

Che cosa faremo oggi

R.Polillo – Ottobre 2010

2

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

mappa del sito

documentodei requisiti

gabbia logicadelle pagine

prototipodi navigazione

Progettazione della architettura dell’informazione

Costruzione delprototipo di navigazione

Verificae convalida

1

23

Nell’ambito delle possibilità del site builder usato

Web design: attività e prodotti

R.Polillo – Ottobre 2010

4

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

Schedaprodotto

Schedaprodotto

Schedaprodotto

Home

Condizioni di vendita

Mappa del sitoContattiNews

Iscrizioneai servizi

Area riservataProdotti Carrello

Dati utenteChi siamo

Chitarre nuove

Chitarre usate

Ordina prodotto

Accessori

Il negozioLe marche

trattateDove

siamo

Mappa del sitoScaletta logica dei contenuti

Esempio

R.Polillo – Ottobre 2010

6

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

B C D EA

HOME

D1 D2 D3A2A1

A2.2 A2.3A2.1navigazione orizzontale

navigazione trasversale

navigazione verticale

Tipi di navigazione

R.Polillo – Ottobre 2010

8

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

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

R.Polillo – Ottobre 2010

18

Esempio: http://www.prototipoong.ilbello.com

Esempio

R.Polillo – Ottobre 2010

19

R.Polillo – Ottobre 2010

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

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.Polillo – Ottobre 2010

27

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 tuoi noleggi

I tuoi dati

Area clienti Servizi

HOME

Condizioni

Preventivo

Noleggio

Offerte speciali

scorciatoia

Scorciatoie39

R.Polillo – Ottobre 2010

Orientamento

Bread-crumbs Evidenziazione voce selezionata Simboli grafici/colori per distinguere le

sezioni

R.Polillo – Ottobre 2010

40

R.Polillo – Ottobre 2010

R.Polillo – Ottobre 2010

R.Polillo – Ottobre 2010

R.Polillo – Ottobre 2010

R.Polillo – Ottobre 2010

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

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

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 prodottoProdottiHome

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

R.Polillo – Ottobre 2010

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.

R.Polillo – Ottobre 2010

50

800x600

1024x768

dimensione della pagina

Occorre scegliere la “risoluzione video privilegiata”

Layout fisso

R.Polillo – Ottobre 2010

51

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 “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

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

R.Polillo – Ottobre 2010

54

R.Polillo – Ottobre 2010

55

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 Top (navigazione orizzontale) Blank Left (navigazione verticale sinistra) Blank Right (navigazione verticale destra)

Esempio: www.webs.com

R.Polillo – Ottobre 2010

57

Verifiche e convalide:

Verifiche:• Layout generale• Struttura dei menu• Navigazione• Etichette (termini usati, lunghezza)

Convalida:• Primo test di usabilità

R.Polillo – Ottobre 2010

58

Che cosa dovete portare alla revisione della fase 3 (Web Design)

1. Mappa del sito2. [Gabbie logiche delle pagine]3. Prototipo di navigazione eseguibile

R.Polillo – Ottobre 2010

59

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