$30 off During Our Annual Pro Sale. View Details »

Imagining a Fluid Future for Design Tools

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.

Jason Grigsby

October 10, 2022
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

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