Atomic design

Today, I finally got around to reading the last Splice Frames newsletter and they’d curated a piece about Atomic Design — a methodology for creating design systems created by Brad Frost.

When it comes to modern web design, one has to think about more than just how it looks. Web designers also have to think about user flow, content and overall cohesiveness (especially when users go from web to mobile). 

Atomic Design takes inspiration from chemistry and the concept that “all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms”. 

In Atomic Design, atoms are either actual elements on the page like buttons, input fields etc or abstract ones like fonts, animations or colour palettes. 

These atoms make up molecules, which make up organisms — different sections on the website that are made up of different molecules, like the masthead or footer or product blocks. 

Frost says that atomic design enables designers to “traverse from abstract to concrete”. 

“Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context,” he says. 

“And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.”

I like the sound of this so far, because it seems a lot more organised. Perhaps I’ll use this methodology for my next web design project. 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s