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


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


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


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


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


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


7

B C D EA

HOME

D1 D2 D3A2A1

A2.2 A2.3A2.1navigazione orizzontale

navigazione trasversale

navigazione verticale

Tipi di navigazione


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


9

Esempio

A B C D E

pagina home


10

Esempio

A B C D E

D1

D2

D3

pagina D


11

Esempio

A B C D E

D1

D2

D3

pagina D1


12

Esempio

A B C D E

B1

B2

B3

pagina B


13

Esempio


A B C D E

B1

B2

B3

pagina B2

14

pubblicità

pubblicità

contenuti

Esempio


15

Esempio


16

<contenuti Linea Cash>

Esempio


17


18

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

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

Esempio


19


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

http://www.comproj.weebly.com/



http://prototipoong.weebly.com/



http://www.casadiemma.webs.com/

http://www.prototipoong.webs.com/




A B C D E

La metafora dello schedario


21

A B C D E

D1 D2 D3

pagina D1

A B C D E

pagina D1

D1

D2

D3

Schedario con navigazione locale


23

inserzione pubblicitaria

<contenuti della pagina>

Esempio


24

<contenuti: Idee regalo fino a 10.99 euro>

Esempio


25

Navigazione a tre livelli


26

Menu che si modificano

Il menu è l’”ancora di salvezza” per l’utente nella navigazione: non devono MAI cambiare


27

Esempio


Menu che non si vedono (!)


35

Accessi multipli a una stessa pagina

36


Esempio


37

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


Orientamento

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

sezioni


40


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







http://www.casadiemma.webs.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


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


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.


50

800x600

1024x768

dimensione della pagina

Occorre scegliere la “risoluzione video privilegiata”

Layout fisso


51

1024x768

800x600

Layout liquido


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)


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








Esempio


54


55


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


57

http://www.webs.com/

Verifiche e convalide:

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

Convalida:• Primo test di usabilità


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


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.


60

8. Web design

Education

Transcript of 8. Web design