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
2. Responsive Disrupts Design
3. Old Web Development Process Planning Static Wireframes Static Mockups HTML, CSS and JS Launch
4. Old Web Development Process Static Wireframes Static Mockups
5. Old Web Development Process Static Wireframes Static Mockups
6. Let’s assume five templates… Static Wireframes Static Mockups
7. Static Wireframes Static Mockups We’ll need five wireframes…
8. Static Wireframes Static Mockups And five mockups…
9. Static Wireframes Static Mockups Can’t forget mobile…
10. Static Wireframes Static Mockups And tablet…
11. Static Wireframes Static Mockups Plus one round of revisions
13. That’s sixty artifacts for five templates
14. Most orgs have more than five templates
15. Worse, none of these artifacts truly capture the end web page
16. The artifacts show three breakpoints… 390 810 1920
17. They don’t even account for device rotation… 390 810 1920
18. And forget all of the resolutions in between. 390 810 1920
19. Many design challenges between breakpoints. 390 810 1920 Interesting stu happens here
23. Paul is the exception, not the rule
24. Expand your browser until it looks like then… BOOM You need a breakpoint.
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
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
27. Design Systems Amplify the Problems
28. Well-considered design system components Multiple use cases Variations Interaction and behavior Animation Responsive Di erent types of input Accessibility Performance Consistency Documentation
30. Symbols Libraries Tokens Templates
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
34. Hando
35. Hando
36. Hando
37. More evidence the old process is broken
38. Most design tools are stuck in past
39. Hando
41. Are these margins fixed? Do these measurements matter? Do they change with the viewport?
42. Why isn’t this using a design token?
43. Does the size of the avatar change? Where are the design tokens?
48. Do we really want our design tools generating production code?
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?
51. Design tools o en treat static mockups as the source of truth instead of the web-based design system.
52. Old Web Development Process Planning Static Wireframes Static Mockups HTML, CSS and JS Launch
53. Our design process
54. Discovery Prototype Sketching Extract Components Design System
55. Discovery Prototype Sketching Extract Components Design System
56. This process is demonstrably better Discovery Prototype Sketching Extract Components Design System
57. Designs have greater integrity
58. Designs have greater integrity
59. Designs have greater integrity
60. Solve problems you can’t see in static mockups
61. Solve problems you can’t see in static mockups
62. Hando with most responsive problems solved
63. We like to teach our process…
64. Need help clouding your fours? Squiddly-doo! Captured for youpro Need help clouding your fours? Squiddly-doo! Captured for youpro
65. Sometimes it isn’t a good fit
66. Discovery Prototype Sketching Extract Components Design System This works for us because…
67. Discovery Prototype Sketching Extract Components Design System This works for us because…
68. Our designers code. Our developers went to art school.
71. In an ideal world: Designers code and developers design
73. Discovery Prototype Sketching Extract Components Design System Looking for design tools to get us closer to this
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
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
77. Design tool nice-to haves Integration with design system documentation Collaboration features Tools for developers to inspect designs Animation support
80. Our experiment requires
81. Web components
84. Narrow / Small Medium Wide Basic Layouts Using Storybook’s Design System
92. Mobile Narrow / Small Tablet Medium Desktop Wide Very Close to the Original Design
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
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
113. Design tool nice-to haves Integration with design system documentation Collaboration features Tools for developers to inspect designs Animation support
115. Try them for yourself
116. Discovery Prototype Sketching Extract Components Design System So how close are we to something like this?
124. Maybe it’s not HTML mockups that make this work… Discovery Prototype Sketching Extract Components Design System
125. Maybe it’s design and development as one… Discovery Prototype Sketching Extract Components Design System
126. Perhaps we can improve this process… Planning Static Wireframes Static Mockups HTML, CSS and JS Launch Design Development Hando
127. Perhaps we can improve this process… Planning Static Wireframes Static Mockups HTML, CSS and JS Launch
130. Thank You!
131. Thank You!
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!