July 17, 2018 A Study of Design Language – Part 1: Introduction

There used to be only 3 major design languages available around the UI/UX design universe: Apple with Human Interface Guidelines, Google with Material Design, and Microsoft with Metro or Modern Design. Now, a bunch of companies have created their own design language and keep expanding and nurturing it. If you have time, take a look below on the new design languages:
– Shopify with Polaris
– IBM with Carbon Design System
– GE with Predix Design System
– Microsoft with Fluent Design System
– Atlassian with Atlassian Design System
– Trello with Nachos
– Salesforce with Lightning Design System
Honestly, having a journey and cruising on companies’ design languages has given me a chance to look back and learn a lot of things. It’s like watching Sir David Attenborough in Blue Planet 2.
Disclaimer: in this series, we will not discussing on how to create a design language—although it really makes me want to be involved in creating a design language. My main focus is summarizing the important aspect on design language and applying them in design work.

What is a design language

A design language is a comprehensive set or style that guides the design process to achieve consistent look and feel all across the products and platforms. Design languages can contain basic things like color themes, shapes, pattern, texture, layouts, etc., plus much more complex elements like gestures or motion, as well as a brief do and don’t that can guide designer. Design languages are not a static rule, hence it keeps evolving with time, context, and need. If you compare the 2018 material.io between the archive one, you can see there are lots of differences and improvements made toward the changes.

Material Design – Archived.

A new Material Design with new update each month.

Why do companies create their own design language?

By using a design language, it’s easier to achieve a good design that is consistent across a platform which requires responsive design. Each design will be strong and helps unify company branding. That means as a designer, we can avoid inconsistent designs and focus on the design problem.
There are a lot of big companies that run their challenges on Topcoder and provide their design languages, eg. General Electric with Predix Design System, IBM with Carbon Design System (formerly IBM Design Language) and many more. More and more companies are now aware that design languages are useful to fill in the gap on how fast and vast technology is moving forward.

Who needs the design language?

Designer, prototyper, developer, company—every role that is involved in creating a good product. If each person speaks the same design language, there is nothing lost in translation — every iteration is focused on the problem instead of adjusting the font size, color, etc.

How can we take advantage of a design language?

Take a deep dive in every design language that exist on the world wide web. It’s like featuring an amusement park with a museum — amusing and informative at the same time. By learning each design language, I found that each company has their own style to explain their system, but they all convey how good design works. Hence, studying design languages can help you understand what is good design on every element.
Also, when you are stuck in your design process, looking back at renown design languages can help you to refresh yourself and find a better way to solve a problem.

What next?

In my next article, we will talk about the different elements in design languages and how it affects your design workflow.
PS: Topcoder also creating their own design language which might be released in next few months or you can grab the TC GUI KIT sketch file to have a look on the design language and get prepared for Topcoder related challenges. Here are past challenges that have run on Topcoder and using TC GUI KIT as reference:
1. Project Activity World Map Design with egislr as the winner.
2. Topcoder Organization Profile Concept Design with iaminfinite as the winner.


Guest Blogger

categories & Tags


Sign up for the Topcoder Monthly Customer Newsletter

Thank you

Your information has been successfully received

You will be redirected in 10 seconds