Upgrade to Pro — share decks privately, control downloads, hide ads and more …

So GUI - The importance of pattern libraries in UI design

So GUI - The importance of pattern libraries in UI design

A discussion about real world needs for a flexible and reliable “single source of truth.” This presentation goes over the role pattern libraries play in an organization. How we, at Zumba, created ours using Sketch and a UX Power Tools boilerplate. It also includes tips and an overview of popular Sketch plugins.

Zumba Technology

April 13, 2022

More Decks by Zumba Technology

Other Decks in Design


  1. SO GUI The importance of pattern libraries in UI design

  2. UI/UX Designers at Zumba Fitness DENISE JESSE W H O

    A R E W E ?

    ’ S T H A T S A Y I N G ?
  4. Ensuring a website is consistent and easy to maintain are

    two of the biggest headaches faced by larger organizations.
  5. W H A T I S I T E X

    A C T L Y ? A collection of recurring solutions that solve common design problems, so that other people can reuse them.
  6. It should give you all the components to put together

    actual designs to a particular specification. A T A M I N I M U M …
  7. C O M P O N E N T E

    X A M P L E S I N C L U D E
  8. For the user: Consistency — people like what’s familiar. Seeing all of

    your components in one place ensures you’ve created a family of consistent styles. A Pattern library ensure a consistent user interface. From the end user’s perspective, websites and products that are familiar and consistent provide a much better experience. Consistent styles and patterns bring a sense of comfort and security and place less cognitive load on the user. W H Y I T S W O R T H T H E T I M E . .
  9. For the team: Efficiency — it’ll save you time in the long

    run! By using a pattern library, it allows teams to focus on the bigger customer problems. Ultimately, it helps you ship products faster. It ensures greater efficiency in internal processes, allowing designers to be onboard quickly and engineers to re-use existing code. If you’re working on a team with other designers and developers, the pattern library will be a huge asset. W H Y I T S W O R T H T H E T I M E . .
  10. For the organization: Longevity - new is not always better.

    Big sites are developed by different people over a prolonged period and revised regularly. That almost always leads to a fragmented user interface unless there is something in place to ensure consistency. You only need to visit any large site to see examples of this. Navigation shifts position, form elements are formatted differently and even typography changes. W H Y I T S W O R T H T H E T I M E . .
  11. We built our library out of necessity so we could

    be more efficient, consistent and increase our productivity. W H Y Z U M B A N E E D E D A P A T T E R N L I B R A R Y • Splintered design and development teams • Ghosts of redesigns past lingered
  12. Yet another redesign One intrepid UI/UX designer Sketch for all

    and all for Sketch! H O W W E G O T O U R S H * T T O G E T H E R
  13. Using Sketch, we compiled variations of all of our recurring

    elements… H O W W E G O T O U R S H * T T O G E T H E R
  14. Our style guide is organized around the principles of UX

    Power Tools, a boilerplate of the most common components on responsive websites today including: • Colors • Typography • Buttons • Navigation • Form elements • Icons H O W W E G O T O U R S H * T T O G E T H E R
  15. C O L O R S • Splintered design and

    development teams • Ghosts of redesigns past lingered
  16. T Y P O G R A P H Y

  17. B U T T O N S 12 — 12

    LOVE love minion VIEW VIEW VIEW VIEW rogue minion VIEW VIEW VIEW cyclops minion VIEW VIEW VIEW phoenix minion VIEW VIEW VIEW robin minion VIEW VIEW VIEW optimus minion DISABLED HOVER/PRESSED (SELECTION) HOVER/PRESSED NORMAL NAME 12 — 12 LOVE love light minion VIEW VIEW VIEW joker minion VIEW VIEW VIEW punisher minion VIEW VIEW VIEW magneto minion
  18. F O R M E L E M E N

    T S
  19. Symbols Templates Sketch Libraries Plugins S K E T C

    H F E A T U R E S
  20. Symbols: Symbols are one of the most important features of

    sketch. Since GUIs are meant to be reused, turning each element into a symbol and then nesting those symbols will allow a designer to easily make sweeping design changes across an application or website with minimal effort. From a consistency standpoint, using symbols will lock off certain aspects of your design that you don’t want changed by mistake such as borders, fill colors, font-size. In this case, symbols can help further promote a unified look. S K E T C H F E A T U R E S
  21. Templates: Templates are a great way to give everyone your

    GUI and standard screen sizes in one file with common elements (header, footer) already in place. Since templates open as a new file, there’s no chance that your original GUI will ever get overwritten. S K E T C H F E A T U R E S
  22. Sketch Libraries: You can use your GUI file’s symbols, fonts

    & colors to create a shared Sketch library that syncs with all of your coworkers via Google Drive, Dropbox, etc. When you make an update to a shared symbol, everyone else is notified via Sketch that there is a new version of one or more symbols in their document. After pressing ‘update’, all modified symbols are synced. S K E T C H F E A T U R E S
  23. S K E T C H P L U G

    I N S Craft by InVision With Craft by InVision, a designer can create a basic style sheet with the click of a button (similar to Sketch Libraries Beta), duplicate content on the fly and insert dummy text & images with ease to help expedite the work flow. It’s also incredibly easy to annotate directly on your art boards and allow collaboration with Freehand.
  24. S K E T C H P L U G

    I N S Sketch Measure Sketch Measure will place measurements on any selected element or export the entire document with all elements easily inspected on-hover. This is great when working cross- platform and your developers don’t have access to Sketch.
  25. Sketch Notebook Sketch Notebook will add a notes section to

    your document and allow you to add a note directly on your elements to avoid any confusion or misconceptions about intended page/ element behavior. P L U G I N S S K E T C H P L U G I N S
  26. Q U I C K T I P S Think

    about your pattern library from the start The temptation is only to document a pattern library once you have built the page or site. If you design a form in one page of the app, make sure to capture that somewhere so when you need to design another page with a form, you can reuse the same elements.
  27. Q U I C K T I P S Keep

    it Concise. New patterns are expensive. They cost time for designers and developers, and require extra code.
  28. Q U I C K T I P S Variations

    matter. Careful consideration needs to be given to these various permutations as they can become quite complicated if not thought about carefully.
  29. Q U I C K T I P S Consider

    how customizable your pattern library will be. Think about whether patterns can be customized and to what extent. That will depend on how your brand operates. If you have a single consistent brand, then you probably want to offer very little in the way of customization.
  30. Q U I C K T I P S It

    will evolve over time. A pattern library should never be finished, and that’s fine. You should continue making small updates to your patterns all the time, based on results of user testing or new use cases that come up.
  31. THANK YOU QUESTIONS? September 27, 2017 | #sogui denisedmiqueli.com SO

    GUI: The importance of pattern libraries in UI design