{"id":20893,"date":"2019-05-24T08:42:37","date_gmt":"2019-05-24T13:42:37","guid":{"rendered":"https:\/\/www.hostgator.com\/blog\/?p=20893"},"modified":"2019-05-09T05:57:38","modified_gmt":"2019-05-09T10:57:38","slug":"create-website-style-guide","status":"publish","type":"post","link":"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/","title":{"rendered":"How to Create a Style Guide for Your Website in 5 Steps"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Websites are online storefronts for small businesses. Because they play a pivotal role in the customer experience, your team must make it a priority.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A style guide helps your small business develop a cohesive look for your website. Without a clear branding style, customers will disengage and leave your site. Style guides also ensure there aren\u2019t any discrepancies in your branding strategy.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s streamline your online presence. Here are 5 elements to consider in your website style guide.<\/span><\/p>\n<p><a href=\"https:\/\/www.hostgator.com\/website-builder\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-20109\" src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/08\/create-your-website.png\" alt=\"build your website\" width=\"470\" height=\"60\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/08\/create-your-website.png 470w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/08\/create-your-website-300x38.png 300w\" sizes=\"(max-width: 470px) 100vw, 470px\" \/><\/a><b><\/b><\/p>\n<h2>1. Brand Voice<\/h2>\n<p><span style=\"font-weight: 400;\">Branding is the overall perception of your small business. It\u2019s how you differentiate your products and services from others in the market. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Brand voice is part of building your website. You get to show visitors your brand personality and unique qualities. Voice can range from casual and calm to vibrant and risky. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the&nbsp;<a href=\"https:\/\/coschedule.com\/marketing-strategy\/brand-voice\/\" target=\"_blank\" rel=\"noopener noreferrer\">chart below<\/a>, each voice characteristic corresponds with suggested actions (and inactions) for businesses. For instance, a company aiming for an authentic voice should portray honesty and ownership of mistakes and stay away from marketing jargon.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-20910\" src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/brand-voice-chart-1024x952.png\" alt=\"brand voice chart\" width=\"640\" height=\"595\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/brand-voice-chart-1024x952.png 1024w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/brand-voice-chart-300x279.png 300w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/brand-voice-chart-768x714.png 768w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/brand-voice-chart.png 1194w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">A description of your brand voice isn\u2019t always enough. When developing your style guide, you also should include explicit examples for your team to follow. This tactic eliminates any uncertainty when posting copy to your site.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.hostgator.com\/blog\/web-design-best-practices-guide\/\">Web design<\/a> affects many internal departments. Your sales team needs to know the appropriate messaging to secure customers. The finance team is interested in the actual costs, and human resources wants to attract new employees. Therefore, it\u2019s helpful to get input from your entire team when making key brand decisions.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Choose a brand voice that inspires your customers. Then, you can start developing a website that represents your brand story. <\/span><\/p>\n<p>&nbsp;<\/p>\n<h2>2. Navigation<\/h2>\n<p><span style=\"font-weight: 400;\">Laying out your website is just as critical as selecting the right words and images. When visitors land on your site, they should easily tell where to go next. It\u2019s vital that your team craft a straightforward roadmap for their visit. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">For starters, keep your main heading options under six. Too many choices can overwhelm visitors and can cause them to take no action at all. Drop-down&nbsp;<a href=\"http:\/\/cssmenumaker.com\/menu\/responsive-flat-menu\" target=\"_blank\" rel=\"noopener noreferrer\">menus<\/a> also can offer structure, giving visitors access to additional pages without multiple clicks.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-20912\" src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/website-navigation-1024x310.png\" alt=\"website navigation\" width=\"640\" height=\"194\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/website-navigation-1024x310.png 1024w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/website-navigation-300x91.png 300w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/website-navigation-768x232.png 768w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/website-navigation.png 1032w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">When mapping out your navigation, conduct customer research and examine data from conversion optimization tools like heatmaps. You\u2019ll want to begin with what\u2019s important. <\/span><a href=\"https:\/\/www.orbitmedia.com\/blog\/website-navigation\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Andy Crestodina<\/span><\/a><span style=\"font-weight: 400;\">, the co-founder and CMO of Orbit Media, provides his perspective: <\/span><\/p>\n<p><span style=\"font-weight: 400;\">'In website navigation, just like any list, items at the beginning and the end are most effective, because this is where attention and retention are highest. Always seek to put the things that are most important to visitors in the most visually prominent places.'\u009d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Effective navigation helps customers buy your products. So, streamline the navigation bar to increase engagement.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2>3. Colors<\/h2>\n<p><span style=\"font-weight: 400;\">Red, blue, purple, yellow. The colors on your website matter to your visitors. They can either spark an invitation to stay or ignite a reaction to leave your site immediately. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Colors influence consumers\u2019 perceptions of your brand. While each color represents something different for every individual, humans do recognize specific colors to represent different emotions.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Yet, <\/span><a href=\"https:\/\/onlinelibrary.wiley.com\/doi\/abs\/10.1111\/j.1745-459X.2011.00360.x\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">studies<\/span><\/a><span style=\"font-weight: 400;\"> recommend that companies select colors that support the brand personality they want to portray, instead of aligning with stereotypical color associations. Your team then can add meaning to the chosen colors through other branding aspects. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The&nbsp;<a href=\"https:\/\/www.helpscout.net\/blog\/psychology-of-color\/\" target=\"_blank\" rel=\"noopener noreferrer\">diagram below<\/a> shows the connection between a color and a meaning. For example, lime green can translate into competence with a brand personality of reliability and intelligence. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-20909\" src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/brand-personality-graphic-1024x506.png\" alt=\"brand personality graphic\" width=\"640\" height=\"316\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/brand-personality-graphic-1024x506.png 1024w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/brand-personality-graphic-300x148.png 300w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/brand-personality-graphic-768x379.png 768w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/brand-personality-graphic.png 1530w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Colors relay an essential message your customers. Don\u2019t force your brand to adhere to the traditional norms of what a color embodies. Find the right palette for your small business. <\/span><\/p>\n<p>&nbsp;<\/p>\n<h2>4. Fonts<\/h2>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.hostgator.com\/blog\/add-google-fonts-wordpress-website\/\">Fonts<\/a> are usually the last thing on a small business owner\u2019s mind. However, fonts help communicate your brand\u2019s voice. Script fonts can portray a young, playful company, while a slab font can mean a bold, established brand. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Google Fonts is an interactive library of more than 900 fonts. It\u2019s an easy-to-use tool to experiment with fonts and compare your top choices.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-20911\" src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/google-fonts-1024x627.png\" alt=\"google fonts\" width=\"640\" height=\"392\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/google-fonts-1024x627.png 1024w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/google-fonts-300x184.png 300w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/google-fonts-768x471.png 768w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2018\/11\/google-fonts.png 1978w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Avoid fonts that aren\u2019t legible or clear. Consumers shouldn\u2019t have to squint their eyes to read your text or take a second look just to be certain. <\/span><a href=\"https:\/\/elegantmarketplace.com\/creating-your-style-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Jill Chongva<\/span><\/a><span style=\"font-weight: 400;\">, a WordPress website designer, says:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">'It\u2019s best to use fonts that complement each other and work together without being jarring for the reader. This usually means choosing a combination of a serif font and a sans serif font that don\u2019t fight for the reader\u2019s attention.'\u009d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s also wise to not select fonts similar to well-known brands, like Coca-Cola or Nike. You want a distinct font that separates your small business from the competition. <\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">What font expresses your brand? <\/span><\/i><span style=\"font-weight: 400;\">Do your research and select one that will grab your consumers\u2019 attention.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2>5. Images<\/h2>\n<p><span style=\"font-weight: 400;\">Images impact how consumers see your small business. With a couple of pictures, buyers can quickly determine whether they can see themselves with your product. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">In your style guide, outline the type of images that are acceptable for brand promotion. Specify the recommended file format and display size.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You also may want to limit the number of images per page-leaving some white space. That way, your visitors don\u2019t get bombarded with too many visuals at once.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Invest in <a href=\"https:\/\/www.hostgator.com\/blog\/need-professional-photos-business-website\/\">quality product photography<\/a>. You want images that display the fine details of your product. For example, if you sell purses, consumers should see every pattern design. The image should give them a sense of how the product would look and feel in real life.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Customers can become accustomed to the same old stock photos. For your website to stand out, you may want to shoot your own photos. Most smartphones are capable of taking high-quality pictures. So, encourage your team to share their photos from the last company retreat or team-building outing.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Choose your images carefully. The image specifications make a huge difference for your website.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2>Your Website&#8217;s Style Guide<\/h2>\n<p><span style=\"font-weight: 400;\">Websites are open invitations for customers to learn about your small business. Style guides create a roadmap to establish your brand. With the right elements, your team can build a better customer experience.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Websites are online storefronts for small businesses. Because they play a pivotal role in the customer experience, your team must&#8230;<\/p>\n","protected":false},"author":164,"featured_media":22181,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[],"class_list":["post-20893","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tricks"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.2 (Yoast SEO v23.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Style Guide for Your Website in 5 Steps - HostGator<\/title>\n<meta name=\"description\" content=\"A style guide helps your small business develop a cohesive look for your website. Here are 5 elements to include to keep your customers engaged.\" \/>\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.hostgator.com\/blog\/create-website-style-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Style Guide for Your Website in 5 Steps\" \/>\n<meta property=\"og:description\" content=\"A style guide helps your small business develop a cohesive look for your website. Here are 5 elements to include to keep your customers engaged.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"HostGator\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/HostGator\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-24T13:42:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-05-09T10:57:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostgator.com\/blog\/wp-content\/\/uploads\/2019\/05\/Create-a-Style-Guide-for-your-Website.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1152\" \/>\n\t<meta property=\"og:image:height\" content=\"603\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Shayla Price\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/shaylaprice\" \/>\n<meta name=\"twitter:site\" content=\"@HostGator\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shayla Price\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/\"},\"author\":{\"name\":\"Shayla Price\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/bc7486f80d36c6b4e26fef3c7b794d15\"},\"headline\":\"How to Create a Style Guide for Your Website in 5 Steps\",\"datePublished\":\"2019-05-24T13:42:37+00:00\",\"dateModified\":\"2019-05-09T10:57:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/\"},\"wordCount\":1044,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/05\/Create-a-Style-Guide-for-your-Website.png\",\"articleSection\":[\"Marketing Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/\",\"url\":\"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/\",\"name\":\"How to Create a Style Guide for Your Website in 5 Steps - HostGator\",\"isPartOf\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/05\/Create-a-Style-Guide-for-your-Website.png\",\"datePublished\":\"2019-05-24T13:42:37+00:00\",\"dateModified\":\"2019-05-09T10:57:38+00:00\",\"description\":\"A style guide helps your small business develop a cohesive look for your website. Here are 5 elements to include to keep your customers engaged.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#primaryimage\",\"url\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/05\/Create-a-Style-Guide-for-your-Website.png\",\"contentUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/05\/Create-a-Style-Guide-for-your-Website.png\",\"width\":1152,\"height\":603,\"caption\":\"Create a Style Guide for your Website\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.hostgator.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Style Guide for Your Website in 5 Steps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#website\",\"url\":\"https:\/\/www.hostgator.com\/blog\/\",\"name\":\"HostGtaor\",\"description\":\"Web Hosting and Marketing Tips for Entrepreneurs\",\"publisher\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.hostgator.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\",\"name\":\"HostGtaor\",\"url\":\"https:\/\/www.hostgator.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png\",\"contentUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png\",\"width\":1092,\"height\":215,\"caption\":\"HostGtaor\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/HostGator\",\"https:\/\/x.com\/HostGator\",\"https:\/\/www.instagram.com\/hostgator\",\"https:\/\/www.linkedin.com\/company\/hostgator-com\",\"https:\/\/www.pinterest.com\/hostgator\/\",\"https:\/\/www.youtube.com\/user\/hostgator\"],\"email\":\"support@gator.com\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/bc7486f80d36c6b4e26fef3c7b794d15\",\"name\":\"Shayla Price\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6e77813b7c7d519343cebc72f0657194?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6e77813b7c7d519343cebc72f0657194?s=96&d=mm&r=g\",\"caption\":\"Shayla Price\"},\"description\":\"Shayla Price creates and promotes content. She lives at the intersection of digital marketing, technology, and social responsibility. Originally from Louisiana, Shayla champions access to remote work opportunities. Connect with her on Twitter at @shaylaprice.\",\"sameAs\":[\"https:\/\/x.com\/https:\/\/twitter.com\/shaylaprice\"],\"url\":\"https:\/\/www.hostgator.com\/blog\/author\/shaylaprice\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Style Guide for Your Website in 5 Steps - HostGator","description":"A style guide helps your small business develop a cohesive look for your website. Here are 5 elements to include to keep your customers engaged.","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.hostgator.com\/blog\/create-website-style-guide\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Style Guide for Your Website in 5 Steps","og_description":"A style guide helps your small business develop a cohesive look for your website. Here are 5 elements to include to keep your customers engaged.","og_url":"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/","og_site_name":"HostGator","article_publisher":"https:\/\/www.facebook.com\/HostGator","article_published_time":"2019-05-24T13:42:37+00:00","article_modified_time":"2019-05-09T10:57:38+00:00","og_image":[{"width":1152,"height":603,"url":"https:\/\/www.hostgator.com\/blog\/wp-content\/\/uploads\/2019\/05\/Create-a-Style-Guide-for-your-Website.png","type":"image\/png"}],"author":"Shayla Price","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/shaylaprice","twitter_site":"@HostGator","twitter_misc":{"Written by":"Shayla Price","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#article","isPartOf":{"@id":"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/"},"author":{"name":"Shayla Price","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/bc7486f80d36c6b4e26fef3c7b794d15"},"headline":"How to Create a Style Guide for Your Website in 5 Steps","datePublished":"2019-05-24T13:42:37+00:00","dateModified":"2019-05-09T10:57:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/"},"wordCount":1044,"commentCount":0,"publisher":{"@id":"https:\/\/www.hostgator.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/05\/Create-a-Style-Guide-for-your-Website.png","articleSection":["Marketing Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/","url":"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/","name":"How to Create a Style Guide for Your Website in 5 Steps - HostGator","isPartOf":{"@id":"https:\/\/www.hostgator.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/05\/Create-a-Style-Guide-for-your-Website.png","datePublished":"2019-05-24T13:42:37+00:00","dateModified":"2019-05-09T10:57:38+00:00","description":"A style guide helps your small business develop a cohesive look for your website. Here are 5 elements to include to keep your customers engaged.","breadcrumb":{"@id":"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#primaryimage","url":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/05\/Create-a-Style-Guide-for-your-Website.png","contentUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/05\/Create-a-Style-Guide-for-your-Website.png","width":1152,"height":603,"caption":"Create a Style Guide for your Website"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostgator.com\/blog\/create-website-style-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostgator.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Style Guide for Your Website in 5 Steps"}]},{"@type":"WebSite","@id":"https:\/\/www.hostgator.com\/blog\/#website","url":"https:\/\/www.hostgator.com\/blog\/","name":"HostGtaor","description":"Web Hosting and Marketing Tips for Entrepreneurs","publisher":{"@id":"https:\/\/www.hostgator.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hostgator.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hostgator.com\/blog\/#organization","name":"HostGtaor","url":"https:\/\/www.hostgator.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png","contentUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png","width":1092,"height":215,"caption":"HostGtaor"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/HostGator","https:\/\/x.com\/HostGator","https:\/\/www.instagram.com\/hostgator","https:\/\/www.linkedin.com\/company\/hostgator-com","https:\/\/www.pinterest.com\/hostgator\/","https:\/\/www.youtube.com\/user\/hostgator"],"email":"support@gator.com"},{"@type":"Person","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/bc7486f80d36c6b4e26fef3c7b794d15","name":"Shayla Price","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6e77813b7c7d519343cebc72f0657194?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6e77813b7c7d519343cebc72f0657194?s=96&d=mm&r=g","caption":"Shayla Price"},"description":"Shayla Price creates and promotes content. She lives at the intersection of digital marketing, technology, and social responsibility. Originally from Louisiana, Shayla champions access to remote work opportunities. Connect with her on Twitter at @shaylaprice.","sameAs":["https:\/\/x.com\/https:\/\/twitter.com\/shaylaprice"],"url":"https:\/\/www.hostgator.com\/blog\/author\/shaylaprice\/"}]}},"_links":{"self":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/20893"}],"collection":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/users\/164"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/comments?post=20893"}],"version-history":[{"count":2,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/20893\/revisions"}],"predecessor-version":[{"id":22197,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/20893\/revisions\/22197"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/media\/22181"}],"wp:attachment":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/media?parent=20893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/categories?post=20893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/tags?post=20893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}