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.
What is a brand board? What is a style tile?
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
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.