Doubleshot is back from summer vacation, and first I want to say hello to the new subscribers, and thanks for letting me take up a little space in your inbox every couple of weeks!
I’m proud of this edition, and I think that’s because it sprouted from a question I got from the community. Sitting down and having a conversation with someone about design and writing about that is a lot easier (and often more rewarding!) for me than just coming up with thoughts by myself 😛 This is why I ask every newsletter: send in your feedback, thoughts, and questions!
🧑💻 Practice: How can I stay creative within a design system?
Recently, I got an email from someone asking a question I hear a lot at work, especially as Material Design keeps gaining new capabilities and styles. To paraphrase:
I've been using Material design for my UI work for a while now. Recently, someone commented that my designs all had a similar look. This made me wonder how to achieve creativity within the constraints of a design system. Other than colors, illustrations, and fun interactions, what can contribute to a unique design when using a design system?
It’s a question that comes up often, especially now that we’re in a world where most tech companies have their own design systems (or use an existing design system). Recently, in an interview with design director Bethany Fong (who was one of the original Material Designers before joining Meta), we also covered it. My main takeaway from that part of the conversation (which will be coming out in a couple of weeks) was that staying creative with a design system means knowing when and how to break it.
I think there are three main things to think about:
- Understanding the mechanics of the system
- Extending the mechanics of the system
- Moving beyond the mechanics of the system
What I mean by “the mechanics of the system” is what makes the system tick. Every design system, no matter who makes it, is organized around emergent patterns of thought—about function, visual presentation, expression, and order. Knowing what each of those principles are for the system can help you to innovate on it in a way that still feels true to the system itself.
Taking Material as an example (because that’s what I’m working on every day), here’s how I see those mechanics breaking down:
Function: Material has always been intended to work as a system across different screens and platforms, as a tool to solve for broad UX challenges. That means things like the layout system and navigation elements are important, while smaller individual components take care of foundational UX needs like accessibility, legibility, and fitting in with a platform’s existing mental model. This is one of the hardest things to extend, because extension only really works when it’s serving your users’ unique needs.
Visual presentation: Material places a heavy emphasis on flexibility with visual presentation while solving for UX foundations, so components already have lots of styles, and call on abstract subsystems like dynamic color to allow for customization. Is there an opportunity to create a style for the existing components (through shape, color, gradient, type, etc) that’s unique to your app without breaking usability?
Expression: This is how the system comes together. Material guidelines try to feature lots of different configurations of layout options, components, grids, content, etc. to show what’s possible. Try creating a new type of grid, customizing things like the carousel component, or building new transitions. Play with the size and placement of important elements, and get bold with type.
Order: Repeated elements and scrolling are two hallmark features of screen-based design, so most design systems built for screens will have opinions (even if they’re not implemented in code) about grids, keylines, spacing, density, etc. This way of thinking about the “order” of the system will let you tweak these parameters to make broad, universal changes to how the software feels to use, in the same way that stylistic choices about color, type, and shape would.
Once you have a handle on these, you can build on them in a way that fits with the mechanics of the system, or subvert them entirely—as long as you have a solid rationale for doing so. Playing with these ideas can help you use a system as a tool and create something unique.
Another takeaway from my conversation with Bethany was that part of this question also belongs to the people making the system. Building and maintaining a design system isn’t about imposing rules. It’s about curiosity and collaboration. A group project. Good stewards of a system will help you bend it, and will be interested to learn more when you break it in an interesting way.
📚 Read This: Thinking in Systems by Donella Meadows
Since I went pretty heavy on the practical tips side this time, I’ll keep the theory section a bit lighter with a quick reading recommendation that’s still somewhat on-topic 🙂
Recently, I’ve been reading Thinking in Systems by Donella Meadows. It sets up a frame for thinking about phenomena in systematic terms and demonstrates a concrete pattern for breaking down some of the nuances of the things we observe. I highly recommend giving it a read and seeing how it can apply to the practice of design.
That’s it for now, see you in the next one! ✌️
