What is a Living Styleguide

A living styleguide is not only a place to document all the components, patterns, layouts and elements of your site, but as you document those things it actually creates the code consumed by your site. It's ever evolving, flexible and dynamic. Beyond its use in consolidating the front-end code, it also documents the visual language, used to create the site. It's a reference for content developers, for the front-end language and when discussing site changes.

So Why Do We Need a Styleguide

As your team grows and changes over time, your style guide will help you in several ways.

  • Faster build times for new sections and pages, because anyone joining an ongoing project can refer to the guide for the exact styles to use.
  • Allowing us to standardize our styling, keeping it small and quick to load. By using the guide as an inventory of modules and code, both designers and developers can quickly see if new designs deviate from established standards, and decide as a team if it’s worth expanding the codebase or if something already written is easily extended, resulting in lighter-weight and more flexible code.
  • Design consistency is easier to maintain, as the designer can look in one place to reference the site’s components and ensure a cohesive look and feel throughout. This is especially helpful on larger teams. And when design consistency is maintained, the codebase is also kept smaller.
  • Easy to see what sweeping changes will do to patterns, layouts and even down to translations of new fonts. Makes QE on changes significantly easier.
  • A lighter weight theme to change if using a CMS or a larger platform in order to keep functionality and front-end styling independent.
  • Communication becomes clearer as well. There is a shared language of what components and elements are called to reduce confusion between developers, designers and content owners.
  • Makes sure all design is ultimately influenced by global brand decisions since that styleguide is loaded first and not to be overwritten, keeping "themes" consistent.

What is Platform Thinking

This approach requires that designers no longer consider their work narrowly, focusing on projects whose goal is to launch a new product, feature or page. Instead, they focus on bringing a holistic product platform to market, then evolving it. When designers take this approach, a product or product line grows systematically, and a company’s UX strategy works on all three levels: operational, tactical, and strategic.

Usually designers will get a project and will create a page, feature or project independent of other current running projects. They research, develop a mock, then a layout, then flesh out a brand new design and then when complete they hand it off to developers, who are often frustrated with bloating a code base with new patterns and features. There are revisions and iterations and so much time. With platform thinking designers stop thinking and designing to individual projects and utilize or expand on existing patterns and projects. This keeps the code base lighter, allows developers to improve other parts of the site, allows designers to make larger sweeping changes and test patterns against new iterations with better and more meaningful results and ultimately keeps the team small and costs down for the business as a whole.

For a more in depth look at the benefits and details of platform thinking  click here