How to create a brand board, or style tile, for your website

When you think about the design of your favorite websites, they probably all have one thing in common: Brand consistency. That means that they stick to a small set of fonts and colors used throughout their site. A brand board is a popular visual tool to help you stay consistent as you make design choices for your brand. In this post, we’ll discuss why this is important and how to create a brand board specifically for your website, also known as a style tile.

How to create a brand board or style tile for your website

What is a brand board? What is a style tile?

How to create a brand board or style tile for your website example

In its most basic form, a brand board displays all visual elements of your brand in one place. This includes your logo, any alternate versions of your logo, fonts, and color scheme. Some brand boards also include patterns, graphic elements, and photography samples. What you include in your brand board is up to you — remember that it’s a tool for brand consistency. It gives you a guide to refer to when you’re trying to choose a color for a button, a font for the section titles of your ebook, or a photo for your blog post graphic. If you’re interested in creating a brand board to guide all aspects of your brand, both web and print, check out these posts from Nesha Designs and Elle & Company.

In this post, I want to address how to create a brand board specifically for your website. These are also called style tiles. They’re a bit more specific than brand boards — they show how your brand fonts, colors, and patterns should be used throughout your website elements. Like brand boards, style tiles are another visual tool for brand consistency. They can also help you as you design your own website, so that you can test out different font and color combinations before committing them to code. Style tiles can help you plan out your default CSS for headings, body copy, links, and buttons.

What to include in your brand board / style tile for your website

How to create a brand board or style tile for your website example

There is no standard layout or formula necessary for your style tile — remember that it’s a tool for your personal reference. To get started, open a blank document in whatever program you feel comfortable designing in, and just play around with the possibilities. Here are some ideas for what to include in your brand board / style tile for your website.

1. Your logo

Just like a brand board, your style tile starts with your logo. This gives you a reference point to make sure that the rest of your website elements are cohesive with your logo.

2. Color scheme

Naturally, you’ll want to use colors from your logo in your website. But also consider additional colors for your color scheme to use as accents for eye-catching buttons or backgrounds to separate different sections of a page.

3. Body copy

Typically you don’t want to use the same fonts from your logo as your body copy, so that your logo stands out. Look for a font for your body copy that has the same look and feel as the rest of your brand but is readable in long paragraphs of text.

Also, keep in mind that you’ll probably want to bold and/or italicize text in your blog posts, so select a font family that has at least these four weights and styles: a regular, regular italic, bold, and bold italic. Using a font family that does not have enough weights and styles to bold and/or italicize your text forces the browser to use faux bold or faux italics, which can render funny.

Bonus points: Don’t forget to style your links in your body copy, too!

4. Post and page titles

You’ll also need a font for post and page titles. This font should provide some contrast to the body copy to capture the reader’s attention and establish a visual hierarchy, which helps lead their eye down the page. Depending on your logo, you might be able to use one of your logo fonts for titles. Here on Elembee, my logo is a script font, which is best used for accents, and I don’t have a secondary font for titles, so I’ve chosen a font that has the right look and feel for my brand.

5. Additional headings

Don’t forget to think beyond your post and page titles — you are breaking up your posts with headings for easy skimming, right? As you can see from this post, I have a couple of additional heading styles that I use within my posts. Remember that visual hierarchy I mentioned before? Headings contribute to the visual hierarchy and break out the most important points for even the casual skimmer. (Quick tip: Use headings in WordPress by clicking on the Paragraph dropdown menu in your toolbar, then choose a heading style.)

Sub-points should have less visual prominence than main points and your post title. In this post, you can see that my main headings are styled similarly to my post title, but at a smaller size, while sub-headings are even smaller and a different color. You can also use all caps, bold, or italics to set your headings apart. Again, this might be a good place to use one of your logo fonts, as I did on my Company Ink podcast site.

6. Button styles

Buttons are one of the most important elements on your website as they typically tell the reader exactly what you want them to do. They are how people submit your contact form, subscribe to your email list, or even buy your product. They need to capture your visitors’ attention. Consider using an accent color and a bolder font for your buttons. You don’t have to choose a completely new font for your buttons — usually a bold, all-caps version of your body copy or one of your headings (at a smaller size) will do it.

Bonus points for extras!

