strutturare il progetto web - wordpress.com · strutturare il progetto web una volta delineati gli...
TRANSCRIPT
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