From PDFs to HTML Prototypes: Creating a System That Works

Preview:

DESCRIPTION

 

Citation preview

Copyright 2012. EightShapes LLC.

Start Full ScreenOrganize, Communicate, and Annotate HTML Prototypes

Wednesday, March 7, 2012

nathan@eightshapes.com@NathanACurtis

Hash Tag: #8SBlocks Twitter @nathanAcurtis

Copyright 2012. EightShapes LLC.

From PDF Documents to HTML

2

“Classical” UX Documents

HTML Prototyping in Firefox

Firebug

Text Editor for HTML, CSS, & JS

Copyright 2012. EightShapes LLC.

The Objective

Organize, Annotate, & Present

HTML Prototypes

Compete with established CSS & JS toolkits

(We also use 960gs, JQuery, JQuery Mobile, Bootstrap, etc)

Copyright 2012. EightShapes LLC.

Break Design Into Modular Parts

ModularComponentFile Content

Loaded into Page Layouts

Copyright 2012. EightShapes LLC.

Leave Full Screen and Explore

5

Page Grids(Yes, Actual HTML Pages, Not Screenshots)

Copyright 2012. EightShapes LLC.

Annotate Your Design

6

Component Markers

Page Notes

Copyright 2012. EightShapes LLC.

Start Full ScreenOrganize, Communicate, and Annotate HTML Prototypes

Wednesday, March 7, 2012

nathan@eightshapes.com@NathanACurtis

Hash Tag: #8SBlocks Twitter @nathanAcurtis

Recommended