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.

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