From PDFs toHTML PrototypesMaking the Transition as a UX DesignerUser Focus 2012, Washington, DC    #pdf2html             ...
#pdf2htmlCONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
My Daily Context:          EightShapes                              UXer                UXer           UXer               ...
E!                                     E!                                      E!                                         ...
Prototype?                         Wireframes                        Comps   Code         Paper        SketchesFrom PDFs t...
HTML                           Production                                                   Comps                         ...
Vector                                              Drawings                            Paper                           HT...
Changing Our Process    @eightshapes’ Effort:                          PDF Wireframing vs    HTML Prototyping  100%       ...
“Yeah, I know HTML & CSS.”              [Any designer I’ve ever encountered]From PDFs to Prototypes #pdf2html @nathanacurtis
Spectrum of Skill                                                               Person       “Yeah, I know HTML & CSS”    ...
Developing Designer Skills                                     New Hire                 Another New Hire          HTML    ...
From PDFs to Prototypes #pdf2html @nathanacurtis
Initial ThumbnailsFrom PDFs to Prototypes #pdf2html @nathanacurtis
IPEVO P2V Camera                                                   $69                                       Review #1: Bu...
Review #2: Prove It WorksFrom PDFs to Prototypes #pdf2html @nathanacurtis
Prototypes Merge Everything                                                             content                           ...
http://www.heritage.org/constitution CompFrom PDFs to Prototypes #pdf2html @nathanacurtis
http://www.flickr.com/photos/ekilby/5601758699/sizes/l/in/photostream/From PDFs to Prototypes #pdf2html @nathanacurtis
Client Review Agenda                                                        Prototype                   Comp         Integ...
You’ve Got 3 Hours. Divide, conquer, and...                                         I’ll take the framework               ...
So, our concept for a more                                                   interactive Constitution is...      Review #3...
IMPROVING HOW WE COLLABORATE VIA...               Paired Prototyping                                                   +Fr...
Project: Responsive Product Pages Beta                                                   Desktop       Tablet?   Handset  ...
Setup: Working Side-by-Side, Constantly          Apple Cinema Display                                              Apple C...
Client Review: 90%+ Prototype                                                   Look Ma! Responsive Tables!        Respons...
What EightShapes                            What EightShapes Used to                 Produced as                          ...
What’s Really In There?                             How many pages did                             you build?             ...
So, Where Do You Start?                                                      VS    Classical Document                     ...
Marking Up a Page                                                                       Toggle MarkersFrom PDFs to Prototy...
Adding Custom Notes                                                                    Exit “Full Screen”                 ...
Setting the Stage with a Grid                    HTML Prototyping                    Setting the stage with the grid of pa...
@8SBlocks               EightShapes BlocksFrom PDFs to Prototypes #pdf2html @nathanacurtis
Twitter Bootstrap          Foundation                                               YUIFrom PDFs to Prototypes #pdf2html @...
When to Build a Prototyping Library?      Constitution?      Goodness no, it’s a one off.                                 ...
Custom LibraryFrom PDFs to Prototypes #pdf2html @nathanacurtis
All The Components                                          In the {prototype root}/library/components/ folderFrom PDFs to...
Pages                            Library Folder                 Components   CSS, Per Component   ImagesCONFIDENTIAL and P...
Shared Library                                                                          Starting a Project                ...
Starter PagesFrom PDFs to Prototypes #pdf2html @nathanacurtis
Starter Page Template                                               Loading data-variations from data-source=”library”From...
So, why do we prototype?                           It brings people together.      It brings design concerns together.    ...
Thanks!From PDFs to Prototypes #pdf2html @nathanacurtis
Upcoming SlideShare
Loading in...5
×

From PDFs to HTML Prototypes

2,943

Published on

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.

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,943
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
34
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

