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.

1. From PDFs to
HTML Prototypes
Making the Transition as a UX Designer
User Focus 2012, Washington, DC #pdf2html
nathan@eightshapes.com
@NathanACurtis

2. #pdf2html
CONFIDENTIAL 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 Prototyper
CONFIDENTIAL 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 2009
CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission

5. Prototype?
Wireframes Comps Code
Paper
Sketches
From PDFs to Prototypes #pdf2html @nathanacurtis

6. HTML Production
Comps
Prototype Code
Paper
Sketches
From PDFs to Prototypes #pdf2html @nathanacurtis

7. Vector
Drawings
Paper HTML Production
Drawings Prototype Code
Comp
From PDFs to Prototypes #pdf2html @nathanacurtis

8. Changing Our Process
@eightshapes’ Effort: PDF Wireframing vs HTML Prototyping
100%
Retooling
80%
60%
40%
20%
2010 2011 2012
From 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 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 & delivery
From 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 UX
From PDFs to Prototypes #pdf2html @nathanacurtis

12. From PDFs to Prototypes #pdf2html @nathanacurtis

13. Initial Thumbnails
From PDFs to Prototypes #pdf2html @nathanacurtis

14. IPEVO P2V Camera
$69
Review #1: Buy-In
From PDFs to Prototypes #pdf2html @nathanacurtis

15. Review #2: Prove It Works
From PDFs to Prototypes #pdf2html @nathanacurtis

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. http://www.heritage.org/constitution
Comp
From PDFs to Prototypes #pdf2html @nathanacurtis

18. http://www.flickr.com/photos/ekilby/5601758699/sizes/l/in/photostream/
From PDFs to Prototypes #pdf2html @nathanacurtis

19. Client Review Agenda
Prototype
Comp
Integrate Comp
into Prototype
m in min
20 40
From 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 Sponsors
From 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 / Models
From 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 (http://blog.roamdesign.co.uk/) 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 Columns
From 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
Comp
From 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 Markers
From PDFs to Prototypes #pdf2html @nathanacurtis

30. Adding Custom Notes
Exit “Full Screen”
ed
at
om
t
Au
es
t
No
m o
st
Cu
From 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 Blocks
From PDFs to Prototypes #pdf2html @nathanacurtis

33. Twitter Bootstrap
Foundation YUI
From PDFs to Prototypes #pdf2html @nathanacurtis

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-a
From PDFs to Prototypes #pdf2html @nathanacurtis

35. Custom Library
From PDFs to Prototypes #pdf2html @nathanacurtis

36. All The Components
In the {prototype root}/library/components/ folder
From PDFs to Prototypes #pdf2html @nathanacurtis

37. Pages Library Folder Components CSS, Per Component Images
CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission

38. Shared Library
Starting a Project
My Project Folder
Copy from
Library
Sync with
Github
From PDFs to Prototypes #pdf2html @nathanacurtis

39. Starter Pages
From 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