PRESENTARE un progetto web

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

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

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

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)

Mappa del sito (sitemap)

Wireframe

Wireframe

Flusso di navigazione (fl owchart)

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

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

Mockup

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.

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

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

Guida di stile

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