Upload
nathanacurtis
View
128
Download
2
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
[email protected]@NathanACurtis
User Focus 2012, Washington, DC #pdf2html
From PDFs to HTML PrototypesMaking the Transition as a UX Designer
CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
#pdf2html
CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
My Daily Context:
EightShapes
UXer UXer UXer UXer UXer
UXerUXerUXerUXer
Prototyper Prototyper Prototyper
Prototyper Prototyper Prototyper Prototyper Prototyper
CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
Communicating DesignDan BrownSecond Edition, 2010
Modular Web DesignNathan Curtis 2009
EightShapes UnifyInDesign UX Templates26,000+ downloads since 2009
WIREFRAME!
WIREFRAME!
WIREFRAME!
From PDFs to Prototypes #pdf2html @nathanacurtis
Wireframes Comps Code
PaperSketches
Prototype?
From PDFs to Prototypes #pdf2html @nathanacurtis
HTMLPrototype Comps
ProductionCode
PaperSketches
From PDFs to Prototypes #pdf2html @nathanacurtis
HTMLPrototype
PaperDrawings
ProductionCode
Comp
VectorDrawings
From PDFs to Prototypes #pdf2html @nathanacurtis
2010 2011 2012
@eightshapes’ Effort: PDF Wireframing vs HTML Prototyping
20%
60%
40%
80%
100%
Changing Our Process
Retooling
From PDFs to Prototypes #pdf2html @nathanacurtis
[Any designer I’ve ever encountered]
“Yeah, I know HTML & CSS.”
From PDFs to Prototypes #pdf2html @nathanacurtis
Spectrum of Skill
Experience
Confidence
HTML Prototyping Frequency
“Yeah, I know HTML & CSS”
Worked with Perl > Java > ASP > ASP.net
Lots of HTML, CSS, & JSbut not much since 2003
High, proves designs in projects
Most design projects
“Yeah, I know HTML & CSS”
Limited hands on experience, but speaks the language
Hacks it from time to time
Lower, but achieves small wins
When opportunity, time permits
“Yeah, I know HTML & CSS”
Architected front-end for sprint.com for 6 years
Delivers production “UI Tech” to any client
Highest, as our mentor
Every project: design & delivery
Person
From PDFs to Prototypes #pdf2html @nathanacurtis
Designer Ready to Prototype!
ProductionGrade Stuff Senior
HTML
CSS
JavaScript
New Hire:Developer Transitioning to UX
New Hire Another New Hire
“UI Tech”-capable Designer-only
Developing Designer Skills
From PDFs to Prototypes #pdf2html @nathanacurtis
From PDFs to Prototypes #pdf2html @nathanacurtis
Initial Thumbnails
From PDFs to Prototypes #pdf2html @nathanacurtis
IPEVO P2V Camera
$69
Review #1: Buy-In
From PDFs to Prototypes #pdf2html @nathanacurtis
Review #2: Prove It Works
From PDFs to Prototypes #pdf2html @nathanacurtis
http://www.flickr.com/photos/jeffreywarren/3174675407/sizes/l/in/photostream/
visual
content
interaction
structure
Prototypes Merge Everything
From PDFs to Prototypes #pdf2html @nathanacurtis
http://www.heritage.org/constitution
Comp
From 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
20min40min
Prototype
Comp
Integrate Compinto Prototype
From PDFs to Prototypes #pdf2html @nathanacurtis
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
So, our concept for a more interactive Constitution is...
Review #3: Sell It to the Sponsors
+
From PDFs to Prototypes #pdf2html @nathanacurtis
Paired PrototypingIMPROVING HOW WE COLLABORATE VIA...
From PDFs to Prototypes #pdf2html @nathanacurtis
Project: Responsive Product Pages Beta
Category
Series / Models
Desktop Tablet? Handset
? ?
From PDFs to Prototypes #pdf2html @nathanacurtis
Roam Icons (http://blog.roamdesign.co.uk/) are great for prototyping sprites as well as slides like this!
UX Designer / PrototyperVisual Designer
Bro
wse
r(s)
Bro
wse
r(s)
Text
Edit
or
Pho
tosh
op
Apple Cinema DisplayApple Cinema Display
Setup: Working Side-by-Side, Constantly
From PDFs to Prototypes #pdf2html @nathanacurtis
Client Review: 90%+ Prototype
Responsive Content
Look Ma! Responsive Tables!
Responsive Columns
What EightShapes Used toDemonstrate and
Facilitates Decisions
What EightShapes Produced as
“Intermediate Waste”
From PDFs to Prototypes #pdf2html @nathanacurtis
VectorDrawings
Prototype ProductionCode
PaperDrawings
Comp
From PDFs to Prototypes #pdf2html @nathanacurtis
What’s Really In There?
Did you build Exhibitions pages?
Can I click on Van Gogh? Where can I navigate?
When did you last update this?
Do you have other examples of this page?
How many pages did you build?
What’s changed? What’s done?
From PDFs to Prototypes #pdf2html @nathanacurtis
So, Where Do You Start?
Classical DocumentSetting the stage with thetable of contents.
HTML PrototypingSetting the stage with the...first page you see?
VS
From PDFs to Prototypes #pdf2html @nathanacurtis
Marking Up a PageToggle Markers
Exit “Full Screen”
From PDFs to Prototypes #pdf2html @nathanacurtis
Adding Custom Notes
Cust
om N
otes
Auto
mat
ed
From PDFs to Prototypes #pdf2html @nathanacurtis
Setting the Stage with a Grid
HTML PrototypingSetting the stage with the grid of pages you’ll cover, as pictures, before diving into the first one.
From PDFs to Prototypes #pdf2html @nathanacurtis
@8SBlocks
EightShapes Blocks
From PDFs to Prototypes #pdf2html @nathanacurtis
Foundation
Twitter Bootstrap
YUI
From PDFs to Prototypes #pdf2html @nathanacurtis
When to Build a Prototyping Library?
http://www.boxesandarrows.com/view/so-you-wanna-build-a
Constitution?Goodness no, it’s a one off.
Cisco.com?Absolutely. Lots of content,thousands of pages, evolves over years.
From PDFs to Prototypes #pdf2html @nathanacurtis
Custom Library
From PDFs to Prototypes #pdf2html @nathanacurtis
All The ComponentsIn the {prototype root}/library/components/ folder
CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
Pages Library Folder Components CSS, Per Component Images
Shared Library
From PDFs to Prototypes #pdf2html @nathanacurtis
My Project Folder
Copy fromLibrary
Sync withGithub
Starting a Project
From PDFs to Prototypes #pdf2html @nathanacurtis
Starter Pages
From PDFs to Prototypes #pdf2html @nathanacurtis
Starter Page Template
Loading data-variations from data-source=”library”
From PDFs to Prototypes #pdf2html @nathanacurtis
So, why do we prototype?
It brings people together.
It brings design concerns together.
It produces better design.
From PDFs to Prototypes #pdf2html @nathanacurtis
Thanks!