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

Getting Real with Responsive Wireframes

Getting Real with Responsive Wireframes

From Artifact Austin 2013: It's becoming clear that it's preferable to transfer your designs into code as early in the process as possible, and using a grid or a framework can give you a head start. But how do you use them? Jared introduces the best options and translates a sketch to an HTML prototype before your eyes!

Jared Ponchot

May 13, 2013
Tweet

More Decks by Jared Ponchot

Other Decks in Design

Transcript

  1. Jared Ponchot // @jponch // Artifact Austin 2013
    With Responsive Wireframes
    GETTING REAL

    View full-size slide

  2. HI, MY NAME IS
    JARED PONCHOT
    & I’m a unicorn

    View full-size slide

  3. 1.
    WHY WIREFRAME
    2.
    WHY WORKING WIREFRAMES
    3.
    HOW TO

    View full-size slide

  4. WHY WIREFRAME

    View full-size slide

  5. CHEAP & UGLY

    View full-size slide

  6. FURTHER CLARIFY ...
    CONTENT, STRUCTURE &
    PRIORITY

    View full-size slide

  7. (lately)
    DESIGN DELIVERABLES
    ‣ Purpose Document
    ‣ Content Model
    ‣ Component Hierarchy
    Document
    ‣ Responsive Wireframes
    ‣ Style Explorations
    ‣ Styled Wireframe
    ‣ Component Collage

    View full-size slide

  8. PURPOSE CONTENT
    & HIERARCHY
    SYSTEMS
    & STYLE
    STRATEGY
    DESIGN
    DEVELOPMENT

    View full-size slide

  9. PURPOSE CONTENT
    & HIERARCHY
    SYSTEMS
    & STYLE
    WIREFRAMES

    View full-size slide


  10. — Victor Papanek
    DESIGN IS THE CONSCIOUS EFFORT
    TO IMPOSE A MEANINFUL ORDER

    View full-size slide

  11. WHY
    RESPONSIVE WIREFRAMES?

    View full-size slide

  12. http://imgur.com/a/q1WIO

    View full-size slide

  13. Photo by lukew http://www.flickr.com/photos/lukew/7382743430/in/photostream

    View full-size slide


  14. — from 37Signals “Getting Real”
    GETTING REAL DELIVERS BETTER RESULTS
    BECAUSE IT FORCES YOU TO DEAL WITH
    THE ACTUAL PROBLEMS YOU'RE TRYING
    TO SOLVE INSTEAD OF YOUR IDEAS ABOUT
    THOSE PROBLEMS. IT FORCES YOU TO
    DEAL WITH REALITY.

    View full-size slide


  15. — from the Agile Manifesto
    WORKING SOFTWARE ALWAYS TRUMPS
    DOCUMENTS ABOUT WORKING SOFTWARE.

    View full-size slide

  16. BONUS REASON:
    IT’S NOT THAT HARD!

    View full-size slide

  17. USE A FRAMEWORK
    ROLL YOUR OWN?
    or

    View full-size slide

  18. FRAMEWORK PROS
    ‣ Low learning curve
    ‣ Speed
    ‣ Built-in grid
    ‣ Built-in styles
    ‣ Built-in components (some)
    ‣ Pre-tested in browsers
    ‣ Open-source community
    ‣ Widespread use
    ‣ Support
    ‣ Upgrades & updates
    ‣ Easy knowledge transfer

    View full-size slide

  19. FRAMEWORK CONS
    ‣ Working with someone else’s code
    ‣ Learning curve
    ‣ Might not be the best fit for your situation

    View full-size slide

  20. ROLL YOUR OWN PROS
    ‣ Ownership
    ‣ Flexibility
    ‣ Customization
    ‣ More likely creates HTML/styles for final product
    ‣ Build up your own component / style library

    View full-size slide

  21. ROLL YOUR OWN CONS
    ‣ Initial time/thought investment
    ‣ Lots of choices to be made (grid, directory structure, etc.)
    ‣ Possibly longer implementation time
    ‣ On your own for support & testing
    ‣ Create your own documentation

    View full-size slide

  22. PROTOTYPING FRAMEWORKS
    ‣ Twitter Bootsrap
    ‣ Zurb Foundation
    ‣ Skeleton

    View full-size slide

  23. BOOTSTRAP
    Pros
    ‣ Popular
    ‣ Lots of documentation
    ‣ 5 break points
    ‣ Templates & Components
    ‣ Active development
    Cons
    ‣ Not semantic
    ‣ Not mobile rst

    View full-size slide

  24. SKELETON
    Pros
    ‣ Good documentation
    ‣ 5 break points
    Cons
    ‣ Not popular
    ‣ Not semantic
    ‣ Not mobile rst

    View full-size slide

  25. FOUNDATION
    Pros
    ‣ Popular
    ‣ Mobile rst
    ‣ Optionally semantic
    ‣ Templates & Components
    ‣ Active development
    ‣ Paid training available
    Cons
    ‣ Only 1 break point

    View full-size slide

  26. GETTING STARTED WITH
    FOUNDATION

    View full-size slide

  27. THE PLACES YOU’LL GO
    ‣ DOWNLOAD: http://foundation.zurb.com
    ‣ DOCUMENTATION: http://foundation.zurb.com/docs/
    ‣ TEMPLATES: http://foundation.zurb.com/templates.php

    View full-size slide

  28. GETTING STARTED
    ‣ Grid
    ‣ Templates
    ‣ Other Goodies

    View full-size slide

  29. THE GRID
    ‣ 12 columns (small and large)
    ‣ Nestable
    ‣ Fluid, with an arbitrary max-width

    View full-size slide

  30. x = number of grid columns
    Small screen: “small-x columns”
    Large screen: “large-x columns”

    View full-size slide

  31. small-12 large-8

    ...

    View full-size slide

  32. small-12 large-8 large-offset-4

    ...

    View full-size slide

  33. small-12 large-8 large-offset-3

    ...
    ...

    View full-size slide

  34. small-10 large-8 large-centered

    ...

    View full-size slide

  35. small-10 large-8 large-uncentered

    ...

    View full-size slide

  36. small-12 large-8 & large-4

    ...
    ...

    View full-size slide

  37. small-8 within small-12
    small-8 within large-5



    ...



    View full-size slide

  38. COMPONENTS & ELEMENTS
    ‣ Navigation
    ‣ Buttons
    ‣ Forms
    ‣ Typography
    ‣ Components

    View full-size slide

  39. LET’S GIVE IT A TRY!

    View full-size slide

  40. [insert_terrifying_live_demo]

    View full-size slide

  41. HELPFUL LINKS
    ‣ http://foundation.zurb.com
    ‣ http://susy.oddbird.net
    ‣ http://html5boilerplate.com
    ‣ http://incident57.com/codekit/
    ‣ http://html5doctor.com
    ‣ http://www.dontfeartheinternet.com/
    html/html
    ‣ http://www.codeschool.com/courses/
    assembling-sass
    ‣ http://bradfrost.github.io/this-is-
    responsive/resources.html#frameworks

    View full-size slide

  42. THANKS!
    Jared Ponchot // @jponch // Artifact Austin 2013

    View full-size slide