The Importance of a Style Guide in Design and Coding

03-09 00:17

Style guides are one of my favorite design tools. They help me stay organized with a company’s or project’s aesthetics. They help me communicate with others in the company.

Over the last few years, they have proven to be extremely valuable to me. Here is a list of benefits and conveniences that having a style guide has enabled for me. They are in fact a majestic design asset.

Help develop an aesthetic

Style guides help you develop a complicated aesthetic for any brand. Usually, they start out simple with the logo, the colors, and the fonts. however, the best style guides grow more complex than that. It goes along the lines of Brad Frost’s atomic design. Yes, you should start out with the basics of typography but don’t stop there. A design is always much more than that.

A good design has everything defined in its style guide which, yes, it starts with the basics or atoms, but then grows into molecules, organisms, templates and then whole pages.

They should evolve over time

A style guide is useless if it doesn’t evolve over time in either complexity as you add new components or overall changes as the brand’s need evolve too. A blue you may have chosen 3 months ago may not work for the style guide anymore once you add in another blue and purple. The original color should be changed or at least tweaked to make way for the next color style.

As you’re designing more and more pages, you’ll realize that some things will need to be adapted in order to work with the remaining style. And that’s okay. Personally, I think the strongest style guides are ones that grow. You can’t force things into a design when they don’t work, so don’t do it with the style guide either. 

Help define the usage of style – make a great reference

When you have a well-defined style guide it makes for a beautiful reference. It helps the design team stay on the same page, it helps new hired get acquainted with the brand’s visuals. But, I think most importantly it helps develops know what they can and cannot do. Unfortunately, some things fall through the cracks. It’s truer in smaller starts ups where there are only a few, or better yet, only one designer.

Quick designs

Right now, I’m the only designer at my company and have a style guide has helped me tremendously. personally, I love having a style guide because it allows me to make for quick designs. I found it helpful when making quick prototypes of ideas we are working out; it’s an amazing asset to have to easily make a visual for an idea. Thanks to this, it makes the conversations our teams have about projects much smoother. Now, this doesn’t excuse a full design process and you bet that once I’m design something and it’s totally new and different because the new page or feature calls for it, I adapt the current style guide to match the visuals.

Communicating with developers

The other thing a style guide has helped me is communicating with developers. At Thinkful, our style guide is mostly in code. And it makes the lives of the developers I work with also easier. They know exactly what to do with the overstates of buttons or inactive input fields. It’s all predefined in the code; therefore even if I forget to include a label next to an input it’s still going to be developed with it because that’s the style guide. Sure, sometimes they will ask me if it was intentional but more often than not I was an unfortunate oversight on my part. In such case, I’d give them the appropriate copy of the label and we move on. 

Like I said, working with a small design team means things will fall through the cracks, it’s unfortunate and it doesn’t happen to me often but it does. Sometimes the developers will point out the oversights but not always. When they don’t it means that they are responsible for making the design decision themselves (whether they like to admit it or not). If there is a style guide in place that dictated the design it means the decision is already made and the can follow through without screwing up your work. 

The style guide should be in code

This brings me to the last point about a style guide defining the use of a design style. If your style guide is in coded, better yet, has its own repo, than communication with develops becomes so much smoother. A developer may not know that you have all of those styles defined somewhere in a Photoshop or Sketch file. But, if there is code involved, it most often is done automatically for you. Take the input example. If the input styles are defined in the code it will have everything allocated for it, the default style, the active, the inactive, the label, the placeholder, and input text, and any input icons. Hey, it should even have the error style too. All that has to happen is there has to be an input place in the HTML code and everything follows suit. That’s amazingly awesome. 

Help keep things organized

I think this point may have been inferred already but it says it either way. A style guide helps keep things organized for everybody. For me, it lets me know what I already have in my arsenal. It defines our buttons, forms, footers, navigations, links and so on. I couldn’t imagine having to design without those things already predefined as the footer doesn’t change just because we’re making a new landing page for a back to school promotion. Further, they help me define our emails albeit a newsletter or a one-off promotional event. Don’t think that a style guide is just for your website. It’s for the whole brand.

Go a bit further

Frankly, having a style guide will help anyone who makes material on behalf of the company. Most often it’s the design and development department. However, anyone who makes a presentation, or marketing material also is representing the brand.

Do you have design assets that help them make the best visual representation of the company brand for them? A style guide for this would greatly come in handy. Therefore, emails, social media, presentations mobile and web apps should all be included in it. An email is not the same as a web page but it’s still part of your brand so it needs to follow a cohesive style too. I found it’s hard to follow through without having a neatly organized set of styles.


If your current project or company doesn’t follow a made style guide, I’m sure it makes your life harder. You may have the style scattered throughout a bunch of files but that’s no way to live.

Create one file where it all lives and then have it developed into a repo so that it can make everyone’s life easier. It is not supposed to make it easier just for you but also for your whole team. Imagine how better the marketing materials will be if you could send them a link t how everything should look.

标签: 设计
© 2014 TuiCode, Inc.