Style Guides: What They Are and Why We Need Them

01 juni 2020 om 14:00 by ParTech Media - Post a comment

A style guide is a reference book for designers and developers. It outlines how a website should look and feel. It gathers all the elements of a digital project’s visual style. It has an excellent source of information for the entire team. Whether you are a product owner, a designer, a developer or belong to a third party, you benefit from the detailed source of information about a website. A style guide consists of details of all versions of changes and iterations of a website.

Importance of Style Guide

These days, digital product development processes evolve quickly. The ever-growing scope and level of detail in a web project make development and collaboration more challenging and time-consuming.

As a valuable internal resource for development, the style guide ensures that the team is on the same page. It also makes sure that they get access to the project’s resources in one single destination, such as visual style, graphic, voice, etc. A style guide is useful to maintain several functions within the project, like:

1. Consistency: It helps maintain a unified visual experience within different pages and screens of the website/app.

2. Shared Language: All team members refer to a single document to get a solution for their needs and doubts. It speeds up collaboration and reduces production time.

3. Onboarding: New members of the team become able to make design decisions from the very first day. They do not need to reach other employees continually to clear their doubts.

4. Code Standardization: It helps create consistent HTML, CSS, and JavaScript code that allow frontend developers to follow the same standards designers do.

Why Use A Style Guide?

A style guide is used to document all the basics elements of a website that brings cohesion to a digital product’s user interface and experience.

Within the document, designers also include all the design elements such as buttons, typography, colours, navigation menus, dropdown fills, hover states, animations, etc., that together ignites user interaction within a product.

mailchimp buttons style guide example

Source: mailchimp

This inside out approach provides a visual representation of components. It helps the web team understand and predict how changes to essential elements will ripple out to more intricate patterns.

It also defines scenarios such as when to consider a design element as a pattern and when it should be added to the style guide?

Style guide


Moving From Static To Dynamic: Live Style Guide

Style guide indeed assists in component reusability, enables collaboration within the team and ensures design consistency. There, however, ineffectiveness is common in this static style of working.

A style guide is graphic-based documentation. A designer does include all visual representations of a component in a style guide. Then developers refer to this guide and transfers visuals into HTML and CSS.

But, it demands double efforts for maintenance. For example, if the markup or CSS changes, a graphic-based style guide also has to be updated, and it must reflect the immediate change. The static style guide is not found as effective as it was presumed. However, the emerging challenges and ever-growing evolution in web development needed a more dynamic system.

That’s where a living style guide comes as a solution.

Living Style Guide and How It Is Best?

Unlike the style guide, a living style guide helps to organize complex interfaces faster. Besides conveying design language, and defining design rationale, living style guides explain how to use and modify markup. It comprises a single source of code. The style guide’s markup, javascript, and CSS remain equivalent to what was utilized in production.

How Living Style Guide Works?

Living style guide flawlessly syncs production code and design interface. In the static style guide, it is challenging to keep a website's production code consistent with the frontend. The live style guide uses markup templating tools that keep markup or CSS code always linked from one source. Markup templating tools such as handlebars, dust.js, or twig help push an update for a markup of a component in a style guide, and that change also reflects instantly on the live website or app.

For instance, Lonely Planet has strategically made a switch from a static style guide to a living style guide. Look at Ian Feather's article on how Lonely Planet updated a style guide in the production environment.

Styleguide Example

Source: Rizzo Lonely Planet

Benefits of a living style guide in the development

A live style guide takes extra time to develop, but it provides numerous benefits such as:

  • Supports component-based project development
  • Allows us to build a website logically
  • Encourages modular, component-based CSS for cleaner production code
  • Ensures faster, responsive testing and general debugging
  • Facilitate Atomic Design standards being developed
  • Modularises code, which makes it simpler to reuse markup and CSS on different projects
  • Having all interface components’ living’ on one page makes updates and redesigns easier
  • Assists to easily and quickly recognize interface inconsistencies
  • Enable us to check that all components can work together on one page without any code conflicts
  • Provides a master page for markup and user interface reference
  • Can be used as a client and project deliverable

Bonus: live style guide is also proved highly valuable for non-code savvy designers. It helps them perceive the project’s needs efficiently and let them quickly start to code.

Final Thoughts

A style guide and living style guide boost collaborative work and focus on workflow. Nonetheless, developing Living style guides often seem like additional work, especially up front. However, it provides lasting benefits by allowing us to make updates and redesigns as easy and manageable as possible.

As we know, there are a thousand ways to approach a project. If you’ve found a workflow that works for you, share your experience with our readers in the below comment section.