Component Based Design is often talked about in context of large, complex projects. In this post we’re making the case that it can also be very beneficial for smaller projects and teams. We now 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 webpages or app screens but are in fact designing design systems.
However, we found that the metaphoric nature of Atom Design caused some confusion among our clients. Especially the abstract naming conventions can be a little daunting. Therefore we defined our own take on 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.
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.
The second group defines the project’s smallest reusable parts: elements. A few well-known examples of elements are things like: buttons, links, inputs, drop-downs etc. Each of them is defined, along with all their states; such as hover, focus and disabled buttons. Our mantra is: Define once, reuse throughout the project.