strutturare il progetto web - wordpress.com · strutturare il progetto web una volta delineati gli...
TRANSCRIPT
![Page 1: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/1.jpg)
Strutturare il progetto webSite Map
Wireframe
![Page 2: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/2.jpg)
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
![Page 3: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/3.jpg)
La mappa del sito serve a pianifi care
l'organizzazione delle pagine all'interno
di un sito web
SITE MAP
![Page 4: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/4.jpg)
SITEMAP
È possibile scrivere la sitemap del sito sia a mano
libera che tramite l'impiego di software.
![Page 5: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/5.jpg)
Il wireframe è la bozza strutturale di un
progetto web.
WIREFRAME
![Page 6: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/6.jpg)
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
![Page 7: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/7.jpg)
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
![Page 8: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/8.jpg)
1. Bozza globale
Fare uno schizzo della struttura globale del progetto
Schizzo del wireframe di un sito web
![Page 9: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/9.jpg)
1. Bozza globale
Fare uno schizzo della struttura globale del progetto
Schizzo del wireframe di una app
![Page 10: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/10.jpg)
2. Affi nare il wireframe
Affi nare il progetto strutturale di ciascun template
![Page 11: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/11.jpg)
2. Affi nare il wireframe
Affi nare il progetto strutturale di ciascun template
Confronto tra wireframe e layout grafi co di una pagina web
![Page 12: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/12.jpg)
2. Affi nare il wireframe
Affi nare il progetto strutturale di ciascun template
Confronto tra wireframe e layout grafi co di una pagina web
![Page 13: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/13.jpg)
2. Affi nare il wireframe
Affi nare il progetto strutturale di ciascun template
Confronto tra wireframe e layout grafi co di una pagina web
![Page 14: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/14.jpg)
2. Affi nare il wireframe
Affi nare il progetto strutturale di ciascun template
wireframe di una app
![Page 15: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/15.jpg)
2. Affi nare il wireframe
Affi nare il progetto strutturale di ciascun template
wireframe di una app
![Page 16: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/16.jpg)
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
![Page 17: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/17.jpg)
3. Tracciare il percorso utente
Tracciare il fl usso di navigazione dell'utente
Grafi co del fl usso di navigazione utente di una app
![Page 18: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/18.jpg)
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/
![Page 19: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/19.jpg)
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
![Page 20: Strutturare il progetto web - WordPress.com · Strutturare il progetto web Una volta delineati gli aspetti globali, aver analizzato il contesto, individuato il target e lo scenario](https://reader033.vdocuments.pub/reader033/viewer/2022042402/5f13c2bfc791eb206e18180f/html5/thumbnails/20.jpg)
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