Component Based Design is often talked about in context of large, complex projects. In this article we’re making the case that it can also be very beneficial for smaller projects and teams. At Heavyweight we use Component Based Design for every project– big or small.

First of all, we tip our hat to Brad Frost, who literally wrote the book on Atomic Design. He introduced us to the idea that we aren’t actually designing web pages or app screens but are in fact designing design systems.

However, we found that the metaphoric nature of Atomic Design caused some confusion among our clients. Especially the abstract naming conventions can be a little daunting. Therefore we defined our own take on it; Component Based Design, borrowing heavily from other great designers– of course.

Let’s dive in: What is it?

In essence, Component Based Design is the practice of splitting UI into smaller, more manageable parts with clear names. Each of these parts fall in one of six distinct groups.

1. Identity

The first of these six group is Identity. Herein we define the project’s core brand elements. Typefaces, typography, primary and secondary colours are all meticulously specified. Afterwards these are used throughout the project.