Using Atomic Design
UX/UI design can get incredibly messy with even small projects. To help keep things organized, I utilize a design system called Atomic Design which was invented by Brad Frost.
As with many other designers, I’ve made my own modifications to Atomic Design. In the content below, I’ll talk about how I work with this design system.
Atomic Element Layout
In traditional Atomic Design the element types are Atoms, Molecules, Organisms, Templates, and Pages.
This is my modification to the elements:
- Brand Styles
- Atoms (a) — “Small” elements such as buttons, input fields, or user profile photos
- Molecules (m) — “Medium” elements such as inputs with labels, various button states, or user profiles with stats next to them.
- Organisms (o) — “Large” elements such as a user’s profile card, a contact form, or a section of a website
- Templates (t) — Entire pages that can have slight variations in different situations such as a user profile before their email is verified and then after their email is verified.
- Archive (x) — This is where all of the elements that you are no longer using go, just in case you need to re-access them in the future.
Naming Convention
Having a standard naming convention is incredibly important to keep things organized in your Sketch, Figma, etc file. I subscribe to the idea that this naming system should be simple, yet flexible to meet any situation.
My naming system typically follows this structure:
(type: atom, molecule, etc) / (class: button, input, etc) / (subclass A: state, color, size, etc) / (subclass B: state, color, size, etc)
As a general rule, I don’t like to drill down more than 4 times in an element’s “name” (type / class / subclass A / subclass B). This helps reduce the amount of time to find a certain symbol when you are looking for it. To help keep elements within this framework, I use dashes for very similar classes instead of breaking them into subclasses.
For example:
m/input-text/small/filled
- Element Type = m
- Class = input-text
- Sub Class 1 = small
- Sub Class 2 = filled
If you have any questions or are looking for a designer, feel free to reach out: https://www.danstrangfeld.com/contact
