• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Decrap Your Application
 

Decrap Your Application

on

  • 740 views

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

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

Statistics

Views

Total Views
740
Views on SlideShare
730
Embed Views
10

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 10

http://www.slideshare.net 10

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Decrap Your Application Decrap Your Application Presentation Transcript

  • Decrap Your Application Garth Braithwaite @garthdb
  • Decrap Your Application Fix it. Garth Braithwaite @garthdb
  • Shameless Plugs
  • Shameless Plugs • RIA Radio (riaradio.com)
  • Shameless Plugs • RIA Radio (riaradio.com) • Flex 4 Cookbook (amazon preorder)
  • Shameless Plugs • RIA Radio (riaradio.com) • Flex 4 Cookbook (amazon preorder) • Rain (mediarain.com)
  • Shameless Plugs • RIA Radio (riaradio.com) • Flex 4 Cookbook (amazon preorder) • Rain (mediarain.com) • Flash and the City (flashandthecity.com)
  • Why are you here?
  • Why are you here? • My design sucks; help me.
  • Why are you here? • My design sucks; help me. • How dare you!?
  • Why are you here? • My design sucks; help me. • How dare you!? • He said poo, teehee.
  • What are you?
  • What are you? • Developers
  • What are you? • Developers • Designers
  • What are you? • Developers • Designers • Both
  • What are you? • Developers • Designers • Both • Manager
  • What is Design? • Make things pretty
  • Application Breakdown Visual Application Design Architecture Designer Developer
  • Application Breakdown Visual Application Design Architecture User Experience Designer Developer
  • Application Breakdown Visual Application Design Architecture Information Architecture User Experience Designer Developer
  • Application Breakdown Visual Application Design Architecture Interaction Design Information Architecture User Experience Designer Developer
  • Application Breakdown Visual Application Design Architecture Interaction Design Information Architecture User Experience Designer Developer
  • 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
  • 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
  • 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
  • UX Do it for the Users
  • 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
  • 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
  • Inner Designer You Can Do It
  • 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
  • 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.”
  • Design CRAP • Contrast • Repetition • Alignment • Proximity
  • 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.
  • Contrast
  • Repetition • Repeating some aspect(s) of the design helps maintain continuity. • Helps define focus • Repetition Types • typeface, color, spacing, texture, size, etc.
  • Repetition
  • 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
  • Alignment
  • Proximity • Group related items together. • Items or elements that are not related to each other should not be in close proximity to each other.
  • Proximity
  • Summary • Everyone poos
  • Decrapping Flex • Flex 4 Skinning NEW • Flex 4 CSS IMPROVED • Constraint Based Layout • Creating Custom Skinnable Components
  • Flex 4 Skinning Skin Host Host Component Metadata Component Property id Skin Parts Name states Skin States SkinState
  • Flex 4 CSS • Namespace • s|Button and mx|Button • Selectors • s|Button.className #buttonId • Apply Skin
  • Constraint Based • width=“100” height=“100” • vs • top=“0” bottom=“0” left=“0” right=“0”
  • Custom Skinnable Components • Extend s|SkinnableComponent or s|SkinnableContainer • Add • SkinParts • SkinStates • Styles
  • Thanks Garth Braithwaite @garthdb garthdb@gmail.com