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.
