Definition
A Design Language System is a set of interconnected patterns and shared practices coherently organized. Design Systems aid in digital product design and development of products such as apps or websites. They may contain but are not limited to, pattern libraries, design languages, style guides, coded components, brand languages, and documentation.
Source: Design system - Wikipedia
History
In the 1960s, computer technology began outpacing the speed of software programming. Computers became faster and cheaper, but software development remained slow, difficult to maintain, and prone to errors. This gap, and the dilemma of what to do about it, became known as the “software crisis.”
In 1968, at the NATO (The North Atlantic Treaty Organization) conference on software engineering, Douglas Mcllroy presented component-based development as a possible solution to the dilemma. Component-based development provided a way to speed up programming’s potential by making code reusable, thus making it more efficient and easier to scale. This lowered the effort and increased the speed of software development, allowing software to better utilize the power of modern computers.
Wow-what a history. Mcllory presented a design system in the 1960s, at the period time my mom is just a 1-year-old kid.
Now, 53 years later, we’re experiencing a similar challenge, but this time in design. Design is struggling to scale with the applications it supports because the design is still bespoke—tailor-made solutions for individual problems.
"Have you ever performed a user interface audit and found you’re using a few dozen similar hues of blue, or permutations of the same button? Multiply this by every piece of interface in your app, and you begin to realize how inconsistent, incomplete, and difficult to maintain your design has become."
Here’s a tidbit of mystery. Why is it that – a bit like photographs – most products somehow seem to get degraded with age?
You’d think the opposite should be true: that having a great team spend many years iterating on a product should eventually result in some immaculately perfect finished product. Instead after ten years, it’s suddenly harder to unlock your phone. Why?
The long, painful answer is ill-discipline. Projects grow over time. More people join, some earlier folks leave, and the clarity of design vision deteriorates. The business decides to chase new markets, and some features get tacked on like Christmas decorations. Internal collaboration gets more challenging and sub-teams develop their design philosophies.
Requests flood in from a more diverse customer base. Competition needs to be kept at bay by adding in more stuff. Sprawl sets in. Before long it doesn’t feel safe to enter some screens alone after dark. High-quality products degrade. It happens to the best of us.
Design Systems of one flavour or another have been around for quite a while. Simply put, a design system is useful for when you need to design not just one thing, but a whole set of things that you want to feel like a coherent family. If you come up with a template and stay true to it, you’ll get that coherence for free.
So instead of designing one subway sign, you might come up with a set of graphic standards that allow you to design a whole set of signs and symbols that work together in concert.
Or instead of designing a logo for an organization, you might develop a visual system for representing that organization in all sorts of different contexts. Space exploration and classic graphic design, what’s not to love?
CSS frameworks like Twitter Bootstrap dragged these ideas into the world of web development, providing reusable code snippets to easily build consistent UI elements like buttons and dropdowns. Wonderful, even if every website in the world looked the same for a while.
Brad Frost’s influential Atomic Design methodology put forward a more structural approach. Rather than a jumble of “atomic” elements scattered across a screen (e.g. a label, an input, a button), Atomic Design suggests that a small collection of user interface elements should be thought of as a meaningful component, (e.g. a page footer, a login form).
Finally, Google’s Material Design guidelines pushed the concept further. They brought deeper formal rationality, a bold aesthetic and resources and guidelines for building user interface elements across a range of platforms.
Check out the Material Design 3
Today, many larger companies have built their custom, in-house design systems in an attempt to stave off the inevitable creep of inconsistency. Airbnb, Salesforce and Uber have built comprehensive systems that keep their product user interfaces in check.
Climax
The 1960s or 2022's. Interestingly, human beings have pushed themselves to develop innovative solutions for the world. Whether it's programming, designing, or whatever, always think of a solution to a problem rather than getting used to it. I remember the words of Hawking “However bad life may seem, there is always something you can do and succeed at. "Where there's life, there's hope.” Do your part to fight the problems and support your fellow being. Think to live Life.