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 (We suggest Visual Code Studio, it’s free, and available for Mac, Windows, and Linux)
• 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)