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

Getting Real with Responsive Wireframes

Jared Ponchot
November 04, 2013

Getting Real with Responsive Wireframes

From Artifact East, 2013

Jared Ponchot

November 04, 2013
Tweet

More Decks by Jared Ponchot

Other Decks in Design

Transcript

  1. Jared Ponchot // @jponch // Artifact East 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 HTLM 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. LIGHT-WEIGHT, LIVING
    DELIVERABLES

    View full-size slide

  8. DISPLAY MODEL
    ‣ Capture the types of displays your site will need
    ‣ Brainstorm the components for each display
    ‣ Prioritize the components for each display
    ‣ Discover patterns
    ‣ Identify the unique things to design for and with

    View full-size slide

  9. DISPLAY
    MODEL WIREFRAME

    View full-size slide

  10. PURPOSE CONTENT
    STYLE
    STRATEGY
    DESIGN
    DEVELOPMENT

    View full-size slide

  11. PURPOSE CONTENT
    STYLE
    WIREFRAMES

    View full-size slide

  12. PURPOSE, NOT PREFERENCE
    PRIORITY, NOT PLACEMENT
    SYSTEMS, NOT PAGES

    View full-size slide


  13. — Victor Papanek
    DESIGN IS THE CONSCIOUS EFFORT
    TO IMPOSE A MEANINGFUL ORDER

    View full-size slide

  14. WHY
    HTML WIREFRAMES?

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  17. — 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


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

    View full-size slide

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

    View full-size slide

  20. USE A FRAMEWORK
    ROLL YOUR OWN?
    or

    View full-size slide

  21. 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

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

    View full-size slide

  23. 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

  24. 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

  25. PROTOTYPING FRAMEWORKS
    ‣Twitter Bootsrap
    ‣Zurb Foundation
    ‣ Gumby
    ‣ Wirefy
    ‣ Proty
    ‣ Skeleton
    ‣ 320 and up
    ‣ and so on ...

    View full-size slide

  26. BOOTSTRAP
    Pros
    ‣ Popular
    ‣ Lots of documentation
    ‣ 4 default break points
    ‣ Templates & Components
    ‣ Active development
    Cons
    ‣ Not semantic
    ‣ Not mobile first (now mobile first)

    View full-size slide

  27. FOUNDATION
    Pros
    ‣ Popular
    ‣ Mobile first
    ‣ Optionally semantic
    ‣ Templates & Components
    ‣ Active development
    ‣ Paid training available
    Cons
    ‣ Only 1 default break point
    (small/large)

    View full-size slide

  28. GETTING STARTED WITH
    FOUNDATION

    View full-size slide

  29. 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

  30. GETTING STARTED
    ‣ Grid
    ‣ Templates
    ‣ Other Goodies

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. small-12 large-6

    ...

    View full-size slide

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

    ...

    View full-size slide

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

    ...
    ...

    View full-size slide

  36. small-10 large-8 large-centered

    ...

    View full-size slide

  37. small-10 large-8 large-uncentered

    ...

    View full-size slide

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

    ...
    ...

    View full-size slide

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



    ...



    View full-size slide

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

    View full-size slide

  41. LET’S GIVE IT A TRY!

    View full-size slide

  42. Site Name
    Portfolio Item Portfolio Item Portfolio Item
    Portfolio Item
    Legal text
    Portfolio Item Portfolio Item
    Navigation
    Portfolio Item Portfolio Item
    Portfolio Item Portfolio Item
    Portfolio Item Portfolio Item
    Legal text
    Menu

    View full-size slide

  43. Site Name
    Portfolio Item Portfolio Item Portfolio Item
    Portfolio Item
    Legal text
    Portfolio Item Portfolio Item
    Navigation
    Portfolio Item Portfolio Item
    Portfolio Item Portfolio Item
    Portfolio Item Portfolio Item
    Legal text
    Menu

    View full-size slide

  44. I’M PARTIAL TO PARTIALS

    View full-size slide

  45. INDEX.HTML
    ‣ index.kit
    ‣ Document Head
    ‣ Primary Navigation
    ‣ Global Footer
    ‣ Document Foot

    View full-size slide

  46. LESSONS FROM
    THE FRONT LINES

    View full-size slide

  47. HELPFUL TIPS
    ‣ Keep sketching
    ‣ Keep innovating
    ‣ Keep it cheap
    ‣ Keep iterating

    View full-size slide

  48. TA DA!
    Jared Ponchot // @jponch // Artifact East 2013

    View full-size slide

  49. HELPFUL LINKS
    ‣ http://foundation.zurb.com
    ‣ 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