18F

18F - Design Pattern Library

A Design Pattern Library is a collection of reusable UI components. It's the foundation of a design system. This exercise helps teams identify patterns, document them, and set usage guidelines. Each pattern includes visuals, code, accessibility, and usage guidance. The library ensures consistency and speeds up design and development.

Duration
8 hours
Group Size
4-8
Category
18F
Difficulty
Easy
Design solutions using consistent UI elements. Use approved, reusable patterns to build features and updates more easily.

  • Design pattern library created.

  • Reusable pattern documentation completed.

  • Consistent design application achieved.

When starting, it's common to find some patterns overlap. Don't be afraid to merge or refine them as you go. Remember to version patterns as they evolve. Also, be prepared to push back when teams want to create 'one-off' patterns that don't align with the library.

  1. Identify common components early, ideally during design creation.

  2. Describe how the pattern is used and its user interaction.

  3. Include code snippets for front-end developers.

  4. Show examples of pattern variations in different solutions.

  5. Publish the library in an accessible space for team use and contribution.

Unlock Step-by-Step Instructions

Create a free account to access step-by-step instructions, agendas, and resources for all activities.

For Facilitators

  • Review participant profiles and expectations
  • Prepare all materials and supplies
  • Test technology and room setup

For Participants

  • Complete pre-session survey
  • Review background materials
  • Prepare examples or case studies

Unlock Pre-Work Requirements

Create a free account to access step-by-step instructions, agendas, and resources for all activities.


  • Design patterns.

  • Documentation templates.

  • Design software.

  • Style guides.

Unlock Materials Required

Create a free account to access step-by-step instructions, agendas, and resources for all activities.

A List Apart - Pattern Libraries
Guide to building and maintaining pattern libraries.
Design Systems Repo
Collection of design system and pattern library examples.

Unlock Resources & Templates

Create a free account to access step-by-step instructions, agendas, and resources for all activities.

Discussion

0/2000
Loading comments...

Related Exercises

See all exercises

18F - Hopes And Fears

30 mins

Hopes and Fears surfaces team expectations and concerns. Use it at project kickoff or during major transitions. Participants write down their hopes (d...

18f

18F - Stakeholder Influence Mapping

45 mins

Stakeholder Influence Mapping visually represents people affecting your project's success. It positions them by power and interest. This 45-minute exe...

18f

18F - KJ Method

1.5 hours

Participants list individual priorities on cards, then organize and prioritize them as a group through voting. This exercise helps find consensus, esp...

18f