Remember that this is your reference guide, so add what’s important to you and what helps you visualize how your website should look! While I consider the list above to be essential elements of a style tile, they aren’t the only elements you can include. If you use stock photography for your blog post graphics, add a photo that represents your style. Style up a form for your opt-ins or a graphic for content upgrades. I use click-to-tweets in all of my posts, so I added that to mine.

As you put together your style tile, don’t worry too much about format — the first priority is to get your ideas out in one place so you can see what best fits your brand. Once you’re happy with the elements, arrange them in a tile for your reference.

Have fun creating your brand board / style tile for your website!

This post was originally published in August 2013 and has been updated with new information.

Leave a Comment

19 Comments

  1. Nesha wrote:

    Thanks for having me, Lisa! You are a star! 🙂

    Posted 8.14.13 Reply
  2. Hemal wrote:

    Why do we need to create a brand board?

    Posted 8.14.13 Reply
    • Hi Hemal! As Nesha mentioned, a brand board helps you make sure that anything you design for your brand (blog, social media, business cards, etc) is in line with the rest of your design. That way you can make sure your brand stays visually consistent!

      Posted 8.14.13 Reply
      • Hemal wrote:

        Thanks for the prompt reply… 🙂

        Posted 8.14.13 Reply
  3. This is a great post! I’ve been wanting to create my brand board for awhile to make sure my design elements are consistent, but just haven’t found the time (or motivation!). I just might take a stab at it this weekend. Plus they’re so beautiful to look at and seeing others’ brand baords inspires a lot of ideas.

    Thanks for a clear cut explanation.

    Posted 8.14.13 Reply
  4. Lori wrote:

    I love Nesha from Betty Red Design, and I’m so glad to see her featured here! This is great info. I’ve been getting into editing some of my own graphics for my blog posts, and it’s been a challenge to keep up with the different font types and colors that I’m using. So, I think this brand board download will be super helpful to me!

    Posted 8.14.13 Reply
  5. morgan wrote:

    I’ve started to include these for my clients whom I do logo work for. They don’t always have budget to follow through with a style guide and the brand board is especially helpful for a budding entrepreneur who maybe has more than one designer or wants to do some things on their own. As Lisa and Nesha both said – brand consistency is important!

    Posted 8.14.13 Reply
  6. Paige wrote:

    this is a great post and resource! Skillshare has a class on something super similar for sale right now, and I feel like I dont even need to invest in that anymore because I’ve found the info right here for free! thank you Lisa and Nesha!!

    Posted 8.14.13 Reply
  7. Allyssa wrote:

    I love Nesha’s blog! I recently started using a brand board for myself and I find it extremely helpful! I think I may have to start incorporating one into my clients’ work.

    Posted 8.14.13 Reply
  8. nic wrote:

    great post! a few questions: what is a secondary logo? what is color codes? and what fonts do you use on this website? it’s so pretty 🙂 thanks!

    Posted 8.16.13 Reply
  9. Clare wrote:

    Hi,
    I want to create a brand board for my business. It is Growing Family Luxury Residences located in downtown Chicago.
    I serve executives with families looking for a home $1M + in the lakefront Chicago communities. Beyond my company’s images and colors, I want to create something that speaks to growing families – I like beatrix potter meets sacks fifth avenue – luxury buy obviously playful and friendly. Like Hermes. Anyway, I am having a hard time finding a designer to design. I have graphic artist people who will work with what i supply, but I am looking for someone who can bring their own opinions and relevant ideas, someone who feels inspired about the concept. I think a brand board is a good starting point – but find I need to partner with a creative!! Clare

    Posted 12.19.13 Reply
  10. Michelle wrote:

    I have recently started reading up and researching branding in the hopes of one day doing my own work in the industry. This was very very helpful. Thank you so much for sharing!

    Michelle
    http://www.michelleford.gy/blog

    Posted 2.17.15 Reply
    • I’m glad to hear it — Nesha is a great resource for branding! You should definitely check out her blog too.

      Posted 2.18.15 Reply
  11. Ryan wrote:

    Any chance you can relink the download? Im getting redirected to the homepage. Was interested in seeing your branding board full screen-ish

    Posted 4.13.15 Reply
    • Hi Ryan! So sorry for the trouble! The link should be working now.

      Posted 4.29.15 Reply
  12. Paul wrote:

    Hi Lisa,

    I found your post very helpful, but I can’t seem to find the template you made. Where is the link to it?

    Posted 4.19.16 Reply