The Design System as a shared language

There are two terms that are often improperly interchanged and used as synonyms for Design System but which, in reality, are not:

1. UI Library: is a collection of design components that form a digital product. Basically that Sketch page that we often find ourselves creating with all our beautiful little buttons, icons, etc. when designing a digital interface;
2. Style Guide: this is the static documentation that describes and accompanies the Design System. It defines in words – but not only – how a digital product should look;

So? Shall we get to the point? I know, it’s like when your parents used to tell you ‘until you’re 18 follow our rules’ and once you were 18, it became ‘as long as you’re under our roof follow our rules’ and eventually you find yourself at 30 asking your mum if you can go out with your friends, but only if you’ve finished all your vegetables. OK, I’m getting ahead of myself, so let’s see what a Design System is.

A Design System is the set of rules and principles that serve as a guide for the design of a coherent digital product ecosystem on any medium. It contains the UI Libraries and Style Guides seen above, but also many other guiding elements. The main and indispensable purpose of a Design System is to act as a shared and sharable language between anyone working on a given project (Designers, Developers, Social Media Managers, Content Designers, etc.). In other words, whoever has to work in the design of any kind of digital communication of a given brand, must not have any possibility of leaving the pre-established stylistic ‘tracks’. In the Design System, in fact, all sorts of indications are collected: typefaces, colours, spacing between elements, border-radius, shadows and so on.

In short, with this tool in hand, nothing is left to chance.

Let’s try to understand it a little more

By now, the Design System is a must for big brands. Of the many, Google is a perfect example to consider with its Material Design System, which you can view at this link.

https://www.youtube.com/embed/m1diVY4Uzjc

Let’s get down to facts. How do you do it?

In brief, the process of designing a Design System properly can be summarised in three points:

1. Define: first of all you have to think about the theoretical and visual guidelines that the brand will have to follow, regardless of the device on which the digital product will be displayed.
2. Decompose: reduce any elements to the non-divisible minimum. What we are going to define are not the complex elements – or rather, not only – but all those components that cannot be further broken down. Don’t worry, we will return to this concept in more detail later;
3. Communicate: everything must be clear. Leave no room for the imagination of anyone who gets their hands on your design system.

Some practical examples

Let’s start with probably the most obvious property: colour. Defining brand colours, we could choose light blue as the primary colour and, as secondary, its complementary: orange. We proceed by defining the colours that will communicate a state of success or error (in this case, green and red respectively). Finally we will need some shades of grey, what we usually call neutral colours.

We usually use at least four shades of grey in our projects:

• A very light grey to use as a background;
• A medium-light grey for lines, borders or similar;
• A medium-dark grey for subtitles, captions, etc;
• A dark grey for main titles, paragraphs, etc.

Obviously, the quantity and type of colours will depend on the designer’s choices and the needs of the specific project. The point is that we will have to predefine any style that will be useful to us so that it can be reused throughout our digital ecosystem in the future. Finally, for each of the colours identified, it is a good idea to add some of their shades that will be useful to us as variants on different occasions.

Another indispensable element in a design system is typography. The first thing to define is the fonts to be used, after which we must structure a hierarchy in the use of these fonts. To do this, the next step is to decide the font-size, letter-spacing, colours, and line-height we will need. In this respect too, we at PalazzinaCreativa have a more or less recurring standard:

• Title XXL: for main titles and H1 in general;
• Title XL: for section titles or similar;
• Title L: for titles of minor importance;
• Title M: for paragraph headings, for example;
• Title S: for minor titles;
• Paragraph: for all main body copy;
• Caption: for captions and other wording.

Obviously this is not an ironclad rule, we may need additional styles (e.g. for input text) or, conversely, we may need fewer.

These were just two examples but, as mentioned above, everything that can be used in any digital product in our ecosystem must be thought out and defined in advance, only in this way will our Design System make sense.

The Atomic Design

To our aid, like a brave Jedi knight, comes the methodology created by Brad Frost in 2013 called Atomic Design, which is divided into 5 phases . In spite of the division into stages, this is not a linear process, it is rather a useful mindset for thinking of our interfaces as a unified and coherent model. This methodology will help us to create interfaces from an abstract concept, without the risk of proceeding by trial and error and losing sight of the main aims: coherence and usability.

Let us look at these stages in detail:

1.Atoms: here we return to the concept of “decomposition” that we discussed earlier. Atoms are the smallest elements of our product, those components that cannot be further divided without ceasing to be functional. An icon, for example, is an atom in that, if broken down further, it would cease to be functional.

Example of an atom

2. Molecules: these are simple groups of interface elements that function when joined together. When we combine two atoms we therefore create a molecule. The label ‘search the site’ now defines the input, clicking the search button will submit the form filled in by the user. The result is simple and reusable as a component within our interface.

Example of a molecule

3. Organisms: these are more or less complex components composed of groups of molecules and/or atoms and/or other organisms. These organisms create different sections within our interface. Our organisms may contain different or similar types of molecules within them. A header, such as the one below, may consist of a logo, a primary navigation and a search form.

Example of an organism

4. Templates: these are created from the collection of our atoms, molecules and organisms. Thus creating the first skeleton idea of the page, our much-loved wireframes. In the case we can see below, our header organism is taken up within our layout.

Template example

5. Pages: these are simply templates populated with real content, such as images, text, graphics, advertising, etc. This helps us to understand how the page, depending on the specific case, will behave when the content populates it.

Example page

But all this fuss? Isn’t it a waste of time?

Absolutely not!

Of course, structuring a design system will take you a good amount of time, but it all serves the purpose of subsequent savings.

Not enough for you? Then I submit to you some of the many advantages this ‘new’ friend can bring:

• It speeds up productiontime ;
• creates a shared vocabulary, facilitating collaboration within the team;
• guaranteed responsiveness in any medium thanks to upstream design;
• future friendly. Because adopting this type of methodology guarantees not only responsiveness on today’s existing media but, why not, also on any devices that do not yet exist;
• it becomes an essential point of reference for the company and/or product(s) it addresses;
• promotes visual consistency for the company;
• facilitates the work of Developers, preventing them from screaming in the office in hysterics.

We can say that we have finally got to the bottom of the subject and yes, you can finally leave behind your parents’ rules and follow those of your new companion: the Design System. 😉