Your style guide is the thing that allows you to consistently brand your business and show customers you are reliable and steady. When it comes to your website, trends and styles change frequently, but you should have a set of standards that anyone working on your site abides by. Not only will the site look similar no matter what page users land on, but you’ll also gain their trust.

There are many reasons why businesses fail, but about 19% don’t succeed because they are outcompeted. You can’t control every aspect of your brand image, but you can control how well your website performs and the overall aesthetic and style of your site.

There are many reasons for updating your website’s style guide. Here are seven things to look at that can help you optimize your site conversions.

1. Set a Mood

Your business needs to adopt a personality that ties into your mission as a company. Do you want to make people laugh? Perhaps you need to reassure them that someone is there to meet their needs. Whatever your core purpose as a company, what emotions do you need to tap into for your target audience? Set a mood by meeting customer expectations and creating a positive user experience (UX).

2. Choose a Color Palette

Your brand’s color palette is an important part of your identity. Not only do the hues set the tone for your company, but you can also evoke certain emotions. For example, the use of red can create excitement. A deep blue invokes trust. Think about the psychology behind the colors you choose, and make sure you stick with the same palette no matter where you appear.

Marcotte Properties does an excellent job weaving their brand colors into their website design. Note the green and deep plum and a pop of yellow as an accent color. Adding in some white space creates a visually appealing landing page that makes the user feel at home immediately.

3. Encourage Collaboration

A style guide lets you bring in experts in different areas but keep the tone and look of your site the same. You can hire a writer to create content, a graphic designer to make a new logo and a web developer to add features to your site. Since they’ll have your website style guide, they’ll be able to recreate the same look and feel as others working on the site.

4. Hone Your Style

Sitting down and writing out the details of your style encourages you to ensure it is everything you want it to be. You know others will read the document and follow it, so you’ll take the time to get everything consistent, such as the fonts used, where your logo gets placed, the size of images and so on. A style guide forces you to write down the details that will take your website to the next level.

Villa Lion View has a clear typographical hierarchy that makes each section of their website look similar. They have a serif font they utilize for headlines. For the body text, the font is sans-serif. The two fonts have a similar height and weight structure, lending a uniform look to different boxes on the page.

5. Save Time

A style guide saves you a ton of time. When handing part or all of a website design project to someone else, you can simply refer them to the rules you’ve already laid out. You won’t have to explain in-depth to each new person working on the page. You simply send them a copy of the guide and ask them to stick to the standards outlined within.

6. Consider the Logo

Where and how the logo is used can make or break your brand image. Think about some of the more significant brands you’ve heard of. When you think of Nike, you likely remember they have a swoosh for their logo. McDonald’s features golden arches. What does your logo represent, and are you using it in the same way and location so users know what to expect?

You should outline in your guide not only where your logo gets used, but also what colors it contains and when. For example, if you place the logo on a black background, is it different than when on a white background? What size is it when on a website versus social media? Does it always appear in the upper left of the screen or should it vary based on the purpose of where it’s featured?

Abnormal does an excellent job with their website style guide and logo colors and placement. When you first land on their site, you see the white word logo at the top of the page. Mouse over it and it turns yellow, which is part of their color palette for the site. No matter what page you navigate to, the logo appears at the top center in the same font, same size and with the same animation effects.

7. Demand High Quality

A style guide shows everyone on your team you want high-quality designs. You expect certain colors, placement, tones and wording. The more specific you are, the more your website will command attention. Encourage your staff to think outside the box and try new trends and design ideas, but also to make sure those new methods match the overall tone of your brand.

Start Small

Writing a style guide might seem like a big task to undertake. However, you can start small and add to it over time. Explain your color palette and logo. Then, start adding details such as voice and image sizes. The more specific you get, the more uniform your site looks. Start small and grow your guide as your company matures.

Author

Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.