The industrialisation of digital product design

How does the growth of systematic and reusable design systems in product design impact our creativity and freedom as designers?

If you're new to the world of digital product design, a design language is a set of rules and patterns that guide consistency and cohesion when designing a product interface. As such, a design language system (or just design system) is a set of tools or instructions to assist creatives in actually implementing the visual language.

Design Systems have done a lot to mature the practice of digital product design. The merits of building systems are clear, but the proliferation of design systems surfaces the fear that we won't be designing thoughtful experiences. Rather, we'll simply be connecting predesigned blocks of content and applying preset behaviours that may or may not be appropriate to the solve the problem at hand.

The opinions of design systems range from a necessary evil to a foundation of great design, but the first and most obvious problem some designers have with them is idea the belief we're losing our core as designers by distilling the concept of design into a series of prebuilt, rigid blocks.

The Block Model

But here's the thing: systematic and reusable design is not even close to a new concept. The block model for designing websites has been around for quite a while. Ever since the release of Startup Framework 4 years ago, marketing designers have been looking for an easier way of constructing landing pages. Founders and companies started looking to buy component kits instead of hiring designers and over time, the complexity and aesthetics of these kits improve. Some of the better web UI kits can be found on Great Simple.

It's been the same way for code — SMACSS was released around the same time and has paved the way for all manners of methodology surrounding modular and scalable CSS, most notably Atomic Design by Brad Frost. Meanwhile, the JavaScript community has started creating libraries for building reusable components, like React or Polymer with CSS Modules, as a way to proactively guard their front-end codebase against inconsistencies.

The fact of the matter is that we're moving to modular, reusable design regardless of whether you think it's a good idea. The benefits of design systems become more apparent with scale and at this point, not believing in the future of design systems is just a nice way of saying you love technical debt and scaling issues. It's all just a part of trying to become more efficient.

Foundations for Creativity

Having said that, much of a design system should be “predesigned blocks with preset behaviours” — it's important to remember that with design systems, you're designing for a product suite at a component level. Your buttons and inputs should have the exact same functionality.

Design systems at their best should actually promote more creativity - they're about helping you focus on the bigger picture rather than re-laying the foundations every time. Good design systems are catalysts for consistency, not an immutable list of commandments.

Furthermore, creating a design system for your product is no way a static or one-time process - breaking down your product suite into components allows for greater focus on the individual elements that support your platforms. Isolation of components allows for evolution through deviation, constraints through principles and allows you to put more effort into the “secondary” attributes such as security, accessibility, reliability and trust.

Just take a look at Google - they're experimenting and A/B testing wildly experimental new concepts so they created Material Design to create the groundwork for their experiments and products. Every time they learn something about their components from their use in the wild, they come back and implement a fix or a new feature in the material design library.

Culture of Growth

That being said, a designer's ability to be creative with a design system depends wholeheartedly on the culture of the workplace — design leads should create an environment where designers are encouraged to experiment beyond the boundaries of their design system to find better alternatives.

It's also important to remember that design is a funny word. Most people (junior designers included) don't understand the true meaning of design. Once again, Steve Jobs has done the best job of summing it up:

Most people make the mistake of thinking design is what it looks like. People think it's this veneer — that the designers are handed this box and told “make it look good!” That's not what we think design is. It's not just what it looks like and feels like…. design is how it works.

— Steve Jobs

So have a think about how the components of your designs system tie in to things like your user's intents, goals, activities and behaviour. Look at your data — how are customers using your components and does it reflect that in your interaction design? How effectively do your components translate to code and to what extent are they scalable, modular and granular? Most importantly, what do these components feel like when you use them? Have you thought about accessibility, reliability and security?

If you'd like to learn more about design systems, Alex Pate maintains a list of design systems published by companies and how they stack up.