Unless you live on the moon you might have heard of the word “ design system “ somewhere and how it contributed to the boom of the classic world of UI/UX designers. You must’ve come across some articles showing nice UI designs or some posts about the importance of adopting such systems and from that you think that you know what it is but I do bet you actually got it completely wrong!!! Don’t worry this blog was gladly written to rectify all your misunderstandings.

Let’s start with the basics you get when you google the term “design system”.

What does Google tell you about design systems?

As per the general definitions of design systems that first pop up when you google it: a D.S is a collection of the detailed standards of design and front-end coding also considered as a library of design components and assets made to be easy to use and reused in complete efficiency, consistency, and scalability to allow teams to achieve high-value digital products.

Well though it is a well-elaborated definition, it still scratches only the tip of the iceberg of what a design system can be which drives you to confusion and wrong assumptions again😅.

The concept is too deep to be explained with only words. That’s why this blog is taking another different approach…mm let’s say a shortcut to your assumptions: while everyone is writing all sorts of blogs to tell you what is a design system… I’m here to tell you about what it is NOT !!

Everything you think is a design system but is actually NOT!

Unlike what runs in your mind, a D.Ss definitely not any of the following things :

A tool 

A Design System isn’t a tool or software. It is a whole new design mindset! A new method that shortens the entire process of building a digital solution building by enhancing a smoother workflow and creating a cross-functional collaboration space between the involved teams to manage both coding and design on a more flexible level that tolerates any changes easily without buggings or deadlines delays.

While the usual process consists of a designer sketching the interface of the solution and delivering it to the respective developer who would try to code it step by step from scratch that might lead to the loss of consistency, a design system enables both to work simultaneously, efficiently by arranging to provide control over every component and provide respective coding in perfect consistency.

 UI Kit

Most people think that D.S is about reusable UI kits and most design systems are approached from a visual UI perspective. It is partially wrong as D.S is way beyond just Ui kits. D.S provides all useful coded components typographies and color-tokens to build successful consistent UI yet isn’t only a collection of reusable assets it also enhances the standardized design principles, helps document, and saves all stages of work from once a single accessible source of truth that allows a scalable UI language and streamlined UX guidelines.

Style guide 

Style Guide is just static documentation and a set of guidelines that describes how products should look and feel, use cases for UI patterns, correct typographic scales, etc. Design systems scale design from what? to a who? that maintains any brand persona consistently.

Component Library

Design systems are far from just integrating static design files and pattern documentation they create functioning UI components that can be used to build real software applications that emphasize early browzing and perfect front end code iteration.

Bootstrap

Bootstrap lacks any proper documentation regarding the use of its elements. It’s just another popular component library, which does not provide any guidelines regarding visual requirements and leads to a lack of consistency and brand maintenance.