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.
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
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
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