build pattern libraries - a step-by-step guide
TRANSCRIPT
![Page 1: Build Pattern Libraries - A step-by-step guide](https://reader034.vdocuments.mx/reader034/viewer/2022052401/55c496b0bb61eb723b8b4698/html5/thumbnails/1.jpg)
Build. Pattern. Libraries.
A guide to build a UI pattern library for your brand
![Page 2: Build Pattern Libraries - A step-by-step guide](https://reader034.vdocuments.mx/reader034/viewer/2022052401/55c496b0bb61eb723b8b4698/html5/thumbnails/2.jpg)
ChallengeBuilding a reusable, maintainable and
easily shareable UI pattern library based on an existing design
![Page 3: Build Pattern Libraries - A step-by-step guide](https://reader034.vdocuments.mx/reader034/viewer/2022052401/55c496b0bb61eb723b8b4698/html5/thumbnails/3.jpg)
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
![Page 4: Build Pattern Libraries - A step-by-step guide](https://reader034.vdocuments.mx/reader034/viewer/2022052401/55c496b0bb61eb723b8b4698/html5/thumbnails/4.jpg)
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
![Page 5: Build Pattern Libraries - A step-by-step guide](https://reader034.vdocuments.mx/reader034/viewer/2022052401/55c496b0bb61eb723b8b4698/html5/thumbnails/5.jpg)
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
![Page 6: Build Pattern Libraries - A step-by-step guide](https://reader034.vdocuments.mx/reader034/viewer/2022052401/55c496b0bb61eb723b8b4698/html5/thumbnails/6.jpg)
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
![Page 7: Build Pattern Libraries - A step-by-step guide](https://reader034.vdocuments.mx/reader034/viewer/2022052401/55c496b0bb61eb723b8b4698/html5/thumbnails/7.jpg)
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
![Page 8: Build Pattern Libraries - A step-by-step guide](https://reader034.vdocuments.mx/reader034/viewer/2022052401/55c496b0bb61eb723b8b4698/html5/thumbnails/8.jpg)
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
![Page 9: Build Pattern Libraries - A step-by-step guide](https://reader034.vdocuments.mx/reader034/viewer/2022052401/55c496b0bb61eb723b8b4698/html5/thumbnails/9.jpg)
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
![Page 10: Build Pattern Libraries - A step-by-step guide](https://reader034.vdocuments.mx/reader034/viewer/2022052401/55c496b0bb61eb723b8b4698/html5/thumbnails/10.jpg)
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
![Page 11: Build Pattern Libraries - A step-by-step guide](https://reader034.vdocuments.mx/reader034/viewer/2022052401/55c496b0bb61eb723b8b4698/html5/thumbnails/11.jpg)
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