Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Decrap Your Application

675 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Decrap Your Application

  1. 1. Decrap Your Application Garth Braithwaite @garthdb
  2. 2. Decrap Your Application Fix it. Garth Braithwaite @garthdb
  3. 3. Shameless Plugs
  4. 4. Shameless Plugs • RIA Radio (riaradio.com)
  5. 5. Shameless Plugs • RIA Radio (riaradio.com) • Flex 4 Cookbook (amazon preorder)
  6. 6. Shameless Plugs • RIA Radio (riaradio.com) • Flex 4 Cookbook (amazon preorder) • Rain (mediarain.com)
  7. 7. Shameless Plugs • RIA Radio (riaradio.com) • Flex 4 Cookbook (amazon preorder) • Rain (mediarain.com) • Flash and the City (flashandthecity.com)
  8. 8. Why are you here?
  9. 9. Why are you here? • My design sucks; help me.
  10. 10. Why are you here? • My design sucks; help me. • How dare you!?
  11. 11. Why are you here? • My design sucks; help me. • How dare you!? • He said poo, teehee.
  12. 12. What are you?
  13. 13. What are you? • Developers
  14. 14. What are you? • Developers • Designers
  15. 15. What are you? • Developers • Designers • Both
  16. 16. What are you? • Developers • Designers • Both • Manager
  17. 17. What is Design? • Make things pretty
  18. 18. Application Breakdown Visual Application Design Architecture Designer Developer
  19. 19. Application Breakdown Visual Application Design Architecture User Experience Designer Developer
  20. 20. Application Breakdown Visual Application Design Architecture Information Architecture User Experience Designer Developer
  21. 21. Application Breakdown Visual Application Design Architecture Interaction Design Information Architecture User Experience Designer Developer
  22. 22. Application Breakdown Visual Application Design Architecture Interaction Design Information Architecture User Experience Designer Developer
  23. 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. 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. 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. 26. UX Do it for the Users
  27. 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. 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. 29. Inner Designer You Can Do It
  30. 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. 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. 32. Design CRAP • Contrast • Repetition • Alignment • Proximity
  33. 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. 34. Contrast
  35. 35. Repetition • Repeating some aspect(s) of the design helps maintain continuity. • Helps define focus • Repetition Types • typeface, color, spacing, texture, size, etc.
  36. 36. Repetition
  37. 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. 38. Alignment
  39. 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. 40. Proximity
  41. 41. Summary • Everyone poos
  42. 42. Decrapping Flex • Flex 4 Skinning NEW • Flex 4 CSS IMPROVED • Constraint Based Layout • Creating Custom Skinnable Components
  43. 43. Flex 4 Skinning Skin Host Host Component Metadata Component Property id Skin Parts Name states Skin States SkinState
  44. 44. Flex 4 CSS • Namespace • s|Button and mx|Button • Selectors • s|Button.className #buttonId • Apply Skin
  45. 45. Constraint Based • width=“100” height=“100” • vs • top=“0” bottom=“0” left=“0” right=“0”
  46. 46. Custom Skinnable Components • Extend s|SkinnableComponent or s|SkinnableContainer • Add • SkinParts • SkinStates • Styles
  47. 47. Thanks Garth Braithwaite @garthdb garthdb@gmail.com

×