Presentation given by Garth Braithwaite at <a>Flash and the City</a> 2010 in New York City

1. Decrap Your
Application
Garth Braithwaite
@garthdb

2. Decrap Your
Application
Fix it.
Garth Braithwaite
@garthdb

3. Shameless Plugs

4. Shameless Plugs
• RIA Radio (riaradio.com)

5. Shameless Plugs
• RIA Radio (riaradio.com)
• Flex 4 Cookbook (amazon preorder)

6. Shameless Plugs
• RIA Radio (riaradio.com)
• Flex 4 Cookbook (amazon preorder)
• Rain (mediarain.com)

7. Shameless Plugs
• RIA Radio (riaradio.com)
• Flex 4 Cookbook (amazon preorder)
• Rain (mediarain.com)
• Flash and the City (flashandthecity.com)

8. Why are you here?

9. Why are you here?
• My design sucks; help me.

10. Why are you here?
• My design sucks; help me.
• How dare you!?

11. Why are you here?
• My design sucks; help me.
• How dare you!?
• He said poo, teehee.

12. What are you?

13. What are you?
• Developers

14. What are you?
• Developers
• Designers

15. What are you?
• Developers
• Designers
• Both

16. What are you?
• Developers
• Designers
• Both
• Manager

17. What is Design?
• Make things pretty

18. Application Breakdown
Visual Application
Design Architecture
Designer Developer

19. Application Breakdown
Visual Application
Design Architecture
User Experience
Designer Developer

20. Application Breakdown
Visual Application
Design Architecture
Information Architecture
User Experience
Designer Developer

21. Application Breakdown
Visual Application
Design Architecture
Interaction Design
Information Architecture
User Experience
Designer Developer

22. Application Breakdown
Visual Application
Design Architecture
Interaction Design
Information Architecture
User Experience
Designer Developer

23. Information Architect
“Information Architecture is pretty straightforward.
Ultimately, it’s about organizing and prioritizing the
information that will appear on a website
(hierarchies, grouping of elements, structuring
content, etc). And the final deliverable should be a
pretty “basic” and easy-to-understand wireframe.”
– Joshua Lane
BlissfullyAware.com

24. Interaction Design
“The best way I’ve been able to sum up Interaction
Design is that it is “Blueprinting User Behavior”. It’s a
combination of Information Architecture and
Storyboarding.You tend to do the basic set of IA
wireframes, but then add a set of storyboards to
map out how users will interact with various
features on the site.You may also even do some html
prototyping of the interactive elements on the site
just to get a “feel” for how these pieces will work.”
– Joshua Lane
BlissfullyAware.com

25. User Experience
“UX Design is the PINNACLE of web design work.
It not only encompasses Information Architecture
and Interaction Design... but also Marketing, Copy,
Branding, Customer Service, etc... It’s everything that
a user interacts with, and centered around (or
related to) your website. From the order
confirmation emails – to the copy on the site – to
the design & features – to the way the product is
packed and shipped… they ALL make up parts of
User Experience Design. It’s A LOT to think about,
plan for, and coordinate.
– Joshua Lane
BlissfullyAware.com

26. UX
Do it for the Users

27. Empathy
“The brilliance of a good designer is not
defined by her ability to represent the world
as she sees it, but by her trained ability to
represent it as others expect to see it.”
– Nishant Kothary
UX Magazine

28. What’s in it for me?
“Businesses that have increased their investment in
the customer experience over the past three years
report higher customer referral rates and greater
customer satisfaction. Customers turn into
advocates. Customer experience is the sum of all
experiences a customer has with a supplier of goods
or services, over the duration of their relationship
with that supplier.”
– Nick Finck

29. Inner Designer
You Can Do It

30. Developers
“They make stuff that didn’t exist before. They take
the idea living deep inside their head and pull it out,
realizing it in a drawing, prototype, or product.
Unlike most people, they don’t just think about it.
They don’t just brainstorm. They don’t just imagine
something better and then talk themselves out of it.
Instead, they act.”
– Joshua Porter
52 Weeks of UX

31. Designers
“Designers are an odd lot: creative, moody, pensive,
thoughtful, weird. But the one characteristic that
separates designers from others is action. They make
stuff that didn’t exist before. They take the idea living
deep inside their head and pull it out, realizing it in a
drawing, prototype, or product. Unlike most people,
they don’t just think about it. They don’t just
brainstorm. They don’t just imagine something better
and then talk themselves out of it. Instead, they act.”

32. Design CRAP
• Contrast
• Repetition
• Alignment
• Proximity

33. Contrast
• If two items are not intended to be the
same then make them noticeable different.
• Hierarchy of Importance
• Create a focal point.
• Contrast Types:
• typeface, color, spacing, texture, size, etc.

34. Contrast

35. Repetition
• Repeating some aspect(s) of the design
helps maintain continuity.
• Helps define focus
• Repetition Types
• typeface, color, spacing, texture, size, etc.

36. Repetition

37. Alignment
• Every item in a layout should have and
purpose to its position
• Find something else on the page to align
with, even if the two objects are physically
far away from each other.
• Don't center or justify lines of text.
Centering and

38. Alignment

39. Proximity
• Group related items together.
• Items or elements that are not related to
each other should not be in close proximity
to each other.

40. Proximity

41. Summary
• Everyone poos

42. Decrapping Flex
• Flex 4 Skinning NEW
• Flex 4 CSS IMPROVED
• Constraint Based Layout
• Creating Custom Skinnable Components

43. Flex 4 Skinning
Skin Host Host
Component Metadata Component
Property
id Skin Parts
Name
states Skin States SkinState

44. Flex 4 CSS
• Namespace
• s|Button and mx|Button
• Selectors
• s|Button.className #buttonId
• Apply Skin

45. Constraint Based
• width=“100” height=“100”
• vs
• top=“0” bottom=“0” left=“0” right=“0”

46. Custom Skinnable
Components
• Extend s|SkinnableComponent or
s|SkinnableContainer
• Add
• SkinParts
• SkinStates
• Styles

47. Thanks
Garth Braithwaite
@garthdb
garthdb@gmail.com