Transcript
Page 1: From PDFs to HTML Prototypes

[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

CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission

#pdf2html

Page 3: From PDFs to HTML Prototypes

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

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

From PDFs to Prototypes #pdf2html @nathanacurtis

Wireframes Comps Code

PaperSketches

Prototype?

Page 6: From PDFs to HTML Prototypes

From PDFs to Prototypes #pdf2html @nathanacurtis

HTMLPrototype Comps

ProductionCode

PaperSketches

Page 7: From PDFs to HTML Prototypes

From PDFs to Prototypes #pdf2html @nathanacurtis

HTMLPrototype

PaperDrawings

ProductionCode

Comp

VectorDrawings

Page 8: From PDFs to HTML Prototypes

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

From PDFs to Prototypes #pdf2html @nathanacurtis

[Any designer I’ve ever encountered]

“Yeah, I know HTML & CSS.”

Page 10: From PDFs to HTML Prototypes

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

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

From PDFs to Prototypes #pdf2html @nathanacurtis

Page 13: From PDFs to HTML Prototypes

From PDFs to Prototypes #pdf2html @nathanacurtis

Initial Thumbnails

Page 14: From PDFs to HTML Prototypes

From PDFs to Prototypes #pdf2html @nathanacurtis

IPEVO P2V Camera

$69

Review #1: Buy-In

Page 15: From PDFs to HTML Prototypes

From PDFs to Prototypes #pdf2html @nathanacurtis

Review #2: Prove It Works

Page 16: From PDFs to HTML Prototypes

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

From PDFs to Prototypes #pdf2html @nathanacurtis

http://www.heritage.org/constitution

Comp

Page 18: From PDFs to HTML Prototypes

From PDFs to Prototypes #pdf2html @nathanacurtis

http://www.flickr.com/photos/ekilby/5601758699/sizes/l/in/photostream/

Page 19: From PDFs to HTML Prototypes

From PDFs to Prototypes #pdf2html @nathanacurtis

Client Review Agenda

20min40min

Prototype

Comp

Integrate Compinto Prototype

Page 20: From PDFs to HTML Prototypes

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

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

+

From PDFs to Prototypes #pdf2html @nathanacurtis

Paired PrototypingIMPROVING HOW WE COLLABORATE VIA...

Page 23: From PDFs to HTML Prototypes

From PDFs to Prototypes #pdf2html @nathanacurtis

Project: Responsive Product Pages Beta

Category

Series / Models

Desktop Tablet? Handset

? ?

Page 24: From PDFs to HTML Prototypes

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

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

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

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

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

From PDFs to Prototypes #pdf2html @nathanacurtis

Marking Up a PageToggle Markers

Page 30: From PDFs to HTML Prototypes

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

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

From PDFs to Prototypes #pdf2html @nathanacurtis

@8SBlocks

EightShapes Blocks

Page 33: From PDFs to HTML Prototypes

From PDFs to Prototypes #pdf2html @nathanacurtis

Foundation

Twitter Bootstrap

YUI

Page 34: From PDFs to HTML Prototypes

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

From PDFs to Prototypes #pdf2html @nathanacurtis

Custom Library

Page 36: From PDFs to HTML Prototypes

From PDFs to Prototypes #pdf2html @nathanacurtis

All The ComponentsIn the {prototype root}/library/components/ folder

Page 37: From PDFs to HTML Prototypes

CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission

Pages Library Folder Components CSS, Per Component Images

Page 38: From PDFs to HTML Prototypes

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

From PDFs to Prototypes #pdf2html @nathanacurtis

Starter Pages

Page 40: From PDFs to HTML Prototypes

From PDFs to Prototypes #pdf2html @nathanacurtis

Starter Page Template

Loading data-variations from data-source=”library”

Page 41: From PDFs to HTML Prototypes

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

From PDFs to Prototypes #pdf2html @nathanacurtis

Thanks!