Why do we create style guides?
At Next, the style guides we create are the manifestations of our design systems. They provide our clients with the scalability to support their business or product into the future on the Web. A style guide helps to maintain the brand design and code consistency of the website as it grows over time. With the wide variety of devices that are now able to access the Internet, testing the design of your website can be challenging. Testing is easier with a style guide as you can view the individual parts of our designs, in isolation from an entire interface.
Because style guides begin with the basic elements of a design, it allows us to share our work in progress from the start. In using this open approach with our clients, they can see the progression of their website from early on in the project. It also enables them to give feedback at the point in the project when it is much easier for us to accommodate change.
Building blocks
Web pages comprise of basic elements combined and laid out to create a user interface. Dave Rupert used the analogy of LEGO in describing how they designed and built a website for one of their clients.
The majority of websites that you browse have many common elements. These include color palettes, typography, navigation and buttons to name a few. We ensure that these elements remain consistent throughout a website by building a style guide. This helps to provide a better user experience.
Our style guide contains all the individual parts of our design system. It also shows you how they get put together to create the templates which you see when you visit a website.
Consistency over time
Over time, a website will change. This could be content that needs updating, more pages or new features. Because there is an existing style guide, we are able to determine the scope of work required in a short space of time. Our clients are able to view the style guide as it evolves during this update phase.
Code
Our style guides contain snippets of HTML used to mark up elements and patterns, whilst defining the code style we use. This makes it easier for our developers, as well as external ones, to add to the code base and maintain it. It helps to ensure our standards to produce consistent HTML and CSS.
The pattern library we have in our boilerplate style guide is up to date with the latest recommendations of best practice on the Web. It enforces what we learn from a project and lets us carry it over to the next one. This saves us time as we’re not having to deal with common issues that occur on the Web. The benefit of this is having more time to focus on providing solutions for the needs of our clients.
Design
Over time, it is likely that the people involved with the initial design and build of a website would have moved on. If there is not a clear guide to reference, people may have difficulty in continuing the original design system. This is how inconsistency can make it’s way into a website and provide for a less than ideal user experience.
Your experience with a website is likely to be frustrating when there are inconsistencies in the interface. By having a style guide, you can prevent this problem.
Working together
The biggest change we’ve seen at Next since we started to create style guides, is that everybody is much closer to the project. No longer is development a “black hole” with the final product shared right before a deadline is due.
It allows for easier communication about and understanding of what we create. Potential issues get flagged early on in the process. Another massive benefit of the style guide is that you view it in a web browser. This highlights the complexities of responsive web design in a multi-device world. Our clients can then view the design in their favourite browser. This helps them to see that websites will look different on different devices.
Resources
If you want to find out more about style guides, you should check out Anna Debenham’s Website Style Guide Resources.
