From PDFs to HTML Prototypes (Short Form)

From PDFs to Presented by
Nathan Curtis
HTML Prototypes The Big Redux
Eight Helpful Tips and Some Other Good Stories on how
May 2011
EightShapes has tackled projects with HTML prototypes

nathanacurtis
@nathanacurtis 1

It’s an Adobe InDesign Miracle!
Deliverables
Documents! What? A
Prototype? Shhh...

Wireframe Pages!
Wireframe Parts!
(Components)

http://unify.eightshapes.com/concepts/reduce-reuse-recycle/

@nathanacurtis 2

So, whatʼs the problem?

@nathanacurtis 3

@nathanacurtis
Slide from Jason Friedʼs talk on the 37signals process during UIEʼs 2011 Web App Masters Tour conference in Philadelphia, PA 4

The rise in popularity of the HTML prototype in more recent
years is partly the responsibility of a witch-hunt that has
served to oust the ʻweb designersʼ who canʼt code their own
designs and shone a spotlight in the faces of those who
brand themselves UX Professionals. To summarize, these
days youʼve got to bring a lot more to the table if you
expect to stay competitive.
And it is the embodiment of this more diverse skill set that
has lead so many web designers, disillusioned with a less-
than-optimal workﬂow, into the loving embrace of the
HTML prototype.

An Introduction to HTML Prototyping
by Sam Quayle
http://speckyboy.com/2010/12/20/an-introduction-to-html-prototyping/

@nathanacurtis 5

HTML prototypes communicate more...
but not everything.

@nathanacurtis 9

The Right Mix of PDF & Prototype
YESTERDAY Depends on Project TOMORROW?

@nathanacurtis 10

Whatʼs a web designer?

What kind of code?

@nathanacurtis 11

“Yeah, I know HTML & CSS.”

@nathanacurtis 12

Do you really know HTML/CSS/JS?

“Yeah, I know HTML & CSS” “Yeah, I know HTML & CSS” “Yeah, I know HTML & CSS”

Experience

Worked with Architected front-end for
Limited hands on experience,
Perl > Java > ASP > ASP.net major .com for 6 years
but speaks the language
Lots of HTML, CSS, & JS Delivers production
Hacks it from time to time
but not much since 2003 “UI Tech” to any client

Conﬁdence

Lower, but achieves small wins High, proves designs in projects Highest, as our mentor

HTML Prototyping Frequency

When opps arise and time permits 75% of projects in last 6 months Every project: design & delivery

@nathanacurtis 13

Skill Spectrums
BEGINNER EXPERT

HTML

CSS

JavaScript

Ready to Prototype! Production-Level Senior

@nathanacurtis 14

You gotta know HTML, CSS,
and some Javascript too...
but don’t set the bar at
production-level code.

@nathanacurtis 15

Immediate Function
Object Deﬁnition

Empty Array

String Function

Error Catching

Courtesy @yoni (HTML5 & CSS3 Workshop, Interaction11)
UX designer who REALLY CAN code!
@nathanacurtis 16

Emulate Basics

Thing in HTML

$(‘#bigmenu’).show()

JQuery “Selector” What to Do

@nathanacurtis 17
@yoni still rocks!

Getting started well ﬁnding the right...

Code Kits Tools People!

Mentor

@nathanacurtis 18

#1. Find People to Learn With

<html class="learning">

@nathanacurtis 19

#2. Pick a Project

Grouping choices

Selecting from alternatives
Getting details right

@nathanacurtis 20

#3. Set Expectations

@nathanacurtis 21

Dynamic header menu

#4. Sensibly Scope a Build
Area where my solution goes

@nathanacurtis 22

#5. Beware of Scraping Code

@nathanacurtis 23

#6. Become (More) Conscientious

Stupeﬁed designer

Yikes, Mickey Mouse ears!

@nathanacurtis
24

Yeah, I guess itʼs not THAT important
that the setActive function works for
any list ever known to man.

#7. Know When to Stop (or Keep Going)
Psst! Nathan, consider simpler code like $(target).addClass("active").siblings("li").removeClass("active");

@nathanacurtis 25

#8a. Avoid Emotional Attachments...
The Nav List

Headstrong
designer

Seriously, itʼs a list of nav
options. Use an unordered list!
Front-end expert
doing his job

I could use a list.
But using <H2> header tags
ﬁts better semantically for how
Iʼm architecting the markup.
Headstrong
designer

That doesnʼt make any sense.

@nathanacurtis
26

The Expanded Panel

...but #8b. Stand Your Ground on Design

Thoughtful
designer

Ok, but your transition to expand the panel
is inaccurate relative to the prototype.

Front-end expert
doing his job

Yeah, we should address that.

@nathanacurtis 27

Prototyping Isn’t a “Phase”

#1 The Megamenu Sketch Test Test Test Wireframes UI Tech Dev
Comps

#4 The Choice Wireframes Comps UI Tech Dev

Test

#5 The Analyzer Sketch Wireframes Mockerframes UI Tech Dev
Comps Comps

#6 The Survey Wireframes MockerFrames UI Tech Dev
Sketch Comps Test

Comps
#2 The Catalog Sketch Wireframes UI Tech Dev

Test Test

#3 The Content Samples Sketch Wireframes Comps UI Tech Dev

@nathanacurtis 28

Forget Wireframe PDFs?

WHAT WE DID
Prototype for testing

Wireframe PDFs MockerFrames UI Tech Dev
Sketch Comps Test

WHAT I’D DO NEXT TIME

Prototype, all the time, from the start

Sketch Sketch Sketch UI Tech Dev
Test Comps Test Comps Test

@nathanacurtis
29

What if everything was HTML?

@nathanacurtis 30

From PDFs to HTML Prototypes (Short Form)

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Similar to From PDFs to HTML Prototypes (Short Form)

Similar to From PDFs to HTML Prototypes (Short Form) (20)

Recently uploaded

Recently uploaded (20)

From PDFs to HTML Prototypes (Short Form)