Replacing Photoshop with HTML Prototypes in the Real World

Transcript

1. REPLACING PHOTOSHOP
   HTML PROTOTYPES
   Dennis Kardys
   UX/Creative Director - WSOL
   @dkardys
   WITH
   

   View Slide

2. THE REAL WORLD
   The mundane and tedious situations
   we accept as facts of life?
   

   View Slide

3. vs. THE REAL WORLD
   Faulty prototypes begging
   to be fixed.
   

   View Slide

4. WEB DESIGN IS
   HARDER THAN EVER
   

   View Slide

5. How do we communicate
   CANVAS, CONTEXT & CAPABILITIES?
   

   View Slide

6. But WILL the
   People know
   to click it?
   

   View Slide

7. http://disneycartoon.deviantart.com/art/Spongebob-Imagination-126455311
   IMAGINATION
   

   View Slide

8. BETTER WAYS?
   

   View Slide

9. Samantha Warren’s STYLE TILES
   

   View Slide

10. Jeremy Keith Pattern Primer
    Jeremy Keith’s PATTERN PRIMER
    

    View Slide

11. ...beginning with the atomic units of
    content and styling them first before
    even thinking about layout...
    - Jeremy Keith
    

    View Slide

12. 
    

    View Slide

13. IF THEY MATED?
    

    View Slide

14. 1. RESPONSIVE
    2. LAYOUT INDEPENDENT
    3. COMMUNICATE + IDEATE
    4. DISPOSABLE
    5. SUSTAINABLE
    

    View Slide

15. The HTML Device Agnostic Design
    Style Tile Pattern UI KIT thingamajig
    

    View Slide

16. The HTML Device Agnostic Design Style
    Tile Pattern UI KIT thingamajig
    code name: MAMMAL PAW
    

    View Slide

17. View Slide

18. The goal is to provide a realistic
    and cohesive impression of the
    visual design...
    

    View Slide

19. that can be evaluated
    objectively...
    outside the conventions of any
    ONE specific CONTEXT.
    

    View Slide

20. UI Patterns
    Color Scheme
    Typography
    

    View Slide

21. Forms
    Illustration
    Style
    Figures &
    Captions
    Content
    Modules
    

    View Slide

22. Operation: MAMMAL PAW vs...
    

    View Slide

23. 2 sets of wireframe concepts,
    2 design concepts, responsive design
    

    View Slide

24. View Slide

25. +
    

    View Slide

26. +
    IF THEY MATED?
    

    View Slide

27. +
    

    View Slide

28. People want options, but they don’t
    always understand them
    -peter the unemployed architect
    

    View Slide

29. Choices give a sense of control and
    stake of ownership in the chaos
    called the creative process.
    

    View Slide

30. Understanding your clients
    motivations helps you propose
    alternative viable solutions
    

    View Slide

31. View Slide

32. BETTER DESIGN COMMUNICATION
    Presenting responsive HTML provokes
    smarter conversations
    

    View Slide

33. Ben has spoken.
    We demand the button
    above the fold!
    

    View Slide

34. MORE CONSTRUCTIVE
    COLLABORATION
    exploration vs. refinement
    

    View Slide

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
    

    View Slide

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
    

    View Slide

37. Ultimately, more ideas, more
    collaboration, better results.
    Equal effort. More time for testing.
    

    View Slide

38. Modular Design
    +
    Structured Content
    (CC BY-SA) http://www.flickr.com/photos/bdesham/2432400623/
    

    View Slide

39. Find Patterns
    Avoid Conditional Logic
    Start using a framework
    OOCSS / SMACSS
    

    View Slide

40. View Slide

41. Object: Media Block
    (.media)
    floated image, title,
    description, link or button
    

    View Slide

42. View Slide

43. Object: Content Listings
    (.vlist)
    assorted vertical lists
    of content
    

    View Slide

44. HTML Prototype
    Design Guide.html
    baseline.css
    grid.css
    patterns.css
    Hi Fidelity HTML
    style-v1.css
    style-v2.css
    style-v3.css
    

    View Slide

45. example style.css
    ABSTRACT STYLES
    example: instead of
    .purple, .green, .blue,
    use
    .c1, .c2, .c3
    

    View Slide

46. View Slide

47. Pitfalls:
    How much to show?
    Keeping code organized
    Keeping pages looking cohesive
    Unknowns
    

    View Slide

48. It’s the normal cycle of thinking you
    have things figured out...
    then realizing just
    how much you don't.
    

    View Slide

49. Dennis Kardys
    UX/Creative Director - WSOL
    @dkardys
    THANK YOU!
    [email protected]
    robotregime.com
    

    View Slide