What is atomic design?

The first step of a site redesign is figuring out what’s going to be on the site. Which means that before we can think about design and style, we have to first think about content – the star of the show.

If you’re working on a portfolio or personal site for your New Year's redesign, that means reflecting on your background and experience.

I’ve been in tech for over a decade and have done a fair bit in that time. I’ve worked as a developer, bootstrapped a business to acquisition, launched a VC-backed startup, produced podcasts, done a ton of speaking – there’s a lot of stuff I could potentially add to my personal site.

I find the whole thing a bit overwhelming. I’m not really sure where to start.

So instead of brainstorming from a blank page, I’m going to reference websites of awesome tech people to get my juices flowing.

Here are the five people I chose:

• Cassidy Williams

• Kent C. Dodds

• Jason Lengstorf

• James Quick

• Ankita Kulkarni

A quick glance at these websites might be enough to give you some ideas of what you might want to include in your site, but let’s go deeper.

I’m going to break down these reference sites through the lens of atomic design, a framework popularized by Internet-famous designer, Brad Frost.

He offers a way of looking at interface design that I really love. Here’s the breakdown.

Atoms

At the most granular level, interface designs can be broken down to their bare elements, which he calls atoms. Taking inspiration from chemistry, atoms are the smallest unit you can find on a website. I’m talking buttons, headings, paragraphs, labels, inputs, etc.

Molecules

A step up from atoms are molecules, which are a few atoms put together. In the world of user interface, that’s what we get when we collect a few elements to create a functional unit. A label, an input, and a button brought together to make a form are a great example of a molecule.

Organisms

Put a bunch of molecules together and you get an organism. For us, that means taking that form and adding a heading and a paragraph to create a callout to sign up for your newsletter.

Templates

Going up another level, we get to templates. This is where our organisms have order and organization. We think about columns, different sized widths, and prioritization. We’re not just connecting our organisms, we’re creating relationships that tell a story and bring users on a journey.

Page

This is where we fill in the templates with real content and start to bring our site to life. We paint the picture adding real photos and real copy, even if it’s a first draft. This helps us see how everything works with a higher fidelity. We get to test out our design with real information, seeing it in action.

We mentioned how three of the above items come from the world of chemistry. The benefit of using these particular chemistry concepts is that there is a known relationship between them. We all know that atoms make up molecules that make up organisms. There’s hierarchy built in. That helps us understand how the items on our page are connected to each other. There’s an inherent organization.

So how do we implement this atomic design? What do we do with this information?

That brings us to our first activity.

Activity 1: Red Box Breakdown

In this activity, we’re going to slice up our reference sites and identify their atomic units. To do this at home, follow these steps:

1. Make a list of 3-5 personal sites you want to reference.
   
   It’s more helpful if you pick people with a similar background or at least those who are in the same industry so that their content is relevant to you. I recommend picking at least three so you have options to choose from.

2. Take screenshots of the reference sites.

3. Open Figma (it’s free!) and create a frame. Make it huge. Then copy and paste the screenshots into the frame.

4. Use a red box to outline the different organisms you see on the site. Feel free to pick just the organisms that are most relevant to you.

5. Use a green box to outline the molecules.

6. Use a yellow box to outline the atoms.

When you’re done with steps 4-6, you should end up with something like this. This is James’s site.

7. In a document (I just use Google Docs), make a list of the different organisms with their corresponding molecules and atoms. Here’s what my list for James’s site looks like.

• Header

  • Name

  • Nav bar

    • About, Blog, Speaking, Courses, Podcast, Discord

• Hero

  • Copy

    • Intro

    • Tagline

    • Buttons

      • “Get to know me”

      • “Work with me”

  • Photo

• Socials

  • Social info

    • Handle

    • # of followers

  • Links

    • YouTube icon

    • Twitter icon

    • TikTok icon

    • Discord icon

• About

  • Header

    • Section heading (“About me”)

    • Tagline

  • Copy

    • Bio (multiple paragraphs)

    • Button (“Learn more about me”)

  • Graphic

• Work experience

  • Section heading (“Work experience”)

  • Company logos

    • FedEx

    • Microsoft

    • Auth0

    • PlanetScale

• Speaking

  • Copy

    • Section heading (“Speaking”)

    • Heading

    • Description (1 paragraph)

    • Buttons

      • “Previous talks”

      • “Invite me to speak”

  • Testimonial

    • Quote

    • Photo

    • Name of recommender

