An overview about tasks needed for building a front-end pattern library for your company or brand from scratch. These tasks assume that you already have a final design. Check out Frontify (https://frontify.com) as a supporting tool for the process.

1. Build.
Pattern.Libraries.
A guide to build a UI pattern library for your brand

2. Challenge
Building a reusable, maintainable and
easily shareable UI pattern library
based on an existing design

3. 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!
ProcessOverview

4. CreateaScreenInventory
Create 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.
All
Who can do this?
1

5. IdentificationofPatterns
Identify 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 Expert
Who can do this?
2

6. ConsolidationofPatterns
Use the pattern inventory to
identify common semantics of
patterns and combine them where
possible. Hint: Keep complexity
low.
Front-End / UX Expert
Who can do this?
3
Button Large
Button Special
Button Blue
Button

7. PatternGranularityValidation
Validate granularities of patterns,
check if dependencies are correct
and the level (Atom, Molecule,
Organism) is matching.
Front-End / UX Expert
Who can do this?
4
Atom Molecule
Organism Template Page

8. PatternVariationCleanup
Split pattern variations into
separate patterns, if
complexity is too big or
semantics don’t match.
Front-End / UX Expert
Who can do this?
5
Track and Trace Lookup
Business Locator
Content Search
Track and Trace
Business Locator
Content Search
Search

9. CodeAssembly
Add 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 Developer
Who can do this?
6

10. Documentation
Create 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.
All
Who can do this?
7

11. LiveIt!
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.
All
Who can do this?
8

12. Thanks.
Visit us on www.frontify.com