create a simple style stile with a handy download.

Creating a Simple Style Tile for Your Website and Brand

ByLee Drozak First Published

Have you ever thought of creating a style guide to keep your business visuals consistent?

But then you look at the options and quickly get overwhelmed by the amount of information you’re being told to gather.

Search Google (or Pinterest or Instagram) and you will find tons of examples and information for style guides but many of those are geared to large corporations or designed by brand creators/marketers. 

What’s a solo business owner, freelancer or small business owner to do when they don’t have design experience or a big budget and you want to document your brand or online visual style?

In this article we’ll outline a simple way to create a one page document for your brand and website and you’ll get a access to a resource I’ve created for some of my clients.

What is a Style Guide?

A style guide is a collection of elements that one should follow to be sure that your website pieces are consistent and cohesive. Even if you are a one-person shop, it’s important that you have a guide so that when you do bring on help (and you should) they will have the basics to follow and not add personal preferences into the mix.

You’ve hopefully spent some time thinking about the elements that will make up your brand, and if not, you need to start by doing that. There’s a lot more to creating a full-on website style and brand guide which many small business owners and soloprenuers are not ready to tackle by themselves.

Here are some things that you can include in a style guide:

  • Logo spec and usage
  • Logo variations
  • Marks and logo alternatives
  • Full-color palette
  • Typography
  • Visual elements – images, icons
  • Your mission statement
  • Copy voice and tone
  • Photography
  • Patterns and textures
  • Social media image guidelines
  • Email signature

Whew, that’s a lot of pieces to assemble by yourself or when you are just starting out. It’s important that you have documented strategies and assets for your brand but you shouldn’t overwhelm yourself by trying to create a style guide that applies to larger companies and corporations.

There is an alternative and that is the style tile.

Style tiles are a transitional guide that is more than a mood board but not as intensive as a brand style guide and created to communicate the essence of your visual brand.

According to the site StyleTilles, “Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.” Style tiles establish a direct connection with actual interface elements without defining layout.

How is a Style Tile Different?

Style tiles, used by many web designers, are basically more detailed mood boards designed to give you a sense of the aesthetics of the brand or website. Your style tile is used to define elements like fonts, typography, colors and design elements used in website design.

Because they are more cost effective to assemble, the style tile is useful for small business, freelancers and those with smaller budgets. Building a comprehensive style guide takes a lot of work, research and billable hours to complete.

simple brand style guide
a simple one page style tile

What should it include?

Logo

You may not need all the different ways to use your logo or mark but you should brand your document. You should always brand all of your assets and the style tile is no different. If you don’t have a logo, you can have a simple text log created for you using a service like logoin30mintes.com but you will need to give them specifics

Color Palette

Displaying your potential colors or most important colors should be included. I like to include a variety color palette including primary color, secondary colors and neutral colors like grays, blacks or variation of your primary color.

The guide has space for five colors but some people only have three or four so they can add the body text color especially if it’s not straight black or #000000.

Text Style

The typography section is more than the fonts you want to use. You can break down this section into headings, body, font style, weight, case and more.

A good rule of thumb to follow when picking your typography, you want to be sure that (1) you have the rights to use because some free fonts are for personal use only (meaning on a computer) and (2) can be rendered on most application like Mac OS or Windows OS, browsers like Safari and devices like Android and iPhone.

Imagery

In the images section I like to include a sample of stock photography, illustration and icon sets. This way you, your designer or those using your style tile will have a more well rounded feel of what you are trying to achieve with your images and patters.

one color image collection
one color image collection on Unsplash by Andrew Neel

Buttons

Buttons are becoming a key asset for actionable information so defining your button color(s) is important to know. Some programs like schedulers, chatbots and more now allow you to define or customize colors so it’s great to define these details.

Adjectives

I find this section useful since it defines the most important words to describe your brand, customers and business purpose. It gives you a quick glance of the tone and vibe you are looking to set with your brand. If you don’t have words chosen start with your website and pick words that describe the mood of your content.

You can also take a personality test or listen to how others describe you and work from there.

Your turn

Creating a simple one sheet that gathers all of your elements is simple when you have a ready-made guide. Don’t forget to download a copy to get you started, available in both Powerpoint and Keynote.