{"id":27878,"date":"2016-09-01T21:01:08","date_gmt":"2016-09-01T13:01:08","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=27878"},"modified":"2022-08-10T14:56:24","modified_gmt":"2022-08-10T06:56:24","slug":"style-guides-style-tiles","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/style-guides-style-tiles\/","title":{"rendered":"Designer’s Guide to Working With Style Guides & Style Tiles"},"content":{"rendered":"

Creating a branded identity<\/strong> is no easy task. It requires hard effort, but it\u2019s also one of the most rewarding creative tasks. Web projects often mix branding with interface design<\/strong>. This can be confusing because there\u2019s so much to do in both areas. Style guides<\/strong> and style tiles<\/strong> are great resources for web designers, and while they do sound similar, they accomplish two different tasks<\/strong>.<\/p>\n

In this post, I\u2019d like to delve into both and cover the benefits you can get from these creative assets. Not everyone will need (or like) creating style guides or style tiles. But every designer should at least understand what these are and how they work.<\/p>\n

Style Guides For The Web<\/h2>\n

I\u2019ve read varying opinions on style guides. Some say these are digital mockups<\/a> while others say that code-based style guides<\/a> are the most useful.<\/p>\n

Recommended Reading:<\/strong> How to Optimize CSS with Code Style Guides<\/a><\/p>\n

Either way, the goal of a style guide is the same for the web as any other project. It defines consistent patterns, UI modules, and creative preferences<\/strong> used in the design process. You can get very specific and stipulate pixel-perfect measurements for certain elements, or you can stay loose and offer guidelines with visual examples.<\/p>\n

There is no single right way to do a style guide. The only wrong way is to create a resource that simply can\u2019t be understood by others<\/strong>.<\/p>\n

The goal is to create an asset that will stand the test of time<\/strong>. It should be open for edits<\/strong> if new resources are created. It should also be accessible for anyone who joins the team to dive right into the guide with ease.<\/p>\n

A style guide should be as detailed as needed for the project<\/strong>. It usually includes reusable assets<\/strong>, such as typography, buttons, color swatches, textures, and common page elements.<\/p>\n

We recently covered living style guide tools<\/a><\/strong> that can help you build living style guides from scratch. These living guides are more for front-end developers, but they can be just as useful to designers. You can read more on this subject in this Smashing Magazine post<\/a>.<\/p>\n

My absolute favorite resource is StyleGuides.io<\/a>. It covers the basics of style guides for the web<\/strong>, including live examples<\/strong> and case studies<\/strong>.<\/p>\n

\"Styleguides.io<\/a><\/figure>\n

MailChimp\u2019s pattern library<\/a> is one of the best examples you can find at StyleGuides.io. It\u2019s an online live style guide that defines MailChimp\u2019s grid, typography, and page elements<\/strong>.<\/p>\n

\"Mailchimp<\/a><\/figure>\n

When you design a style guide for a web company, it\u2019s common to put everything online, but you can also create internal guides<\/strong>, and keep them on a local intranet or host them privately behind a user login page. The way you access a style guide really doesn\u2019t matter. They all serve the same purpose of conveying specific colors, patterns, and visuals that match the theme of a web project<\/strong>.<\/p>\n

To learn more on the subject, check out these other posts on style guides:<\/p>\n