• Published:
  • Under: Development | Interactive Design

If you have worked in the web development field, you may be familiar with living style guides. At CHIEF, we have incorporated living style guides into our development process as a way to create a cohesive workflow from our Design Team to our Technology Team and beyond. So, what exactly is a living style guide and how and why can it be a resource to the team as you design and develop a website?

A living style guide is a continuously updated collection of common design elements such as headers, bulleted lists, forms, lists of common elements and variable names, and images that are assembled together in one place. We create our style guides by using one of two methods; a hand-crafted page where we curate the HTML elements or an installed Drupal module to create those elements for us. These elements are then themed out through collaboration between the Design and Development teams, allowing both teams to see how these components interact with other common design elements. This also allows for it to be quickly stress tested with a variety of different content.

living style guide example

From a design perspective, a living style guide is a hugely helpful workflow tool. When considering design elements such as typography, button styles and image treatments, a living style guide encourages a comprehensive frame of mind wherein foundational design decisions have global impact across a website. By viewing this style guide as a blueprint for a web build, we can ensure that elements are used consistently across various contexts. Additionally, living style guides help our designers to see how our static design mockups translate into living, breathing internet. Seeing how design elements render in-browser early on in the process helps ensure that CHIEF’s design vision is realized through our talented development team. At its core, a living style guide helps to create an ongoing dialogue between our designers and developers that results in cohesive, transformative work for the web.

To a developer, a living style guide is an integral tool for making websites consistent, attractive and harmonious with the designers ideas and vision. The process of theming out a project’s style guide elements not only encourages component-based development, but through close collaboration with the design team helps to minify one-off design components in favor of a more cohesive uniform design or the use of other pre-styled elements. The resulting library of elements can then be seen in action; from being able to view the content on multiple screen sizes to interacting with dynamic elements such as buttons, forms, link styles on hover or animated elements that provide an interactive experience for the user. This allows the project team to communicate both style and development information clearly and effectively, and also allows for both teams to quickly see and account for elements that may have been overlooked, which provides for more precise feedback to the developer working on the project.

Page with applied style guide

Our clients at CHIEF view living style guides as a great way of seeing both design and development evolve throughout the project lifecycle. It is also a way for them to see how their vision translates into an interactive website. Our partners at Accelerate Brain Cancer Cure (ABC2) were able to take the style guide we created (shown throughout) and effectively craft content, while being able to see how components would interact with one another.

Not only is a living style a valuable tool during the development process but after a project launch a living style guide can continue to be used as a guide for content editors, a reference for clients or a guiding path for other developers who might work on the project in the future.

Sound like a tool that would be helpful for your website redesign? Get in touch, we’d love to help.