Imagining a Fluid Future for Design Tools

Modern design tools are great, but their efforts to reflect the responsive reality of web design have been lacking. Too often, they’re stuck in static design thinking, or adaptive layouts like mobile, tablet, and desktop.

The rise of design systems has helped, allowing for easy preview of responsive patterns. But our design tools aren’t yet equipped to allow designers to move easily from design to code.
Where are the tools that allow for truly fluid layouts? What would they even look like?

In this talk, Jason will look at how our design processes have changed, how design tools should integrate with design systems, and how close we can get to an ideal fluid design tool today.

Transcript

1. Imagining a Fluid Future
   for Design Tools
   

   View Slide

2. Responsive
   Disrupts Design
   

   View Slide

3. Old Web Development Process
   Planning Static Wireframes Static Mockups HTML, CSS and JS Launch
   

   View Slide

4. Old Web Development Process
   Static Wireframes Static Mockups
   

   View Slide

5. Old Web Development Process
   Static Wireframes Static Mockups
   

   View Slide

6. Let’s assume five templates…
   Static Wireframes Static Mockups
   

   View Slide

7. Static Wireframes Static Mockups
   We’ll need five wireframes…
   

   View Slide

8. Static Wireframes Static Mockups
   And five mockups…
   

   View Slide

9. Static Wireframes Static Mockups
   Can’t forget mobile…
   

   View Slide

10. Static Wireframes Static Mockups
    And tablet…
    

    View Slide

11. Static Wireframes Static Mockups
    Plus one round of revisions
    

    View Slide

12. View Slide

13. That’s sixty artifacts for five templates
    

    View Slide

14. Most orgs have more than five templates
    

    View Slide

15. Worse, none of these artifacts truly
    capture the end web page
    

    View Slide

16. The artifacts show three breakpoints…
    390 810 1920
    

    View Slide

17. They don’t even account for device rotation…
    390 810 1920
    

    View Slide

18. And forget all of the resolutions in between.
    390 810 1920
    

    View Slide

19. Many design challenges between breakpoints.
    390 810 1920
    Interesting stu happens here
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. Paul is the exception, not the rule
    

    View Slide

24. Expand your browser until it looks like then…
    BOOM
    You need a breakpoint.
    

    View Slide

25. Old Web Development Process
    Planning Static Wireframes Static Mockups HTML, CSS and JS Launch
    Design Development
    Hando
    There are still design decisions in here
    

    View Slide

26. Old Web Development Process
    Planning Static Wireframes Static Mockups HTML, CSS and JS Launch
    Design Development
    Hando
    There are still design decisions in here
    There are development decisions in here
    

    View Slide

27. Design Systems
    Amplify the Problems
    

    View Slide

28. Well-considered design system components
    Multiple use cases
    Variations
    Interaction and behavior
    Animation
    Responsive
    Di erent types of input
    Accessibility
    Performance
    Consistency
    Documentation
    

    View Slide

29. View Slide

30. Symbols
    Libraries
    Tokens
    Templates
    

    View Slide

31. Designers o en maintain their own system
    Duplicate design system work to support design tool need
    Challenging for implementors when designs don’t match DS components
    Can’t take full advantage of thought put into design system components
    Can create confusion about which is the source of truth
    

    View Slide

32. View Slide

33. View Slide

34. Hando
    

    View Slide

35. Hando
    

    View Slide

36. Hando
    

    View Slide

37. More evidence the
    old process is broken
    

    View Slide

38. Most design tools
    are stuck in past
    

    View Slide

39. Hando
    

    View Slide

40. View Slide

41. Are these margins fixed?
    Do these measurements matter?
    Do they change with the viewport?
    

    View Slide

42. Why isn’t this using a design token?
    

    View Slide

43. Does the size of the avatar change?
    Where are the design tokens?
    

    View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. Do we really want our design tools
    generating production code?
    

    View Slide

49. View Slide

50. Issues with Code Generated by Design Tools
    Fixed width. Isn't responsive.
    Fails to use your design system conventions and tooling.
    Lacks design tokens or subcomponents.
    Specific to one use case.
    Is it the best code on which to standardize?
    

    View Slide

51. Design tools o en treat static mockups
    as the source of truth instead of the
    web-based design system.
    

    View Slide

52. Old Web Development Process
    Planning Static Wireframes Static Mockups HTML, CSS and JS Launch
    

    View Slide

