Replacing Photoshop with HTML Prototypes in the Real World

From Prototypecamp 2012

Many clients (and bosses) still clamor for static, finalized Photoshop comps to sign off on. How do you convince them to evolve beyond rigid deliverables and embrace a prototype-based approach to interface design? In this session I’ll share recent experiences upending internal design processes and discarding Photoshop comps in favor of HTML based design guides. We’ll cover practical considerations for getting stakeholder buy-in (and sign-off) and walk through the code you need to start building device-agnostic design systems.

Transcript

1. REPLACING PHOTOSHOP HTML PROTOTYPES Dennis Kardys UX/Creative Director - WSOL @dkardys WITH
2. THE REAL WORLD The mundane and tedious situations we accept as facts of life?
3. vs. THE REAL WORLD Faulty prototypes begging to be fixed.
4. WEB DESIGN IS HARDER THAN EVER
5. How do we communicate CANVAS, CONTEXT & CAPABILITIES?
6. But WILL the People know to click it?
7. http://disneycartoon.deviantart.com/art/Spongebob-Imagination-126455311 IMAGINATION
8. BETTER WAYS?
9. Samantha Warren’s STYLE TILES
10. Jeremy Keith Pattern Primer Jeremy Keith’s PATTERN PRIMER
11. ...beginning with the atomic units of content and styling them first before even thinking about layout... - Jeremy Keith
12. <Design in Browser/>
13. IF THEY MATED?
14. 1. RESPONSIVE 2. LAYOUT INDEPENDENT 3. COMMUNICATE + IDEATE 4. DISPOSABLE 5. SUSTAINABLE
15. The HTML Device Agnostic Design Style Tile Pattern UI KIT thingamajig
16. The HTML Device Agnostic Design Style Tile Pattern UI KIT thingamajig code name: MAMMAL PAW
18. The goal is to provide a realistic and cohesive impression of the visual design...
19. that can be evaluated objectively... outside the conventions of any ONE specific CONTEXT.
20. UI Patterns Color Scheme Typography
21. Forms Illustration Style Figures & Captions Content Modules
22. Operation: MAMMAL PAW vs...
23. 2 sets of wireframe concepts, 2 design concepts, responsive design
25. +
26. + IF THEY MATED?
27. +
28. People want options, but they don’t always understand them -peter the unemployed architect
29. Choices give a sense of control and stake of ownership in the chaos called the creative process.
30. Understanding your clients motivations helps you propose alternative viable solutions
32. BETTER DESIGN COMMUNICATION Presenting responsive HTML provokes smarter conversations
33. Ben has spoken. We demand the button above the fold!
34. MORE CONSTRUCTIVE COLLABORATION exploration vs. refinement
35. initial number of concepts concepts reduced, idea refined concepts reduced, idea refined concept resolution Design Funnel: Continual Refinement based on illustrations from “Sketching User Experiences” by Bill Buxton, 2007
36. Variation: Alternating Refinement and Ideation concepts reduced, idea refined concepts reduced, idea refined concept resolution concept generation concept generation concept generation initial number of concepts based on illustrations from “Sketching User Experiences” by Bill Buxton, 2007
37. Ultimately, more ideas, more collaboration, better results. Equal effort. More time for testing.
38. Modular Design + Structured Content (CC BY-SA) http://www.flickr.com/photos/bdesham/2432400623/
39. Find Patterns Avoid Conditional Logic Start using a framework OOCSS / SMACSS
41. Object: Media Block (.media) floated image, title, description, link or button
43. Object: Content Listings (.vlist) assorted vertical lists of content
44. HTML Prototype Design Guide.html baseline.css grid.css patterns.css Hi Fidelity HTML style-v1.css style-v2.css style-v3.css
45. example style.css ABSTRACT STYLES example: instead of .purple, .green, .blue, use .c1, .c2, .c3
47. Pitfalls: How much to show? Keeping code organized Keeping pages looking cohesive Unknowns
48. It’s the normal cycle of thinking you have things figured out... then realizing just how much you don't.
49. Dennis Kardys UX/Creative Director - WSOL @dkardys THANK YOU! dennis@robotregime.com robotregime.com