Strutturare il progetto webSite Map

Wireframe

Strutturare il progetto web

Una volta delineati gli aspetti globali, aver

analizzato il contesto, individuato il target e lo

scenario di riferimento è necessario iniziare a

lavorare sulla struttura del progetto.

STRUMENTI E METODI

- Site map

- Wireframe

La mappa del sito serve a pianifi care

l'organizzazione delle pagine all'interno

di un sito web

SITE MAP

SITEMAP

È possibile scrivere la sitemap del sito sia a mano

libera che tramite l'impiego di software.

Il wireframe è la bozza strutturale di un

progetto web.

WIREFRAME

WIREFRAME

Gli obiettivi di un wireframe sono:

● Strutturare il layout● Organizzare i contenuti e stabilire priorità e gerarchie ● Mostrare i collegamenti tra pagine e contenuti● Progettare le funzionalità● Progettare e testare il comportamento dell'utente

WIREFRAME

Il wireframe non serve a defi nire il layout grafi co!

Non usare colori, pattern, textureUtilizza toni di grigio per sottolineare le differenze tra gli elementi

Non usare immaginiUtilizza delle immagini placeholder anzichÈ immagini reali

Utilizza un unico font genericoDifferenzia la gerarchia dei contenuti utilizzando diverse grandezze del font

1. Bozza globale

Fare uno schizzo della struttura globale del progetto

Schizzo del wireframe di un sito web

1. Bozza globale

Fare uno schizzo della struttura globale del progetto

Schizzo del wireframe di una app

2. Affi nare il wireframe

Affi nare il progetto strutturale di ciascun template

2. Affi nare il wireframe

Affi nare il progetto strutturale di ciascun template

Confronto tra wireframe e layout grafi co di una pagina web

2. Affi nare il wireframe

Affi nare il progetto strutturale di ciascun template

Confronto tra wireframe e layout grafi co di una pagina web

2. Affi nare il wireframe

Affi nare il progetto strutturale di ciascun template

Confronto tra wireframe e layout grafi co di una pagina web

2. Affi nare il wireframe

Affi nare il progetto strutturale di ciascun template

wireframe di una app

2. Affi nare il wireframe

Affi nare il progetto strutturale di ciascun template

wireframe di una app

3. Tracciare il percorso utente

Tracciare il fl usso di navigazione dell'utente

Grafi co del fl usso di navigazione utente di un sito web

3. Tracciare il percorso utente

Tracciare il fl usso di navigazione dell'utente

Grafi co del fl usso di navigazione utente di una app

3. Tracciare il percorso utente

Tracciare il fl usso di navigazione dell'utente

Wireframe interattivi del fl usso di navigazione utente di una app - https://mockfl ow.com/samples/

Software e strumentiper la creazione di wireframe

Sneakpeekit http://sneakpeekit.com/Tool per la creazione di wireframe su carta

Popapp https://popapp.in/App per la creazione di wireframe mobile interattivi partendo da schizzi su carta

Axure http://www.axure.com/Software a pagamento per la creazione di wireframe

Just in mind https://www.justinmind.com/Software gratuito per la creazione di wireframe

Software e strumentiper la creazione di wireframe

Chalkmark https://www.optimalworkshop.com/chalkmarkSoftware gratuito per testare l'usabilità del sito

Camtasiahttps://www.techsmith.com/camtasia.htmlSoftware a pagamento per registrare la navigazione dell'utente su un progetto web