Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Prototyping Style, 2013, Breaking Development

Prototyping Style, 2013, Breaking Development

The slides from my July 23, 2013 Breaking Development presentation on prototyping style in responsive web design.

Ben Callahan

July 23, 2013
Tweet

More Decks by Ben Callahan

Other Decks in Design

Transcript

  1. Ditto! Now with RWD! Linear Workflow CONTENT UX DESIGN FRONT-END

    BACK-END LAUNCH! Me too! Wednesday, July 24, 13
  2. Linear Workflow Problem LAUNCH DESIGN FRONT END BACK END CONTENT

    DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Wednesday, July 24, 13
  3. http://www.zeldman.com/2007/07/02/let-there-be-web-divisions/ “...[A]lmost no one who makes websites works in their

    company or organization’s web division. That’s because almost no company or organization has a web division. And that void on the org chart is one reason we have so many bloated, unusable failures where we should be producing great user experiences.” @zeldman, 2007 Wednesday, July 24, 13
  4. LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS

    MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END Wednesday, July 24, 13
  5. LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS

    MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END UX FRONT-END DESIGN LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Wednesday, July 24, 13
  6. ND DESIGN So, how do we advance design through a

    “1 deliverable” workflow? Wednesday, July 24, 13
  7. DISSECTING DESIGN ‣ Style Comparisons ‣ Style Tiles ‣ Style

    Prototypes Establish the Aesthetic Wednesday, July 24, 13
  8. Style Comparisons ESTABLISH THE AESTHETIC “I could create an illustration

    or a 3D rendering of what I want my new office to look like, but that doesn’t take advantage of his great ideas. It’s dictation, not collaboration. Instead, I show him a Pinterest board my wife and I created.” @danielmall http://danielmall.com/articles/the-post-psd-era/ Wednesday, July 24, 13
  9. DISSECTING DESIGN ‣ Static Design Tools ‣ Responsive Design Tools

    ‣ HTML/CSS Solve the Problem Wednesday, July 24, 13
  10. YOU BEST SOLVE PROBLEMS USING TOOLS YOU ARE FLUENT WITH

    HOW TO DECIDE Wednesday, July 24, 13
  11. Don’t Use Static Design Tools REFINE THE SOLUTION LAUNCH DESIGN

    FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Wednesday, July 24, 13
  12. You don’t want to do the long tail more than

    once REFINE THE SOLUTION Wednesday, July 24, 13
  13. Establish Solve Refine ..... Style Prototype ......... Sketching + PSD

    .... In-Browser Pairing Tools we use at Sparkbox Wednesday, July 24, 13
  14. Group improvisation is a challenge. Aside from the weighty technical

    problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans Wednesday, July 24, 13
  15. Group improvisation is a challenge. Aside from the weighty technical

    problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans Wednesday, July 24, 13
  16. Group improvisation is a challenge. Aside from the weighty technical

    problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans Wednesday, July 24, 13