Living Style Guide

Living Style Guides are an important instrument for the development of large and complex web applications. They help document in a clear manner the design and the code, align the work of designers and developers, and manage complex interfaces.

What is a Living Style Guide?

A Style Guide documents the look and functionalities of a website. The following elements are captured in it:

  • Structure and Design

  • Function and Behaviour

  • Editorial guide

Contrary to the classical Style Guide in Adobe, the Living Style Guide builds a format based on the latest source code of a website. The source code is the text drafted by developers in the programming language, with instructions and information regarding the website. Once translated into the computer language, that text will display an interface that will be usable for the user (so-called Frontend).

Through this connection, each adjustment of the source code will be automatically recorded and versioned in the Style Guide. Consequently, in the course of the project it will not be necessary anymore to continuously adjust the PDF-style guide manually. It can save a lot of time and nerves.

The top 5 advantages of the Living Style Guide at a glance:

  • Clear, up to date, time-saving: The documentation and the specification are stored centrally in one location, and are available digitally. There is no more confusion about which Style Guide version is the current one. The time-consuming efforts to keep the Style Guide up to date disappear.

  • Style guide driven development: The Living Style Guide creates a common basis for designers and developers. The project work in both areas can be thus closely interlinked and aligned with each other; any design-relevant modifications can be adjusted easily and quickly in the Frontend.

  • No redundancies or inconsistencies: All recurring elements, components and modules of a web application are specified in the Pattern Library. For example, all buttons or error messages pertaining to the entire application look the same, and the wording for a product is always the same.

  • Communication tool: The defined design standards of a website can be communicated between the Project Team and the Company with the help of the Living Style Guide.

  • Reusable: With the Living Style Guide you are holding a testimonial in your hands, and you have the basis for further projects. You can use the Pattern Library as an inventory for all your digital products.

Our Tools for your Living Style Guide

With Darvin and Estático Nou we have built two tools for tailor-made Living Style Guides: the developed elements and modules can be displayed in a preview in different options and along with their instructions at the press of a button. The presentation of your Living Style Guide can be tailor-made to match your specific needs.

With our tool our Frontend developers work with maximum efficiency and without redundancies.

Customized interfaces for your Living Style Guide

  • Would you like to have your Living Style Guide displayed in your own tool? No problem, we will define with you the appropriate interfaces, and synchronise our code with your tool.

  • Do you want to incorporate the Pattern Library as a framework into your own Frontend code? We will generate that for you in any desired form.

Contact for your Digital Solution

Book an appointment

Are you keen to talk about your next project? We will be happy exchange ideas with you: Melanie Klühe, Stefanie Berger, Stephan Handschin and Philippe Surber (clockwise).

Melanie Kluhe
Stefanie Berger
Philippe Surber
Stephan Handschin

Contact for your Digital Solution with Unic

Book an appointment

Are you keen too discuss your digital tasks with us? We would be happy to exchange ideas with you: Jörg Nölke and Gerrit Taaks (from left to right).

Gerrit Taaks