Tim Burners-Lee is the creator of the World Wide Web. He’s the creator of the reason we are all here! The WWW is AWESOME!

When he wrote a proposal about the world wide web, his boss gave him feedback saying “vague but exciting…”

These words can teach us a lot about how we create new ideas. Ideas are meant to be messy, but they also need to EXCITE!!! If they don’t excite, they just die. If the idea for the WWW didn’t excite Tim Burners-Lee’s boss,

The Art of Prototyping 

Types of prototypes:

Clickthrough prototypes like invision

Valuable for feeling out a flow

Motion prototypes like framerjs

You can experience motion

Code prototypes like HTML/CSS/JS

When you make prototypes in code, you’re now dealing with the raw materials of the web. You’re faced with the limitations of devices. If you make something in HTML and put it on 100 devices in your device lab, suddenly you realize your big idea doesn’t work as well as you thought it did.

“If you can’t CodePen it, you probably shouldn’t be doing it.”

If it can exist in code you’re way better off.

Sketching prototypes

Anyone can do this and provide information about what they’re thinking with even the simplest of sketches.

Blog posts (“Word prototypes”)

These are really helpful for our thinking! If you can write out your idea in a well thought out article with reasoning and logic, this is a great way to mature an idea!

In Dave’s opinion, the best book on Web Design is Understanding Comics, The Invisible Art by Scot McCloud. Because web design is also a visual communication media. One parallel Dave wants to draw is that of realism in graphics and ‘projection.’ You can move from a real photograph of a face to a sketch that is still realistic, to a simplified version of that face, all the way down to the icon version of that face with two dot eyes, a mouth, and a circle head. You don’t know anything about that face but you do know it’s a face.

Scott McCloud says that when someone looks at the realistic version of a face, they see someone else. But, when they look at the simplified icon version of the face, they see themselves. WHAAAAAA???? Therefore, projection is basically a superpower!

Being at the lower end of that spectrum allows people to project their ideas, their excitement, themselves, onto the thing you’re making. That’s why he thinks prototyping fits into this world.

Exciting means different things to different people. To some people it means business, money, design, development, etc.

Things Dave has learned about prototyping:

1. Get to code as soon as possible – in code you really start to understand the problems and see the limitations of the platform. If you can’t code, pair with a developer.
2. Be fast. Keep momentum. – If a prototype stalls out, it stops being fun and then it becomes a project and starts being work. This crushes the spirit of things. Find ways that you can keep momentum even if you have to falsely time box things.
3. Keep experiments away from production as long as possible – people get surprisingly vocal when you start doing something that might affect what they do. If you want to STOP productivity, just change the navigation and you’ll be shocked at who speaks up vocally about why a link MUST STAY THERE!
4. “Find out if it’s a dumb idea as fast as possible” – Dave Rupert

What Went Right and What Went Wrong – a post mortem of 155 game designs found on the Microsoft Research Center website. 

1. 1. “Prescribe to an iterative development process, and utilize prototypes as a method of proving features and concepts before committing them to your design”
   2. Don’t be overly ambitious in your design
   3. Be reasonable
   4. Take into account your schedule an budget before adding something to your design
   5. Don’t be overly optimistic with your scheduling
   6. If you make an estimate that feels optimistic to you, don’t give that estimate to your stakeholders.

Prototyping your way to “Minimum Viable Product” 

When looking at a complex problem, look at it in solvable chunks. You just need to know what to solve next. If you solve that, you’ll have more information on whether the next bit is possible.

Prototype before committing.

The 4 Hour Chunk

This is Dave’s approach to prototyping ideas. A ‘chunk’ to him is a weird unit, but it’s like – is there a solvable problem I can do in about 4 hours? The reason he picked 4 hours is because it’s the size of a morning, it’s the size of an afternoon, and it’s the size of time after the kids go to bed before he regrets staying up.

Try something for 4 hours… then try it more, work on it for 8 hours. Then share it! There’s a revolutionary idea of talking to your coworkers… do it! ?

He’s learned that every feature he wants to add turns into another day of work.

Try your idea. Just try it! Try it. Try it! Just try it!

Out of the first 25 guests on Responsive Web Design podcast, 21 of them mentioned prototyping as an integral portion of the design process! If you’re not doing it, do it.

Recommended Book: Sprint by Jake Knapp (How to solve big problems and test new ideas in just five days). You have a designer, developer, decider, facilitator, and 4 ‘floaters’ who are interested in the project/problem. Here’s the schedule:

1. Monday: map out problem
2. Tuesday: Sketch out ideas independently of each other
3. Wednesday: Decide which one you want to do
4. Thursday: Build out the prototype
5. Friday: Show it to people! Test.

If a week is too long for you, go to a Startup Weekend! This is a way to do an idea and validate it and execute it in a weekend. It’s like Crossfit for learning how to work fast. You could also do a hackathon at your work or something.

Daydream VR

Announced at Google IO. It’s replacing their Cardboard platform. They dropped that they built 60 prototypes in 30 weeks. That’s 2 prototypes a week from this team. That’s a LOT of learning in half a year. At the end of each week, they had people test out the VR experiences and give them feedback.

Dave keeps repeating that a DESIGNER and a DEVELOPER need to TALK TO EACH OTHERRRR!

80% is better than 90% in terms of feedback (showing someone something that is 80% done is better than showing someone something that’s 90% done). They found more success with a rougher prototype. If the prototype was mostly done, you’d get criticism on things like the shade of green used for ____.

How Dave is being Vague but Exciting: 

Dave had a crisis recently, wondering “are website just List and Details views over and over?!”

Boredom begets boredom. If you’re bored, you get more bored.

SVG Animations is something Dave is doing in his spare time that is getting him excited and less bored. They’re really cool! Plus the web has none of the limitations of print – you can have it do anything you want!! Try things!

Morph SVG is pretty sweet. You set up a timeline and morph one SVG to another SVG using an easing function.

WebVR – A-FRAME (http://aframe.io). You write some code and you have a full VR experience in front of you! How cool that you can build experiences like this with just a few lines of HTML. Plus this is all standard-y stuff.

Summary:

• Validate ideas in prototypes as early as possible
• Use code
• Set a tight deadline
• Share what you’ve learned
• Designers and developers need to work together (and talk)
• Work in solvable chunks
• Every feature you add, adds an extra day of work (for somebody)

@davatron5000
paravelinc.com
shoptalkshow.com