Your SlideShare is downloading. ×
We're Doing It Wrong: Prototyping The Future Of The Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

We're Doing It Wrong: Prototyping The Future Of The Web

1,245
views

Published on

Published in: Design, Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,245
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. We’re Doing It Wrong Prototyping the Future of the Web Steve Hickey — @stevehickeydsgn UX Designer & Developer at Fresh Tilled Soil
  • 2. Requirements Research Ideate Design Code Launch A brief “reminder” of waterfall.
  • 3. Plan Design Develop Test Build MeasureLearn What about agile or lean?
  • 4. ¡Mentirosos! (Liars!)
  • 5. The traditional point of first contact... Requirements Research Ideate Design Code Launch
  • 6. “D t!”**** ... and its result.
  • 7. But it’s ok. We can fix that. Research/Understand Ideate Design CodeTest and repeat... & Design & Code & Ideate & Code & Ideate & Design
  • 8. Step 1 → Step 2 → Step 3 → Step 4 = Very Pretty BULLSHIT
  • 9. “Design is not just what it looks like and feels like. Design is how it works.” Today’s obligatory Steve Jobs quote.
  • 10. “Form ever follows function.” A grating reminder of something we all claim to know, from architect Louis Sullivan.
  • 11. Understanding the problem.
  • 12. Ideation through sketching.
  • 13. “Great is the enemy of good.” Paraphrased from Voltaire, an enlightened dude.
  • 14. Wireframes. Or are they...
  • 15. Wireframes. Or are they...
  • 16. Testable. ASAP.
  • 17. Sketches are prototypes in waiting.
  • 18. prototyping on paper
  • 19. The usual suspects: Balsamiq Axure InDesign Keynote PowerPoint
  • 20. Try a storyboarding app. Briefs Flinto Proto.io
  • 21. HTML/CSS/JS
  • 22. Developers need love too.
  • 23. Fake it. localStorage.setItem(‘username’, ‘Gary’); var username = localStorage.getItem(‘username’); $(‘div.userinfo’).prepend(‘<h2>’ + username + ‘</h2>’); ======================================================= <h2>Gary</h2>
  • 24. Make your client fall in love.
  • 25. Time to test.
  • 26. “OK, but what about design?”
  • 27. Mockups = Useless
  • 28. Try zooming your comps out.
  • 29. Style tiles use time efficiently.
  • 30. Design in the browser.
  • 31. Use the right tool for the job.
  • 32. Let’s see some examples:
  • 33. Google Glass
  • 34. “We were working with the HUD literally on my first day at work. And learning a tremendous number of things that you couldn’t possibly just guess or estimate, or print out on a spreadsheet, or a project map, and that sort of thing.” Tom Chi, Google
  • 35. “Your ears can take a lot more weight than your nose… So if you can create a system where the ear becomes a fulcrum, then the perceptual weight disappears. This took me about two hours to figure out.” Tom Chi, Google
  • 36. Incantor
  • 37. Our first prototype.
  • 38. Look, I’m no Olivander. Ok?
  • 39. Here’s how we overcame my lack of magic.
  • 40. We made the nav work without looking.
  • 41. Let’s wrap up.
  • 42. 1) Sketch a lot, it’s quick and efficient. 2) Stop wireframing, start prototyping. 3) Test early and often. 4) Avoid comps for every screen and state. 5) Eliminate redundant parts of your workflow. 6) Process is not a straight line.
  • 43. Thanks!