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

Prototyping with Code (Tampa/St. Pete Front-End Design Meetup)

Tim Knight
October 09, 2014

Prototyping with Code (Tampa/St. Pete Front-End Design Meetup)

This talk provides an overview of some of the concepts I use while rapidly prototyping web applications using HTML, Sass, and jQuery.

Tim Knight

October 09, 2014

More Decks by Tim Knight

Other Decks in Design


  1. Who Is This Guy? • Started learning HTML 3.2 in

    1997 and CSS 1998 while producing a digital magazine on Information Security Analysis • Studied Network Engineering, Industrial Design, Psychology, and Business (I get bored easily) • Working professionally in User Experience and Interactive Design since 2001 • Ninja (no seriously). Black Belt in Kasumi-An Toshindo Ninjutsu Timothy Knight Senior UX Architect GravityFree @timknight
  2. Let’s Talk • Suggestions for consolidating your common tools into

    your personal framework for prototyping • Defining custom components to solve common problems • Discussing my general prototype process • Time for Q & A and maybe some live coding after the talk is over with specific problems/questions
  3. “Static mockups are dead. Interfaces need to be brought to

    life to be understood. And what better way to bring an interface to life than to build it with native materials?” — SCOTT HURFF
  4. Asking if a web designer should know how to code

    is like asking if a painter should know how to mix color.
  5. Think Goal-Oriented • Who are my users and what are

    they trying to accomplish? • How will my product introduce itself to first time users? • How can my product put an understandable, appealing, and controllable face on technology? • How will my product help infrequent and inexperienced users understand how to accomplish their goals while providing depth for advanced users? Alan Cooper, About Face
  6. The Big Points • Organize your common features so you

    don’t have to hunt for them • Keep features separated so they’re easy to remove if necessary • Think about the goals of the user and not just the tasks they are trying to complete • Thumbnail sketch features and determine their relationships • Speed up your code with snippets and Emmet
  7. Reference Links • Middleman: http://middlemanapp.com/ • Ethos Template: https://github.com/timknight/middleman-ethos •

    SassDoc: http://sassdoc.com/ • Emmet: http://emmet.io/ • If you’re new to Sass, and just want to try it without installation be sure to checkout, SassMeister: http://sassmeister.com/