Some of the links below are affiliate links, which means that at no additional cost to you, I may receive a small commission if you click a link and make a purchase.
You put a lot of time, energy, and money into your website. So why settle for a site that does not fully represent your brand? That's exactly why you need a brand guide for your website. Creating a brand guide can help you develop a unique look and feel for your site that will set you apart from the rest. And the best part is, once you have a brand guide, creating or updating your site will be a breeze! It's the small details that give your brand its voice, think fonts, logos, headings, colours and accents, they all contribute to the appearance of your brand. Here's everything you need to know about creating a brand guide for your website.
Contents:
What is a Brand Guide?
A brand guide is basically a set of rules that dictate how your brand should be presented visually. This includes things like your logo, colour scheme, typography, and more. Having a brand guide helps to ensure that every element on your site works together to create a cohesive look. Plus, it makes updating or redesigning your site much easier since you will already have a roadmap to follow.
Whenever I start work on a new website for a client, I always start by creating a brand guide. I use a site called Baseline to create my brand guides because they make it really easy. Keep reading to the end because I show you just how easy it is a bit later on. I use my brand guide all of the time! If I am outsourcing work, from graphic designers and marketing teams right through to copywriting, all freelancers get a copy of my brand guide. This makes it really easy for them to know how to produce content that truly represents my business.
Why You Need a Brand Guide
There are several reasons why having a brand guide is important for your website. First, it helps to ensure that your site has a consistent look and feel. This is essential for building trust with visitors and establishing yourself as a credible source of information. After all, would you trust a website that looked like it was put together by a 5-year-old? Probably not. But if everything on the site looks polished and professional, you will likely gain visitors' trust.
Another reason why having a brand guide is important is that it makes updating or redesigning your site much easier. Rather than starting from scratch every time you want to make a change, you can simply refer to your brand guide to see what needs to be done. This saves you time and frustration in the long run!
How to Create a Brand Guide
Now that we have gone over why having a brand guide is so important, let's look at how you can create one for your website.
A brand guide is an essential tool for any business, big or small. It helps to create a unified brand identity that can be used across all marketing materials. Baseline is a website that offers a free brand guide builder. They take you through a series of guided steps to help you establish your brand's logo, colours, typography, gradients, and tone of voice. The brand guide builder is easy to use and only takes a few minutes to complete. Once you are finished, you will have a professional-looking brand guide you can download as a PDF and use to ensure consistency across all your marketing materials.
Let me show you how easy it is to create your own brand guide
Simply start by visiting the Baseline website and clicking on "Start With a Free Brand Guide." The first thing it will ask is your business name.
Adding your logo
Your logo needs to be in SVG, PDF, EPS, AI, or CDR format. I know right, lots of different file types and none of them are PNG or JPG. But fear not! You can easily convert your current file type over to SVG or PDF using Canva, simply select the file type you need to save from the drop-down list in the download settings of Canva. You can also use a free online converter like this one to convert any file type to SVG format.
While uploading your logo, Baseline will also ask for your logomark. This is a simple icon style image that you would normally use in place of your full logo. The logomark is often used as your favicon too. Don't have a logomark or favicon? I wrote this article that shows you exactly how to make one.
After you submit your logo and logomark, Baseline will create a black and a white version of both. If they don't turn out the way you would like them to you can delete these and upload your own.
Setting your Colour Palette
The software will detect the colours in your logo and automatically create your colour palette. If the shade selected isn't quite right, you can update the HEX codes to add the perfect colour. You can also add any other colours that are part of your branding but don't appear in your logo.
Need to find the HEX codes for your brand colours? Use this free tool by imagecolorpicker.com.
Select your gradients
In case you hadn't noticed, gradients are everywhere at the moment! They're not just for backgrounds and sections of your site. Gradients can be very useful for buttons, icons and accents. Baseline will create a range of gradients, based on your brand colours. You can skip this step if you don't need gradients.
Define Your Typography
The next few steps will take you through defining your typography. That is, choosing the fonts you will use for headings, paragraph text and captions. It is very important that these are uniform throughout your site, so this brand guide will really be useful as a reference tool.
Take your time to select fonts that capture the essence of your brand. Use the same or similar fonts for headings. A decorative font is usually fine, as long as it's readable. The font used for the paragraphs of text on your site should be very easy to read. The next step will take you through choosing font sizes, and shows you visual examples of how it will look with your text.
Press submit, and there you have it! Your brand guide is ready. You can download it as a PDF or share a link to it directly in Baseline. If you think it's not quite right, don't worry, you can go back in and make changes until you get it perfect.
Want to see how a completed brand guide looks? Here's one I created using Baseline while writing this tutorial. Take a look and see how this can help make your brand vision clearer.
What to do with the brand guide?
OK, so now you have your brand guide, what are you going to do with it? You need to set the rules for your Wix site.
You can use the Wix Editor theme builder for this. Here in the theme builder, you can set your colours and fonts and they will be implemented across your site. Read this article to learn how to set up the site design using the theme builder.
Creating a brand guide may seem like more work than it's worth at first glance. However, taking the time to put together this document will save you time and frustration in the long run! Plus, having a brand guide helps to ensure that every element on your website works together cohesively to create an overall polished look. If you're ready to take your Website design up a notch, head to Baseline and start creating a free brand guide today!
NX Digital is a Wix partner and digital marketing agency that specialises in web design and digital marketing. We have years of experience helping businesses create beautiful, functional
websites that drive results. If you are ready to take your Wix website design to the next level, get in touch with us today!