Design your way

Style guides are something that have been around a long while. Even before the websites and internet, there were companies that needed to get their brands out there visually. They were required to come up with visuals that were both consistent and unified in delivery.

The way to achieve this, both then and now, is to employ brand identity guidelines. These type of guidelines are usually something that is included in a document, and which define certain information.

This certain information does concern itself with brand colors, typography, such as fonts, sizes, leading, or the positioning of the logo. Also, how to use it is detailed for various situations, as well. These different situations can vary greatly. One example would be print layout from web layout, which do both differ each other.

What is included in a brand or identity guide exclusively is dependent totally on the company itself. The different ways that it can range can be from a single page document to a document that is massive and comprehensive in detail.

Learn About Front End Style Guides

What does work in a very similar way to brand and identity guides is no other than front end style guides. The only difference between the two is that you are creating an identity for a website instead of one for a specific brand. This time around, the website is the brand, and a style guide for this, will be a style guide that does concern itself mainly with creating both consistency and unity that is suited for a website’s design.

Style guides are something that can do a lot for us. They not only encourage overall understanding, but they do also know how to promote cooperation and boost up maintainability. Style guides are not something new. Nor are they something that we have not used before. However, the reality of them in our industry is this, and that is that they are starting to gain a whole lot of popularity.

Their importance

No one is saying here that a style guide does need to be created for every website out there. Nonetheless, it does make perfect sense to just go ahead and come up with one anyhow.

A perfect example is this. If you have a website that is very heavy when it comes to content. It would be logical to come up with a style guide. This is especially true if the content itself does need to be displayed in an array of different ways.

Another example for using a style guide is if you are working with a large teams on a specific website. A guide such as this can be extremely handy if every component of the site must be built consistently. It does not matter who builds it, only that it does get built properly, and that it is documented properly. It also doesn’t matter if a member of the team is a newcomer either.

What is also another benefit for large website teams such as these is by having a fixed definition as well as naming conventions for each website component. You are indeed able to communicate very clearly and effectively which module component is being referred to in essence a whole lot easier.

When you create a style guide, you are creating a system, and a structure, that permits you to view the entire website in a very big picture that is very enlightening and insightful. This will make the entire process of updating this website a whole lot more manageable and simpler in description.

Some examples

Design style guides, as well as, code standards documents are a very successful way to ensure brand and code consistency. However, nestled in between the code and design examples, there are web-based style guides that are coming out on their own.

These web-based style guides are maintained by front-end developers. They are something that is far more dynamic than visual design guidelines. They are able to document every key component as well as its code on the site and in one place.

Mozilla

Mailchimp

Fontshop

Starbucks

Github

Code for America

Google HTML/CSS Style Guide

Salesforce

Yelp

South Tees Hospitals NHS Foundation Trust

The conclusion

Do you still need convincing that the creation of documentation for every project is well worth it? If you do, then do continue to read on, because there are indeed a few nice side-effects attached to working this way.

When you have a style guide that is perfectly unified on all fronts, you will be able to spot inconsistencies right away whenever your design does break. It is very simple to examine when components are able to adapt to different screen widths. You can also test for browser bugs, as well as, develop print style sheets when everything is all together on one page.

This approach also forces one to think hard on just how much things do work and how something does work in relation to the site as a whole. It doesn’t just focus on one single page and that is it. This is something that will make a whole lot easier to add on more pages later on. It just makes far more sense to start off development with a style guide as opposed to just using a page-by-page basis.

When you have a combined style guide, it is something that does help both designers and developers to review all of the elements that will go into the site itself. These incorporated elements will also be able, to be labeled appropriately, to either be designed or populated.

When one has a boilerplate listing of components for each and every project, it can prove to become the very thing which can serve as a reminder for things that did get missed in the designing process.