WWW.COMTASTE.COM
KIRA GARFAGNOLI
Creative Director
k.garfagnoli@comtaste.com
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
KIRAENTERPRISE CONSUMER
DEVELOPMENT INTERFACE DESIGN
Workflow design di un’applicazione
Presa visione delle specifiche
Studio usabilità/accessibilità interfaccia
Ideazione e r...
Nello studio dell’interfaccia è fondamentale avere
sempre in mente quale sarà il target di riferimento,
sapere chi sarà l'...
Per dare un’idea precisa di come si muoveranno gli
elementi nell’interfaccia proposta e quali saranno gli
effetti inseriti...
Workflow design di un’applicazione
Realizzazione componenti e elementi
grafici generici (sfondi, loghi ecc.)
Realizzazione...
Questa è una delle fasi più delicate, è il momento in cui possono
venir fuori delle difficoltà e dei limiti nelle lavorazi...
Quali sono gli strumenti che un designer utilizza
per realizzare prototipi e skin di un’applicazione?
Illustrator Photosho...
Come primo passo per poter realizzare le skin con uno di questi
software è bene installare le extensions di Flex , inoltre...
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
Desi...
Il layout è stato disegnato con Adobe Illustrator
Individuare tutti gli elementi da trasformare in componenti Flex
Realizz...
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 applicazio...
Questa operazione può essere eseguita con due modalità:
Esportando nel formato SWF direttamente dall’interno
dell’applicaz...
Importando in Adobe Flash i simboli realizzati, ad esempio con Illustrator,
per poter inserire altre proprietà ai componen...
Workflow design di un’applicazione con l’arrivo di
Adobe Flash Catalyst e Flex Gumbo
Realizzazione layout dell’applicazion...
Il fatto che un designer possa costruire un intero layout di
un’applicazione senza dover ricorrere subito alla collaborazi...
WWW.COMTASTE.COM
Design workflow nelle applicazioni RIA
FORMAZIONE
Disegnare layout ed interfacce
utente per Flex 3 ed Ado...
Upcoming SlideShare
Loading in...5
×

Designing Flex and AIR applications

5,088

Published on

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

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,088
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
54
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Designing Flex and AIR applications

  1. 1. WWW.COMTASTE.COM KIRA GARFAGNOLI Creative Director k.garfagnoli@comtaste.com
  2. 2. WWW.COMTASTE.COM Design workflow nelle applicazioni RIA KIRAENTERPRISE CONSUMER DEVELOPMENT INTERFACE DESIGN
  3. 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. 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. 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. 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. 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. 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. 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. 10. Extensions di Flex WWW.COMTASTE.COM Design workflow nelle applicazioni RIA
  11. 11. File componenti Flex WWW.COMTASTE.COM Design workflow nelle applicazioni RIA
  12. 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. 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. 14. Come disegno un singolo elemento? WWW.COMTASTE.COM Design workflow nelle applicazioni RIA
  15. 15. Completato il design di tutti gli elementi si esportano come filmato SWF WWW.COMTASTE.COM Design workflow nelle applicazioni RIA
  16. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×