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

CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission

#pdf2html


My Daily Context:

EightShapes

UXer UXer UXer UXer UXer

UXerUXerUXerUXer

Prototyper Prototyper Prototyper

Prototyper Prototyper Prototyper Prototyper Prototyper


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?


HTMLPrototype Comps

ProductionCode

PaperSketches


HTMLPrototype

PaperDrawings

ProductionCode

Comp

VectorDrawings


2010 2011 2012

@eightshapes’ Effort: PDF Wireframing vs HTML Prototyping

20%

60%

40%

80%

100%

Changing Our Process

Retooling


[Any designer I’ve ever encountered]

“Yeah, I know HTML & CSS.”


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


Limited hands on experience, but speaks the language

Hacks it from time to time

Lower, but achieves small wins

When opportunity, time permits


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


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


Initial Thumbnails


IPEVO P2V Camera

$69

Review #1: Buy-In


Review #2: Prove It Works


http://www.flickr.com/photos/jeffreywarren/3174675407/sizes/l/in/photostream/

visual

content

interaction

structure

Prototypes Merge Everything


http://www.heritage.org/constitution

Comp


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


Client Review Agenda

20min40min

Prototype

Comp

Integrate Compinto Prototype


You’ve Got 3 Hours. Divide, conquer, and...

I’ll take the framework & image parts.

I’ve got the layouts within each component.


So, our concept for a more interactive Constitution is...

Review #3: Sell It to the Sponsors

+


Paired PrototypingIMPROVING HOW WE COLLABORATE VIA...


Project: Responsive Product Pages Beta

Category

Series / Models

Desktop Tablet? Handset

? ?


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


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”


VectorDrawings

Prototype ProductionCode

PaperDrawings

Comp


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?


So, Where Do You Start?

Classical DocumentSetting the stage with thetable of contents.

HTML PrototypingSetting the stage with the...first page you see?

VS


Marking Up a PageToggle Markers

Exit “Full Screen”


Adding Custom Notes

Cust

om N

otes

Auto

mat

ed


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.


@8SBlocks

EightShapes Blocks


Foundation

Twitter Bootstrap

YUI


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.


Custom Library


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


Pages Library Folder Components CSS, Per Component Images

Shared Library


My Project Folder

Copy fromLibrary

Sync withGithub

Starting a Project


Starter Pages


Starter Page Template

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


So, why do we prototype?

It brings people together.

It brings design concerns together.

It produces better design.


Thanks!

From PDFs to HTML Prototypes

Technology

Transcript of From PDFs to HTML Prototypes