Designing a Styleguide: Elements That Go Into Building Compelling Products

Posted 2 months ago by Jonathan White

If you look at companies like Dropbox, Google, and Twitter you’ll notice that they each have their own unique aesthetic. Across all their products, both mobile and web, there is a sense of consistency and uniformity in their design.The way that companies and products achieve consistency is through styleguides. A styleguide is a set of standards that aligns designs with a company’s voice and mission.

“Consistency is important because it creates trust. And design is all about creating relationships between products and users.”

The goal of this article is to introduce you to some well-thought-out styleguides and branding guidelines. It also details some of the most important elements every styleguide should have.

Hopefully, these elements and examples will serve as a source of inspiration and influence how you design sustainable products in the future.

Before we get started…

Here are a few suggestions for when you’re designing styleguides.

Styleguides help create consistency and uniformity in products.

Principles

Styleguides should always have a page on design principles. Design principles are a set of guidelines that influence how designers approach and solve problems when building a product.

Design principles from Apple’s Human Interface Guidelines.

One of the key characteristics of a good design principle is that it isn’t obvious or too broad. A good design principle should be specific enough to help a designer make decisions.

Let’s take a look at Apple’s Human Interface Guidelines, which has a section on design principles. One of their principles is direct manipulation.

“The direct manipulation of onscreen content engages people and facilitates understanding… Through direct manipulation, they can see the immediate, visible results of their actions.”

This description explains that direct manipulation is a principle that governs and mediates physical and digital interactions. It helps designers choose modes of interactions, such as swiping and rotating.

When coming up with design principles, less is more. Start off with three guiding principles and iterate from there.

For more on design principles, check out Julie Zhuo’s A Matter of Principle article. It has hugely influenced how I think about design principles.

Typography

Typography is key to achieving unity across multiple products and designs. Every styleguide should have a few sections detailing typography specifications.

It’s important to limit the number of typefaces and sizes you use in order to keep your designs simple. As a general rule of thumb, start with at most two fonts?—?one for your headers, and one for your bodies. Most of the time, you won’t need any more than that.

Typography from Google’s Material Design Guidelines

Also, include example use cases of typography to help other designers and developers understand when to use things like bold or italics.

Examples of type in use help designers understand how to use the font.

If you have trouble picking fonts, check out Typewolf and FontPair. For font sizing check out Modular Scale and its accompanying article More Meaningful Typography.

Also keep in mind that fonts aren’t set in stone. You can always change them later.

Imagery

Show, don’t tell. Imagery is a powerful tool in the hands of a designer. Images are dynamic. They convey meaning at first glance, and evoke emotions.

If you have have the assets, consider including a section that details what kinds of images other designers should use to convey your product’s voice and identity.

Nike is a good example of a company that uses images to convey their brand. Their photos have a cinematic quality that inspires you to participate in their mission and brand.

Imagery isn’t only limited to photographs. Companies like Dropbox rarely use photographs in their designs. Instead, they convey their personality through illustrations.

Dropbox conveys their personality through illustrations.

Here is an example of Hubspot’s imagery styleguide.

Notice how they describe the tone and goal of the photography before providing examples.

With guidelines for what images to use, designers can better communicate meaning to users and ultimately immerse them into a cohesive experience.

Grids and spacing

Good design cares about whitespace as much as content. Styleguides should reflect this mentality and include a section on grids and spacing.

It’s important to establish a grid system that works for every use case. In the section on grids, include information like the number of columns and rows, margins, and example uses.

For reading on grids, see A guide to creating grid systems that are built around your content as a primer. And follow it up with Modular Design For Grids.

Mailchimp’s grid system consists of 8 flexible columns with 30px gutters between columns.

Spacing should have its own section. Consistent spacing across a product creates a sense of uniformity and balance.

Marvel codified their spacing.

Having a list of margin sizes is useful to both designers and developers. In particular, developers can codify the space scale into Sass variables.

For example, using the Marvel spacing styleguide as a reference, the Sass counterpart might look like this:

Color

Color is another essential element in styleguides. Color helps establish visual hierarchies and create emotional resonance.

Color sections in styleguides make the lives of designers easier. Instead of spending time fretting about which colors to use, designers can reference the styleguide. This allows them to focus on content.

As Buffer puts it in their styleguide:

Using colors consistently brings a sense of familiarity and unity to a product. Buffer’s color scheme aims to be clear, unobtrusive and friendly.

Buffer’s color styleguide is useful to both designers and developers.

In the example above, Buffer names each of their colors. This is particularly useful to developers because they can turn the colors into Sass variables:

Notice how Buffer uses primaryColor instead of a name like brandBlue. Choose names that describe the role of the color instead of the color itself. This approach makes it easier for both designers and engineers to adjust their color values without having to change the name.

If you want to learn more about choosing color, check out the article I wrote on Designing in Color.

Components

A lot of designers and developers think about UIs as collections of components. The idea is that each UI component is its own entity. For example, a card is a single component.

Sample components from Airbnb’s blog post on their new design language.

Using this approach, designers can re-use components across multiple products and designs. This creates design consistency. It also minimizes the amount of time designers spend re-inventing the wheel designing UI components that already exist within an organization.

Component-based thinking also helps engineers. Design components can translate neatly into code. From an engineering perspective, components are like lego blocks that you can compose together.

Components can be composed to create interfaces.

While you’ll often see components in UI and pattern libraries, it’s also useful to include components in styleguides for other designers to reference.

Mapbox breaks their UI down into multiple components.

For example, Mapbox has a styleguide that includes all of their commonly used components. This includes buttons, inputs, and forms. This way their designers and developers know what UI components are already available.

If you want to learn more about components check Brad Frost’s Atomic Web Design article.

Principles, typography, imagery, grids and spacing, color, and components. This list isn’t exhaustive, but these six topics form the basis of a good styleguide.

What are your thoughts on styleguides? What are some of the lessons that you’ve learned in the process of creating styleguides? Leave a note below or tweet at me.

If you enjoyed this article, you might enjoy Photos and stories from a designer.

Photos and stories from a designer
Some of the best designers are also some of the best storytellers.medium.com

You can find me on Medium where I publish every week. Or you can follow me on Twitter, where I post non-sensical ramblings about design, front-end development, and virtual reality.

P.S. If you enjoyed this article, it would mean a lot if you click the ? and share with friends.

Bringing design thinking to engineering, closing the gap between the qualitative and quantitive. Follow me on Twitter or follow my writing on Medium.

Related Posts

This month’s post is a compilation of what our product designer at Marvel, Maxime, found inspiring this month in design. 3D: The new illustration trend for 2019? 2017 & 2018 were the years where 3D was more prominent than ever before. Pokemon Go reached 500 million downloads. We saw Apple releasing their new Animoji’s and Memoji’s. IKEA launched Place, an… Read More →

The Rise of the Emoji It all began long ago with facial expressions made out of punctuation – labelled emoticons: : – ) : – ( ; – ) 8 – D The first emojis that resemble our beloved of today were created by a Japanese artist in 1999 and were officially ‘born’ into mainstream social media culture in 2011… Read More →

Welcome to our new series directly from the Marvel dev team. You’ll find us back here every month at the same time, dropping some details on what we’ve shipped the past 30 days. iOS Photo Roll 📷 This month we released a few updates to the Marvel and POP by Marvel iOS apps, to improve your experience and help you… Read More →