Use Design Systems To Do Your Best Creative Work

Brad Frost is the creator of Pattern Lab, a powerful piece of software that enables user interface (UI) designers and developers to skip out on the tedious tasks of building websites and focus their energies on more experimental and creative parts of the job.

We spoke with Frost ahead of the start of his new free online course on Aquent Gymnasium about Pattern Lab, the concept of “atomic design,” and how to save designers and developers tons of valuable time with a few key changes to their workflow. Check out our interview below. Don’t forget to sign up for his course, Working With Atomic Design and Pattern Lab.

Q: In your own words, what, exactly, is Pattern Lab?

Brad Frost:  It serves as a workshop environment, where the people create all of the components that build up a webpage, or a web experience. It serves as the home base where you can develop or create a card component, a header and a footer, and all of that stuff, but then also include all of that stuff inside of bigger components. Sort of stitch them all together to form actual pages.

Q: Why did you create Pattern Lab in the first place?

BF: I'm a front end designer by trade, so I write HTML and CSS and presentational JavaScript for a living. I quite literally made it for myself, based on a desire to focus on building great user interfaces without having to worry about back end APIs and a whole bunch of gnarly tech and development stuff that just really isn't necessary to create user interfaces.

Historically, in order to start designing your buttons and your carts and so on, you would have to fire up your content management system (CMS). If you're building a WordPress site, you're firing up WordPress, or if you're creating a Ruby on Rails application, you'd have to set up all that infrastructure. I was like, “Man, it's just too much.” It's sort of overkill if you're just trying to create a button, turn the background blue, stuff like that.

So, we created a lightweight environment for people creating this front end code to do that work to the best of their abilities without having to trip over a bunch of back end stuff.

Q: How does your concept of “atomic design” fit into this?

BF: For the longest time building a website—let’s say a five-page website with a homepage, contact page, blog landing page, blog detail page, and another page—involved designing comps. So there'd be five comps for the five-page site. But for each page template, you're looking at 100 percent work, or 500 percent work for five pages. As time went on, more thoughtful architecture started taking place; people said, “Actually, these five pages are made of a lot of the same things—a header, a footer, there's some other shared aspects of this.”

So people said, let's create these reusable components that save time, so it's no longer 500 percent work. By the time you get to that fifth template, you already have a lot of the stuff created. But, my frustration whenever I created an atomic design, is that over here we had a  bunch of components, and somewhere in between there's a question mark, and on the other end, it was finished pages.

What I did with atomic design was lay out a specific hierarchy as a way to think about UIs. The name “atomic design” takes inspiration from the natural elements—hydrogen, carbon, iron, whatever—because, as complex as our world is, it's all built from the same stuff. And that parallel holds very true for interface design.

Q: Giving designers templates might chafe against people’s sense of freedom to create. Why should designers and developers use something like this?

BF: Whenever we talk about design systems and establishing reusable patterns, sometimes people will say to me, “You're just stifling my creativity, man, don't tell me how I should make my buttons.” There is some truth to it; establishing a UI design system is indeed imposing some sort of constraints on stuff—but those constraints are necessary.

I do a ton of consulting with different organizations, and one of the first things that I do with my clients is just go around their websites, and take a bunch of screenshots of all the button styles, that I find, and then just put them all on one screen together and say, “Hey look, you’ve got 120 different button styles.”

All of those 120 button styles represent someone's effort, energy, and money, but the problem is that—especially with things like buttons or cards—it really is just reinventing the wheel, again and again and again (and again). It slows things down, it creates a poor user experience, it creates a less consistent user experience and just burns a lot of talented peoples' energy and resources.

I'm working with a large publisher now, and they have 24 very unique, very visible and prominent brands. Historically, it had 24 teams, 24 designers, 24 developers, all building out 24 websites. But, if you blur your eyes a bit and look at them, well, they're all building the same thing. They came to a realization: “Wow, why are we doing this?”

Typically, designers and developers don’t have the ability, or opportunity, to actually refine and iterate and focus on these higher-level tasks, because they're too busy reinventing the card 100 times. So, you're not able to make your purple button, but you can focus on making some micro interactions, or introducing some animation, or making some sort of tweaks to that button component that makes it more powerful. We're able to free up those designers' time, to do that stuff—and that stuff is fun.  

Q: What has the response been to this software you’ve built?

BF: Pretty crazy, I'd say. Pattern Lab is now about five years old and it's taken on a life of its own. Other people came on board and took that nugget of an idea and turned it into really powerful software that a lot of places—Comcast, Target, and a bunch of other organizations—use to power their entire digital ecosystem, which is pretty awesome. Others, like the Harvard Business Review, have taken it and hacked it to power their live website. It's been really wild seeing different people take it and modify it and adjust it to meet their needs.

Q: Is Pattern Lab a self-contained piece of software, or does it play nice with others?

BF: We make Pattern Lab as flexible and versatile as possible. In the last couple of years we’ve had people ask whether they can use Drupal and its templating language, Twig or React, within Pattern Lab. The team that builds Pattern Lab has created this whole ecosystem that allows you to use whatever technology you want inside of Pattern Lab to better fit your needs.  

This blog post was originally published on our partner, Vitamin T's, blog.

Design (39)