• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
From PDFs to HTML Prototypes
 

From PDFs to HTML Prototypes

on

  • 3,064 views

Drawing static pictures and annotating them in a laborious, impenetrable Word document or PDF doesn’t cut it anymore. The richest communication tool is to depict an actual experience in prototype ...

Drawing static pictures and annotating them in a laborious, impenetrable Word document or PDF doesn’t cut it anymore. The richest communication tool is to depict an actual experience in prototype form. And for the web sites and applications we work on most, no form is closer to the real thing than the real thing: an HTML prototype.

Over the past two years, EightShapes has transformed it’s UX design practice to empower all designers – from information architects to visual experts – to utilize HTML prototypes as the leading, iterative communications device for a project. The learning curve is gentle for some, steep for others. But it’s made us all better designers and more effective communicators over time.

Statistics

Views

Total Views
3,064
Views on SlideShare
3,046
Embed Views
18

Actions

Likes
12
Downloads
29
Comments
0

4 Embeds 18

https://twitter.com 11
http://www.linkedin.com 5
http://trdmkt.com 1
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    From PDFs to HTML Prototypes From PDFs to HTML Prototypes Presentation Transcript

    • From PDFs toHTML PrototypesMaking the Transition as a UX DesignerUser Focus 2012, Washington, DC #pdf2html nathan@eightshapes.com @NathanACurtis
    • #pdf2htmlCONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
    • My Daily Context: EightShapes UXer UXer UXer UXer UXer Prototyper Prototyper Prototyper UXer UXer UXer UXer Prototyper Prototyper Prototyper Prototyper PrototyperCONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
    • E! E! E! R AM AM AM F FR F R RE IRE RE WI W WI Communicating Design Modular Web Design EightShapes Unify Dan Brown Nathan Curtis InDesign UX Templates Second Edition, 2010 2009 26,000+ downloads since 2009CONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
    • Prototype? Wireframes Comps Code Paper SketchesFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • HTML Production Comps Prototype Code Paper SketchesFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • Vector Drawings Paper HTML Production Drawings Prototype Code CompFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • Changing Our Process @eightshapes’ Effort: PDF Wireframing vs HTML Prototyping 100% Retooling 80% 60% 40% 20% 2010 2011 2012From PDFs to Prototypes #pdf2html @nathanacurtis
    • “Yeah, I know HTML & CSS.” [Any designer I’ve ever encountered]From PDFs to Prototypes #pdf2html @nathanacurtis
    • Spectrum of Skill Person “Yeah, I know HTML & CSS” “Yeah, I know HTML & CSS” “Yeah, I know HTML & CSS” Experience Worked with Architected front-end for sprint.com Limited hands on experience, Perl > Java > ASP > ASP.net 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 Confidence Lower, but achieves small wins High, proves designs in projects Highest, as our mentor HTML Prototyping Frequency When opportunity, time permits Most design projects Every project: design & deliveryFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • Developing Designer Skills New Hire Another New Hire HTML CSS JavaScript Designer Production Ready to Prototype! Grade Stuff Senior New Hire: “UI Tech”-capable Designer-only Developer Transitioning to UXFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • From PDFs to Prototypes #pdf2html @nathanacurtis
    • Initial ThumbnailsFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • IPEVO P2V Camera $69 Review #1: Buy-InFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • Review #2: Prove It WorksFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • Prototypes Merge Everything content structure visual interaction http://www.flickr.com/photos/jeffreywarren/3174675407/sizes/l/in/photostream/From PDFs to Prototypes #pdf2html @nathanacurtis
    • http://www.heritage.org/constitution CompFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • http://www.flickr.com/photos/ekilby/5601758699/sizes/l/in/photostream/From PDFs to Prototypes #pdf2html @nathanacurtis
    • Client Review Agenda Prototype Comp Integrate Comp into Prototype m in min 20 40From 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.From PDFs to Prototypes #pdf2html @nathanacurtis
    • So, our concept for a more interactive Constitution is... Review #3: Sell It to the SponsorsFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • IMPROVING HOW WE COLLABORATE VIA... Paired Prototyping +From PDFs to Prototypes #pdf2html @nathanacurtis
    • Project: Responsive Product Pages Beta Desktop Tablet? Handset ? ? Category Series / ModelsFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • Setup: Working Side-by-Side, Constantly Apple Cinema Display Apple Cinema Display Browser(s) Browser(s) Text Editor Photoshop Visual Designer UX Designer / Prototyper Roam Icons (http://blog.roamdesign.co.uk/) are great for prototyping sprites as well as slides like this!From PDFs to Prototypes #pdf2html @nathanacurtis
    • Client Review: 90%+ Prototype Look Ma! Responsive Tables! Responsive Content Responsive ColumnsFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • What EightShapes What EightShapes Used to Produced as Demonstrate and “Intermediate Waste” Facilitates Decisions Vector Drawings Paper Producti Drawings Prototype Code CompFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • What’s Really In There? How many pages did you build? Did you build Exhibitions pages? When did you last update this? Do you have other examples of this page? What’s changed? What’s done? Can I click on Van Gogh? Where can I navigate?From PDFs to Prototypes #pdf2html @nathanacurtis
    • So, Where Do You Start? VS Classical Document HTML Prototyping Setting the stage with the Setting the stage with the table of contents. ...first page you see?From PDFs to Prototypes #pdf2html @nathanacurtis
    • Marking Up a Page Toggle MarkersFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • Adding Custom Notes Exit “Full Screen” ed at om t Au es t No m o st CuFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • Setting the Stage with a Grid HTML Prototyping Setting the stage with the grid of pages you’ll cover, as pictures, before diving into the first one.From PDFs to Prototypes #pdf2html @nathanacurtis
    • @8SBlocks EightShapes BlocksFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • Twitter Bootstrap Foundation YUIFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • When to Build a Prototyping Library? Constitution? Goodness no, it’s a one off. Cisco.com? Absolutely. Lots of content, thousands of pages, evolves over years. http://www.boxesandarrows.com/view/so-you-wanna-build-aFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • Custom LibraryFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • All The Components In the {prototype root}/library/components/ folderFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • Pages Library Folder Components CSS, Per Component ImagesCONFIDENTIAL and PROPRIETARY • Do Not Share Without Permission
    • Shared Library Starting a Project My Project Folder Copy from Library Sync with GithubFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • Starter PagesFrom PDFs to Prototypes #pdf2html @nathanacurtis
    • Starter Page Template Loading data-variations from data-source=”library”From PDFs to Prototypes #pdf2html @nathanacurtis
    • So, why do we prototype? It brings people together. It brings design concerns together. It produces better design.From PDFs to Prototypes #pdf2html @nathanacurtis
    • Thanks!From PDFs to Prototypes #pdf2html @nathanacurtis