From PDFs to HTML Prototypes

  • View

  • Download

Embed Size (px)


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.

Text of From PDFs to HTML Prototypes

  • 1. From PDFs toHTML PrototypesMaking the Transition as a UX DesignerUser Focus 2012, Washington, @NathanACurtis

2. #pdf2htmlCONFIDENTIAL and PROPRIETARY Do Not Share Without Permission 3. My Daily Context:EightShapesUXerUXer UXerUXer UXerPrototyper Prototyper PrototyperUXer UXer UXerUXerPrototyper Prototyper Prototyper Prototyper PrototyperCONFIDENTIAL and PROPRIETARY Do Not Share Without Permission 4. E! E!E! R AM AMAMFFR F RREIRE RE WIW WI Communicating DesignModular Web DesignEightShapes Unify Dan Brown Nathan Curtis InDesign UX Templates Second Edition, 2010200926,000+ downloads since 2009CONFIDENTIAL and PROPRIETARY Do Not Share Without Permission 5. Prototype? WireframesComps Code PaperSketchesFrom PDFs to Prototypes #pdf2html @nathanacurtis 6. HTML Production CompsPrototype Code PaperSketchesFrom PDFs to Prototypes #pdf2html @nathanacurtis 7. VectorDrawingsPaper HTMLProduction Drawings PrototypeCode CompFrom PDFs to Prototypes #pdf2html @nathanacurtis 8. Changing Our Process@eightshapes Effort:PDF Wireframing vsHTML Prototyping100%Retooling80%60%40%20%2010 20112012From PDFs to Prototypes #pdf2html @nathanacurtis 9. Yeah, I know HTML & CSS.[Any designer Ive ever encountered]From PDFs to Prototypes #pdf2html @nathanacurtis 10. Spectrum of Skill Person Yeah, I know HTML & CSSYeah, I know HTML & CSSYeah, I know HTML & CSS Experience Worked withArchitected front-end for sprint.comLimited hands on experience, Perl > Java > ASP > for 6 yearsbut speaks the languageLots of HTML, CSS, & JSDelivers productionHacks it from time to timebut not much since 2003 UI Tech to any clientCondence Lower, but achieves small winsHigh, proves designs in projects Highest, as our mentor HTML Prototyping FrequencyWhen opportunity, time permitsMost design projectsEvery project: design & deliveryFrom PDFs to Prototypes #pdf2html @nathanacurtis 11. Developing Designer Skills New Hire Another New HireHTMLCSSJavaScriptDesignerProductionReady to Prototype! Grade StuSeniorNew Hire: UI Tech-capableDesigner-onlyDeveloper 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 AgendaPrototype Comp Integrate Comp into Prototypem in min 20 40From PDFs to Prototypes #pdf2html @nathanacurtis 20. Youve Got 3 Hours. Divide, conquer, and... Ill take the framework & image parts. Ive 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, ConstantlyApple Cinema DisplayApple Cinema Display Browser(s) Browser(s)Text Editor PhotoshopVisual 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 ContentResponsive ColumnsFrom PDFs to Prototypes #pdf2html @nathanacurtis 26. What EightShapesWhat EightShapes Used to Produced as Demonstrate andIntermediate WasteFacilitates Decisions VectorDrawingsPaper Producti DrawingsPrototypeCode CompFrom PDFs to Prototypes #pdf2html @nathanacurtis 27. Whats Really In There? How many pages did you build? Did you buildExhibitions pages?When did you lastupdate this?Do you have otherexamples of this page?Whats changed?Whats done? Can I click on Van Gogh?Where can I navigate?From PDFs to Prototypes #pdf2html @nathanacurtis 28. So, Where Do You Start?VSClassical Document HTML PrototypingSetting the stage with the Setting the stage with thetable 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 NotesExit Full Screen ed at om tAu est No m ost CuFrom PDFs to Prototypes #pdf2html @nathanacurtis 31. Setting the Stage with a GridHTML PrototypingSetting the stage with the grid of pages youll 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 BootstrapFoundation YUIFrom PDFs to Prototypes #pdf2html @nathanacurtis 34. When to Build a Prototyping Library?Constitution?Goodness no, its 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 ComponentsIn the {prototype root}/library/components/ folderFrom PDFs to Prototypes #pdf2html @nathanacurtis 37. PagesLibrary Folder Components CSS, Per Component ImagesCONFIDENTIAL and PROPRIETARY Do Not Share Without Permission 38. Shared LibraryStarting 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=libraryFrom 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