• Newsletter

  • Copy

    • Logo

    • Heading

    • Description (1 paragraph)

  • Sign up form

    • Input field

    • Button (“Sign me up!”)

8. Review your list and cross off anything that doesn’t apply to you or that you’re not interested in including. Highlight anything that you’d like to include.

At the end of this activity, you should have your juices flowing with things you might want to include in your site.

I love this activity because it removes all the intimidation of creating something well designed. As non-designers, fancy designs look great but can feel inaccessible.

But turning that pretty screenshot into a simple list of organisms, molecules, and atoms is a great reminder that these are just pieces that we are capable of putting together too. The building blocks are familiar. Nothing here is new or innovative. We just need to figure out how to assemble the pieces.

Even the prettiest portfolios and the fanciest websites are just made up of atoms – elements that are mixed and matched to tell a story and share some information. If they can mix and match a bunch of elements to make them look good, so can we!

Now that you’re properly inspired, you’re ready to come up with your own list.

Activity 2: Organism Brainstorm

It’s time to brainstorm.

In that same document, start writing a list of organisms you want to include in your app. Take the best ones from the previous activity, add new ones that come to mind, review and refine. Don’t worry about order just yet.

This is the list we’re going to work from. Now fill in those organisms with molecules and atoms you might want to include. Again, use your reference screenshots as inspo and add your own ideas.

Here’s what mine looks like:

• Nav bar:

  • Newsletter, bio, speaking, projects, work together

• Hero

  • Name

  • Description (1 paragraph)

  • Socials (row of logos)

  • Photo

• How to pronounce my name: 

  • Heading

  • Description (1 paragraph)

• Bio

  • Heading

  • Bio (multiple paragraphs)

• Newsletter:

  • Heading

  • Description (1 paragraph)

  • Form

• Projects

  • Not A Designer

    • Graphic

    • Description (1 paragraph)

    • Key stats

  • CodeNewbie Podcast

    • Graphic

    • Description (1 paragraph)

    • Key stats

  • Codeland

    • Graphic

    • Description (1 paragraph)

    • Key stats

  • Command Line Heroes Podcast

    • Graphic

    • Description (1 paragraph)

    • Key stats

  • Basecs Podcast

    • Graphic

    • Description (1 paragraph)

    • Key stats

  • CodeNewbie Challenge

    • Graphic

    • Description (1 paragraph)

    • Key stats

  • Dear Flatiron

    • Graphic

    • Description (1 paragraph)

• Speaking

  • Heading

  • Photo

  • Description (1 paragraph)

  • List of past conferences

  • Button (“Book me”)

• Companies I’ve partnered with

  • Heading

  • Logos:

    • Microsoft

    • GitHub

    • Flatiron School

    • MongoDB

    • Flatiron Health

    • Red Hat

    • Qualcomm

• Let’s work together

  • Heading

  • Description (1 paragraph)

• What people have said about my work (testimonials)

  • Heading

  • Screenshots of tweets + LinkedIn posts

• Fun facts

  • Bulleted list

    • Born in Ethiopia, proud immigrant

    • Based in San Diego and absolutely loving it

    • Tried to raise $500K and ended up raising over $2M in venture capital in two months 

    • Was a biochemistry researcher and a published author on DNA detection methodologies

    • Wrote the foreword of the 20th anniversary edition of the iconic Pragmatic Programmer

    • Worked at NPR and booked Boyz II Men and got a private concern for our team

    • Once auditioned for Debbie Allen for her production of Annie

This is a solid starting point for gathering the content that we’ll design later. Next, we’ll need to organize this information and lay it out in a template, finally dipping a toe into our design pool.

This is where we talk about layout and information architecture – that’s coming up in the next issue.

How to apply what we learned:

• When you’re struggling to find a starting point on a new design, it’s helpful to reference other apps and sites for inspiration.

• When studying a site for inspiration, try breaking it down through the lens of atomic design. It’s a helpful way of understanding how to put different pieces together. That means starting by identifying the atoms, molecules, and organisms.

• Before designing anything, make a list of your own organisms to include and their corresponding atoms and molecules so you can get a good sense of content before thinking about style.

If you’re participating in #notadesignernewyear, share the results of your activities with me, I’d love to see them! You can either post on social with the hashtag or reply to this email. And if you want feedback, let me know :)

Happy designing!

Saron