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

La prototipazione

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

[email protected]

www.voiceroad.it

Di cosa parleremo

1. Cos’è 2. Perché si fa 3. Come si fa: programmi e tools

Il prototipo

Cos’è un prototipo

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”

L’obiettivo di ogni prototipo è quello di mostrare

”come funziona o come potrebbe funzionare”

Perché creare un prototipo

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à

Il prototipo Si crea per assicurarsi che tutto funzioni

come previsto

Come si realizza un un prototipo

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

economico flessibile

semplice da realizzare efficace

Il prototipo cartaceO Carta e penna

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

2. Media fedeltà

un insieme d’immagini o pagine con cui gli utenti possono interagire

HTML/CSS

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

completamente funzionale

•Balsamiq

•Marvel

• Moqups

3. Alta fedeltà

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”)

chi „decide” quale sia il prototipo migliore è

IL CLIENTE

Grazie e buona prototipazzione!

Domande?

wordPress Meetup Bologna27 OTTOBRE 2016

[email protected]