Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

From PDFs to HTML Prototypes

Drawing static pictures and annotating them in a laborious, impenetrable Word document or PDF doesn’t cut it anymore. The richest communication tool is to depict an actual experience in prototype form. And for the web sites and applications we work on most, no form is closer to the real thing than the real thing: an HTML prototype.

Over the past two years, EightShapes has transformed it’s UX design practice to empower all designers – from information architects to visual experts – to utilize HTML prototypes as the leading, iterative communications device for a project. The learning curve is gentle for some, steep for others. But it’s made us all better designers and more effective communicators over time.

  • Login to see the comments

From PDFs to HTML Prototypes

  1. From PDFs toHTML PrototypesMaking the Transition as a UX DesignerUser Focus 2012, Washington, DC #pdf2html @NathanACurtis
  2. #pdf2htmlCONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
  3. My Daily Context: EightShapes UXer UXer UXer UXer UXer Prototyper Prototyper Prototyper UXer UXer UXer UXer Prototyper Prototyper Prototyper Prototyper PrototyperCONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
  4. E! E! E! R AM AM AM F FR F R RE IRE RE WI W WI Communicating Design Modular Web Design EightShapes Unify Dan Brown Nathan Curtis InDesign UX Templates Second Edition, 2010 2009 26,000+ downloads since 2009CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
  5. Prototype? Wireframes Comps Code Paper SketchesFrom PDFs to Prototypes #pdf2html @nathanacurtis
  6. HTML Production Comps Prototype Code Paper SketchesFrom PDFs to Prototypes #pdf2html @nathanacurtis
  7. Vector Drawings Paper HTML Production Drawings Prototype Code CompFrom PDFs to Prototypes #pdf2html @nathanacurtis
  8. Changing Our Process @eightshapes’ Effort: PDF Wireframing vs HTML Prototyping 100% Retooling 80% 60% 40% 20% 2010 2011 2012From PDFs to Prototypes #pdf2html @nathanacurtis
  9. “Yeah, I know HTML & CSS.” [Any designer I’ve ever encountered]From PDFs to Prototypes #pdf2html @nathanacurtis
  10. Spectrum of Skill Person “Yeah, I know HTML & CSS” “Yeah, I know HTML & CSS” “Yeah, I know HTML & CSS” Experience Worked with Architected front-end for Limited hands on experience, Perl > Java > ASP > for 6 years but speaks the language Lots of HTML, CSS, & JS Delivers production Hacks it from time to time but not much since 2003 “UI Tech” to any client Confidence Lower, but achieves small wins High, proves designs in projects Highest, as our mentor HTML Prototyping Frequency When opportunity, time permits Most design projects Every project: design & deliveryFrom PDFs to Prototypes #pdf2html @nathanacurtis
  11. Developing Designer Skills New Hire Another New Hire HTML CSS JavaScript Designer Production Ready to Prototype! Grade Stuff Senior New Hire: “UI Tech”-capable Designer-only Developer Transitioning to UXFrom PDFs to Prototypes #pdf2html @nathanacurtis
  12. From PDFs to Prototypes #pdf2html @nathanacurtis
  13. Initial ThumbnailsFrom PDFs to Prototypes #pdf2html @nathanacurtis
  14. IPEVO P2V Camera $69 Review #1: Buy-InFrom PDFs to Prototypes #pdf2html @nathanacurtis
  15. Review #2: Prove It WorksFrom PDFs to Prototypes #pdf2html @nathanacurtis
  16. Prototypes Merge Everything content structure visual interaction PDFs to Prototypes #pdf2html @nathanacurtis
  17. CompFrom PDFs to Prototypes #pdf2html @nathanacurtis
  18. PDFs to Prototypes #pdf2html @nathanacurtis
  19. Client Review Agenda Prototype Comp Integrate Comp into Prototype m in min 20 40From PDFs to Prototypes #pdf2html @nathanacurtis
  20. You’ve Got 3 Hours. Divide, conquer, and... I’ll take the framework & image parts. I’ve got the layouts within each component.From PDFs to Prototypes #pdf2html @nathanacurtis
  21. So, our concept for a more interactive Constitution is... Review #3: Sell It to the SponsorsFrom PDFs to Prototypes #pdf2html @nathanacurtis
  22. IMPROVING HOW WE COLLABORATE VIA... Paired Prototyping +From PDFs to Prototypes #pdf2html @nathanacurtis
  23. Project: Responsive Product Pages Beta Desktop Tablet? Handset ? ? Category Series / ModelsFrom PDFs to Prototypes #pdf2html @nathanacurtis
  24. Setup: Working Side-by-Side, Constantly Apple Cinema Display Apple Cinema Display Browser(s) Browser(s) Text Editor Photoshop Visual Designer UX Designer / Prototyper Roam Icons ( are great for prototyping sprites as well as slides like this!From PDFs to Prototypes #pdf2html @nathanacurtis
  25. Client Review: 90%+ Prototype Look Ma! Responsive Tables! Responsive Content Responsive ColumnsFrom PDFs to Prototypes #pdf2html @nathanacurtis
  26. What EightShapes What EightShapes Used to Produced as Demonstrate and “Intermediate Waste” Facilitates Decisions Vector Drawings Paper Producti Drawings Prototype Code CompFrom PDFs to Prototypes #pdf2html @nathanacurtis
  27. What’s Really In There? How many pages did you build? Did you build Exhibitions pages? When did you last update this? Do you have other examples of this page? What’s changed? What’s done? Can I click on Van Gogh? Where can I navigate?From PDFs to Prototypes #pdf2html @nathanacurtis
  28. So, Where Do You Start? VS Classical Document HTML Prototyping Setting the stage with the Setting the stage with the table of contents. ...first page you see?From PDFs to Prototypes #pdf2html @nathanacurtis
  29. Marking Up a Page Toggle MarkersFrom PDFs to Prototypes #pdf2html @nathanacurtis
  30. Adding Custom Notes Exit “Full Screen” ed at om t Au es t No m o st CuFrom PDFs to Prototypes #pdf2html @nathanacurtis
  31. Setting the Stage with a Grid HTML Prototyping Setting the stage with the grid of pages you’ll cover, as pictures, before diving into the first one.From PDFs to Prototypes #pdf2html @nathanacurtis
  32. @8SBlocks EightShapes BlocksFrom PDFs to Prototypes #pdf2html @nathanacurtis
  33. Twitter Bootstrap Foundation YUIFrom PDFs to Prototypes #pdf2html @nathanacurtis
  34. When to Build a Prototyping Library? Constitution? Goodness no, it’s a one off. Absolutely. Lots of content, thousands of pages, evolves over years. PDFs to Prototypes #pdf2html @nathanacurtis
  35. Custom LibraryFrom PDFs to Prototypes #pdf2html @nathanacurtis
  36. All The Components In the {prototype root}/library/components/ folderFrom PDFs to Prototypes #pdf2html @nathanacurtis
  37. Pages Library Folder Components CSS, Per Component ImagesCONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
  38. Shared Library Starting a Project My Project Folder Copy from Library Sync with GithubFrom PDFs to Prototypes #pdf2html @nathanacurtis
  39. Starter PagesFrom PDFs to Prototypes #pdf2html @nathanacurtis
  40. Starter Page Template Loading data-variations from data-source=”library”From PDFs to Prototypes #pdf2html @nathanacurtis
  41. So, why do we prototype? It brings people together. It brings design concerns together. It produces better design.From PDFs to Prototypes #pdf2html @nathanacurtis
  42. Thanks!From PDFs to Prototypes #pdf2html @nathanacurtis