Subscribe to the Newsletter

We share bi-weekly content about 💻 Web Design | 🔎 SEO | 🌐 Online Business to help you improve your results.

How I created my first design system

Since I started using design systems my work has improved in a lot of ways. These are two major benefits I have noticed:

  • It give more consistency to my designs: Once I have a library of components or a set of guidelines for a particular project, the final product looks consistent and can be perceived as a whole. A design system provides a project with a unique identity.
  • It makes everything easier: Creating a new page or making a change to an existing page is 10 times easier. When all the components are created it is just a matter of making some adjustments instead of replacing every element.

So, what exactly is a design system?

What is a design system?

According to Nielsen Norman Group:

A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.

It looks something like this:

There are different ways to build a design system but I think that Atomic Design is the best one.

As a UX/UI and Web designer this approach is helping create concise and scalable designs in all the projects that I am working on.

This is a quick introduction to it.

Atomic design

10 years ago a web designer set new standards for web and UI design.

Brad Frost published a book called "Atomic Design", explaining his mental model for building more consistent interfaces.

He inspired in chemistry to develop the atomic design methodology.

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.

These stages are:

  1. Atoms: The foundational building blocks that cant be broken down any further. They include labels, inputs, buttons and more basic elements.
  2. Molecules: Two or more atoms that funtion together as a unit, for example a navigation bar or a product card.
  3. Organisms: Complex components made up of groups of molecules and atoms, for example a product grid.
  4. Templates: A template can be understood as a layout that set ups the structure of page. It gives context to the organisms and show how they will work together. They focus on the structure rather than the content.
  5. Pages: Templates with real content.


How I created my first design system?

I already knew about atomic design and also used existing design systems for previous projects. But this time I decided to create my own. I built a website for a real state agent, and I thought it was time to step out of the comfort zone. This is how I created my first design system.

Styles

The first thing I did was set the style guide using the brand's logo and following the Client-First Style guide a reference, this let me create a consistent style through all the website.

Client-First is a set of guidelines created by Finsweet to manage Webflow projects.

This was the Style Guide:

Colors

Padding

Spacing:

Shadows and corners:

Typography:

Atoms

Once I defined the style guide, I started working on the most basic UI elements (Atoms). These are some examples:

Icons:

Images and videos:

Buttons:

Forms elements:

Molecules

After designing the atoms, I started designing small groups of molecules with their own function. For example, the details bar o product cards:

Details bar, Mosaic and Cards:


Organisms

The next step was using the molecules to start building more complex structures. These are some examples of the organisms I built:

Product page:

Featured properties:

I will not go into detail for the templates or pages, but I think that having well designed organisms can make the design process 10 times more efficient and create a better experience for everyone involved.

Atomic design and creating a design system could be hard at the beginning, but the extra effort is totally worth it.


Hope this was useful!