Atomic Design

Last reviewed 13 May 2021 by Crispin Read

Description

Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles. A static site generator we can use as a framework for creating live style sheets for php or node projects.

Why this is important

Live stylesheets are a great way to minimise styling and branding errors in development and delivery of software. Having design patterns available in code also helps reduce friction between design and development.

Outcomes

At the end of this training you will be able to:

  1. Identify components in a design.
  2. Understand the role of a component library in a design system.
  3. Understand the principles of atomic design
  4. Use Pattern Lab to create a pattern library.

Learner Requirements

  1. php or node project

Outline

  1. What makes up a design system?
  2. Why have a component library?
  3. Introduction to Pattern Lab
  4. What is Atomic Design?
  5. Activity: create a pattern library from requirements

Tasks

During Training

  1. Create draft pattern library

After Training

  1. Install Pattern Lab locally
  2. Complete pattern library to spec

Extra

  1. Tutorial on installing Patternlab
  2. Create a style guide for your project
  3. Read article about Content and display patterns

Resources / Reference

  1. Intro Slides on Google Drive
  2. Download Pattern Lab
  3. Pattern Lab Documentation
  4. Pattern Lab Demo
  5. Content and display patterns
  6. The Atomic Design book
  7. Pattern Lab roadmap to v3

Skills, Knowledge, Behaviours and Values

Core Skills

This workshop is designed to develop the following from our core skills directive

  • Presentation
  • Communication
  • Teamwork
  • Empathy

Apprenticeship Standard

This workshop will encourage the development of the following from the Software Developer Level 4 Standard

COMPETENCIES (Skills)

  • C2 - User interface: can develop effective user interfaces for at least one channel.
  • C5 - Problem solving: can apply structured techniques to problem solving, can debug code and can understand the structure of programmes in order to identify and resolve issues.
  • C6 - Design: can create simple data models and software designs to effectively communicate understanding of the program, following best practices and standards.
  • C7 - Analysis: can understand and create basic analysis artefacts, such as user cases and/or user stories.
  • C9 - Development lifecycle: can operate at all stages of the software development lifecycle, with increasing breadth and depth over time with initial focus on build and test.
  • C11 - Can interpret and follow:
    • software designs and functional/technical specifications
    • company defined ‘coding standards’ or industry good practice for coding
    • testing frameworks and methodologies
    • company, team or client approaches to continuous integration, version and source control

BEHAVIOURS

  • B1 - Logical and creative thinking skills.
  • B2 - Analytical and problem-solving skills.
  • B5 - A thorough and organised approach.

Knowledge

  • K1 - Understands and operates at all stages of the software development lifecycle.
  • K3 - Understands how teams work effectively to produce software and contributes appropriately.
  • K4 - Understands and applies software design approaches and patterns and can interpret and implement a given design, compliant with security and maintainability requirements.
  • K5 - Understands and responds to the business environment and business issues related to software development.