Style Tiles Template

Save time designing your branding with this handy Sketch template!

With all the iterations and changes in a startup’s design it’s hard to keep tabs on the branding. Should the logo be blue or green? Are we using black or grey backdrops for social media graphics? It can be hard to keep it all consistent.

It’s a similar story even if you’re the single owner of a blog. The right hex codes simply aren’t always in front of our eyes.

By the way: Do you want to learn more about creating graphics for your blog? Here’s the last guide on that topic that you’ll need. 

To avoid all the hassle, we can use a variation of designers’ tool called style tiles. Once we adopt these tiles, they can act as a lean branding guide and help keep the entire team on the same page. To help you get started, I created this Sketch template and am releasing it for free. Use it to keep your next blog, personal website, or startup’s branding and user experience more consistent!

Note: I used MailChimp’s publicly available branding to fill in the style tiles with placeholder data. These branding assets are copyrighted and are not to be used in your final style tiles.

How To Use The Template

You need Sketch App to open this file.

First off, you’ll need to design a logo and place it into the first artboard in the template. Fill out the rules for how the logo should be used (space around it, different colour combinations).

Logotype

Next are colours. Pick the colours to use with your branding and give each a task. In the example below, light grey is used for backgrounds wile red is reserved for buttons only.

Colours

Estimate the amount of each colour to be used in designs. Compare the following two examples that use the same colours, but with different amounts:

Screen Shot 2015-10-01 at 19.14.52

Section “Visual Effects” lets you compile all the styles you’ll be using in your branding, for example specific photo filters you’ll be consistently using for the imagery.

Visual Effects

Combine two great fonts and prepare a few text styles to use them in your branding.

Typography

If you’ll be using icons on your website or app, collect them in the “Iconography” segment. The ones used in the template are the free Entypo set.

Iconography

If your startup is developing an app of some sort and will need an interface, use the UX Elements artboard to collect all the UI styles. In the template, I used MailChimp’s design language as a sample — as you can see, they use a specific style for each of the different buttons.

I recommend you use Sketch’s built-in features “Symbols” and “Shared Styles” to save each style into a reusable item.

UI Elements

Where To Go From Here

Every branding asset that your company (or website) needs created must follow this style tiles branding guide. This means you keep this document up-to-date and send it to everyone who has to work with your branding or changes your app interface in any way.

Consider also creating a communications style guide like MailChimp’s which will have everyone on your team write copy, emails, tweets, and interface messages in the same tone of voice.