What Is Design System Language And Why Is It Important?
As I first started getting into the UX Design field, I was exposed to many terms and tools that I was new to and was completely unaware of what they are or whether or not they are important to have knowledge about. This, I believe, was and is probably the case with most junior and new-to-the-field designers.
A major term that I was really confused about was the Design System Language, also referred to as DSL. I always was like “what is that?” and “okay now I understand what it is, but how am I supposed to decide on which components and style I should use?” and so many other questions. And as a self-learner, I always seek answers on my own and I tend to expose myself to real practices in order to have a thorough understanding of whatever issue I am facing. So let’s just get right into it, DSL in a designer’s life, what it is, and why it’s important.
Let’s just agree on something first; UI is a branch of UX. Meaning that, if you don’t understand the principles and foundations of User Experience Design, you may produce User Interfaces, but they will never be usable and accessible. In fact, the term User Interface is not the most accurate thing to call that branch. The accurate one would be Visual Design as a part/later phase of User Experience Design. It comes after Interaction Design and before Motion Design. Visual Design is the specialization of UX Designers who focus on how a product looks. “They might be responsible for designing logos, illustrations, or icons. They may also decide font color and size, or work on product layouts.”
__Google’s Foundations of User Experience (UX) Design
Now, let’s get to know what DSL means. It is basically the components that build up your design. It could be a design of literally any product, a mobile app, a website, a book cover, a social media ad, anything that needs a design, needs a DSL as well. It has each and every visual component under it, starting from icons, fonts, colors, all the way to images, illustrations and navigation tabs, and so on.
Okay, but why am I so thrilled about it? Why is it so important to have a solid design system for your product?
Well, a design system language is what makes a design in the first place. If you have a design, you must have a design system language even if you don’t realize that. Every mobile app for example has icons, fonts, nav bars, images or illustrations, colors. All those visual components, combined together, form the design system language of that design.
According to Emmet Connolly, director of product design at Intercome, “Your product is more than just a pile of reusable UI elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of components.” This means that a design system doesn’t only consist of a bunch of components that, when put together, build the system language. DSL is definitely more than that, it reflects harmony, consistency, coherence, and relativeness to the given brand identity in accordance with the user needs and logical implementations of each component.
Now, let’s get to some examples that fall among the most recognized design system languages:
The first and most accessed one is Material Design by Google. This is like the holy book of designers AND developers! It doesn’t matter what you are designing, you will find guidelines for that here. It elaborates the guidelines for mobile and web designs in terms of layout, navigation, colors, icons, typography and so much more. If you’re a beginner, I absolutely recommend you have this as a major reference.
Next, there is Polaris by Shopify. Needless to say, Shopify is a leading platform for people who own businesses and are seeking an online outlet for their customers. This design system language is solely for those online outlets, it shows how each and every component and section of the design is crafted to perfectly fit the industry of e-commerce.
And then we have the one that I really am fond of, Fluent by Microsoft. This also is like the book of all books of all designers. It literally has an explanation and a preview of each and everything that has to do with design and all the platforms that any designer could be designing for.
Now if you notice, all of these DSLs reflect the brand identity and guidelines of their creator. For example, Material Design reflects the brand identity of Google, and this is actually the system language they used across all of their products either on web or mobile. Same as Fluent and Polaris. Each one of them is created to state and list the guidelines of the brand identity of its creator, and designers are free to follow any of those depending on the product and the platform they’re considering.
Does this mean that even if you’re working on a booklet or a brochure design, you need a design system language? YES! As I said, any product, literally any product, must have its own design system language that consists of coherent and relevant components. Otherwise, one will end up having a pile of items that don’t fit together and a clumsy and non-logical product. So you, my dear reader, have a lot -yet so much fun- to do, because products are not just sketched out and designed haphazardly. There is a whole other level of work needed before you present any design to your audience. And I definitely wish all the best of luck to all my fellow designers out there.
PS. I will be coming back soon with another piece on how to choose and build your design system language. So stay tuned!
Resources:
