2012/08/13

That Conference: How to Rapid Prototype Like A Boss

The next several postings are likely to be brain dumps from sessions I attend at That Conference, so they may not make a ton of sense to those who didn’t attend. But then again, why didn’t you go? It’s being held at a water park in Wisconsin Dells in the summer so you can bring your family along with.

This session was presented by Matthew Carver.

  • Author of forthcoming book “The Responsive Web”
  • Wireframes
    • Can be truly rough hand drawings or digital layouts that are still cheap to produce
    • Until a line of code is written, everything is just theory
    • Wireframes can become a “Comp”: Comprehensive Layout
  • Comps
    • Comps are simply a snapshot of the UI, but they lack the full interactions and responsiveness
    • They’re too rigid
  • Why Prototype
    • Fill in the gaps
    • Can anticipate actual scope of the project
    • Offer site/content managers to start testing out ideas before any actual code is written
  • Tools
    • Foundation 3 by Zurb
      • Uses SASS
    • Bootstrap by Twitter
      • Uses LESS
      • Not built specifically for prototyping
    • HAML
      • Specifically for Rails, but makes for quick view development
    • SASS
      • A CSS3 extension
  • Basics of Prototyping
    • Reach conclusions from the wireframing
    • Placeholder images: placehold.it/300x300 == a 300 x 300 image
    • Foundation had a number of build in button style, which gets more into the art direction instead of just prototyping
    • Visibility classes for different browsers/sizes
Post a Comment