Icon with 4 squares connected by lines to represent the Atomic Design Methodology

Atomic Design Methodology

What is it?

Atomic design is a method for creating and organizing design systems by first breaking them down into smaller, reusable components. Its name might remind you of chemistry, and that's because it borrows from the idea that atoms are the basic building blocks of all matter. It was developed by Brad Frost, a web designer and developer, and it's particularly popular in the field of web and interface design.

The goal of atomic design is to create a modular and scalable design system. By breaking down the interface into these smaller, reusable components, it becomes easier to maintain and update the design system, ensuring consistency and efficiency in design and development. Designers and developers can work collaboratively, using a shared vocabulary, to assemble and customize designs quickly and efficiently.

By using the atomic design methodology for presentation design systems, you can create a modular and adaptable system that easily scalable and applicable to a wide range of applications. Here are the five stages of atomic design explained as they work for presentation development and design:

  1. Atoms: At the foundational level, you have "atoms," which are the fundamental building blocks of your presentation design. These can include individual elements like text boxes, images, bullet points, icons, and color schemes.

  2. Molecules: Molecules are combinations of atoms that form simple, functional units within your presentation. For instance, a slide header (atom) combined with a bulleted list (atom) can create a molecule for presenting key points or concepts.

  3. Organisms: Organisms are more complex components that are composed of multiple molecules and atoms. Examples of presentation organisms might include a section that combines a title slide (molecule) with content slides (molecules) to convey a coherent message or topic.

  4. Templates: Templates are the next level, where you assemble various organisms into consistent layouts for different types of presentations. These templates provide a structured foundation for specific presentation purposes, such as a pitch deck or an educational lecture.

  5. Presentations: Finally, you have "presentations," which are the actual instances where content is added to the templates. These are the fully developed and customized slide decks that you share with your audience.

By breaking down the interface into these smaller, reusable components, it becomes easier to maintain and update the design system, ensuring consistency and efficiency in design and development. Designers and developers can work collaboratively, using a shared vocabulary, to assemble and customize designs quickly and efficiently.

      When to useĀ it

      1. When you're working on extensive projects that involve creating many presentations over time.
      2. To develop comprehensive template systems for various presentation purposes.

      Remember to

        Use stage 5 for testing the effectiveness of the design system. If things aren't working together correctly, then work back through stage 1ā€“4 to better align with content needs.

          Step-by-step: How to apply the atomic design methodology to presentation template systems

          1

          Start with atoms

          Define the foundational elements of the design. Remember these are the smallest, indivisible parts of the design system that maintain the design's overall look and feel. An standalone can be a foundational element if it's versatile and can be used in different ways, like inside a circle or a square. However, if the icon should only be inside of a circle, and it wouldn't make sense in any other shape, then that specific designā€”the icon within the circleā€”is your foundational "atom." Examples of atoms:

          • Title text
          • Subtitle text
          • Labels
          • Leader lines, separators, and dividers
          • Bullet points or list styles
          • Logo
          • Icons
          • Colors

          2

          Create the reference library

          Document all the foundational elements (atoms) defined in step 1, including their visual styles and usage guidelines, to build a comprehensive reference library that will serve as the design system's building blocks.

          3

          Combine atoms to create the molecules

          Combine these atoms to create more complex components tailored for presentation slides. For example:

          • Callouts with labels and icons
          • Tiles or cards for grouping content
          • Charts and graphs with titles and data labels
          • Bulleted lists (this can be a molecule)
          • Color relationships, sequences, and proportions.

          4

          Design the organisms

          Organisms represent higher-level components for comprehensive slide layouts. These could include:

          • Headers with titles, subtitles, and logos
          • Footers with company information
          • Card grid layouts for organizing content
          • Image grid layouts for showcasing visuals

          5

          Develop slide templates

          Take the modular "organisms" and combine them into practical layout templates for presentations. Begin by identifying specific presentation types, such as sales decks, pitches, or workshops, and outline their primary content needs. When creating templates, concentrate on content types rather than final content, combining "organisms" to cater to these content needs efficiently. This approach ensures the templates are adaptable to various presentations of the same type.

          6

          Create and customize presentations

          In this stage you'll use the template to build presentations. Start by selecting the most suitable template based on your presentation's specific purpose, whether it's a sales pitch, a pitch deck, or a workshop. Now, insert content into the template, replacing placeholder content with relevant information. At this point you'll see opportunities to develop minor variations of the templates as unique content needs call for slightly different interpretations of the organisms within a template. If things aren't working together correctly, then work back through stage 1ā€“4 to better align with content needs.

          Guide coming soon