Build Pattern Libraries - A step-by-step guide

Download Build Pattern Libraries - A step-by-step guide

Post on 07-Aug-2015




3 download

Embed Size (px)


<ol><li> 1. Build. Pattern.Libraries. A guide to build a UI pattern library for your brand </li><li> 2. Challenge Building a reusable, maintainable and easily shareable UI pattern library based on an existing design </li><li> 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 </li><li> 4. CreateaScreenInventory Create screenshots with every dierent 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 </li><li> 5. IdentificationofPatterns Identify UI patterns using the visual specication tools in Frontify Workspace. Set a priority on the more reusable patterns like Buttons, Textelds, Dropdowns, Headings, etc. Front-End / UX Expert Who can do this? 2 </li><li> 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 </li><li> 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 </li><li> 8. PatternVariationCleanup Split pattern variations into separate patterns, if complexity is too big or semantics dont 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 </li><li> 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 </li><li> 10. Documentation Create a living documentation of the pattern library with Frontify Style Guide (e.g. add a document called Pattern Library. Dene categories that best match your business cases. Hint: Use the existing pattern inventory to dene structures. All Who can do this? 7 </li><li> 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 </li><li> 12. Thanks. Visit us on </li></ol>