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.

Transcript

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
23. middleman init [project] -T middleman-ethos https://github.com/timknight/middleman-ethos So I Created a Middleman Template
24. Generate Your Default Structure
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/