Prototyping and Play

August 11, 2015

Session Notes: An Event Apart D.C. 2015

Dave Rupert - @davatron5000


  1. Clicky Image Prototypes
    • InvisionApp: great for UX flows
    • Flinto: mobile app feel
  2. Clicky Motion Prototypes
    • Framer.js
    • Origami
  3. Code Prototypes
    • CodePen
    • Jekyll: static site generator
    • Pattern Lab
    • Frameworks & Libraries

"Spend less time designing the container and more time designing the content" - Trent Walton

"A tool is just an opportunity with a handle" - Kevin Kelly, Co-founder of WIRED Magazine

How We Prototype

Get to code as soon as possible.

A website is not alive until it's in the browser.

Start with sketching
Then go to Photoshop
Get to code as soon as possible
Share what you're building
Don't hoard the process

Web design is a team sport

"Your website is a manifestion of your organization's problems"

Why do you participate?

Group Play = Group Flow

Set goals to match skills

Move faster and have more fun

Benefits of prototypes in the workplace

Solve arguments

"If a picture is worth a thousand words, a prototype is worth a thousand JIRA tickets."

Wow and impress upper management

The cost of not shipping? People quit.

Potential Problems

  1. Too many designers
  2. Didn't code soon enough
Move faster and have more fun!

Filed under: An Event Apart, prototyping, play, Dave Rupert

If you like what you're reading here, consider giving me a follow on twitter.