The value of a living style guide

January 13, 2021

Behind all powerful and consistently expressed brands, stands one document: a style guide. Unfortunately most live an often neglected and dreaded existence in the forms of hard to find or even harder to update PDF files. The ones that shine and bring joy to its users live on the web, in the form of living style guide.

Style guides, brand guidelines and living style guides all aim at about the same thing: telling and guiding designers how to work with the assets of a brand. They are the guard rail and make sure that the brand is always communicated in the right fashion, making it easily recognizable.

Creating a brand is not necessary an easy task to begin with. Maintaining a consistent brand look and feeling over a variety of publications and formats is even harder. What might look great on a webpage can look really wrong or misplaced on a business card, for example.

And when working with a lot of digital assets it gets even harder. If you only have a classic PDF guide at hand you might be in bad luck and maybe it doesn't even describe buttons. Or it's old and outdated. Who knows? Only few style guides have a version number and even if so you can't know if there has been an updated published in the meantime.

What is a living style guide

This is where living style guides come in. It not only takes into account the special requirements of websites and, in addition to the elements of the classic style guide, but it also "lives" right into the webpage, making it a very centralized resource. But that's not all.

What it makes special is that it is implemented with HTML and CSS. This means that individual, interactive elements are not only statically described, but also programmed. Actual appearance, behavior and feel can be experienced directly in the style guide.

Collaboration

The living style guide includes reusable code snippets for all components, which are then adopted by the web developers 1 to 1 from the style guide for the web project. This is also called Style Guide Driven Development (SDD). For us every project starts with the style guide. It is the true foundation of every professional (and maintainable) website.

In the course of a web project, numerous, often minimal changes are made to the design. To document these all in detail in a bigger team is not possible like projects show. The overview is lost over time and inconsistency knocks at the door, often leaving projects in a messy state. Subsequent corrections are associated with increased effort, processes become more complicated and completion is delayed. This also makes maintenance harder in the long run. And we haven't even touched the topic of naming conventions for CSS classes!

With the living style guide, complex projects can be organized and implemented faster, cleaner and more efficiently. It will be the one and only central information page for graphic designers, developers and all other parties involved in the workflow. And all changes are being reflected in real time on all components throughout the project.

External agencies and service providers will also benefit, because they can work confidently knowing they won't reintroduce any wrong or old styles because they have direct access to the currently valid design guidelines. This in turn saves everybody unnecessary uncertainty, endless and painful revisions over details and it will actually introduce joy to the work process because everybody can focus on being great in what they are doing. That this will produce supreme results while saving money needs not be said. But we did.

What can be included in a living style guide?

In short: everything. It can really become quite overwhelming and quite challenging to display everything in a logical structure. It all really depends on the brand and the project. A good approach is to include some sort of clear navigation and not too many subpages.

However, it should always include at least basic elements like colors, fonts and usage of the logo and buttons and the such for web or digital projects.

Check out our style guide to get an idea: https://www.dipuentes.com/style-guide

Typography section in our style guide

Advantages of a living style guide

So, what are the advantages of a living style guide? We'll break it down:

For all project participants:

More consistency & consistent quality

The living style guide is the central go-to one-stop-shop always up-to-date documentation for all design guidelines and brand definitions. If embraced wholeheartedly it will be the valid basis for all future (web) projects. It will guarantee absolute consistency and consistently high quality - even for large projects.

Acceptance in web environment

Since the style guide is created with HTML and CSS, all components are already shown as they are. There is no need for abstraction work anymore. All people involved can see, interact and feel all elements in their natural habitat and in the way they look on the final website (during development). People can experience animated elements (e.g. hover and transition effects) and other interactions possibilities (e.g. forms), as well as the responsive behavior of the entire project. The gap between design and web development no longer exists! It will speed up the design process dramatically and it will reduce feedback loops and simplify the approval process because there are no surprises anymore, once people see elements in an actual browser.

Automated adaptations

The living style guide is the central reference for all elements. A change there automatically affects all elements on all pages. For example, if a color is changed on a button globally, the affected elements adapt accordingly.

Simplified communication

Whether concept, design, web development or customer - everybody will have a common reference point for interdisciplinary communication with the living style guide. It'll simplify communication and promotes mutual understanding.

Multi-channel capability

The living style guide can be used for all brand and corporate communications. It all depends on the scope of the brand and company. The living style guide can include not only web or digital  elements but all other brand assets as well even for print projects.

For customers:

Even closer to the project

Through the living style guide, the customer is closer to the development process. He can take a look at the design and implementation of the individual elements at any time and provide direct feedback again utilizing the standing on same ground principle.

One style guide for all projects

With a deeply anchored living style guide, different projects can be realized - at the same time - on the basis of the common standard. It guarantees a uniform appearance across all website projects.

For concept & design:

Perfect documentation for handovers

With an extensive style guide a great overview of all components including detailed descriptions is given. It will provide a very fast orientation for new experts joining the project or jumping if somebody is indisposed. No need to search and mail PDFs. Just one link and everybody is all set.

Fast updates and adaptations

New elements or changes to existing ones are available at the second they are published to the style guide. We recommend publishing updates to an accompanying slack channel for example.

For web development:

Less development effort

Developers use a uniform production code, which is stored in the style guide and which they can reuse. This is especially true for Webflow as the web developer can just copy and paste whole code blocks or symbols. Even across different projects. This speeds up development big time and significantly reduces development effort and visual glitches. We find again and again that the time won here can be put into delivering far superior results compared to drag and drop systems. The detail level will skyrocket and the result will stand out from the crowd. That's our groove, baby.

Optimized coordination with concept & design

Developers are involved early in the conception process to clarify feasibility with UX and design. This helps to minimize misunderstandings in coordination and errors or additional efforts in web development. Overall it will help bring teams closer together and again mutual understanding will grow, resulting in great results and really pushing the boundaries.

Reduced testing effort

Element and components can be tested directly in the living style guide meaning directly on the website. It'll reduce the final testing and bug-fixing effort for the project.

If you convinced now are interested in developing a living style guide for your own company and brand don't hesitate to contact us. We'll be more than happy to help.

Lighthouse photo by Philippe D. on Unsplash
Get the solution you deserve
Stop the headaches and free up valuable time so you can focus on your business again.
Hire an expert today!
Request Your Solution
di•puentes Newsletter

Interested in insights?

By clicking the "Sign Up" button you confirm that you agree with our Terms & Conditions.