Introduction to Designing for Flex - Austin Adobe Users Group December 2009.
Includes:
- Flex Tips for getting started
- 40+ Custom Flex controls
- Flex Data Visualization Tools
- Frameworks (event frameworks and graphical frameworks)
- User interface design principles and patterns
- Showcase of the best current Rich Internet Applications
- UI Design Anti-Patterns
- Using Photoshop + Flash Catalyst + Flash Builder to work faster
- Using Flex templates in CS4: Photoshop, Illustrator and Fireworks
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Great Experiences With Flex
1. Explorers UI Design
and Principles
Galleries
Great
Applicatio
ns
UI Design
Anti-Patterns
Custom
Components
Charts and
Data
Visualizations
Adobe Tools
for Frameworks
Prototyping
4. AnyCharts FlexMonster Degrafa
BirdEye Axiis Open Flash
KapIT Labs Fusion Charts
yFiles for Flex
Charts and
Many open-
Data
Visualizations
source and
commercial
options
5. UI Design
Principles
10 Usability
Best Practices
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams
6. UI Design
1. Provide Feedback Principles
10 Usability
Best Practices
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams
7. UI Design
Principles
2. Match the Real World
10 Usability
Best Practices
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams
8. UI Design
Principles
3. Minimize Navigation
10 Usability
Best Practices
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams
9. UI Design
Principles
4. Be Consistent 10 Usability
Best Practices
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams
10. UI Design
Principles
10 Usability
5. Prevent Errors Best Practices
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams
11. UI Design
Principles
10 Usability
Best Practices
6. Minimize the Memory Load
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams
12. UI Design
Principles
10 Usability
Best Practices
7. Design for Efficiency
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams
13. UI Design
Principles
10 Usability
Best Practices
8. Respect the Principles of C.R.A.P
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams
14. UI Design
Principles
10 Usability
Best Practices
9. Assist with Recovery
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams
15. UI Design
Principles
10 Usability
Best Practices
10. Provide Integrated Help
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams
32. UI Design
Anti-Patterns
borg idiom
don’t munge
controls together
Ebay AIR
33. UI Design
Anti-Patterns
non-
symmetrical
actions
keep the actions
symmetrical
Disclaimer- this is one of my favorite web apps, it just has this one anti-pattern
34. UI Design
Anti-Patterns
double duty
each object
should have one
responsibility
Disclaimer- this is a really nice and useful AIR application, it just has this one anti-pattern
35. UI Design
Anti-Patterns
hover and
cover
hover below, left
or above, not to
the right
Disclaimer- this is a beautiful application and fun to use, it just has this one anti-pattern
38. UI Design
Anti-Patterns
animation
gone wild
rule of 1/2s-
remove 1/2, then
1/2 again
Disclaimer- the Behr paint site is really nice, just a little overzealous with the animation
48. Graphics
framework: also, take a
Frameworks charts, look at
for
mapping, ScaleNine
skinning... Flex Skins
18
49. Photoshop + 1. Start in
Adobe Tools
Catalyst + Photoshop or
for er
Flash Build Illustrator
Prototyping 4
50. 2. Import into
Adobe Tools Photoshop + Flash
for Catalyst + Catalyst-
er
Prototyping Flash Build then save
4 project
51. 2. Import into
Adobe Tools Photoshop + Flash
for Catalyst + Catalyst-
er
Prototyping Flash Build then save
4 project
52. 3. Open project hack for
Adobe Tools Photoshop + in Flash
keeping the
for Catalyst + Builder 4
er two sync’d
Prototyping Flash Build (formerly Flex
4 Builder)
53. :
Alternative Open ‘New Flex
Adobe Tools Use skin Skin’ from the
for templates in menu, edit,
I:
Prototyping PS, FW or A then ‘Export
CS4 Flex Skin’
54. Twitter
@theresaneil
theresanei
l.com
Thank you!
b
presented at the Austin Adobe User Group Dec 11,2009 Designing We
Interfaces,
O’Reilly 2009