Design Systems:
A Primer

Article written by Seb Tremblay
Interactive Art Director & Product Designer, Montréal

 

The hype around design systems

Although it was around before, ever since Google has released Material in 2014, the subject of systematization in design has seen somewhat of a chain reaction. It seems like there’s hardly a week that passes by without seeing the release of a new article on Medium detailing the tale of a design team or another coming up with a system or language of their own. 

It’s plain to see that there’s a plethora of articles aiming to explain how to come up with your own design system or how to implement one. But a crucial question often ends up being overlooked: How should one think about design systems?

 

The reality of a design system

It can be argued that there’s a simple essential difference between art and design. In fact, by aiming to solve specific problems or achieve goals, design is by nature purposeful. As such, through time, designers have developed (and continue to develop) tools to those ends. 

For example, an early modern foray for designers was in psychology and the specific field of Gestalt. Founded by 20th-century German psychologists Max Wertheimer, Wolfgang Köhler, and Kurt Koffka, Gestalt studies attempted to determine how humans perceive visuals in connection with different objects and environments. It culminated, among other things, in the Gestalt laws of grouping; principles that have been used ever since by designers to supercharge their designs, to tentatively guide the viewer’s eyes and hence making their artworks more effective.

 

The above image was designed by Saul Bass for the 1955 movie Man With The Golden Arm. In this composition, the eye follows the pathway created by the solid shapes. It first stumbles on the actors’ names. Encouraged to escape the flowing line created by the shapes, it then continues to scan this irregular terrain to find the main title, nestled in a resting point. The title is thereby given significant focus as the eye can hardly escape the shape it is enclosed in. These observations all are laws of Gestalt at work. A compelling capitalization on laws of similarity, continuity, closure and law of continuation.

Through scientific discoveries like Gestalt and plain observations, designers have engaged in an endless crusade to harness the power of the design, always further paving the road with new tools essential in achieving their work. 

Flash forward to today, challenges brought by modern needs in design have pushed systematization forward. A good basis to start thinking about design systems is Brad Frost’s Atomic Design. Its very barebone nature perfectly illustrates how little is needed to get started. For example, in the system’s nomenclature, Brad Frost dictates that labels, inputs and buttons would be atoms; the combination of these atoms, a molecule; and if this molecule could be part of the navigation bar, for example, it would then be considered an organism. 

 

As simple as it may seem, there lies the archetype of a system upon which literally thousands of websites have been built. 

Simply put: by rationalizing and codifying the design, it achieves systematization. Once that this is established, you can use that systematization as the basis to edify any design projects. Beyond design atoms, anything you can rationalize and codify should be included in your design system: type, colors, spacing, imagery, patterns, documented usage of the aforementioned, etc. 

This is also applicable to brands, physical designs and many other fields of design.

In larger systems, components keep on building themselves, sometimes by compounding one another. For example on the Web: page templates & user flow, respectively based on multiple organisms and pages; sometimes by unique necessity, like in space design with signage.

So how should one think about design systems? In two main aspects:

— Systematization occurs in all designs; evolving as the design process continues. 
— The level of sophistication those systems require is informed by the design process, as it unfolds.

From all the hype generated by design systems, one could gather they are only these deeply elaborate things. In reality, a system isn’t only a system when it’s super sophisticated. Harnessing the power of systematization as needed is only natural. Boosting consistency, speeding up the workflow and being instrumental in the elaboration of solutions to complex design challenges are only few benefits that design systems can bring, when needed.

That might mean only having a typescale with colors, though.Simply because, well that’s what your design requires. Some systems are sometimes so exhaustive that it seems like they’re not even holding the designer responsible for actually designing, instead only being responsible for implementing. That’s because these systems can be overly sophisticated for the challenges posed.

Let me be clear: Carbon and Material are great design systems. But one can easily notice by the implementation of Material outside of Google (and even from Google, from product to product) that it’s rarely used as it was envisioned. It’s most likely because people will use a tool as the way they need it, not the way the tool is supposed to be used.

Like that saying “when all you’ve got is a hammer, every problem starts looking like a nail”.

To avoid the waste of a design system, one needs to keep the system as bare as possible. Systems should be sophisticated to a point where the benefit of its use outweighs the effort of maintaining and implementing it. Simply put: useful, not exhaustive.

One can plan on building a design system beforehand, but not quite plan said system before the design requires it.

 

Reconsidering things

Design systems ought to be thought of the same way one thinks of any tools: you need them to serve you and you need different tools for different jobs. Having a design process might be the first step towards doing good design, but breaking your design process to build it back up again is the step towards doing great design.

More precisely, one must be ready to break away with previous conceptions & ideas about design systems, as well as other tools, everytime one requires them.  

 

Thank you for reading!

By Seb Tremblay

 

What next?
We have 3 beautiful volumes of free font pairing goodness where you can try your hand at that black and white theory, make sure you go read Volume 1Volume 2 and Volume 3.

New to our fonts?
Make sure to get our Font Starter Pack loaded with 23 fonts and a lot more!

Go download our free to try fonts to create new beautiful pairings and tag them on instagram to get featured!


Share this post