This is the presentation held by Kira Garfagnoli, Creative User Experience Designer at Comtaste, at the Adobe Techconnection event in Rome, Italy

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

2. WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
KIRAENTERPRISE CONSUMER
DEVELOPMENT INTERFACE DESIGN

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

4. 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

5. 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

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

7. 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

8. 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

9. 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

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

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

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

13. 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

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

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

16. 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

17. 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:
Design workflow nelle applicazioni RIA
1 I simboli abbiano le coordinate X e Y con valore 0, per evitare che,
ad esempio nel caso di un bottone, questo possa spostarsi in uno
degli stati Up, Over o Down
2 Ricordatevi di inserire per ciascun elemento a mano la proprietà
Export for ActionScript
WWW.COMTASTE.COM

18. 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

19. 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.
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
Cosa cambierà con l’arrivo di queste nuove tecnologie?
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 Catalyst non può
fare proprio tutto al posto nostro

20. WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
FORMAZIONE
Disegnare layout ed interfacce
utente per Flex 3 ed Adobe AIR
http://www.comtaste.com/training.htm