{"id":3137,"date":"2022-09-16T04:03:09","date_gmt":"2022-09-16T02:03:09","guid":{"rendered":"https:\/\/www.webdesign-inspiration.com\/article\/?p=3137"},"modified":"2022-09-16T04:04:57","modified_gmt":"2022-09-16T02:04:57","slug":"how-to-integrate-your-style-guide-into-your-site-design","status":"publish","type":"post","link":"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/","title":{"rendered":"How to Integrate Your Style Guide Into Your Site Design"},"content":{"rendered":"

How people perceive your brand ties into your image and the way people think about you when they\u2019re 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.<\/span><\/p>\n

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\u2019t have for a print ad or social media, but it\u2019s well worth the effort to include all aspects of design into your style guide.\u00a0<\/span><\/p>\n

Why Is It Important to Use a Style Guide?<\/strong><\/h2>\n

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 <\/span>increase revenue 10%<\/span><\/a> or more.\u00a0<\/span><\/p>\n

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.\u00a0<\/span><\/p>\n

Use Your Logo Everywhere<\/strong><\/h2>\n

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?<\/span><\/p>\n

\"Planet<\/p>\n

Planet Fitness<\/span><\/a> 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.\u00a0<\/span><\/p>\n

Ramp Up Mobile<\/strong><\/h2>\n

Don\u2019t 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 <\/span>more than 50% of web traffic comes from mobile<\/span><\/a> devices.\u00a0<\/span><\/p>\n

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.\u00a0<\/span><\/p>\n

Use Codes for Colors<\/strong><\/h2>\n

It\u2019s 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.\u00a0<\/span><\/p>\n

You don\u2019t 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.\u00a0<\/span><\/p>\n

Color can evoke emotions in the user. The hues you choose are vitally important to the success of your design.\u00a0<\/span><\/p>\n

\"givesmart\"<\/p>\n

GiveSmart<\/span><\/a> uses a beautiful, deep purple as their main color with a green-blue accent. Because the shades are so specific, it\u2019s 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.\u00a0<\/span><\/p>\n

Offer an Experience<\/strong><\/h2>\n

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

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.\u00a0<\/span><\/p>\n

Stick to a Hierarchy<\/strong><\/span><\/h2>\n

A website hierarchy can give users a pattern to cling to. They\u2019ll learn quickly what to expect from a headline, subheading and body text. You can have a hierarchy for your text, images and navigation.\u00a0<\/span><\/p>\n

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.\u00a0<\/span><\/p>\n

\"the<\/p>\n

The Simple Dollar<\/span><\/a> 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.\u00a0<\/span><\/p>\n

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.\u00a0<\/span><\/p>\n

Teach Designers to Consult the Guide<\/strong><\/h2>\n

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.<\/span><\/p>\n

A style guide ensures you send the message you want to your viewers. You don\u2019t have to worry about your brand personality putting off the wrong vibe or consumers feeling you aren\u2019t consistent. Refer to the guide as your design bible and you can\u2019t go wrong.\u00a0<\/span><\/p>\n

Eleanor<\/span><\/a> is the founder and managing editor of Designerly Magazine. She\u2019s 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 <\/span>LinkedIn<\/span><\/a>!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

How people perceive your brand ties into your image and the way people think about you when they\u2019re ready to […]<\/p>\n","protected":false},"author":3,"featured_media":3148,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"","footnotes":""},"categories":[13],"tags":[],"class_list":["post-3137","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"yoast_head":"\nHow to Integrate Your Style Guide Into Your Site Design - Web Design<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Integrate Your Style Guide Into Your Site Design - Web Design\" \/>\n<meta property=\"og:description\" content=\"How people perceive your brand ties into your image and the way people think about you when they\u2019re ready to […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Design\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-16T02:03:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-16T02:04:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webdesign-inspiration.com\/article\/wp-content\/uploads\/2022\/09\/arw7ic7msam.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1067\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Integrate Your Style Guide Into Your Site Design - Web Design","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/","og_locale":"en_US","og_type":"article","og_title":"How to Integrate Your Style Guide Into Your Site Design - Web Design","og_description":"How people perceive your brand ties into your image and the way people think about you when they\u2019re ready to […]","og_url":"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/","og_site_name":"Web Design","article_published_time":"2022-09-16T02:03:09+00:00","article_modified_time":"2022-09-16T02:04:57+00:00","og_image":[{"width":1600,"height":1067,"url":"https:\/\/www.webdesign-inspiration.com\/article\/wp-content\/uploads\/2022\/09\/arw7ic7msam.jpg","type":"image\/jpeg"}],"author":"Mark","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/#article","isPartOf":{"@id":"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/"},"author":{"name":"Mark","@id":"https:\/\/www.webdesign-inspiration.com\/article\/#\/schema\/person\/2669dfa3274bec8fc2520523d51795e6"},"headline":"How to Integrate Your Style Guide Into Your Site Design","datePublished":"2022-09-16T02:03:09+00:00","dateModified":"2022-09-16T02:04:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/"},"wordCount":984,"commentCount":0,"image":{"@id":"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webdesign-inspiration.com\/article\/wp-content\/uploads\/2022\/09\/arw7ic7msam.jpg","articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/","url":"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/","name":"How to Integrate Your Style Guide Into Your Site Design - Web Design","isPartOf":{"@id":"https:\/\/www.webdesign-inspiration.com\/article\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/#primaryimage"},"image":{"@id":"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webdesign-inspiration.com\/article\/wp-content\/uploads\/2022\/09\/arw7ic7msam.jpg","datePublished":"2022-09-16T02:03:09+00:00","dateModified":"2022-09-16T02:04:57+00:00","author":{"@id":"https:\/\/www.webdesign-inspiration.com\/article\/#\/schema\/person\/2669dfa3274bec8fc2520523d51795e6"},"breadcrumb":{"@id":"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/#primaryimage","url":"https:\/\/www.webdesign-inspiration.com\/article\/wp-content\/uploads\/2022\/09\/arw7ic7msam.jpg","contentUrl":"https:\/\/www.webdesign-inspiration.com\/article\/wp-content\/uploads\/2022\/09\/arw7ic7msam.jpg","width":1600,"height":1067,"caption":"Web design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webdesign-inspiration.com\/article\/how-to-integrate-your-style-guide-into-your-site-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webdesign-inspiration.com\/article\/"},{"@type":"ListItem","position":2,"name":"How to Integrate Your Style Guide Into Your Site Design"}]},{"@type":"WebSite","@id":"https:\/\/www.webdesign-inspiration.com\/article\/#website","url":"https:\/\/www.webdesign-inspiration.com\/article\/","name":"Web Design","description":"Helping Creative People to Be Inspired Since 2007","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webdesign-inspiration.com\/article\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.webdesign-inspiration.com\/article\/#\/schema\/person\/2669dfa3274bec8fc2520523d51795e6","name":"Mark","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e51433e1de9eb7f353d69c4045ae3a4ded603a517d9310797e4e754f49985d16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e51433e1de9eb7f353d69c4045ae3a4ded603a517d9310797e4e754f49985d16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e51433e1de9eb7f353d69c4045ae3a4ded603a517d9310797e4e754f49985d16?s=96&d=mm&r=g","caption":"Mark"},"url":"https:\/\/www.webdesign-inspiration.com\/article\/author\/mark\/"},false]}},"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"_links":{"self":[{"href":"https:\/\/www.webdesign-inspiration.com\/article\/wp-json\/wp\/v2\/posts\/3137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webdesign-inspiration.com\/article\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webdesign-inspiration.com\/article\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/article\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/article\/wp-json\/wp\/v2\/comments?post=3137"}],"version-history":[{"count":4,"href":"https:\/\/www.webdesign-inspiration.com\/article\/wp-json\/wp\/v2\/posts\/3137\/revisions"}],"predecessor-version":[{"id":3154,"href":"https:\/\/www.webdesign-inspiration.com\/article\/wp-json\/wp\/v2\/posts\/3137\/revisions\/3154"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/article\/wp-json\/wp\/v2\/media\/3148"}],"wp:attachment":[{"href":"https:\/\/www.webdesign-inspiration.com\/article\/wp-json\/wp\/v2\/media?parent=3137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/article\/wp-json\/wp\/v2\/categories?post=3137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/article\/wp-json\/wp\/v2\/tags?post=3137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}