Our WorkAbout UsOur ApproachThe Journal
Contact »
« Back to the journal
UX / UI

Design Systems

By:

Ann Wood

on 7/5/2019

“Design systems” is a term that’s been floating around the design community for quite some time. It’s a very Silicon Valley-esque way of thinking, and it’s slowly been making its way across the country. But what is it exactly, and why should we care?

Design systems, according to Design Systems: A practical guide to creating design languages for digital products, is “a set of interconnected patterns and shared practices coherently organized to achieve the purpose of digital products.” IN A NUTSHELL, this means that you have a bank of repeating groups of elements that you can reuse throughout a design, depending on the purpose.

Keeping things connected

First off, there are patterns within design systems. They’re reusable groups of pieces that can be used throughout design to solve a problem. There’s functional patterns and perceptual patterns. Functional patterns define the structure of your design, like the backend layout, while perceptual patterns define the visuals like typography, spacing, interactions, etc. The combination of these two patterns help guide digital design forward in a reusable, efficient way.

In my mind, it’s helpful to think of functional patterns as the wireframes, and perceptual patterns as the UI kit. There’s a ton of other comparisons, like HTML as functional patterns and CSS with perceptual patterns.

Wireframe and UI kit examples

wireframe.jpg

APCD-UI-Kit-copy-1.jpg

Purpose, purpose, purpose

One of the biggest take-aways about design systems is that everything should have a purpose. Everything! When documenting patterns, you should describe the intent of each piece and when to use it. This way, it will be easier for people to use your patterns down the road. Everything in design should have a purpose anyway, but this way it can be documented to show others why things were created as they were.

What’s in a name?

Naming patterns is also super important. The book I mentioned above has a whole section on pattern naming. It keeps everything organized, which allows for easy hand off and collaboration with other people on your team.

Where to put things

The Design Systems book lists all kinds of places you can house pattern libraries. There’s IBM’s Carbon design system and Google’s Material Design that have downloads and plugins you can customize, along with GitHub repos that people have put together. One guy in the book even mentioned having a google doc for his company’s design system. The point is that you have a collaborative place to house patterns, and a place to list the purpose of them.

Material-design.png

Google’s Material Design Sketch plugin

But why?

Design systems may seem like a lot of work up front, but their intent is to make life easier down the road. By saving out reusable functional and perceptual patterns to a place that’s accessible, while describing the purpose of them, you can save time from designing down the road. It’ll also help with keeping design consistent across platforms over time.

Share to

Related Posts

UX / UI
Wireframing vs. Prototyping and Everything In-Between

By:Morgan Plappert on 7/14/2020

Prototyping demonstrates ideas, and baking prototyping into your workflow can begin to shift the way you think and approach design problems as a whole.

Read More »
The Internet's Bubble Wrap: Your 404 Page is More Important Than You Think

By:Morgan Plappert on 9/13/2017

Hand over that half-empty glass and let us show you a few examples of how to turn possible frustration into opportunity.

Read More »