Search the archives

The importance of creating a style guide

Over the past few years, creating a style guide for new web projects has become an important part of our process.

In fact, the only thing more important to the start of a web design project is making sure our client’s content is in order. But you may be asking yourself, “Do I need a style guide?”. The answer is almost always yes. Here’s why.

Benefits of using a style guide

The most important reason to incorporate a style guide into your web project is so that everyone on the team can start to communicate with each other in a common language.

On any given project, we’ll have a group of designers, developers, project managers, stakeholders… you name it. With a style guide in place it’s easy for everyone to imagine (and more importantly discuss) the expectations they have for particular pages or sections.

Our developers also benefit from style guides because it saves them time during the build out process. Having a standard for details like color, typography, and layout will keep them moving towards the finish line quickly.​

With a style guide in place, if one of our client’s key stakeholders moves to another project or leaves the company for a new opportunity, their replacement can get up to speed with minimal hassle.

Style guides also keep a project running smoothly—even as people come and go.

With a style guide in place, if one of our client’s key stakeholders moves to another project or leaves the company for a new opportunity, their replacement can get up to speed with minimal hassle.

In the following section we’ll clue you in on what we typically put into a style guide and how we develop a process to keep it up to date.

A quick note…

Before we get too far along, we want to mention that style guides can quickly and easily become behemoths. We’ve seen “brand books” that are over a hundred pages long. That’s not really our thing.

We work with mostly small to mid-size companies and startups so we tend to keep our style guides lean and mean. We still create a living document that anyone within their organization or ours can edit, but we give ourselves constraints. Keeping the document to a few concise sections helps avoid unwanted bloat and allows us to focus on the parts of the style guide that matter most.

Ok, glad we got that out of the way—onward!

Style guide example

Let’s lead things off with branding

At the top of our style guide we always start with branded elements. This usually consists of our client’s logo and/or wordmark. Taglines, lock ups, and other elements can also be added to this section. Having a place for everyone to access the correct assets is incredibly useful and keeps brand standards in tact.

Color palettes are key

Have you ever been on a site that seems to have 6 different shades of blue going on? We have and it’s annoying.

By laying out our client’s color palettes and hue variations from the beginning, there’s less of a chance that one of our designers or developers (and one of their stakeholders) will have to guess between two RGBA or hex colors.

Furthermore, when we’re updating an existing brand palette, we always make sure that the new colors we’re adding play nice with the old ones. Adding new tones and hues that are similar to existing colors is not only unnecessary, but can also lead to confusion when our designers or developers are picking colors.

Taking typography seriously

Good typography establishes a visual hierarchy for your content. As we alluded to above, content is the most important part of your site. And making sure your typography is styled correctly is just as important.

At the very least we account for headlines, subheadlines, and body copy in your layout. However, going one step further and adding styling for ordered and unordered lists, blockquotes, code snippets, etc. will help take the guesswork out of styling content for developers.

Start collecting imagery

Setting a visual pattern for your site is paramount. We typically add examples of imagery which helps to convey the visual language we’re aiming for. This is also a great time to get the client involved. They may not be designers, but almost everyone is capable of picking out imagery that speaks to either them or their brand.

It may also be helpful to collect and store iconography and graphic elements in this section for later reference.

Putting your style guide online

During this creation process we build out our files in Photoshop (you can use Sketch if you prefer). After we’re done collecting and laying out palettes, typography, and imagery, we get the most out of the style guide by taking it online.

To do this we work with our developer to take the lifeless PSD or Sketch file into a living, breathing document that everyone can access. We make updates to the style guide in code along the way and new elements are added to the living document as needed. This goes a long way with our clients because they can see and share all of this information with others in their organization.

Here are a few examples of popular style guides that have been built out and made public for all to see:

We hope this information helps you understand how a style guide can benefit your next web project. If you have any style guide tips/tricks or simply want to ask a question about how we produce ours, just let us know!

There are no comments
Mentioned
Leave your comment below
* Required

Introducing Gitdone

Quickly add GitHub issues without your fingers ever leaving the keyboard.

Try the beta

Let’s talk about your project.

After we get some information from you, we’ll set up a time to discuss your project in further detail. You should expect to hear from us in a few days.

Do you have a project budget?

You can leave this blank if you don’t know.
$

How did you hear about us?

Dribbble, Twitter, or Google perhaps?
* required

Thanks , you’re all set!

We appreciate you thinking about us for your project, we’ll be in touch soon.If you need anything in the meantime, hit us up on Twitter.

Go back to the home page A royale success!. Cheesy, I know. And no pun intended. :)

Hi, it’s nice to meet you.

Please drop us a note below and we’ll get back to you soon.

* required

We got your message, !

Thanks for taking the time to reach out, we’ll be in touch with you shortly.If you need anything in the meantime, hit us up on Twitter.

Go back to the home page A royale success!. Cheesy, I know. And no pun intended. :)

Having an issue with your Tumblr theme?

You can search our knowledge base below, or send us a message. Either way, we’ll help you get your problem resolved quickly.

Rather just send us a message?

* required

We got your message, !

We’re sorry you’re having problems, but we’ll be in touch with you soon.If you need anything in the meantime, hit us up on Twitter.

Go back to the home page A royale success!. Cheesy, I know. And no pun intended. :)