Style guide, Guideline and Design System: What's the difference?
 Style guide, Guideline and Design System: What’s the difference?

This confusion is very common for those entering the digital product design area, especially when the designer is migrating from the area.

 

In recent times the designer has gained much more visibility and powers… “with great powers (…)” you already know.

For those migrating from the area and falling into the UX / UI scenario it can be quite odd, sometimes confusing to use terms that seem to be giving the same meaning. This is the case of Style guide, Guideline and Design System, as they all aim to standardize the process/product production.

The idea here is to try to explain and exemplify so that you don’t make mistakes when defending yours by naming your deliverables that meet the expectation of the employer (or P.O / P.M).

Starting from the most complex, first, take a look in this post here at DC about Design Systems. There I explained a little about the process and what it is. Then watch the video below.

.)
Design Systems. By NN / G

Now watch this one that Andrei Gurgel (UXlab) explained quickly, very well.

.)
Design Systems. By Andrei Gurgel (UXlab)

That’s it… you’re fine with design systems definitions.

Now let’s go to the others…

Guideline

This term is widely used in the development universe because it describes a standardized process, where the rules and conditions for constructing an artefact in an ecosystem are defined. Ufa! (take a look at Wikipedia)

A guideline may or may not include visuals as it is a set of instructions for building. I can describe a set of instructions for you to create a paper plane, set up a wardrobe or build a parking sensor. This is because they are descriptions of routines to develop some activity, using patterns of a project…

In the Openredu.org project, for example, we have a style guide with a guideline. In this documentation, there is a section that explains how to configure your graphical environment to create artefacts according to the system’s visual identity. (take a look at the project)

If you are a graphic designer who works with advertising production, it is very common to be guided by a briefing and for art direction. Here are the definitions of the elements that can, cannot be used, and the formats that should be used for both production and exportation of the job (printing and distribution). These definitions are in a guideline, but it’s not called that because it’s a term much closer to programming people than advertising (they have their own terms).

Style Guide

Finally… what would be a style guide.

It is from the items in this post, the most concrete for a graphic designer. This is because the definition is: a set of visual artefacts and their definitions, such as colours, sizes, typography, and textures.

So when someone talks about style guide in the digital product design scenario, they are talking about the visual definitions of an artefact. It is the deliverable that the user has contact and can qualify, unlike a guideline and design system. The latter requires a design understanding, whereas the style guide is what materializes these definitions into visual components.

A very common tutorial example

.)
UI Style Guide. By LearnUXID

Within a Visual Identity scenario, there is Guideline (brand definitions, construction and limitations) and Style Guide which is the full set of colours, typography, graphics and symbols.

It’s very common when you are starting or migrating from graphic design to UX (or UI) and come across many tutorials, courses and the like that teach you how to create a Design System. However, the vast majority are just showing how to create style guides for website designs.

Nothing against… you just have to understand the purpose of each thing not to go around putting in the portfolio a job in the wrong category.

Conclusion

Then, you may have many questions because the 3 design deliverables have similarities and complements. However, the reading and practice of projects is very important, because this is how the difference is better understood and the perception of limits evolves.

Anyway… I hope you enjoyed learning more about this curiosity in the design world.