February 7, 2022
Design
Blog post read time icon
2
 min read

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

Get an email for new posts

Other articles

How Fucked am I Matrix: What your Retrospective has been Missing

The How Fucked am I Matrix (or HFI Matrix) was designed for team members to not only learn about how they optimally operate, but also about their fellow teammates.It monitors each member’s energy level and workload each week which gives both them and you a good idea of where everyone on the team stands. This does three things for the entire team: In the short term, it allows you to see who might have too much on their plate and who might have too little on their plate for the week. In the long term, it helps you learn about each member’s energy and work cycles (EX. John is typically really motivated and has lots of stuff to do for two-ish weeks. Then he usually has very little energy the next week and needs some help getting...

Read time icon
4
 min read

Pitch Deck Handbook: Why Now Slide

The Why Now Slide is built to make it clear why this business/solution should be built and launched at the current moment in time. It typically includes; Quantified metrics and/or facts/logic as to why now is the right time. The Why Now Slide can be placed either after you introduce your solution or just before you introduce your solution.

Read time icon
2
 min read

Pitch Deck Handbook: Financials Slide

The Financials slide serves as a benchmark for where your company is estimated to financially headed over the next few years. It should include: A 3 to 5 year projection including your break even point along with revenue, expenses, and net profit. The Financials Slide typically is placed after your Market Slide or Roadmap Slide...

Read time icon
3
 min read