We introduced the design systems topic in a former post and now it’s time to delve into the matter.

DESIGN SYSTEMS ARE EVERYTHING

An obvious question comes to mind: what exactly is a design system? The answer seems kind of strange, but actually very easy. Everything. Every component, every documentation, even style guides, typography, colors, and coding convention are part of a design system. The only difference is that you don’t do that after the release of the product, but while developing it.

Development of a a design system starts from understanding how an application is composed. It’s necessary to understand what the atoms of your application are and how to assemble all the components, and only then you can start to compose a page.

Design is thinking made visual – Saul Bass
This kind of process is well explained in Brad Frost‘s Atomic Design. Frost explains his methodology by making you remember the first chemistry class you had. He divides a website page in little components he calls atoms and believes that you can build anything just by combining atoms in different ways.

Atomic Design identifies five distinct levels that develop from the small and simple ones to the big and complex ones. It’s like building a house. You start from the bricks, then build the walls, a room and by continuing to combine, you get a house. Seems easy, right?

The goal is to create small elements that can be reused so that it becomes easier to build any webpage you need. The benefits of using the Atomic Design are several. Reusability, as we said, is probably the most important one. Just think of very few atoms, like an image, a list, a paragraph, and a link. With only these few elements, you could build different layouts with different meaning and you wouldn’t have to design everything everytime.

DESIGN SYSTEMS, WHEN STYLE MATTERS

Designing atoms instead of full pages allows you to easily create style guides. By combining all the atoms and molecules together, you can build a guide without having to extrapolate basic elements from the pages you have.

Designing this way has also other great benefits. You can focus all the visual efforts inside the design system and use the evergreen wireframes to understand processes, business logic, and functionalities. It’s also possible to start the development of the application before all business logic, navigation and so on are finished. That way, it’s possible to parallelize the development and cut the time effort to release the application.

Those are the reasons why in Objectway we use design systems to create our new products.