Le soluzioni per la progettazione di wireframe e prototipi interattivi.

1. Le soluzioni per la progettazione
di wireframe e prototipi interattivi.
Dal prototipo concettuale ai prototipi ad alta fedeltà.
wordPress Meetup Bologna
27 OTTOBRE 2016

2. Oana Tatar
Graphic Web Designer
info@oanatatar.it
www.voiceroad.it

3. Di cosa parleremo
1. Cos’è
2. Perché si fa
3. Come si fa: programmi e tools
Il prototipo

4. Cos’è un prototipo

5. Il significato della parola prototipo si presta a diverse
interpretazioni.
Nel mondo della progettazione di applicazioni e servizi
interattivi, s’intende la rappresentazione oggettiva di
un’idea.
Nel mondo dei prodotti “reali”, il termine indica una versione
preliminare del prodotto piuttosto simile a quella che sarà la
versione finale.
Proto-typos : “primo modello”

6. L’obiettivo di ogni prototipo
è quello di mostrare
”come funziona o come
potrebbe funzionare”

7. Perché creare un prototipo

8. agevola il lavoro di design
migliora la comunicazione con il cliente
riduce il tempo di sviluppo del progetto
La prototipazione è fondamentale per aspetti come l’analisi, la
valutazione, la comunicazione e la creazione del prodotto finale.
IL PROTOTIPO
testa l'usabilità

9. Il prototipo Si crea
per assicurarsi che tutto funzioni
come previsto

10. Come si realizza un un prototipo

11. Chiedere qual è il modo migliore per creare un
prototipo è come chiedere qual è il modo migliore per
fare un sito web:
non esiste un modo ”migliore” in assoluto rispetto ad un
altro.
Ogni prototipo in sé è come ogni singolo sito web:
ha i propri stili
obiettivi
strategie

12. Per realizzare un prototipo è possibile utilizzare:
un diagramma di flusso
una presentazione di PowerPoint
una demo
un wireframe
un video che spiega il processo
…

13. Programmi di progettazione grafica
e tools per creare un wireframe.
Dal prototipo concettuale ai prototipi ad alta fedeltà.

14. Quando si progetta un sito o web app
è necessario poter contare su una bozza della struttura
che permette di organizzare gli spazi e le funzionalità che
andranno poi inserite nella versione finale del progetto (il
wireframe).
Innanzitutto…

15. 1. Bassa fedeltà - software di presentazione
2. Media fedeltà - prototipi codificati
3. Alta fedeltà - app di prototipazione specializzati
Ecco le tipologie di prototipazione più comuni:

16. 1. Bassa fedeltà
L’approccio forse più
popolare
tra i progettisti
• cartaceo
(PowerPoint, keynote)
• slides

17. economico
flessibile
semplice da realizzare
efficace
Il prototipo cartaceOCarta e penna

18. Slidehttp://keynotopia.com/guides/
facile da realizzare
facile da modificare
http://keynotopia.com/guides-ppt/
Il prototipo realizzato con Keynote e PowerPoint è:
L’interattività non richiede un mago di Oz
Buona gestione degli aspetti grafici

19. 2. Media fedeltà
un insieme d’immagini
o pagine con cui gli
utenti possono
interagire
HTML/CSS

20. Prototipo a media fedeltàHTML e CSS
• modifiche globali possibili cambiando poche righe di codice
• possibilità di sfruttare l’interazione
• eventualità di riutilizzare il codice già scritto nel progetto
finale
Ajax o codice JavaScript

21. completamente
funzionale
•Balsamiq
•Marvel
•Moqups
3. Alta fedeltà

22. free 30 gg
online/desktop app
Sketchy Wireframes
Drag & Drop
Simboli reutilizzabbili
UI Components & Icons
Prototipi Click-Through
Esporta PNG e PDF
60 controlli pre-costruiti
Balsamiq Mockupshttps://balsamiq.com/

23. free/premium
Web e mobile app
Design flessibile
Drag and drop
Google Fonts
Auto-save
60 layout predefiniti
Intuitivo e facile da usare
Moqupshttps://app.moqups.com

24. Marvel
free/premium
Web e mobile app
Sincronizza i file con Dropbox
Possibilità di aggiungere i file
dal computer
Intuitivo e facile da usare
Tipi di file supportati :
.psd, .png, .jpg, .gif, .sketch, .pdf
https://marvelapp.com

25. Usa solo strumenti con cui sei
a tuo agio.
Altrimenti:
1. Ti sono più d’intralcio che
d’aiuto
2. Influenzano il design del
progetto
(“questo non riesco a farlo,
quindi cambio design”)

26. chi „decide” quale sia il
prototipo migliore è
IL CLIENTE

27. Grazie e buona
prototipazzione!

28. Domande?
wordPress Meetup Bologna
27 OTTOBRE 2016
info@oanatatar.it