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)
- 1. 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
- 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. So, whatʼs the problem? @nathanacurtis 3
- 4. @nathanacurtis Slide from Jason Friedʼs talk on the 37signals process during UIEʼs 2011 Web App Masters Tour conference in Philadelphia, PA 4
- 5. 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 workflow, 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
- 6. @nathanacurtis 6
- 7. @nathanacurtis 7
- 8. @nathanacurtis 8
- 9. HTML prototypes communicate more... but not everything. @nathanacurtis 9
- 10. The Right Mix of PDF & Prototype YESTERDAY Depends on Project TOMORROW? @nathanacurtis 10
- 11. Whatʼs a web designer? What kind of code? @nathanacurtis 11
- 12. “Yeah, I know HTML & CSS.” @nathanacurtis 12
- 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 Frequency When opps arise and time permits 75% of projects in last 6 months Every project: design & delivery @nathanacurtis 13
- 14. Skill Spectrums BEGINNER EXPERT HTML CSS JavaScript Ready to Prototype! Production-Level Senior @nathanacurtis 14
- 15. You gotta know HTML, CSS, and some Javascript too... but don’t set the bar at production-level code. @nathanacurtis 15
- 16. Immediate Function Object Definition Empty Array String Function Error Catching Courtesy @yoni (HTML5 & CSS3 Workshop, Interaction11) UX designer who REALLY CAN code! @nathanacurtis 16
- 17. Emulate Basics Thing in HTML $(‘#bigmenu’).show() JQuery “Selector” What to Do @nathanacurtis 17 @yoni still rocks!
- 18. Getting started well finding the right... Code Kits Tools People! Mentor @nathanacurtis 18
- 19. #1. Find People to Learn With <html class="learning"> @nathanacurtis 19
- 20. #2. Pick a Project Grouping choices Selecting from alternatives Getting details right @nathanacurtis 20
- 21. #3. Set Expectations @nathanacurtis 21
- 22. Dynamic header menu #4. Sensibly Scope a Build Area where my solution goes @nathanacurtis 22
- 23. #5. Beware of Scraping Code @nathanacurtis 23
- 24. #6. Become (More) Conscientious Stupefied designer Yikes, Mickey Mouse ears! @nathanacurtis 24
- 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. #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. 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. 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. 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
- 30. What if everything was HTML? @nathanacurtis 30