Atomic Design

Home » Blog » Design » Atomic Design

Recently, I came across an interesting concept called Atomic Design. In a nutshell, Atomic Design favours systems of reusable components in lieu of monolithic pages.

Now, don’t get me wrong. This is nothing utterly new, of course. Style guides and brand guidelines always consisted of reusable and combinable components, fonts and colours. However, in traditional web design up to the mid-aughts designs used to be rather fixed, rigid and monolithic. It wasn’t until relatively recently that due to the responsive design movement things got more flexible and website designs were broken into smaller reusable components such as columns, rows and containers that allowed designs to work equally well on both mobile and desktop devices.

I really like the conceptual model of Atomic Design. It borrows terminology from chemistry and biology as metaphors for components as building blocks of larger elements:

  • atoms, e.g. buttons or labels
  • molecules, e.g. a button and a label that work as a search bar when combined
  • organisms, e.g. a page header
  • templates
  • pages

Atomic Design is a useful method for reducing complexity by not anticipating every possible requirement which might arise but by allowing design components to be assembled in a flexible manner to be able to accommodate possible future use cases.

Dave Rupert’s Responsive Deliverables is a useful guideline in that respect, too.

Leave a Comment

* Checkbox GDPR is required

*

I agree

By continuing to browse the site you agree to our use of cookies. Privacy Policy

Privacy Preference Center

Strictly necessary

These cookies are necessary for the site to function.

PHPSESSID: Preserves user session state across page requests.

__cfduid: Used by the content network, Cloudflare, to identify trusted web traffic.

PHPSESSID
__cfduid

Preferences

Remembers the user's submitted data when a comment is submitted in a blog post. The purpose is to aut o-populate form fields for subsequent comments, in order to save time for the user.

wfvt_#

Statistics

Statistic cookies help us to understand how visitors interact with our websites by collecting and reporting information anonymously.

_ga: Registers a unique ID that is used to generate statistical data on how the visitor uses the website.

_gat: Used by Google Analytics to throttle request rate.

_gid: Registers a unique ID that is used to generate statistical data on how the visitor uses the website.

collect: Used to send data to Google Analytics about the visitor's device and behaviour. Tracks the visitor across d evices and marketing channels.

_ga,_gat,_gid
collect

Security

We use Wordfence to secure our website against hacking attempts: https://www.wordfence.com/

wordfence_verifiedHuman

Close your account?

Your account will be closed and all data will be permanently deleted and cannot be recovered. Are you sure?