The most high-performing design systems teams I've been on are ones with designers and engineers working in parallel. This is not to say that it's easy to get into this workflow because so often design projects are iterating well beyond where engineering is able to implement. When we slow down though and talk through this work together, I think we find so much opportunity to ask each other meaningful questions and challenge our pre-held notions and expectations.
What does this look like in practice? Below I'll outline a few of the questions I generally have when engaging with component designers.
Squish-ification
The web is a notorious squishy platform. Screen sizes, color palettes, user preferences and needs all vary widely by browser and user. Some features aren't implemented in all browsers and others are implemented but behave in subtly different ways. Some users prefer large text and others want dark themes. There are a thousand ways that we engage with the web and a lot of angles to come at building widgets for those surfaces. So when I'm approaching a new pattern or design, I start by asking myself a few questions:
- What are the min and max sizes or ratios where this thing looks good?
- Should spacing or padding scale up or down with type? Or should the spacing be static and not influenced by increases or decreases in base font sizes?
- What is the general ratio you'd like this widget to take up on the screen?
- How do I engage with this element if I don't use a mouse? This is not just an accessibility concern but it also impacts how elements are constructed in the DOM because visual order doesn't necessarily equal semantic order. Even if I reorder elements visually using layouts, my keyboard will continue to navigate the elements in the order they exist in the DOM (unless you update that order with tabindex as well).
- Are there any contextual customizations to an element? Should this thing look or behave differently if it exists inside something else or if it only has a certain amount of space available?
Starting the conversation
What these questions really get at is the heart of the design. When engineers start poking at a design, what they're wanting to do is really get inside your thought process and build something that fully maps to what you, as a designer, envisioned. It's so hard to communicate intent in static design documentation and as dynamic and squishy as the web has become, these back-and-forths are more valuable and important than ever.
