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.

Transcript

1. SO GUI The importance of pattern libraries in UI design DENISE D MIQUELI + JESSE WORBINGTON
2. UI/UX Designers at Zumba Fitness DENISE JESSE W H O A R E W E ?
3. “ SINGLE SOURCE OF TRUTH ” W H A T ’ 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