Style Guide Audience

In his talk Designing Inspired Style Guides, Andy Clarke discusses the importance of creating digital style guides that go beyond being humble containers for UI assets and instead operate as beautiful vehicles that evoke the essence of the brand. When it comes to the current look of many UI pattern libraries, he says:

They look ugly enough to have been designed by someone who enjoys configuring a router.

Sick burn.

In a bit of a rebuttal, Jeremy Keith expressed his disapproval of “styleguide-shaming”:

If a pattern library is intended to inspire, then make it inspiring. But if it’s intended to be an ever-changing codebase (made for and by the kind of people who enjoy configuring a router), then that’s where the effort and time should be concentrated.

But before designing anything—whether it’s a website or a pattern library—figure out who the audience is first.

I think they’re both talking about important things, so it’s worth following Jeremy’s advice to figure out who a style guide’s audience is.

Who Is This Thing For, Anyways?

“Figure out who the audience is” is important advice, but I also think it’s a bit incomplete. When it comes to style guides, I think “Figure out who the audience could be” is also a worthwhile pursuit.

Core audience

A style guide’s core audiences is typically practitioners who are looking for tools and guidance so they can do their work efficiently and effectively. These people might come to the style guide searching for code snippets to copy and paste, looking for a specific color value, hunting for guidelines on how to successfully implement data tables, or finding a link to a code repository. They’re looking to get things done, and the style guide helps them along in the tasks they regularly face as designers or developers.

In my work as a consultant, I’ve been privileged to see many organizations’ style guide setups. From what I see, style guides are often established by members of one group (typically frontend people) to help them work together more efficiently. While these style guides help people within that core audience, they often don’t take into consideration the wants and needs of other disciplines, which I see as a big missed opportunity.

Secondary audiences

No doubt a style guide needs to be useful for its core audience, but focusing exclusively on that audience reduces the opportunity for it to be a cross-disciplinary resource for the entire organization:

A style guide has the opportunity to serve as a watering hole for the entire organization, helping establish a common vocabulary for every discipline invested in the success of the company’s digital products. Establishing this common vocabulary can lead to more efficient work, better communication, and more collaboration between disciplines across the organization. That’s why the style guide should be an inviting place for everybody, not just [core] design system users.

Creating a resource that benefits many different disciplines is a good idea, and yes that often means making it an attractive destination. That means non-technical disciplines like visual design, UX design, content strategy, project management, etc won’t get scared off by seeing nothing but code snippets and technical jargon. Again, I’m not saying that technical information isn’t important; I’m saying there’s an opportunity to provide more than that to the benefit of everyone (including developers).

Of course making the style guide a cross-disciplinary watering hole takes a significant amount of time and effort. But you don’t have to bite it all off at once.  The MVP of the design system and accompanying style guide needs to be useful for the core audience. But please don’t stop there!

It’s Evolution, Baby

It wasn’t too long ago that companies were launching the very first responsive versions of their web experiences. Of course these first stabs at responsive design were almost always suboptimal with regards to performance, UX best practices, inspiring visual design, and so on. No doubt things have come a long way since those first “look, our site is squishy!” days, and we’re now seeing many inspiring, thoughtful, performant responsive experiences. This is an evolution, like pretty much everything else in life.

And so it goes with style guides. For the most part, we’re still in the “look, we have a pattern library!” days of design systems. I’m excited about style guides because they help practitioners work more efficiently. But I’m even more excited about style guides because they serve as a vehicle to help people across many different disciplines share knowledge and collaborate with each other. As we move forward with our design system initiatives, let’s look for opportunities to make our style guides important resources for as many people as possible.