peepers ||

Style tiles vs UI style guides vs brand guides: what's the difference?

You may have heard the terms “style tiles,” “UI style guides,” and “brand guides” before interchangeably, but they couldn’t be more different.  

We use UI style guides as part of our process here at Fuel Made. So if you’re wondering what these actually mean, and how they’re different from style tiles and brand guides, allow me to explain.

What is a brand guide?

Let's start with what most people are familiar with: brand guidelines. 

These documents define your brand's personality.

Usually, this is in the form of a PDF document, or even a physical book. Brand guidelines should have a permanence to them — they provide a solid foundation to build out designs and campaigns.

So what goes into a brand guide? Personally, I don't think these documents should be overly prescriptive because that leads to impermanence. Brand guidelines should last a long time, especially since they often take a long time to create as well. 

These documents should be high-level, encompassing design, copywriting, and photography/video direction. Generally speaking, here's what they'll contain:

  • Logo Rules
  • Brand Colors
  • Typography
  • Photography Direction
  • Voice & Tone

All of these bits of information form the core base of a brand, and can be used to design anything from print ads, to digital billboards, to  broadcast commercials. 

How this applies to web design

Like other mediums, this creates the base of our design. It informs our design decisions, but doesn't make them for us.

Brand Guide Examples

NASA Standards Manual

Open Table Brand Guidelines

Starbucks Creative Expression

Style Tiles

Style tiles came into the scene in 2012, introduced by Samantha Warren in an article on A List Apart. Before these became standard practice in web design, designers used to jump from wireframes into detailed Photoshop comps. So if the client wasn't happy with the basic direction, it was a lot of work to go back to the drawing board for a new direction.

Style tiles move brand guidelines in the direction toward more concrete designs. By interpreting the brand guide basics, style tiles incorporate a mood board with abstract interface elements to begin to define a visual language for the site design. These are very loose, and can be replicated quickly to get a gut reaction and choose a direction to jump off from the brand guide.

Style tiles are also great for clients who don't have an existing brand yet, and in this instance, the UI design will help inform the brand guides. If this is the case, style tiles can show very different baselines for a project, which is helpful for narrowing down a wide array of directions.

Here are some examples from Fuel Made:

An initial style guide iteration showing a possible color palette, font options, and a link card style. The header is light gray with black text, and the fonts are all modern sans-serifs. The link card has white text over an image.

A second style guide iteration changes one of the palette colors, adds a serif font for headlines, and changes the button style from white on gold to white on black. The header is black with white text.

A final style guide iteration adds more grayscale tones to the palette, and changes the button style from white on black to black on gold. The header now has a background image with white text, and the link card moves the text below the image.

UI Style Guides

UI style guides take style tiles one step further. These mix the mood board elements in to show the intended look and feel of an interface design, but add more structural rules and interactive elements.

For example, they’ll show type scales and usage, highlight elements' hover, focus, or active states. It's still not as prescriptive of a template mockup or a design system document, but it's more buttoned up than a style tile.

Designers don't rehash the core principles from the brand guide in UI style guides, but we start to show the foundations for how the brand guide informs the interface design. 

If you're working with us on a web project, this will typically be the first design deliverable you'll receive.

Note: UI Style Guides  aren’t meant to be documentation in the same way a brand guide is. The web is a far more impermanent space, and UI designs are constantly evolving over time. Like style tiles, this document isn't meant to be a reference point, so much as an initial approval of the design direction. 

After a site is live, there isn't much use for these design artifacts, and documentation for the digital implementation of a brand should move into a design system.

The UI Style Guide for the Fuel Made site shows the usage for the palette colors, all the interactive states for buttons and forms, the type scale and its usage, and shows example modules.

. . . . .

Brand guides, style tiles, and UI style guides are all used to define the brand usage—to different extents. The one you use will depend on your project, but this should clear up which one will work best for you.

Kellie Kowalski

Kellie Kowalski

Kellie Kowalski is a UX and Visual Designer who specializes in building accessible interfaces by blurring the lines between design and development. When she's not tinkering with design systems, she's working on her next weightlifting PR.

Ready? Let’s Talk.