Idea of Design System

What’s the idea behind design system? Since 2017, the term ‘Design System’ has come up as a hot requirement in organisations for well established UX development. Its not something new in UX design, process or technology that most of the designers not practiced. . Under basic definition — its a superset of design data, which is well designed, organised and documented for designers, developers and for all who are involved in product interface development.

“Design system is the superset of design data (pattern, library, style guide, typography, visuals, code etc.) which is very well designed, organised and documented for designers, developers and for all who are involved in product interface development.”

It should include everything required for design development like components, patterns, guidelines, visuals, typography, transitions, micro interactions, design codings etc. Examples — Google Material Design, Microsoft Fluent Design, Salesforce Lightening and .

To understand the of design system, I picked two best examples — the ‘Departmental Stores’ and the ‘Lego Toy System’. ‘Departmental Stores’ because as they are organised and ‘Lego Toy System’ as they are designed. (Though,”Organising is also Designing”, will look it in another writeup :)

Design Systems should be well organised like a ‘Departmental Store’

Design systems should be well organised like departmental store as one stop reference where designers and developers can access ready design components for design and its development.

— “A customer () enters () into the departmental stores () he proceeds () easily to labeled () aisles () to look () his required items (). Picks the appropriate item () as per his requirements and reads the instructions () about usage, do’s and don’ts (). On his experience and knowledge (), he selects () the items () which best fits to his requirements ().”

and if I pick only bold texts -”

Design Systems should be well designed like a ‘Lego Toy System’

How kids translate their imagination to various form and shape by careful selection and joining tiny molecular modular lego pieces. Each piece in assembly completes the creation of each toy and its purpose.

Its interesting to understand the lego toy system as a basic concept for UX design system. Deciding pieces of the system to be designed, how they will connect together for various meaningful forms, shapes and how they go through complete process of design, strategy and architecture, is similarly all about how designers consider various aspects in application designs.

Considering what will be the size, thickness and how to provide strength to those pieces so that they can function with , is similar to how developers consider UX design technicality, code and development.

Kids (users) pick lego pieces to make various forms and shapes, follow ‘how to use instructions’, join them in various playful forms and shapes and bring great experiences. Similarly, using design system, designers and developers (users) picks like input fields, tables, buttons etc., follow well documented rules, guidelines, constraints etc., design intuitive applications and achieve both — get themselves a great experience while designing and provide great experiences to its users in their designed applications.

Its an important aspect that any number of toys made using these pieces have consistency in assembly pattern and appearance from atomic to structural level and provide intuitive and a brand experience. Similarly, any application designed and developed in an organisation using UX ‘Design System’, provides consistent and branded experience in its behaviour, appearance and patterns from atomic to structural level. All this get achieved saving lot of time and money.

Now, establishing design system in any organisation is an important UX foundation, strategy to save lot of time and money. It’s crucial to design every single tiny piece involved in design system carefully, as each one in system is master piece combination of art, craft and technology. While designing design system, one/team should take care of all type of micro to major use-cases, scenarios, components, actions, navigations and layouts for all channels and apply the design thinking from atomic to molecular to structure level designs in super organised manner.

--

--

Design Polymath | abhishekchitranshi.net

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store