Understanding Design Systems as Languages.

In the last article I told a story about a branding project I worked on, which failed and the things I learned from that story. It made me realise that my client’s needs are not my own’s. Also I learned, that designing with a focus on usage and systems helps to build experiences that are robust enough to stand a longer time. I want to pick up where we left last week: With the analogy of a design system as language.

The goal of every language is to foster communication. Most languages are built upon two pillars: Words (vocabulary) and rules (grammar). So if we view a design system as a language, we might just start by defining these categories.

Define formal elements and inject them with meaning.

What are words? Words are formal entities that carry meaning. So in a design system that would translate into a formal element, that has meaning. Every possible design decision is per definition a formal one. The interesting part is the attachment of meaning. Meaning in your design language can be defined as function. Building any visual language starts from this simple logic: Defining formal elements and attach a function to it.

When you think about interfaces, one that comes pretty naturally, is the identification of hyperlinks. Basic styling suggests a set of formal elements (underlined, blue) and attaches a meaning to it (clickable). This connection of functionality and form is pretty common and can be extended to a lot of practical cases. But to build meaningful (no pun intended) design systems, you have to think about the term functionality in a broad sense. Not every function is as mechanic as guiding you towards doing something.

Evoking a certain emotion is a function. Transporting the feeling of a situation is a function. Being as invisible as possible is a function, too. The term function can interpreted in a lot of different ways. Try to think about it as writing a tiny mission statement for every formal choice.

When designing, sometimes you will start with the function and other times with the element that is to be defined. Let’s say you have to choose a headline style. There are endless typefaces out there, so most likely you will start with the functions. A headline typeface has to catch attention and be legible first, but there are more intangible aspects, too. Perhaps it should show that your client is speaking with confidence, loudly and evoke feelings of adventure. Defining those functions and meanings in the first place makes it far more easy to start searching for the perfect typeface.

When you look at typefaces like that, you realise that every font you lay your eye on already has its own function and meanings embedded in its DNA. When combining functions and formal choices it is important to be conscious about this.

Respecting, using and playing with inherent meaning.

Nothing you do as a designer is completely original. Designing is always sampling injected meaning. Every element you choose carries a long history of different meanings. What you can do is tapping into these semantics and emphasise them, rewire them or even counteract them.

Using the example of typefaces again this is obvious. A bold wood type font has a lot of associations in itself. If you think about it, even the design decisions by the designer were influenced by the meaning he wanted to translate. It should resemble wood type, so it has to be rounded off a bit. It has to be rounded because it simulates the ink around the wood type itself and how it behaves on the paper…

We associate meanings with form and we expect certain formal characteristics from different functions. Identifying and navigating those tendencies is important. Internalising that we are “biased” in that sense will help you to use it to your advantage.

You can confirm and strengthen a user’s beliefs and perspective, if you emphasise those meanings. But you can also irritate and create attention if you are a bit more playful with it – if you break those expectations. Respect the inherent meaning and expectations of the elements of your design and use them in a unique way.

Define rules to use your words and build sentences.

Now that you have defined the vocabulary of your visual language, it is time to create rules to bring them together. Those rules don’t have to be dry instructions, though. What you are building is the grammar of you visual language. Grammar is a whole lot of rules, sometimes. But grammar does not have the goal to do all the talking and writing for you. The grammar of your visual language has to empower you and the user to form sentences and ultimately write stories or even poetry with it.

To make the grammar of your visual language easy-to-use and relatable it has to be simple. It has to follow an easy logic that can be adapted when needed. The rules you create should not only be understandable, but should be linked to a purpose. When the purpose of a certain rule is clear, people will be more likely to follow it or even translate it in new ways.

Try to create a purpose for your grammar, one idea that is driving every other decision. If you want to be the loudest person in the world, that will result in big typography and bold colours that use the whole format. If your main goal is to be informative, you will be more tuned down and arrange the certain words in a clear and informative way.

The rules of your grammar tie back into the meaning you attached to the words. At the same time, these rules are the glue and grease that holds all together. Try to find a overarching idea and purpose for the rules and every future adaption of the elements in new contexts will be a lot easier.

Write a story, an essay or a poem.

To stress the language metaphor even more, you should ask yourself, what kind of writer your client will be. What kind of language will he speak? Will he want to write an informative, analytical essay, a prose story or even poetry? Every client has different expectations for the visual language they want to use.

Some users prefer very strict rules, that apply to a lot of media and use-cases. For other clients a grammar a bit more open will do. Sometimes one signature typeface with a distinctive style is enough to shape a visual language. The rules could be pretty open and playful. In more complex situations – i.e. in a bigger organisation – tighter rules have to apply to ensure consistency.

No matter what kind of language you are creating, always start from the expectations and demands of your clients. From there, create a language that has the ability to empower them in the kind of writing they want to do. If you create a visual language based on meaning and logic, users will be able to understand it, adapt it, push it further and even breath more life into it than you could have ever imagined.

Thank you for reading! I think using metaphors to describe design processes and principles is a powerful method. Using thinking tools like this will be a deeper focus in the future. There are many more analogies to be found in science, philosophy and math. Switching the perspective on your profession as if it was something else can be helpful to reveal some insights.