Upload
oana-tatar
View
66
Download
0
Embed Size (px)
Citation preview
Le soluzioni per la progettazione di wireframe e prototipi interattivi. Dal prototipo concettuale ai prototipi ad alta fedeltà.
wordPress Meetup Bologna27 OTTOBRE 2016
Oana Tatar
Graphic Web Designer
www.voiceroad.it
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”
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à
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
Per realizzare un prototipo è possibile utilizzare:
un diagramma di flusso una presentazione di PowerPoint
una demo un wireframe
un video che spiega il processo …
Programmi di progettazione grafica e tools per creare un wireframe.
Dal prototipo concettuale ai prototipi ad alta fedeltà.
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…
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:
1. Bassa fedeltà
L’approccio forse più popolare tra i progettisti
• cartaceo
(PowerPoint, keynote)• slides
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
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
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 Mockups https://balsamiq.com/
free/premium Web e mobile app Design flessibile Drag and drop Google Fonts Auto-save 60 layout predefiniti Intuitivo e facile da usare
Moqups https://app.moqups.com
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
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”)