{"id":6573,"date":"2015-05-29T22:53:07","date_gmt":"2015-05-30T05:53:07","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=6573"},"modified":"2020-04-22T06:38:36","modified_gmt":"2020-04-22T13:38:36","slug":"free-pocket-guide-style-guides-modern-designers","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/","title":{"rendered":"Free pocket guide: Style Guides for Modern Designers"},"content":{"rendered":"<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/style-guides-web-ui-design-overview\/\">Style Guides for Web UI Design: An Overview for Modern Designers<\/a> gives a practical overview of styles guides for web design, pointing you in the right direction depending on your project needs.<\/p>\n<p>Let\u2019s take a look inside the pocket guide.<\/p>\n<p>Style guides are essential to any design project, but they\u2019re too frequently slapped together \u2013 or worse, outright ignored. The problem isn\u2019t the practice of making a style guide, the problem is making the wrong kind of style guide and using the wrong process. There\u2019s no one type of style guide that will work for every project; each has its own variations and components that can be modified and customized to suit different needs.<\/p>\n<p>This free pocket guide explains them all in a concise yet pragmatic format.<\/p>\n<h2><strong>What\u2019s Inside:<\/strong><\/h2>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/style-guides-web-ui-design-overview\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6575\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-29-at-10.43.20-PM.png\" alt=\"Screen Shot 2015-05-29 at 10.43.20 PM\" width=\"555\" height=\"379\"><\/a><\/p>\n<p>Drawing on real-world examples from Adobe, Facebook, BBC, and more, this <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/style-guides-web-ui-design-overview\/\">free pocket guide<\/a> will teach you:<\/p>\n<ul>\n<li>exactly how a style guide can aid any project<\/li>\n<li>the 4 main types of styles guides and when to use each<\/li>\n<li>expert advice on creating mood boards that are as useful as they are inspiring<\/li>\n<li>what a style tile is and how it can help you<\/li>\n<li>advice on which sections to include in a brand style guide.<\/li>\n<li>why a front-end style guide is one of the most popular<\/li>\n<\/ul>\n<p>This pocket guide&nbsp;comes with real screenshots from actual company style guides, so you can see exactly what we\u2019re discussing.<\/p>\n<p style=\"margin-bottom: 35px;\"><span style=\"background: #3ca7dd; padding: 15px; font-weight: bold; border-radius: 4px; border: 1px solid #3ca7dd; border-bottom: 1px solid #2f97cb;\"><a style=\"color: #ffffff; text-decoration: none; font-size: 18px;\" href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/style-guides-web-ui-design-overview\/\">Download free ebook now<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Style Guides for Web UI Design: An Overview for Modern Designers gives a practical overview of styles guides for web design, pointing you in the right direction depending on your project needs. Let\u2019s take a look inside the pocket guide. Style guides are essential to any design project, but they\u2019re too frequently slapped together \u2013<\/p>\n","protected":false},"author":9,"featured_media":6574,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,18,8,11,6,7],"tags":[],"class_list":["post-6573","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-process","category-prototyping","category-tutorials","category-ux-design","category-web-design"],"yoast_title":"","yoast_metadesc":"Free pocket guide explaining the most effective style guides for web design. Pragmatic and concise, the book teaches through examples from top companies.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Free pocket guide: Style Guides for Modern Designers | UXPin<\/title>\n<meta name=\"description\" content=\"Free pocket guide explaining the most effective style guides for web design. Pragmatic and concise, the book teaches through examples from top companies.\" \/>\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.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Free pocket guide: Style Guides for Modern Designers\" \/>\n<meta property=\"og:description\" content=\"Free pocket guide explaining the most effective style guides for web design. Pragmatic and concise, the book teaches through examples from top companies.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-30T05:53:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-22T13:38:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/05\/blog-book-11.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"330\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jerry Cao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jerry Cao\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/free-pocket-guide-style-guides-modern-designers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/free-pocket-guide-style-guides-modern-designers\\\/\"},\"author\":{\"name\":\"Jerry Cao\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"headline\":\"Free pocket guide: Style Guides for Modern Designers\",\"datePublished\":\"2015-05-30T05:53:07+00:00\",\"dateModified\":\"2020-04-22T13:38:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/free-pocket-guide-style-guides-modern-designers\\\/\"},\"wordCount\":251,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/free-pocket-guide-style-guides-modern-designers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/05\\\/blog-book-11.png\",\"articleSection\":[\"Blog\",\"Process\",\"Prototyping\",\"Tutorials\",\"UX Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/free-pocket-guide-style-guides-modern-designers\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/free-pocket-guide-style-guides-modern-designers\\\/\",\"name\":\"Free pocket guide: Style Guides for Modern Designers | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/free-pocket-guide-style-guides-modern-designers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/free-pocket-guide-style-guides-modern-designers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/05\\\/blog-book-11.png\",\"datePublished\":\"2015-05-30T05:53:07+00:00\",\"dateModified\":\"2020-04-22T13:38:36+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"description\":\"Free pocket guide explaining the most effective style guides for web design. Pragmatic and concise, the book teaches through examples from top companies.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/free-pocket-guide-style-guides-modern-designers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/free-pocket-guide-style-guides-modern-designers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/free-pocket-guide-style-guides-modern-designers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/05\\\/blog-book-11.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/05\\\/blog-book-11.png\",\"width\":720,\"height\":330,\"caption\":\"blog book 11\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/free-pocket-guide-style-guides-modern-designers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Free pocket guide: Style Guides for Modern Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\",\"name\":\"Jerry Cao\",\"description\":\"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.\",\"sameAs\":[\"http:\\\/\\\/uxpin.com\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/jerrycao\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Free pocket guide: Style Guides for Modern Designers | UXPin","description":"Free pocket guide explaining the most effective style guides for web design. Pragmatic and concise, the book teaches through examples from top companies.","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.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/","og_locale":"en_US","og_type":"article","og_title":"Free pocket guide: Style Guides for Modern Designers","og_description":"Free pocket guide explaining the most effective style guides for web design. Pragmatic and concise, the book teaches through examples from top companies.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/","og_site_name":"Studio by UXPin","article_published_time":"2015-05-30T05:53:07+00:00","article_modified_time":"2020-04-22T13:38:36+00:00","og_image":[{"width":720,"height":330,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/05\/blog-book-11.png","type":"image\/png"}],"author":"Jerry Cao","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jerry Cao","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/"},"author":{"name":"Jerry Cao","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"headline":"Free pocket guide: Style Guides for Modern Designers","datePublished":"2015-05-30T05:53:07+00:00","dateModified":"2020-04-22T13:38:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/"},"wordCount":251,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/05\/blog-book-11.png","articleSection":["Blog","Process","Prototyping","Tutorials","UX Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/","name":"Free pocket guide: Style Guides for Modern Designers | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/05\/blog-book-11.png","datePublished":"2015-05-30T05:53:07+00:00","dateModified":"2020-04-22T13:38:36+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"description":"Free pocket guide explaining the most effective style guides for web design. Pragmatic and concise, the book teaches through examples from top companies.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/05\/blog-book-11.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/05\/blog-book-11.png","width":720,"height":330,"caption":"blog book 11"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/free-pocket-guide-style-guides-modern-designers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Free pocket guide: Style Guides for Modern Designers"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18","name":"Jerry Cao","description":"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.","sameAs":["http:\/\/uxpin.com"],"url":"https:\/\/www.uxpin.com\/studio\/author\/jerrycao\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/6573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=6573"}],"version-history":[{"count":0,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/6573\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/6574"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=6573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=6573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=6573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}