Skip to main content

Working with Atomic Design and Pattern Lab

Gym Short

Working with Atomic Design and Pattern Lab will teach you how the Atomic Design methodology helps teams create successful user interface (UI) design systems and how to use Pattern Lab in order to create reusable UI components in HTML and CSS.

About This Course

This course will teach students the atomic design methodology, setting up Pattern Lab, building & using UI components inside Pattern Lab, and manipulating data to create sophisticated page prototypes. Specifically you will learn the following: the 5-stage atomic design methodology, installing Pattern Lab, building frontend components in Pattern Lab, designing with dynamic data within Pattern Lab, and using advanced Pattern Lab features such as pseudo-patterns, pattern status, and more.

Course Outline

  • Chapter 1: Introduction

    Learn what topics are covered in this course and take a quick look at the demo project you'll be working on. You’ll also take a brief look at how Pattern Lab fits into the context of the web design and development workflow.

  • Chapter 2: The Atomic Design Methodology

    Discover the benefits of design systems and how the Atomic Design model allows you to create them quickly and efficiently over the lifespan of a project. You'll learn how the 5 stages of Atomic Design relate to the various components of a website or web application.

  • Chapter 3: Introduction to Pattern Lab

    Learn what Pattern Lab is (and perhaps more importantly what it isn’t), what it does, and how your team can use it to create User Interface design systems. You’ll learn how the Atomic Design model and Pattern Lab are connected by taking a tour of a demo project.

  • Chapter 4: Setting Up Pattern Lab

    Learn how to download and install the Node version of Pattern Lab. Pattern Lab is a static site generator; you’ll walk through what that means and how it works by exploring the folder structure of your demo project. In particular, you’ll spend some time understanding the structure of the “source” directory and the process by which Pattern Lab compiles files that can be viewed in your web browser.

  • Chapter 5: Working with Patterns

    Learn how to use and create UI components inside of Pattern Lab. Specifically, explore where patterns live inside a Pattern Lab project and how to work with the Mustache templating language. By the end of this chapter, you'll understand the relationship between finished pages and their underlying components.

  • Chapter 6: Designing for Dynamic Data

    Explore how Pattern Lab allows teams to design UIs that accommodate a number of dynamic content scenarios. For example: What does a dashboard with 10 years worth of data look like? What does that same dashboard look like for a new user? Pattern Lab helps teams answer these questions.

  • Chapter 7: Pattern Lab Advanced Features

    Discover additional Pattern Lab tools and features to help make your UI design system more robust. Specifically, you'll learn how to use Pattern Lab's viewport resizing tool, how to label a component using the pattern status feature, how to hide patterns, and how to take advantage of the built-in pattern documentation tools.

  • Chapter 8: Summary

    Review the concepts covered in this course including the value of design systems, the model of Atomic Design, the basics of building and updating UI components in Pattern Lab, the fundamentals of designing with data in Pattern Lab, and a brief tour of advanced features. In addition, you’ll receive a list of resources and next steps to help you level up with Pattern Lab.

Prerequisites

  • Basic to intermediate competency with HTML & CSS
  • Familiarity with editing code in a text editor.
  • Experience with using command line is recommended, but not required
  • Experience with templating languages such as Mustache is recommended, but not required
  • Familiarity with the concepts of the JSON and Markdown languages will be helpful

Software Requirements

  • Mac or Windows desktop or laptop
  • A text editor of your choice
  • This course uses the Node.js version of Pattern Lab. If you wish to follow along with the instructor you will need admin rights in order to install the package manager NPM, as well as Node, onto your machine. (Instructions for installing this toolkit are covered in Chapter 4)
  • Gulp (Instructions for installing this toolkit are covered in Chapter 4)

This Course is For

  • Front end developers
  • Designers with coding chops
  • UX designers with coding chops

Meet the Instructor

Brad Frost

Brad Frost

Brad Frost is a web designer, speaker, consultant, writer, and musician located in beautiful Pittsburgh, PA.

Brad loves helping people understand the concepts, techniques, and tools used to create successful design systems and establish more collaborative workflows. In addition to his frequent appearances at web conferences around the world, Brad also conducts workshops and consults with organizations who need help bringing great web projects to life.

Enroll