Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Create a Screen Inventory 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

Slide 5

Slide 5 text

Identification of Patterns 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

Slide 6

Slide 6 text

Consolidation of Patterns 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

Slide 7

Slide 7 text

Pattern Granularity Validation 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

Slide 8

Slide 8 text

Pattern Variation Cleanup 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

Slide 9

Slide 9 text

Code Assembly 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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Thanks. Visit us on www.frontify.com