53. Our design process
    

    View Slide

54. Discovery Prototype
    Sketching
    Extract Components Design System
    

    View Slide

55. Discovery Prototype
    Sketching
    Extract Components Design System
    

    View Slide

56. This process is demonstrably better
    Discovery Prototype
    Sketching
    Extract Components Design System
    

    View Slide

57. Designs have greater integrity
    

    View Slide

58. Designs have greater integrity
    

    View Slide

59. Designs have greater integrity
    

    View Slide

60. Solve problems you can’t see in static mockups
    

    View Slide

61. Solve problems you can’t see in static mockups
    

    View Slide

62. Hando with most responsive problems solved
    

    View Slide

63. We like to teach
    our process…
    

    View Slide

64. Need help clouding your
    fours? Squiddly-doo!
    Captured
    for youpro
    Need help clouding your
    fours? Squiddly-doo!
    Captured
    for youpro
    

    View Slide

65. Sometimes it isn’t a good fit
    

    View Slide

66. Discovery Prototype
    Sketching
    Extract Components Design System
    This works for us because…
    

    View Slide

67. Discovery Prototype
    Sketching
    Extract Components Design System
    This works for us because…
    

    View Slide

68. Our designers code.
    Our developers went to
    art school.
    

    View Slide

69. View Slide

70. View Slide

71. In an ideal world:
    Designers code and developers design
    

    View Slide

72. View Slide

73. Discovery Prototype
    Sketching
    Extract Components Design System
    Looking for design tools to get us closer to this
    

    View Slide

74. View Slide

75. Design tool must haves
    Full responsive support
    Treats design system as the source of truth
    Import design system components and create variants
    Design from scratch when existing components won't do
    Feel like a true design tool
    

    View Slide

76. Design tool should likely haves
    Built on the web
    Easy to update with new versions of design system
    Override design system component behavior when necessary
    Ability to prototype interactions by linking screens
    Accessibility testing and feedback
    

    View Slide

77. Design tool nice-to haves
    Integration with design system documentation
    Collaboration features
    Tools for developers to inspect designs
    Animation support
    

    View Slide

78. View Slide

79. View Slide

80. Our experiment requires
    

    View Slide

81. Web components
    

    View Slide

82. View Slide

83. View Slide

84. Narrow / Small Medium Wide
    Basic Layouts Using Storybook’s Design System
    

    View Slide

85. View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. Mobile
    Narrow / Small
    Tablet
    Medium
    Desktop
    Wide
    Very Close to the Original Design
    

    View Slide

93. View Slide

94. View Slide

95. View Slide

96. View Slide

97. View Slide

98. View Slide

99. View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. View Slide

109. View Slide

110. View Slide

111. Design tool must haves
     Full responsive support
     Treats design system as the source of truth
     Import design system components and create variants
     Design from scratch when existing components won't do
     Feel like a true design tool
     

     View Slide

112. Design tool should likely haves
     Built on the web
     Easy to update with new versions of design system
     Override design system component behavior
     Ability to prototype interactions by linking screens
     Accessibility testing and feedback
     

     View Slide

113. Design tool nice-to haves
     Integration with design system documentation
     Collaboration features
     Tools for developers to inspect designs
     Animation support
     

     View Slide

114. View Slide

115. Try them for yourself
     

     View Slide

116. Discovery Prototype
     Sketching
     Extract Components Design System
     So how close are we to something like this?
     

     View Slide

117. View Slide

118. View Slide

119. View Slide

120. View Slide

121. View Slide

122. View Slide

123. View Slide

124. Maybe it’s not HTML mockups that make this work…
     Discovery Prototype
     Sketching
     Extract Components Design System
     

     View Slide

125. Maybe it’s design and development as one…
     Discovery Prototype
     Sketching
     Extract Components Design System
     

     View Slide

126. Perhaps we can improve this process…
     Planning Static Wireframes Static Mockups HTML, CSS and JS Launch
     Design Development
     Hando
     

     View Slide

127. Perhaps we can improve this process…
     Planning Static Wireframes Static Mockups HTML, CSS and JS Launch
     

     View Slide

128. View Slide

129. View Slide

130. Thank You!
     

     View Slide

131. Thank You!
     

     View Slide

132. And most of all, our clients who entrust us to work on their design systems with them. Without
     these opportunities, we wouldn’t have anything to share in articles or in presentations like this.
     Thank You!
     

     View Slide

133. View Slide