Styleguides, Pattern Libraries and Design Languages

The terminology surrounding front-end ’styleguides’ seems to be ever expanding. We have styleguides, pattern libraries, UI libraries, design systems, design patterns and a design language to name a few.

Some of these are similar to each other, some are used to encompass everything. For clarity it’s best to define what you are meaning when using one of these terms. It will help you and your colleagues understand what part of the project you are talking about without possible confusion.

This is how I see three of the often used terms. Style guides, Pattern Libraries and Design Languages.

The what, the where, the how and the why

Pattern Libraries

A pattern library is a collection of front-end code that creates a component part of the overall design of the page. It is ‘the what’ of the website. If you need to use a carousel this is ‘what’ code you would use.

Styleguides

With a pattern library being ‘the what’ of a sites design a styleguide is ‘the how’ and ‘the where’. You have this collection of colours and typefaces and the styleguide will show you how and where to put them in your website. The patterns you need for a project will have their placement and usage defined within the styleguide.

It is ‘a guide’ though. It should allow for deviation where necessary or chosen when content dictates a change in the design.

Design Language

As we have ‘the what’, ‘the where’ and ‘the how’ then a Design Language, in part, is the overall ‘the why’. With our ready–made patterns and our styleguide showing us where and how to use them the Design Language will instruct us as to why we would use ‘the what’ and’(the) where’ we should put them altogether.

The simplest of terms

That’s how I see these three terms, like a ‘Johnny Ball Reveals All’ trio for projects.

Out of the three I think I’ve not given the Design Language as much credit as to what it is. It can be seen as much more than the simple why you would put what where and how. It should be the living, growing ‘thing’ for the project, in all aspects of design, not just of the web. From my point of view, as a front-end developer, that’s for others to define and express better that I could try to.

Originally published at alwaystwisted.com on January 20, 2016.