1. Storyboarding, Wireframing, and Code-Free Prototyping for
Your Web, Desktop, and Mobile Apps
Goal : Progettare le interazioni e l’interfaccia utente mantenendo il
focus sulla User Experience

2. Chi è Acrm net
-aCrm net è una società italiana specializzata nello sviluppo di CRM
open source e di soluzioni ad hoc per il web e il mobile.
- aCrm net vanta più di 50 dipendenti che coprono una vasta gamma di figure
professionali e ha ben due sedi in Europa: Roma e Ginevra.
Contatti
aCrm Via Enrico Berlinguer, 18 (00054)
Fiumicino (Roma) Italia
www.acrmnet.com
info_net@acrmnet.it
Phone +39 06 95214464
Fax +39 06 92913681
Le nostre APPS
HERMES HEALTY SPIECES PET ISLAND SWAP ISLAND MORE OR LESS NAPOMEMO

3. Considerazioni generali
• Cos’è un wireframe?
– E’ la prima bozza di un’applicazione/sito una specie di radiografia della struttura.
– definisce visivamente la struttura del sito e traduce in immagine ciò che, prima, era solo testo
scritto
– lo scopo è quello di descrivere e tenere traccia della disposizione dei vari elementi all’interno
del layout, senza disegni, immagini o colori.
– Il wireframe presenta, sotto forma di immagine, gli elementi di una pagina e le modalità di
navigazione: e proprio in quanto immagine, anche se grigia e spoglia, comunica in modo più
chiaro e più immediato di tante parole.
• Cos’è uno storyboard?
– Molto semplice, l’insieme dei wireframe.
– Lo storyboard deve mostrare l'integrazione delle varie pagine/contenuti con i controlli e le loro
funzionalità
• Cos’è un prototipo?
– Un prototipo è l’evoluzione dello storyboard
– definisce l’interfaccia utente UI
– Aiuta a progettare e a verificare la User Experience UX
aCrm net training course
Apr 2014
3

4. Wireframe: alcuni esempi
aCrm net training course
Apr 2014
4
Il wireframe è una rappresentazione schematica di una singola pagina

5. Wireframe: alcuni esempi
aCrm net training course
Apr 2014
5

6. Wireframe: Sketching Your App
aCrm net training course
Apr 2014
6
• Partire da semplici
schizzi/bozze è uno dei
metodi migliori per
iniziare a disegnare la UI
di un progetto, inoltre è
veloce, facile da
modificare e può aiutare
a far visualizzare una
soluzione ad un cliente.
• Disegnare la vostra
applicazione permette di
mostrare ai clienti le
vostre idee e consente di
illustrare come un'idea
può scalare da un
telefono a un tablet da 7
pollici ad altri schermi.
In pratica, i disegni sono
il primo passo da
compiere nella
creazione di un’app.

7. Storyboard: alcuni esempi
aCrm net training course
Apr 2014
7
Lo storyboard è una serie di wireframe legati tra loro

8. Storyboard: alcuni esempi
aCrm net training course
Apr 2014
8

9. Prototipi: Alcuni esempi
aCrm net training course
Apr 2014
9
Un prototipo è la rappresentazione completa o parziale di un progetto o di un prodotto

10. Prototipi: Alcuni esempi
aCrm net training course
Apr 2014
10

11. Considerazioni generali
• Il wireframe e lo storyboard sono rappresentazioni statiche del design di un
progetto e non simulano i suoi vari stati.
• Un prototipo, a prescindere da come è fatto, coglie l’intento di un progetto e ne
simula i molteplici stati.
(tratto dal libro “Prototyping” di Todd Zaki Warfel)
aCrm net training course
Apr 2014
11

12. Wireframing e Storyboarding
aCrm net training course
Apr 2014
12
E’ ora di fare qualche esempio pratico e alcune esercitazioni!

13. Prototipo: Indigo Studio
aCrm net training course
Apr 2014
13
Se non siete amanti del bricolage
Interaction Design Tool

14. Prototipo: Indigo Studio
aCrm net training course
Apr 2014
14
• Indigo Studio è un software in grado di
aiutare nella costruzione della GUI utente,
permettendo di includere interazioni e
gesture.
• E’ possibile creare prototipi funzionanti senza
l’aggiunta di codice

15. Prototipo: Indigo Studio
aCrm net training course
Apr 2014
15
• I concetti base del software Indigo:
– Screen elements (blocchi visuali che si combinano per formare una schermata)
– Interactions (azioni dell’utente che comportano variazioni nella schermata o
navigazione)
– Animations (le modifiche alla visualizzazione della schermata nel tempo)
– States (il punto di attesa del prototipo prima di un’azione dell’utente)
– Navigation (il passaggio da una schermata all’altra o ad un URL esterno)

16. Prototipo: Indigo Studio
aCrm net training course
Apr 2014
16
Screen Elements:
• Gli screen elements sono elementi utilizzati
per la creazione dell’interfaccia utente del
prototipo, sono divisi in:
– Layout
– Common content
– Lists & pickers
– Shapes
– Stencils
– Annotations/markup

17. Prototipo: Indigo Studio
aCrm net training course
Apr 2014
17
Screen Elements - Layers:
• Gli screen elements organizzati in Layers
(livelli) in modo che vi sia un ordine di
visualizzazione, ovviamente è possibile
modificare l’ordine

18. Prototipo: Indigo Studio
aCrm net training course
Apr 2014
18
Interactions
• Le interazioni accadono quando l’utente compie un’azione e possono essere
cambiamenti di schermo (in-screen interaction) o di schermata (navigazione)

19. Prototipo: Indigo Studio
aCrm net training course
Apr 2014
19
Animations
• Le animazioni consentono di “animare” lo schermata con movimento, cambio di
colori o dimensione e dissolvenza.

20. Prototipo: Indigo Studio
aCrm net training course
Apr 2014
20
States
• Ogni schermata ha uno stato iniziale chiamato “start”. L’interazione con gli
elementi all’interno della schermata si traduce in cambiamenti di stato.

21. Prototipo: Indigo Studio
aCrm net training course
Apr 2014
21
Navigation
• Alcune azioni dell’utente possono portare alla navigazione tra schermate dello
stesso progetto o URL esterni .

22. Prototipo: Indigo Studio
aCrm net training course
Apr 2014
22
Navigation
• Esempio di navigazione
all’interno del progetto.

23. Prototipo: Indigo Studio
aCrm net training course
Apr 2014
23
Proviamo a fare qualche esempio pratico!