Why Style Guides Are Important

Photo by Domenico Loia on Unsplash

Why use a style guide for your website?

Imagine you are a new front-end developer at XYZ Digital Branding Agency. Its your first day on the job and your boss asks you to add a new page to a client’s website. You have a detailed mockup designed by Kimberly. She is a designer who is also new to the company.

You are a little concerned because the mockup looks different from all of the other pages on the website. The colors are wrong. Elements have a border radius of 5px even though no elements on the site have rounded borders. And she has added a new font.

You address your concerns to your boss but he tells you that the client is getting anxious because they are launching a new service and PPC campaign so this page must be done by the end of the day. He is also concerned but tells you to go ahead an build out the design anyway. So you build out the design, add the page to staging and leave for the day. You’re still concerned but happy that you got something done.

You’re still feeling good this morning and expect to arrive at work to a happy boss. But when you get there he is not happy. His boss yelled at him after being yelled at by the client. The client hated the page and demanded a total redo. Their marketing department would not approve it because it was inconsistent with their branding.

You feel a little smug since these are the same concerns that you tried to address. You want to say I told you so but you bite your tongue. You build out a new design that is more consistent with the other pages on the site. The client approves it and the crisis is over.

Later you find out that Kimberly was also yelled at and has quit. She was new to design and has decided it isn’t for her. You start to question all of your life decisions that led up to this moment and wonder if you could become a farmer. When you get home from work you immediately start sending out resumes.

A similar scenario actually happened to me when I worked for an agency. It was a frustrating experience that could have been avoided with a style guide.

What is a style guide?

A style guide dictates branding standards for a website. These include brand colors, logo, fonts with instructions on how and when to use them. Many also include styles for buttons, headings, form fields, and text. Ideally it should be presented as HTML and CSS and be accessible to all stakeholders. It should also be very easy to make updates and additions so the style guide does not fall out of date.

If XYZ Digital Branding Agency had a style guide for their client this whole mess would never happen. Kimberly would have used the style guide to create her design instead of picking elements and colors off the top of her head. No one would get yelled at. The client would receive their new page in a timely fashion without drama. For simple updates a style guide should prevent a designer from having to create a mockup in the first place. The developer could look at the style guide and know how to lay out new pages.

This would allow designers to spend more time on productive work. And it would allow the agency to get work in their hands of their clients faster.

About Beth Rogers


Beth Rogers is a Web Developer and Consultant living in San Antonio Texas. With over 10 years of experience she helps businesses create beautiful, functional experiences online.

More From Beth Rogers