Atomic Design

Personal Notes from An Event Apart, Boston, 2015
Brad Frost, Web designer @brad_frost

 

The concept of the page has been with us for hundreds of years. That disintegrates she looking at our digital reality today.

Approaching web design today we need to ask ourselves what pieces are we using. What components make up the systems?

Atomic design approaches web construction with atoms, molecules, organisms, templates and pages. What are the atoms? Buttons, inputs etc. Molecules might be a search form. An organism might be a header or a tweet list. The template level and creates a skeleton stage of construction. Pages is where the underlying design systems are validated. Does everything work well together.

The atomic design approach helps move the design process from abstract to concrete. It aids in a solid cohesive system. It helps clients understand the amount of work that goes into creating the building blocks of a site.

To deploy this workflow, you need to reset people’s expectations. It’s critical to treat development as part of the design process. Once expectations are set we can gather pieces. Color, typography and elements. Create an interface inventory. Establish direction.

Collaboration and communication trumps process!

Footnotes:

Patternlab.io