An Introduction to Design Systems

So. Welcome everyone. Thanks for joining us tonight.

I am your host for the evening, and I would like to welcome every one of you.

My name is Johan, I work for a design company called Mono.

And Mono is a team of 6 user interface designers. We work from our homes and also from this co-working space that you are in now.

So. Design Systems. (Pause).

Imagine yourself in New York city. You take the subway.

And what you see in the subway is signage.

And a certain consistency.

And this consistency helps you find your way around the city. You look at the map. The color coding is clear. The typography is legible and clear.

This consistency is not an accident. It is a deliberate choice. It is the result of design work.

What you see is the result of standards being set in a graphics manual.

This work was done by Massimo Vignelli, an Italian Designer, and Bob Noorda, a Dutch designer. Both of them have unfortunately passed away, but their design legacy lives on.

So the client in this case was the New York City Transit Authority. And this was done around 1970.

Now, if you look into this manual, there is not a lot of written content. A lot of it is dedicated to standardizing things. This page is about how to distribute the signs on a metro platform.

And this page is about the typeface that should be used.

(Helvetica, of course)

This page is about the space between letters.

Essentially, the book is about creating a system that can be reused. It talks about patterns and how to apply them.

While researching this talk I came across a quote by Massimo Vignelli, one of the designers of this project. So. I am going to play a really short video of him.

(Massimo laughing for intro)

“The life of a designer is a life of fight. Fight against the ugliness. Just like a doctor fights against disease - for us the visual disease is what we have around. And what we try to do is to cure it somehow, with design.

Excuse me if that was not very audible through the speaker system. Just for clarity I will read his quote again.

“The life of a designer is a life of fight. Fight against the ugliness. Just like a doctor fights against disease - for us the visual disease is what we have around. And what we try to do is to cure it somehow, with design.

For me, Massimo Vignelli was an important figure. At one point, Massimo decided to put the standards that his design studio set for themselves in a little booklet.

This booklet, called “The Vignelli Canon” was about the kind of values that Vignelli had as a designer. I assume that most designers always wants to do better work. I myself always want to do better work. So sometimes it is good to reflect on the principles that you use when you are designing.

One such principle that I really like is timelessness. There is a certain kind of design that just never looks old. It is a value I hold dear to my heart. I despise most trends. I want design work to last a long time.

People throughout history have found the need to design systems that work and that can be applied in a good manner in order to achieve a great result.

I came across another example, which is is the NASA Handbook.

NASA as you may know is the National Aeronautics and Space Administration of the United States of America. In 1976 they came up with a new brand, and with this new brand came a new logo.

And what they released was not just a new logo. It was a whole book about how to apply the NASA brand. There's pages and pages on how to use the logo in the right way.

There are some fun parts about the NASA Seal and the Mission Patches.

And what must have been a lot of fun to design - how to apply the NASA brand in the correct way to sattelites, airplanes...

And of course the coolest one - spacecraft.

We took a look at the past - now let's jump into the now. It's 2019 and most of us are working in the digital space.

At the first UI designer meetup, Nick Looijmans from Shopify presented what Shopify was doing in terms of system design.

And his work and the work of many others led to Polaris, which is a great example of what a design system can be if you invest in it.

A design system is essentially the 2019 version of a brand manual. What some of us design for these days is exclusively digital screens.

This requires a new kind of documentation, which is usually a website. It can contain downloadable assets; examples of UI components in practice; explanations of design patterns; as well as more traditional brand guidelines like guidelines about colors, typography, icons and logo usage.

Or as a Alla Kholmatova stated in her excellent book Design Systems, a design system is “A set of connected patterns and shared practices, coherently organized to serve the purposes of a digital product.”.

If we jump back to Shopify's Polaris.

Polaris contains content for several people in the company. This is a screenshot of a voice and tone guideline for copywriters and interface designers.

It contains guidelines such as the use of plain and encouraging language.

To help designers and developers work together, there is the documentation for several components. This is the documentation for a range slider, complete with React code and an interactive example.

The Shopify component library is quite cool really, you can view different variants of components...

...and there is this drag handle that you can use to see how a component changes depending on the viewport width.

I think overall, Shopify puts out brilliant work. It is an example to live up to. But design systems are not only created by big companies in Silicon Valley and beyond.

They are created every day by designers and developers like you and me. So today, on this designer meetup, I want to give the floor to some talented Belgian designers, to talk about their work designing design systems.

First up is Stephen Verhalleman, who has been working on a design system for Belgian scale-up teamleader for a while now. His talk is titled “Design as a Service”.

After Stephen's talk, we will listen to Jonathan and Maarten from In the Pocket, who will talk about their experiences automating design systems.

I hope all of you have a wonderful evening. If you have any questions, don't hesitate to ask me!