From PDFs to                                            Presented by                                                      ...
It’s an Adobe InDesign Miracle!                          Deliverables                          Documents!                 ...
So, whatʼs the problem?                          @nathanacurtis   3
@nathanacurtisSlide from Jason Friedʼs talk on the 37signals process during UIEʼs 2011 Web App Masters Tour conference in ...
The rise in popularity of the HTML prototype in more recentyears is partly the responsibility of a witch-hunt that hasserv...
@nathanacurtis   6
@nathanacurtis   7
@nathanacurtis   8
HTML prototypes communicate more...        but not everything.                            @nathanacurtis   9
The Right Mix of PDF & PrototypeYESTERDAY    Depends on Project   TOMORROW?                                   @nathanacurt...
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 ...
Skill SpectrumsBEGINNER                                                  EXPERT  HTML  CSS  JavaScript               Ready...
You gotta know HTML, CSS, and some Javascript too...  but don’t set the bar at  production-level code.                    ...
Immediate Function    Object Definition         Empty Array                                        String FunctionError Cat...
Emulate Basics                             Thing in HTML                           $(‘#bigmenu’).show()                   ...
Getting started well finding the right... Code Kits             Tools               People!                                ...
#1. Find People to Learn With<html class="learning">                                @nathanacurtis   19
#2. Pick a Project                              Grouping choicesSelecting from alternatives                               ...
#3. Set Expectations                       @nathanacurtis   21
Dynamic header menu#4. Sensibly Scope a Build                   Area where my solution goes                               ...
#5. Beware of Scraping Code                              @nathanacurtis   23
#6. Become (More) Conscientious      Stupefied designer                      Yikes, Mickey Mouse ears!                     ...
Yeah, I guess itʼs not THAT important                                        that the setActive function works for        ...
#8a. Avoid Emotional Attachments...The Nav List                Headstrong                  designer                       ...
The Expanded Panel...but #8b. Stand Your Ground on Design              Thoughtful                designer                 ...
Prototyping Isn’t a “Phase”     #1 The Megamenu     Sketch              Test       Test            Test      Wireframes   ...
Forget Wireframe PDFs?                                     WHAT WE DID                                                Prot...
What if everything was HTML?                          @nathanacurtis   30
Upcoming SlideShare
Loading in …5
×

From PDFs to HTML Prototypes (Short Form)

3,808 views

Published on

Interested in the long form presentation? It was presented as a Online Virtual Seminar from UIE.com. Learn more: http://www.uie.com/events/virtual_seminars/eightshapes_nc3/

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,808
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

From PDFs to HTML Prototypes (Short Form)

  1. 1. From PDFs to Presented by Nathan CurtisHTML Prototypes The Big ReduxEight Helpful Tips and Some Other Good Stories on how May 2011EightShapes has tackled projects with HTML prototypes nathanacurtis @nathanacurtis 1
  2. 2. 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
  3. 3. So, whatʼs the problem? @nathanacurtis 3
  4. 4. @nathanacurtisSlide from Jason Friedʼs talk on the 37signals process during UIEʼs 2011 Web App Masters Tour conference in Philadelphia, PA 4
  5. 5. The rise in popularity of the HTML prototype in more recentyears is partly the responsibility of a witch-hunt that hasserved to oust the ʻweb designersʼ who canʼt code their owndesigns and shone a spotlight in the faces of those whobrand themselves UX Professionals. To summarize, thesedays youʼve got to bring a lot more to the table if youexpect to stay competitive.And it is the embodiment of this more diverse skill set thathas lead so many web designers, disillusioned with a less-than-optimal workflow, into the loving embrace of theHTML prototype.An Introduction to HTML Prototypingby Sam Quaylehttp://speckyboy.com/2010/12/20/an-introduction-to-html-prototyping/ @nathanacurtis 5
  6. 6. @nathanacurtis 6
  7. 7. @nathanacurtis 7
  8. 8. @nathanacurtis 8
  9. 9. HTML prototypes communicate more... but not everything. @nathanacurtis 9
  10. 10. The Right Mix of PDF & PrototypeYESTERDAY Depends on Project TOMORROW? @nathanacurtis 10
  11. 11. Whatʼs a web designer? What kind of code? @nathanacurtis 11
  12. 12. “Yeah, I know HTML & CSS.” @nathanacurtis 12
  13. 13. 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 Confidence Lower, but achieves small wins High, proves designs in projects Highest, as our mentor HTML Prototyping FrequencyWhen opps arise and time permits 75% of projects in last 6 months Every project: design & delivery @nathanacurtis 13
  14. 14. Skill SpectrumsBEGINNER EXPERT HTML CSS JavaScript Ready to Prototype! Production-Level Senior @nathanacurtis 14
  15. 15. You gotta know HTML, CSS, and some Javascript too... but don’t set the bar at production-level code. @nathanacurtis 15
  16. 16. Immediate Function Object Definition Empty Array String FunctionError Catching Courtesy @yoni (HTML5 & CSS3 Workshop, Interaction11) UX designer who REALLY CAN code! @nathanacurtis 16
  17. 17. Emulate Basics Thing in HTML $(‘#bigmenu’).show() JQuery “Selector” What to Do @nathanacurtis 17@yoni still rocks!
  18. 18. Getting started well finding the right... Code Kits Tools People! Mentor @nathanacurtis 18
  19. 19. #1. Find People to Learn With<html class="learning"> @nathanacurtis 19
  20. 20. #2. Pick a Project Grouping choicesSelecting from alternatives Getting details right @nathanacurtis 20
  21. 21. #3. Set Expectations @nathanacurtis 21
  22. 22. Dynamic header menu#4. Sensibly Scope a Build Area where my solution goes @nathanacurtis 22
  23. 23. #5. Beware of Scraping Code @nathanacurtis 23
  24. 24. #6. Become (More) Conscientious Stupefied designer Yikes, Mickey Mouse ears! @nathanacurtis 24
  25. 25. 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
  26. 26. #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 fits better semantically for how Iʼm architecting the markup. Headstrong designer That doesnʼt make any sense. @nathanacurtis 26
  27. 27. 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
  28. 28. 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
  29. 29. Forget Wireframe PDFs? WHAT WE DID Prototype for testingWireframe PDFs MockerFrames UI Tech Dev Sketch Comps Test WHAT I’D DO NEXT TIME Prototype, all the time, from the startSketch Sketch Sketch UI Tech Dev Test Comps Test Comps Test @nathanacurtis 29
  30. 30. What if everything was HTML? @nathanacurtis 30

×