Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Build Pattern Libraries - A step-by-step guide

5.042 visualizaciones

Publicado el

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.

Publicado en: Software, Diseño, Tecnología
  • Inicia sesión para ver los comentarios

Build Pattern Libraries - A step-by-step guide

  1. 1. Build. Pattern.Libraries. A guide to build a UI pattern library for your brand
  2. 2. Challenge Building a reusable, maintainable and easily shareable UI pattern library based on an existing design
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. Thanks. Visit us on www.frontify.com

×