great experiences with flex

54
Charts and Data Visualizations Great Applications Custom Components UI Design Principles UI Design Anti-Patterns Explorers and Galleries Adobe Tools for Prototyping Frameworks

Upload: theresa-neil

Post on 27-Jan-2015

106 views

Category:

Technology


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Great Experiences With Flex

Charts and

Data

Visualizations

Great Applications

Custom

Components

UI Design Principles

UI Design

Anti-Patterns

Explorers

and

Galleries

Adobe Tools for

PrototypingFrameworks

Page 4: Great Experiences With Flex

Charts and

Data

Visualizations

Many open- source and commercial

options

AnyCharts

AxiisBirdEye

DegrafaFlexMonster

Fusion ChartsKapIT Labs

Open Flash

yFiles for Flex

Page 31: Great Experiences With Flex

UI Design

Anti-Patterns

Page 32: Great Experiences With Flex

UI Design

Anti-Patterns

borg idiomdon’t munge

controls together

Ebay AIR

Page 33: Great Experiences With Flex

UI Design

Anti-Patterns

non-symmetrical

actionskeep the actions

symmetrical

Disclaimer- this is one of my favorite web apps, it just has this one anti-pattern

Page 34: Great Experiences With Flex

UI Design

Anti-Patterns

double dutyeach object

should have one responsibility

Disclaimer- this is a really nice and useful AIR application, it just has this one anti-pattern

Page 35: Great Experiences With Flex

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

Page 36: Great Experiences With Flex

UI Design

Anti-Patterns

oceans of buttons

re-evaluate the IA and user goals

Page 37: Great Experiences With Flex

UI Design

Anti-Patterns

oceans of buttons

re-evaluate the IA and user goals

Page 38: Great Experiences With Flex

UI Design

Anti-Patterns

animation gone wildrule 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

Page 39: Great Experiences With Flex

UI Design

Anti-Patterns

tiny targetsgo no smaller than 16x16

Page 40: Great Experiences With Flex

UI Design

Anti-Patterns

tiny targetsgo no smaller than 16x16

Page 41: Great Experiences With Flex

UI Design

Anti-Patterns

novel notionsintuitive=

familiar, don’t get creative

Page 42: Great Experiences With Flex

UI Design

Anti-Patterns

novel notionsintuitive=

familiar, don’t get creative

Page 43: Great Experiences With Flex

UI Design

Anti-Patterns

novel notionsintuitive=

familiar, don’t get creative

Page 44: Great Experiences With Flex

17

Frameworks Event frameworks

Page 45: Great Experiences With Flex

17

Frameworks Event frameworks

Page 46: Great Experiences With Flex

17

Frameworks Event frameworks

Page 47: Great Experiences With Flex

17

Frameworks Event frameworks

Page 48: Great Experiences With Flex

18

Frameworks

Graphics framework:

charts, mapping,

skinning...

also, take a

look at

ScaleNine for

Flex Skins

Page 49: Great Experiences With Flex

Adobe Tools for

Prototyping

Photoshop +

Catalyst +

Flash Builder

4

1. Start in Photoshop or Illustrator

Page 50: Great Experiences With Flex

Adobe Tools for

Prototyping

2. Import into Flash

Catalyst- then save

project

Photoshop +

Catalyst +

Flash Builder

4

Page 51: Great Experiences With Flex

Adobe Tools for

Prototyping

2. Import into Flash

Catalyst- then save

project

Photoshop +

Catalyst +

Flash Builder

4

Page 53: Great Experiences With Flex

Adobe Tools for

Prototyping

Alternative:

Use skin

templates in

PS, FW or AI:

CS4

Open ‘New Flex Skin’ from the

menu, edit, then ‘Export Flex Skin’