ARCHITETTURA DELLE PAGINE

Obiettivi

A questo punto del progetto, dopo aver definito contenuti, task e flussi, si realizzano i Wireframes che rappresentano l'architettura delle singole pagine del sito.
L'architettura delle pagine del sito è l'intersezione dell'architettura del sito con l'elemento visuale dell'Information Design.
Il risultato del Design della pagina è un documento chiamato Wireframe.

Attraverso il Wireframe si può capire come vengono utilizzati gli spazi all'interno della pagina, fornendo indicazioni sulla gerarchia dei contenuti e degli elementi presenti (banner, testo, immagini, area di login, menu a tendina ecc.).
Il Wireframe si riferisce a pagine individuali o, comunque, a gruppi di pagine simili, come ad esempio le schede prodotto di un catalogo.

Progettare l'architettura della pagina significa quindi anche entrare nel merito di quali e quante tipologie di pagine saranno utilizzate per il sito.
I Wireframe non vengono fatti però per ogni pagina del sito, ma solo per quelle principali, quelle più complesse e quelle più ricorrenti.
Può succedere che abbozzare su carta l'aspetto visivo delle pagine faccia capire che alcuni aspetti già progettati (es. navigazione, flussi di login, ecc.) debbano essere rivisti.
La realizzazione dei Wireframes è quindi un processo iterativo che può essere condotto diverse volte nel corso del progetto.

Durante l'attività di definizione dell'architettura delle pagine, gli aspetti di navigazione, di Labeling, di Layout prendono vita e possono essere percepiti e capiti in maniera più chiara dai clienti, dai Manager, e dai membri del team che si occupano dello sviluppo tecnologico.

Deliverable: Wireframe

I Wireframe possono essere fatti in modi diversi: più grafico o più vicino al Flowchart, attraverso dei software di rappresentazione oppure attraverso l'uso di Html, Flash, ecc.
Essi devono in ogni caso rappresentare:
- gli elementi (contenuti) che saranno presenti sulla pagina
- l'ingombro spaziale nella pagina di ognuno di essi
- la gerarchia degli elementi
- l'ordine degli elementi (es. voci di un Navigator)
- il comportamento di ogni elemento sulla pagina

     
Wireframe ad alta fedeltà                         Wireframe a bassa fedeltà