build pattern libraries - a step-by-step guide

Build. Pattern. Libraries.

A guide to build a UI pattern library for your brand

ChallengeBuilding a reusable, maintainable and

easily shareable UI pattern library based on an existing design

1. Create a Screen Inventory 2. Identify Patterns 3. Consolidate Patterns 4. Validate Pattern Granularities 5. Split Pattern Variations 6. Assembly Code 7. Create Documentation 8. Live it!

Process Overview

Create a Screen InventoryCreate screenshots with every different aspect of your existing, already redesigned, websites, applications, etc.

Upload them to Frontify Workspace and share it with a UX or Front-End Expert.

AllWho can do this?

1

Identification of PatternsIdentify UI patterns using the visual specification tools in Frontify Workspace. Set a priority on the more reusable patterns like Buttons, Textfields, Dropdowns, Headings, etc.

Front-End / UX ExpertWho can do this?

2

Consolidation of PatternsUse the pattern inventory to identify common semantics of patterns and combine them where possible. Hint: Keep complexity low.

Front-End / UX ExpertWho can do this?

3

Button Large

Button Special

Button Blue

Button

Pattern Granularity ValidationValidate granularities of patterns, check if dependencies are correct and the level (Atom, Molecule, Organism) is matching.

Front-End / UX ExpertWho can do this?

4

Atom Molecule

Organism Template Page

Pattern Variation CleanupSplit pattern variations into separate patterns, if complexity is too big or semantics don’t match.

Front-End / UX ExpertWho can do this?

5

Track and Trace Lookup

Business Locator

Content Search

Track and Trace

Business Locator

Content Search

Search

Code AssemblyAdd code (HTML, CSS, JS) to patterns using the Frontify Builder or similar tools. Either migrate existing code or re-write it from scratch. Hint: Try to keep the code clean and with a low amount of dependencies.

Front-End DeveloperWho can do this?

6

DocumentationCreate a living documentation of the pattern library with Frontify Style Guide (e.g. add a document called “Pattern Library”. Define categories that best match your business cases. Hint: Use the existing pattern inventory to define structures.

AllWho can do this?

7

Live It!Try to constantly improve your living style guide and pattern library. Keep the acceptance high by keeping everything up-to-date and easily discoverable.

Collaborate on projects based on the guidelines using Frontify Workspace.

AllWho can do this?

8

Thanks.

Visit us on www.frontify.com