From PDFs to HTML Prototypes

  1. 1. From PDFs toHTML PrototypesMaking the Transition as a UX DesignerUser Focus 2012, Washington, DC #pdf2html nathan@eightshapes.com @NathanACurtis
  2. 2. #pdf2htmlCONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
  3. 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. 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. 5. Prototype? Wireframes Comps Code Paper SketchesFrom PDFs to Prototypes #pdf2html @nathanacurtis
  6. 6. HTML Production Comps Prototype Code Paper SketchesFrom PDFs to Prototypes #pdf2html @nathanacurtis
  7. 7. Vector Drawings Paper HTML Production Drawings Prototype Code CompFrom PDFs to Prototypes #pdf2html @nathanacurtis
  8. 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. 9. “Yeah, I know HTML & CSS.” [Any designer I’ve ever encountered]From PDFs to Prototypes #pdf2html @nathanacurtis
  10. 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 sprint.com Limited hands on experience, Perl > Java > ASP > ASP.net 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. 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. 12. From PDFs to Prototypes #pdf2html @nathanacurtis
  13. 13. Initial ThumbnailsFrom PDFs to Prototypes #pdf2html @nathanacurtis
  14. 14. IPEVO P2V Camera $69 Review #1: Buy-InFrom PDFs to Prototypes #pdf2html @nathanacurtis
  15. 15. Review #2: Prove It WorksFrom PDFs to Prototypes #pdf2html @nathanacurtis
  16. 16. Prototypes Merge Everything content structure visual interaction http://www.flickr.com/photos/jeffreywarren/3174675407/sizes/l/in/photostream/From PDFs to Prototypes #pdf2html @nathanacurtis
  17. 17. http://www.heritage.org/constitution CompFrom PDFs to Prototypes #pdf2html @nathanacurtis
  18. 18. http://www.flickr.com/photos/ekilby/5601758699/sizes/l/in/photostream/From PDFs to Prototypes #pdf2html @nathanacurtis
  19. 19. Client Review Agenda Prototype Comp Integrate Comp into Prototype m in min 20 40From PDFs to Prototypes #pdf2html @nathanacurtis
  20. 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. 21. So, our concept for a more interactive Constitution is... Review #3: Sell It to the SponsorsFrom PDFs to Prototypes #pdf2html @nathanacurtis
  22. 22. IMPROVING HOW WE COLLABORATE VIA... Paired Prototyping +From PDFs to Prototypes #pdf2html @nathanacurtis
  23. 23. Project: Responsive Product Pages Beta Desktop Tablet? Handset ? ? Category Series / ModelsFrom PDFs to Prototypes #pdf2html @nathanacurtis
  24. 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 (http://blog.roamdesign.co.uk/) are great for prototyping sprites as well as slides like this!From PDFs to Prototypes #pdf2html @nathanacurtis
  25. 25. Client Review: 90%+ Prototype Look Ma! Responsive Tables! Responsive Content Responsive ColumnsFrom PDFs to Prototypes #pdf2html @nathanacurtis
  26. 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. 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. 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. 29. Marking Up a Page Toggle MarkersFrom PDFs to Prototypes #pdf2html @nathanacurtis
  30. 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. 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. 32. @8SBlocks EightShapes BlocksFrom PDFs to Prototypes #pdf2html @nathanacurtis
  33. 33. Twitter Bootstrap Foundation YUIFrom PDFs to Prototypes #pdf2html @nathanacurtis
  34. 34. When to Build a Prototyping Library? Constitution? Goodness no, it’s a one off. Cisco.com? Absolutely. Lots of content, thousands of pages, evolves over years. http://www.boxesandarrows.com/view/so-you-wanna-build-aFrom PDFs to Prototypes #pdf2html @nathanacurtis
  35. 35. Custom LibraryFrom PDFs to Prototypes #pdf2html @nathanacurtis
  36. 36. All The Components In the {prototype root}/library/components/ folderFrom PDFs to Prototypes #pdf2html @nathanacurtis
  37. 37. Pages Library Folder Components CSS, Per Component ImagesCONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
  38. 38. Shared Library Starting a Project My Project Folder Copy from Library Sync with GithubFrom PDFs to Prototypes #pdf2html @nathanacurtis
  39. 39. Starter PagesFrom PDFs to Prototypes #pdf2html @nathanacurtis
  40. 40. Starter Page Template Loading data-variations from data-source=”library”From PDFs to Prototypes #pdf2html @nathanacurtis
  41. 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. 42. Thanks!From PDFs to Prototypes #pdf2html @nathanacurtis
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×