Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design the Code

Katie Kovalcin
October 13, 2014

Design the Code

An in-depth look at how designers & developers can work closely together to deliver coded design deliverables for efficient collaboration and better ideas.

Katie Kovalcin

October 13, 2014
Tweet

More Decks by Katie Kovalcin

Other Decks in Design

Transcript

  1. DESIGN
    the
    CODE,
    not
    COMPS!
    @katiekovalcin
    Tuesday, October 14, 14

    View Slide

  2. Tuesday, October 14, 14

    View Slide

  3. COLLABORATION!
    Tuesday, October 14, 14

    View Slide

  4. COLLABORATION!
    But why?
    Tuesday, October 14, 14

    View Slide

  5. Bill Bernbach
    Thanks to Jeffrey Zeldman for the story!
    Tuesday, October 14, 14

    View Slide

  6. Tuesday, October 14, 14

    View Slide

  7. Tuesday, October 14, 14

    View Slide

  8. In 2014, the web
    industry is repeating
    the same mistakes
    that advertising
    made in the 1940s.
    Tuesday, October 14, 14

    View Slide

  9. Working in silos &
    phases
    Designers “throwing it over the wall”
    Tuesday, October 14, 14

    View Slide

  10. Static Comp ≠
    Coded Page Template
    Why is this what we hold everything to?
    Tuesday, October 14, 14

    View Slide

  11. Duplicate
    deliverables!
    We all just love to build the same site ~3 times.
    Tuesday, October 14, 14

    View Slide

  12. Something has
    to give.
    Tuesday, October 14, 14

    View Slide

  13. Something has
    to give.
    And it’s usually creative iterations, timeline &
    budgets, or sanity.
    Tuesday, October 14, 14

    View Slide

  14. Designers &
    Developers need to
    be “Creative Teams”
    Tuesday, October 14, 14

    View Slide

  15. Rather than a more traditional design
    and development departmental split,
    why not create small teams with both
    design and development talent? That
    way, when someone has a good idea, it
    can be designed and prototyped without
    the hassle of multiple handoffs.”
    — Trent Walton, Where to Start

    Tuesday, October 14, 14

    View Slide

  16. More realistic
    expectations can be
    met in the browser
    Tuesday, October 14, 14

    View Slide

  17. “...duh, Katie. We’re devs. We’ve been
    doing it like that for years.”
    Tuesday, October 14, 14

    View Slide

  18. Let designers design*
    Tuesday, October 14, 14

    View Slide

  19. Let designers design*
    By whatever means they are most efficient and
    comfortable in, this may still be a static PSD
    Tuesday, October 14, 14

    View Slide

  20. *But everyone needs
    to expand their
    skillset!
    Yes, developers should learn some design.
    Tuesday, October 14, 14

    View Slide

  21. Developers:
    help designers use
    your tools!
    Tuesday, October 14, 14

    View Slide

  22. Tuesday, October 14, 14

    View Slide

  23. Designers:
    explain your nuanced
    decisions in design
    reviews
    Tuesday, October 14, 14

    View Slide

  24. Tuesday, October 14, 14

    View Slide

  25. Everybody:
    A design system
    takes two (skillsets)
    to tango
    Tuesday, October 14, 14

    View Slide

  26. Responsive deliverables should look a lot
    like fully-functioning Twitter Bootstrap-
    style systems custom tailored for your
    clients’ needs. These living code samples
    are self-documenting style guides that
    extend to accommodate a client’s needs
    as well as the needs of the ever-evolving
    multi-device web.”
    — Dave Rupert, Responsive Deliverables

    Tuesday, October 14, 14

    View Slide

  27. Tuesday, October 14, 14

    View Slide

  28. http://bradfrostweb.com/blog/post/atomic-web-design/
    Tuesday, October 14, 14

    View Slide

  29. Tuesday, October 14, 14

    View Slide

  30. A
    Coded
    Design
    Process
    Case Study
    Tuesday, October 14, 14

    View Slide

  31. Tuesday, October 14, 14

    View Slide

  32. Tuesday, October 14, 14

    View Slide

  33. Everyone involved
    from day 1
    1
    Tuesday, October 14, 14

    View Slide

  34. Create goals together
    Things like:
    ✦ Performance budget
    ✦ Experience goals
    ✦ Prototyping
    ✦ Tools
    Tuesday, October 14, 14

    View Slide

  35. “I have this really
    cool thing I want to
    try”
    ...said the developer to everyone except the team
    Tuesday, October 14, 14

    View Slide

  36. 2
    Educate the client
    Tuesday, October 14, 14

    View Slide

  37. What should they
    expect for
    deliverables?
    Tuesday, October 14, 14

    View Slide

  38. Define Vocabulary
    Things like:
    ✦ Template
    ✦ Module
    ✦ Style Guide
    ✦ Hamburger Icon
    Tuesday, October 14, 14

    View Slide

  39. What should they
    give feedback on?
    Tuesday, October 14, 14

    View Slide

  40. Establish Design
    Direction
    This is usually static.
    3
    Tuesday, October 14, 14

    View Slide

  41. Coded Style Guide
    Preparing yourself for the system.
    4
    Tuesday, October 14, 14

    View Slide

  42. Tuesday, October 14, 14

    View Slide

  43. Tuesday, October 14, 14

    View Slide

  44. Tuesday, October 14, 14

    View Slide

  45. Design Full Page
    This also will probably be static.
    5
    Tuesday, October 14, 14

    View Slide

  46. Tuesday, October 14, 14

    View Slide

  47. Tuesday, October 14, 14

    View Slide

  48. Tuesday, October 14, 14

    View Slide

  49. Tuesday, October 14, 14

    View Slide

  50. Deliver static pages
    faux “in browser”
    Get the client comfortable with viewing
    deliverables in the browser
    Tuesday, October 14, 14

    View Slide

  51. Tuesday, October 14, 14

    View Slide

  52. Evaluate feedback
    You’ll want to feel confident in iterations.
    6
    Tuesday, October 14, 14

    View Slide

  53. Tuesday, October 14, 14

    View Slide

  54. Tuesday, October 14, 14

    View Slide

  55. Tuesday, October 14, 14

    View Slide

  56. Tuesday, October 14, 14

    View Slide

  57. Deliver design
    feedback via code
    Interactions are design.
    7
    Tuesday, October 14, 14

    View Slide

  58. Tuesday, October 14, 14

    View Slide

  59. Tuesday, October 14, 14

    View Slide

  60. QA, QA, QA!
    Designer perfecting the design alongside the
    developer
    8
    Tuesday, October 14, 14

    View Slide

  61. Tuesday, October 14, 14

    View Slide

  62. These are design
    iterations, NOT BUGS!
    Tuesday, October 14, 14

    View Slide

  63. Build & document
    modular, extensible
    code
    9
    Tuesday, October 14, 14

    View Slide

  64. Tuesday, October 14, 14

    View Slide

  65. Iterate back & forth
    This will be determined by how you & your
    teammates work well together. Be fluid.
    10
    Tuesday, October 14, 14

    View Slide

  66. Tuesday, October 14, 14

    View Slide

  67. This is a screenshot of the same module from the
    homepage. Does not need designed!
    Tuesday, October 14, 14

    View Slide

  68. This was already established—does not need
    designed!
    Tuesday, October 14, 14

    View Slide

  69. Only these two patterns
    needed to be designed for
    this entire page!
    Tuesday, October 14, 14

    View Slide

  70. Tuesday, October 14, 14

    View Slide

  71. Tuesday, October 14, 14

    View Slide

  72. Open & Constant
    Communication
    Both with teammates and the client.
    11
    Tuesday, October 14, 14

    View Slide

  73. Tuesday, October 14, 14

    View Slide

  74. Happy developers
    build future pages!
    The system is built and ready to be extended.
    12
    Tuesday, October 14, 14

    View Slide

  75. “Let us prove to the
    world that good
    taste, good art, and
    good writing can be
    good selling.”
    — Bill Bernbach
    Tuesday, October 14, 14

    View Slide

  76. “Let us prove to the
    world that good
    design, good code,
    and good content can
    be good selling.”
    — Bill Bernbach, if he worked on the web today
    Tuesday, October 14, 14

    View Slide

  77. Tuesday, October 14, 14

    View Slide

  78. Tuesday, October 14, 14

    View Slide

  79. Tuesday, October 14, 14

    View Slide

  80. Tuesday, October 14, 14

    View Slide

  81. Tuesday, October 14, 14

    View Slide

  82. Tuesday, October 14, 14

    View Slide

  83. Tuesday, October 14, 14

    View Slide

  84. Tuesday, October 14, 14

    View Slide

  85. Tuesday, October 14, 14

    View Slide

  86. Tuesday, October 14, 14

    View Slide

  87. Tuesday, October 14, 14

    View Slide

  88. Tuesday, October 14, 14

    View Slide

  89. Tuesday, October 14, 14

    View Slide

  90. Tuesday, October 14, 14

    View Slide

  91. THANK YOU!
    @katiekovalcin
    Tuesday, October 14, 14

    View Slide