Post on 28-Jan-2015
description
nathan@eightshapes.com@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!