Since we're primarily CS teachers, we spend a lot of time keeping current with web development trends and best practices. As such, a notion that's been present in the community for several years has been the idea of Atomic Design. In this post, we'll dig into the concept and explain it in the context of designing web sites; from there, we'll draw comparisons and find the equivalent components in our pedagogy. If you're curious about the actual web development context behind this, check out Brad Frost's great book and numerous talks about Atomic Design that inspired this post.

What is Atomic Design?

Atomic Design is a mental model that allows a designer to take a complex system - like a web page - and break it down into several sub-levels of components. This systemic approach makes it easier for a designer to draw a connection between the most basic abstracted elements and then build on them to create a concrete, real-world page.

By its nature, Atomic Design is not a step-by-step guide. Instead, utilizing this model allows a designer to conceptualize the different components and their relationships to each other. By clearly defining these relationships, the overall experience of a user and the appearance of a page appears more authentic and connected.

Some view a systemic approach as too time consuming and rigid. The overarching goal of using Atomic Design is to put in place a system that increases the efficiency of the design process and delivers a better final-product to the client. Atomic Design allows for time to be saved in the decision making process and gives designers the tools to quickly create by combining components they have already designed -- they simply have to plug in the concrete content relative to the page.

So, why should we as educators care about this? Simply put, no one likes redesigning their curriculum. However, we can replicate this system and use it for ourselves to quickly design lessons that - while having similar components - are unique and focus on reaching specific, concrete outcomes.

Breaking down lessons

In order to create lessons according to these principles, it's important to understand the different categories that we'll be looking at in more detail. Broadly, Atomic Design follows the biological model: atoms -> molecules ->organisms.

A critical idea in Atomic Design is, in the beginning, to move away from concrete content and instead focus on abstracted elements. For a website, this means thinking about what actual content will populate a page as an ancillary task to creating the template that content will fill. Continuing to work backwards, before a template can be created, a designer needs to create the separate components that will eventually be scaffolded on the template. Finally, at the most basic level of analysis, the designer needs to clearly define the appearance of the individual elements of which a component will be composed.

This translates into instructional design by having educators move away in the beginning from content goals and, instead, taking a more abstracted approach. Instead of constructing each lesson anew to reach a content-goal, we should instead be thinking about the schema by which that lesson best fits. By taking this approach, we can identify patterns in our instructional design and create more efficient models for creating new lessons.

Atoms

At the most basic level, we can look at individual activities within a lesson as "atoms". These are our building blocks that, while being heavily abstracted, contain immense value when combined with each other. Modular lesson design has become a widely accepted model for designing lessons. Walk past any classroom and it's rare to see a room of students in rows taking notes on a lecture for the entire class period. While some element of direct instruction and note taking may be present in a lesson, at the time of this writing it's unlikely for this to be common practice as the primary mechanism for communicating information to students.

"Chunking" lessons into their modular components is the easiest way to see the atomic level of this system from an educational perspective. For example, take this lesson from an introductory CS course:

1. Bell-ringer: code review; students analyze an object in JavaScript and answer lower-order questions about its construction
2. Instruction: Cloze notes; students fill in and annotate notes as teacher continues instruction on dot-notation
3. Application: repl.it; students complete a practice set wherein they utilize dot-notation to call certain properties of an object

To understand this lesson on the atomic level is to strip it away of all its content. The three atomic elements present in this lesson are the concept of a bell-ringer, the idea of direct instruction, and an opportunity to apply the knowledge learned in the lesson. This schema provides a model to which different strategies can then be applied, such as the use of a code review in the bell-ringer, Cloze notes during instruction, and a repl.it assignment for application.

Using this schema, a teacher take each of these disparate elements and swap them out with other atomic options. For example, instead of a code review during the bell-ringer, the teacher may choose to utilize a pair-coding exercise that calls on knowledge from a previous lesson. Alternatively, instead of using direct instruction for the second portion of the lesson, the teacher could task students with correcting an incorrectly structured object using a text-based resource to guide them. After students have completed fixing issues in the starter code, the teacher could then review with them and continue on to the application portion of the lesson.

The biggest takeaway at this level of analysis is that these pieces are intended to be substitutable. It's the ability to swap out pieces throughout the lesson that facilitates the modularity of this type of lesson design. By focusing on the creation of a series of atomic activities, teachers can create lessons that have familiar feelings but are kept novel by the mixing of instructional methods.

For the sake of argument, let's say the teacher keeps the existing structure in place and move up to the next level of analysis.

Molecules

Molecules are the composite form of atoms; take a few different atoms, add them together and, viola: a molecule. Looking at the range of molecular compounds, slight variations result in the creation of entirely new substances. However, all of these compounds are built on the same discrete set of atomic elements. While atoms are relatively simple, molecules, in comparison, are more complex.

Our comparison continues by equating molecules to lessons. Lessons are constructed by taking a series of activities (atoms) and combining them to create a lesson (a molecule). There's a limited number of atoms that can combine to create a nearly endless number of chemical compounds; as such, we can take several types of activities and produce lessons with a range of variety and functionality.

The complexity of jumping from atoms to molecules isn't only dependent on the increase in the number of components, but on the fact that not all atoms can be combined with certain other atoms to form a more complex substance. Certain activities will not combine elegantly with other activities in a way that allows the lesson's objectives to be reached.

As these molecules are constructed, they take on certain unique properties that set them apart from their peers. While some categories (e.g., states of matter) lend themselves to grouping these molecules, they carry with them their own personality and identity. As more and more compatible molecules begin to combine, we move up the ladder to our final "biological" stage.

Organisms

In our comparison, organisms are the units of our curricular levels: relatively wide in scope and substantially more complex than molecules or atoms. These organisms literally have a life of their own while being entirely dependent on the building blocks that led to their creation. These units take seemingly disparate lessons - especially in the eyes of many students - and compound on them to form a single living organism.

Arguably, these units could be taken even higher as they're strung together to create our entire curriculum. However, for the purpose of our analysis, it's important to be able to traverse a unit and isolate any single lesson or activity, wherein one can begin to identify the building blocks we've been discussing. This point is critical in utilizing this methodology to reevaluate and create a connected and sustainable model for instructional design.

How do I get started?

The best advice to get started is to take a step back. Look at your curriculum as it stands and evaluate it based on this question. Ask yourself, "What types of days do I have?" While we all try to vary our instruction as much as possible, we have patterns that we fall into. Instead of thinking of every day as a discrete unit, try to group together different days into different buckets. This method of organization isn't meant to stifle creativity; it simply gives you the opportunity to visualize how diverse your lesson design already is.

With a good mapping of the different types of instructional approaches you take, it's easier to break them down and identify the individual elements that go into a lesson. From there, you're just a step away from creating templates for instruction.