PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al...
Transcript of PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al...
![Page 1: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/1.jpg)
PRESENTARE un progetto web
![Page 2: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/2.jpg)
Analisi e ricerca (card sorting, scenario)
Struttura (wireframe, sitemap, fl owchart)
Design (mockups, guida di stile)
Prototipazione (taglio html/css, programmazione)
Fasi di un progetto web
![Page 3: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/3.jpg)
Ad ogni fase di un progetto web corrisponde una
presentazione al cliente, per illustrare il lavoro
svolto, correggere eventuali errori ed apportare le
necessarie modifi che.
Wireframes: presentare la struttura
Mockups e guida di stile: presentare il design
Prototipazione: presentare il funzionamento
Presentare un progetto web
![Page 4: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/4.jpg)
Wireframe
Il wireframe può essere defi nito come la prima bozza
del progetto: si tratta di un elaborato grafi co "a bassa
fedeltà" utilizzato per mostrare la struttura, la
disposizione degli elementi nella pagina, e le varie
funzionalità.
Wireframepresentare la struttura
![Page 5: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/5.jpg)
Wireframepresentare la struttura
Presentazione digitale del wireframe dinamico
è possibile creare un wireframe dinamico simulando
navigazione e funzionalità (grazie a software di
wireframing e prototipazione come Justinmind)
Impaginazione e stampa del wireframe
Mappa del sito (sitemap)
Templates
Flusso di navigazione (fl owchart)
![Page 6: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/6.jpg)
Mappa del sito (sitemap)
![Page 7: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/7.jpg)
Wireframe
![Page 8: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/8.jpg)
Wireframe
![Page 9: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/9.jpg)
Flusso di navigazione (fl owchart)
![Page 10: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/10.jpg)
Mockup
Il mockup rappresenta lo step successivo al
wireframe: in questa fase, infatti, lo scheletro defi nito
in precedenza viene "riempito" applicando la grafi ca
concordata col cliente: colori, immagini, testi
segnaposto, font, stili, ecc.
Mockuppresentare il design
![Page 11: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/11.jpg)
Mockuppresentare il design
Presentazione digitale del mockup
è possibile simulare la navigazione presentando i
template del mockup con un software di wireframing
e prototipazione come Justinmind
Impaginazione e stampa del mockup
Stampare i template che compongono il mockup in
una dimensione fedele ai dispositivi
![Page 12: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/12.jpg)
Mockup
![Page 13: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/13.jpg)
Guida di stiledefi nire il design
Guida di stile
La guida di stile è la documentazione visiva di un
progetto, l’insieme delle specifi che di design che
identifi cano nel il brand. Le caratteristiche di una
guida di stile variano sensibilmente da progetto a
progetto.
![Page 14: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/14.jpg)
Guida di stiledefi nire il design
Una guida di stile specifi ca:
Identità del brand
Palette cromatica
Bottoni, icone, avatar
Scelta dei font
Specifi che per video e immagini
![Page 15: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/15.jpg)
Guida di stiledefi nire il design
Guide di stile online
Ubuntuhttps://design.ubuntu.com/
Google material designhttps://www.google.com/design/spec/material-design/introduction.html
WooThemeshttps://www.woothemes.com/style-guide/
Skypehttp://www.issuu.com/bondo/docs/skype_brand_book_-_look
![Page 16: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/16.jpg)
Guida di stile
![Page 17: PRESENTARE · 2017-01-18 · Ad ogni fase di un progetto web corrisponde una presentazione al cliente, per illustrare il lavoro svolto, correggere eventuali errori ed apportare le](https://reader034.fdocument.pub/reader034/viewer/2022050202/5f5619363e27eb682e66aa6b/html5/thumbnails/17.jpg)
Nella fase di prototipazione di un progetto web, il team
di sviluppo procede alla realizzazione di un artefatto
dinamico al fi ne di mostrare al cliente non solo l'aspetto
grafi co ma anche quello funzionale del sito.
Fasi
- Taglio html/css
- preparazione degli script (sia lato client che server)
Prototipazionepresentare il funzionamento