KIRA GARFAGNOLI
Creative Director
k.garfagnoli@comtaste.com
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
INTERFACE DESIGN
DEVELOPMENT
KIRA
CONSUMER
ENTERPRISE
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Workflow design di un’applicazione
FASE 1
Presa visione delle specifiche
Studio usabilità/accessibilità interfaccia
Ideazione e realizzazione proposta grafica
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Nello studio dell’interfaccia è fondamentale avere
sempre in mente quale sarà il target di riferimento,
sapere chi sarà l'utente finale che dovrà utilizzare la
nostra applicazione.
Utilizzare la flessibilità e le potenzialità di tecnologie
come Adobe Flex e Adobe Air nel giusto modo (non
sempre 1000 effetti speciali sono meglio di 1).
Nella realizzazione di una prova grafica statica di
un'applicazione, si dovrebbero mostrare al cliente
almeno 3 schermate, cercando di rappresentare quelle
che hanno al proprio interno più componenti possibili
(menu, grafici, tabelle dati ecc.).
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Per dare un’idea precisa di come si muoveranno gli
elementi nell’interfaccia proposta e quali saranno gli
effetti inseriti, è bene dare una descrizione scritta, o
verbale, della parte che pensiamo sia difficile
comprendere in una prova grafica di tipo statico.
Ricordarsi, nella fase dello studio grafico di una RIA,
che l’approccio è più vicino a quello usato per
lavorazioni realizzate con Adobe Flash e molto diverso
quindi, da quello utilizzato, ad esempio, per creare
un sito web statico in HTML.
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Workflow design di un’applicazione
FASE 2
Realizzazione componenti e elementi
grafici generici (sfondi, loghi ecc.)
Realizzazione file SWF per il developer
Indicazione degli effetti di supporto alla
navigazione dell’interfaccia
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Questa è una delle fasi più delicate, è il momento in cui possono
venir fuori delle difficoltà e dei limiti nelle lavorazioni, che si
possono superare solo con una stretta collaborazione fra
developer e designer, e con una buona comprensione della
struttura di un'applicazione RIA.
http://learn.adobe.com/wiki/display/Flex/Getting+Started
http://examples.adobe.com/flex3/componentexplorer/explorer.html
http://examples.adobe.com/flex3/consulting/styleexplorer/
Flex3StyleExplorer.html#
http://flex.org/showcase/
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Quali sono gli strumenti che un designer utilizza
per realizzare prototipi e skin di un’applicazione?
Illustrator Photoshop
Fireworks Flash
Flash Catalyst
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Come primo passo per poter realizzare le skin con uno di questi
software è bene installare le extensions di Flex , inoltre per facilitare
il lavoro, Adobe mette a disposizione dei file che contengono tutti i
set dei componenti di un’applicazione, che noi possiamo
comodamente personalizzare.
http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins
http://download.macromedia.com/pub/developer/flex_skins_flash.zip
http://download.macromedia.com/pub/developer/flex_skins_photoshop.zip
http://download.macromedia.com/pub/developer/flex_skins_fireworks.zip
http://download.macromedia.com/pub/developer/flex_skins_illustrator.zip
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Extensions di Flex
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
File componenti Flex
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
E se vogliamo creare componenti ex-novo, basandoci sul layout fornito al
cliente come prova grafica?
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Il layout è stato disegnato con Adobe Illustrator
Individuare tutti gli elementi da trasformare in componenti Flex
Realizzare le skin per ciascun elemento
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Come disegno un singolo elemento?
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Completato il design di tutti gli elementi si esportano come
filmato SWF
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Questa operazione può essere eseguita con due modalità:
Esportando nel formato SWF direttamente dall’interno
dell’applicazione utilizzata (Illustrator, Photoshop ecc.)
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Importando in Adobe Flash i simboli realizzati, ad esempio con Illustrator,
per poter inserire altre proprietà ai componenti. Questo si può fare molto
semplicemente facendo un Copia e Incolla degli elementi selezionati.
ATTENZIONE: prima di esportare il file SWF, controllate sempre che:
I simboli abbiano le coordinate X e Y con valore 0, per evitare che,
1
ad esempio nel caso di un bottone, questo possa spostarsi in uno
degli stati Up, Over o Down
Ricordatevi di inserire per ciascun elemento a mano la proprietà
2
Export for ActionScript
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Workflow design di un’applicazione con l’arrivo di
Adobe Flash Catalyst e Flex Gumbo
Realizzazione layout dell’applicazione con uno dei
software della Adobe CS4 collection (Illustrator, Photoshop
ecc.) In questa fase si salveranno tutti i simboli direttamente
come componenti per poi permettere a Flash Catalyst di
riconoscere i vari elementi (Button, Check Box, Accordion
ecc.)
Aperto il file .AI o .PSD direttamente dentro Flash Catalyst
andremo ad applicare tutti gli effetti sui componenti senza
dover scrivere codice. Salvando la lavorazione daremo al
developer un file .fxg con il quale lui può interagire senza
nessuna difficoltà.
WWW.COMTASTE.COM

Design workflow nelle applicazioni RIA
Cosa cambierà con l’arrivo di queste nuove tecnologie?
Il fatto che un designer possa costruire un intero layout di
un’applicazione senza dover ricorrere subito alla collaborazione
di un developer, non avendo la necessità di dover scrivere righe
di codice, significa rendere il flusso di lavoro di un progetto
molto più scorrevole.
Il developer potrà interagire con un file che è fatto in realtà di
codice, trovandosi di fronte a una gran parte del lavoro di
“montaggio” del layout grafico già realizzato.
Cosa non cambierà?
Il fatto che un designer dovrà comunque cercare di capire la
struttura di una RIA, non imparando a scrivere codice, ma
almeno imparando quali sono gli elementi che la compongono e
cosa è possibile realizzare con questi. Flash