Web Design

How to Integrate Your Style Guide Into Your Site Design

Web design

How people perceive your brand ties into your image and the way people think about you when they’re ready to make a purchase. You want to make the best impression possible through every touchpoint with customers. Inconsistency is one of the top things that might make you seem untrustworthy.

Fortunately, you can ensure your website matches your overall brand personality by turning to your style guide. You will need to add a few details you wouldn’t have for a print ad or social media, but it’s well worth the effort to include all aspects of design into your style guide. 

Why Is It Important to Use a Style Guide?

The State of Brand Consistency report surveyed more than 400 companies about how branding impacts their business. Researchers found using consistent branding across all channels where you have a presence can increase revenue 10% or more. 

People need to feel safe before they buy from you. One way to indicate trustworthiness is by having the same look, language and feel no matter where the customer encounters you. Here are some favorite ways to integrate details from your style guide into your site design. 

Use Your Logo Everywhere

Your style guide should lay out the details of your logo and how to use it in different marketing campaigns, on a building and in print. Think about every possible occasion to use your logo and create some dimensions and details for it. Will it be on a light or dark background? How does usage change?

Planet fitness

Planet Fitness is one of those companies that you immediately recognize the logo because they use it over and over in all their promotions. They place the same logo on their website but make the background transparent so the logo appears to straddle the navigation bar and the hero header. 

Ramp Up Mobile

Don’t forget to use a similar style for the mobile version of your website as you do for your desktop version. The numbers shifted over several years and today more than 50% of web traffic comes from mobile devices. 

Whether you run an e-commerce store or you want to get information in the hands of your target audience, the mobile experience can either reinforce your brand image or drive users away. Make sure your style guide includes information on responsive design. 

Use Codes for Colors

It’s easy to be off on some colors, such as various shades of red, blue or purple. Your style guide should lay out what the hex codes are for the colors you want to use and specifications on RGB ranges. 

You don’t want a different blue on your website than you have on your delivery vans. By the same token, if someone visits you on social media, you want them to immediately recognize your image when they land on your home page. 

Color can evoke emotions in the user. The hues you choose are vitally important to the success of your design. 

givesmart

GiveSmart uses a beautiful, deep purple as their main color with a green-blue accent. Because the shades are so specific, it’s important the designer consults the style guide and sticks with the hues laid out by the original designers. Varying can change the whole look and tone of the brand image. 

Offer an Experience

Customer experience (CX) is a big part of why people come back to your brand and order repeatedly. Research shows around 73% of consumers say they’re more likely to feel loyal to a brand when they have a positive CX. 

However, you want to ensure the experience you offer is the same across all channels. Writing it out in your style guide helps you offer the same tone no matter where the customer interacts. Your website should have the same attitude as when the client calls your office. Look at the ways you can create a consistent CX for your fans. 

Stick to a Hierarchy

A website hierarchy can give users a pattern to cling to. They’ll learn quickly what to expect from a headline, subheading and body text. You can have a hierarchy for your text, images and navigation. 

Spell out what the hierarchy is in your style guide. As your site grows, future designers will know exactly how to add in a new image, a headline or a bar on the navigation menu. The look will remain consistent. 

the simple dollar

The Simple Dollar utilizes a straightforward hierarchy to pull users in and make them feel instantly at ease. The headline is in a large font, the subheadings in a bold font and the body text slightly faded from the rest of the words on the page. 

The site also limits images. The only ones they utilize are the category visuals to keep things interesting. The overall look is minimalistic and puts the focus on the headlines. For this particular design, the text hierarchy takes center stage. 

Teach Designers to Consult the Guide

Train new designers to refer to the style guide. As people come and go on the team, you want to retain the same look and feel to your website. In theory, you could have three dozen people do different tasks on your site but it would still appear as a single, cohesive look.

A style guide ensures you send the message you want to your viewers. You don’t have to worry about your brand personality putting off the wrong vibe or consumers feeling you aren’t consistent. Refer to the guide as your design bible and you can’t go wrong. 

Eleanor is the founder and managing editor of Designerly Magazine. She’s also a web design consultant with a focus on customer experience and user interface. She lives in Philadelphia with her husband and dogs, Bear and Lucy. Connect with her about marketing, design and/or tea on LinkedIn!

Leave a Comment