Hands-on Atomic Design Workshop

About the Presentation

In this workshop, participants worked together in small teams to identify atoms, molecules, and organisms in a set of common university landing pages. This analog, no-coding-required activity introduced the concept of atomic design and the importance of team consensus while building a pattern library.

Details

  • edUI 2017 - Charlottesville, VA

Slide downloads for this talk will be uploaded soon.

Deconstructing "Fake University"

After a short presentation that introduces the concept of atomic design, participants in this workshop form small teams of 4 – 6. They are given a set of paper landing page designs, scissors, and glue sticks. 

I invented a fake university website and designed several landing pages with common patterns pulled from real sites: news feeds, routing components, heros and feature areas, navigation, and calls to action.

The workshop participants evaluate these fake designs for real patterns. They cut them out, group them by atom, molecule, or organism, then glue those groups together on a posterboard or giant sticky note.

Me working with one of the workshop teams during the 2017 session.

Workshop participants at edUi 2017 labeling their patterns, solving problems, and explaining their choices to the group.

Fake Patterns, Real Consensus

After sorting the Fake University patterns into atoms, molecules, and organisms, the teams’ next task is to try to give each pattern a name.

This is where the critical part of working in teams for this exercise helps demonstrate the real life challenges of building a pattern library. Each team member has a different perspective on what a pattern’s purpose is.

After building their paper libraries, participants share their decisions by presenting them to the workshop’s full audience. They’re encouraged to explain any disagreements they had, and how they solved them.

I did the sorting exercise myself virtually and shared it on this public Trello board – a simplified version of the boards I make when building real libraries.

Special thanks to my NewCity colleagues John Williams, Katie Gehrt, and Rachel DeLauder for helping me set up and facilitate this workshop.