Replacing Photoshop with HTML Prototypes in the Real World

Aff5641764408271f7bc398f2097edd0?s=47 Dennis Kardys
August 25, 2012

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.

Aff5641764408271f7bc398f2097edd0?s=128

Dennis Kardys

August 25, 2012
Tweet

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
  17. None
  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

  24. None
  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

  31. None
  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
  40. None
  41. Object: Media Block (.media) floated image, title, description, link or

    button
  42. None
  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
  46. None
  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