From PDFs to HTML Prototypes
-
Upload
nathanacurtis -
Category
Technology
-
view
128 -
download
2
description
Transcript of From PDFs to HTML Prototypes
![Page 1: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/1.jpg)
[email protected]@NathanACurtis
User Focus 2012, Washington, DC #pdf2html
From PDFs to HTML PrototypesMaking the Transition as a UX Designer
![Page 2: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/2.jpg)
CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
#pdf2html
![Page 3: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/3.jpg)
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
![Page 4: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/4.jpg)
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!
![Page 5: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/5.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
Wireframes Comps Code
PaperSketches
Prototype?
![Page 6: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/6.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
HTMLPrototype Comps
ProductionCode
PaperSketches
![Page 7: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/7.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
HTMLPrototype
PaperDrawings
ProductionCode
Comp
VectorDrawings
![Page 8: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/8.jpg)
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
![Page 9: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/9.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
[Any designer I’ve ever encountered]
“Yeah, I know HTML & CSS.”
![Page 10: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/10.jpg)
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
![Page 11: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/11.jpg)
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
![Page 12: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/12.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
![Page 13: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/13.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
Initial Thumbnails
![Page 14: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/14.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
IPEVO P2V Camera
$69
Review #1: Buy-In
![Page 15: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/15.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
Review #2: Prove It Works
![Page 16: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/16.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
http://www.flickr.com/photos/jeffreywarren/3174675407/sizes/l/in/photostream/
visual
content
interaction
structure
Prototypes Merge Everything
![Page 17: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/17.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
http://www.heritage.org/constitution
Comp
![Page 18: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/18.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
http://www.flickr.com/photos/ekilby/5601758699/sizes/l/in/photostream/
![Page 19: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/19.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
Client Review Agenda
20min40min
Prototype
Comp
Integrate Compinto Prototype
![Page 20: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/20.jpg)
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.
![Page 21: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/21.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
So, our concept for a more interactive Constitution is...
Review #3: Sell It to the Sponsors
![Page 22: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/22.jpg)
+
From PDFs to Prototypes #pdf2html @nathanacurtis
Paired PrototypingIMPROVING HOW WE COLLABORATE VIA...
![Page 23: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/23.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
Project: Responsive Product Pages Beta
Category
Series / Models
Desktop Tablet? Handset
? ?
![Page 24: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/24.jpg)
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
![Page 25: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/25.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
Client Review: 90%+ Prototype
Responsive Content
Look Ma! Responsive Tables!
Responsive Columns
![Page 26: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/26.jpg)
What EightShapes Used toDemonstrate and
Facilitates Decisions
What EightShapes Produced as
“Intermediate Waste”
From PDFs to Prototypes #pdf2html @nathanacurtis
VectorDrawings
Prototype ProductionCode
PaperDrawings
Comp
![Page 27: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/27.jpg)
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?
![Page 28: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/28.jpg)
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
![Page 29: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/29.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
Marking Up a PageToggle Markers
![Page 30: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/30.jpg)
Exit “Full Screen”
From PDFs to Prototypes #pdf2html @nathanacurtis
Adding Custom Notes
Cust
om N
otes
Auto
mat
ed
![Page 31: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/31.jpg)
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.
![Page 32: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/32.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
@8SBlocks
EightShapes Blocks
![Page 33: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/33.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
Foundation
Twitter Bootstrap
YUI
![Page 34: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/34.jpg)
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.
![Page 35: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/35.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
Custom Library
![Page 36: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/36.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
All The ComponentsIn the {prototype root}/library/components/ folder
![Page 37: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/37.jpg)
CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
Pages Library Folder Components CSS, Per Component Images
![Page 38: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/38.jpg)
Shared Library
From PDFs to Prototypes #pdf2html @nathanacurtis
My Project Folder
Copy fromLibrary
Sync withGithub
Starting a Project
![Page 39: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/39.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
Starter Pages
![Page 40: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/40.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
Starter Page Template
Loading data-variations from data-source=”library”
![Page 41: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/41.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
So, why do we prototype?
It brings people together.
It brings design concerns together.
It produces better design.
![Page 42: From PDFs to HTML Prototypes](https://reader033.fdocuments.us/reader033/viewer/2022051110/54c81d224a79596a498b4575/html5/thumbnails/42.jpg)
From PDFs to Prototypes #pdf2html @nathanacurtis
Thanks!