In theory,

Design systems are essentially collections of rules, constraints, and principles, implemented in design and code.

Today, Design systems are major parts of some of the famous products. And we can find that every digital product is based on some kind of design system. From the past few years, they have completely evolved from a collection of design patterns to a single language defining the rules of design for multiple products across different platforms.

A well-documented design system is a complete guidebook consisting of design principles, typography, color guides and rules for the behavior of different patterns used across the product. Overall, the Design system helps in solving the inconsistencies of the complex products and ensures that the designers and developers follow a single framework for the development of the end product.

Here at NextUX, we follow the atomic design methodology to build the design systems in a more simpler and easier way.

Atomic Design

Atomic Design Methodology is developed by Brad Frost and it is completely based on the Modularity principles and has been inspired by the chemistry of the atoms, molecules, and organisms.

Atomic Design is basically divided in the,

Atoms, Molecules, Organisms Templates Pages.

According to the Atomic design, every software and application is basically made up of small individual atoms like buttons, input boxes, texts and they are grouped together to make different components and complex pages.

Usually, Atomic design starts at the atom level, but if you go further deeper in these atoms, then you can find that these atoms are also made up of a nucleus, electrons, and protons.

So rather starting from the atomic level, We at NextUX, start from the inside of the atom level, that is from the very basic nucleus level and build up the whole design system from there.

After getting inspired by the atomic design methodology developed by Brad Frost, we have created our own design methodology upon that and we follow that to create design systems for our clients.

To build the design system, we divide the whole product in,

Nucleus, protons, electrons Atoms Molecules Organisms

In the product, we consider the nucleus as the visual feel or visual stylings like the shapes, background colors, shadows effects, border-radius, and protons as the typography, and electrons as the color guide or color pallete. And all the other components are basically made up of these nucleus, protons, and electrons.

So, to make it more clear, let’s break down a single screen in the basic elements of our design methodology.