Today we’re going to talk about Making Prototypes… and how to PLAY with prototypes.
TOOLS
There’s about 7 million tools you need to do your job on a daily basis… So we’re in a bit of tool overload.
“Clicky Image” Prototyping tools
- Invisionapp.com – prototyping, collaboration & workflow
- Flinto.com – iOS & Android app prototyping
- Framer.js – you write in coffee script ( a derivative of JS ).
- Origami – building animation in quartz composer
- Codepen.io
- Jekyllrb.com – static site generator, backed by Github
- Patternlab.io
Frameworks & Libraries
- Bootstrap – was built by Twitter but has graduated outside of Twitter now.
- Foundation Zurb – http://foundation.zurb.com/
- IonicFramework.com – mobile only framework that phone gaps
“A tool is just an opportunity with a handle” -Kevin Kelly, Co-founder of WIRED Magazine
It might help you, you don’t have to take it… find the tools that you think may help simplify your life.
HOW WE PROTOTYPE
Goal: get to code as soon as possible.
For him it’s not alive until it’s in the browser and it squeezes and moves and renders bad 🙂
- Start with Sketching – it’s really easy to start brainstorming on paper. Then you can argue about the sketch until everyone is passive aggressively super quiet… and then eventually you come together on the sketch
- Go to Photoshop – Disclaimer #1: JPEGS are LIES, Disclaimer #2: The best JPEG is the one you can actually build. Be conscious that the final product may not look like it does in Photoshop because browsers are browsers, and because it will iterate over time. “The fidelity of your prototype should match the fidelity of your thinking.” – Jared Spool. Plus, your design decisions could already be made if you use something like Pattern Lab!
- Get to Code – JPEG to HTML… You can start drawing divs in your brain from a JPEG, and even labeling things semantically, and even identify possible difficult things like any time JavaScript is needed ever…
- Drop code into CodePen – Here you can experience “the accordion of life.” I dunno, we’ll see if that picks up…. 😉 This is where you can start solving problems that you didn’t see happening on the sketch or the PSD.
- Share what you built – this is a good reason to use CodePen. This is an important step to the process.
Don’t hoard the process
Web design is a team sport – it usually involves clients, designers, developers, CEOs, project managers, etc.
Flow by Mihaly Csiksentmihalyl (book)
The gist of the book: Lowering the challenge level to match the skill level can produce flow.
Where he originally learned about Flow – Japanese biker gangs that terrorized Japan in the 70’s and 80’s. The cause havoc! There were like 40,000 of these guys in Japan!
So they would go on rides and would have a leader and the rule is you’d never go in front of the leader or some bad stuff would happen to you. The leader would try to match the skillset of the ride to the group. So maybe it was just a ride to hang out under a bridge, or maybe it was go fight another biker gang.
Why did these people participate in these
- Being seen
- Communitas
- Play
To him, these are the same reasons he does web design!
Group Play can lead to Group Flow.
Set goals to match skills. This is why prototypes are foundational to making something happen to your team.
If you move faster you have more fun.
Benefits of Prototypes in the Workplace
Prototypes help solve arguments.
Show me your problem with the most minimal amount of code possible so we can troubleshoot it.
Case Study: They were designing a filter / Refine By dropdown and he said “it won’t work because it’s weird.” It was 2 divs with 2 shadows so there was a weird double shadow that was appearing. He used a CSS3 property called filter, where you can essentially apply Photoshop filters to your elements. It doesn’t work in all browsers, though, so there’s that.
If a picture is worth a thousand words, a prototype is worth a thousand meetings (or 1000 JIRA tickets).
WOW and Impress Upper Management with Prototypes
The most expensive way to build a website is to create a design and do all the work before even starting to integrate that design into a CMS / to code it. CEOs and upper management are concerned with the money aspect, so get a prototype out there, get the minimally viable product to get the feedback you need to make sure you’re going down the right path.
THE COST OF NOT SHIPPING
What happens if you spend all this time and money and the project doesn’t go through?
If you don’t have shipping / delivery of products in your company, you could have turnover, you could have people leave!
So how do we start shipping? How do we have little bits of that ‘being seen’ element happening? By prototyping! I think… I may have spaced out after this question because Dave went into a demo 🙂
—-
About Dave:
He’s located in Austin, TX
What we can learn about prototyping from Japanese biker gangs.
He majored in Asian Culture and Japanese a.k.a. Anime.
Helped Microsoft redesign their website
ShopTalkShow.com – the intersection of fart sounds and web design
RetailMeNot.com
Really sad we missed this 🙁 Sounds like it was a great talk. If you’re doing another one in the future, please let us know. We can help out!
[email protected]