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. Prototyping with Code Developing Your Toolkit for Rapid Prototyping Tim

    Knight! @timknight
  2. 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
  3. 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
  4. “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
  5. Asking if a web designer should know how to code

    is like asking if a painter should know how to mix color.
  6. Building Your Code Foundation Consolidating your common tools into your

    own framework
  7. Pick Your Favorite Layout Tool

  8. No, you really don’t need to make it yourself.

  9. Add Common UI Components

  10. Add Common Features

  11. Contextually Load the Features You Need

  12. Plan for Transactional Email

  13. Add Custom Components Build Sass functions and mixins that you

    can use anytime
  14. Account for Mobile

  15. Create a Library of Your Common Effects

  16. No Fold, But Put Your Important Shit On Top

  17. Define Your Common Patterns

  18. Simplify Your Conventions

  19. Account for Annoying Details Credit to Guil Hernandez on the

    palette function
  20. Document with SassDoc

  21. Putting It All to Good Use Adding everything you’ve put

    together into your workflow
  22. None
  23. middleman init [project] -T middleman-ethos https://github.com/timknight/middleman-ethos So I Created a

    Middleman Template
  24. Generate Your Default Structure

  25. None
  26. 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
  27. Thumbnail Sketch Features and Relationships

  28. Layout Templates Speed Up New Pages

  29. Frontmatter is Used for Location & Meta Data

  30. Frontmatter is Used for Location & Meta Data

  31. Once You Figure Out Structure. Use Emmet.

  32. Sketch, Code, Rinse, Repeat

  33. 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
  34. Questions?

  35. Thank You! Tim Knight! @timknight

  36. 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/