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. 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
  2. “ — 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.
  3. 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
  4. FRAMEWORK CONS ‣ Working with someone else’s code ‣ Learning

    curve ‣ Might not be the best fit for your situation
  5. ROLL YOUR OWN PROS ‣ Ownership ‣ Flexibility ‣ Customization

    ‣ More likely creates HTML/styles for final product ‣ Build up your own component / style library
  6. 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
  7. PROTOTYPING FRAMEWORKS ‣Twitter Bootsrap ‣Zurb Foundation ‣ Gumby ‣ Wirefy

    ‣ Proty ‣ Skeleton ‣ 320 and up ‣ and so on ...
  8. BOOTSTRAP Pros ‣ Popular ‣ Lots of documentation ‣ 4

    default break points ‣ Templates & Components ‣ Active development Cons ‣ Not semantic ‣ Not mobile first (now mobile first)
  9. FOUNDATION Pros ‣ Popular ‣ Mobile first ‣ Optionally semantic

    ‣ Templates & Components ‣ Active development ‣ Paid training available Cons ‣ Only 1 default break point (small/large)
  10. THE GRID ‣ 12 columns (small and large) ‣ Nestable

    ‣ Fluid, with an arbitrary max-width
  11. small-8 within small-12 small-8 within large-5 <div class="row"> <div class="small-12

    large-5 columns"> <div class="row"> <div class="small-8 columns">...</div> </div> </div> </div>
  12. 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
  13. 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
  14. 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