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
   

   View Slide

2. UI/UX Designers at Zumba Fitness
   DENISE JESSE
   W H O A R E W E ?
   

   View Slide

3. “ SINGLE SOURCE
   OF TRUTH ”
   W H A T ’ S T H A T S A Y I N G ?
   

   View Slide

4. Ensuring a website is consistent and
   easy to maintain are two of the
   biggest headaches faced by larger
   organizations.
   

   View Slide

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.
   

   View Slide

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 …
   

   View Slide

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
   

   View Slide

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 . .
   

   View Slide

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 . .
   

   View Slide

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 . .
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. C O L O R S
    • Splintered design and
    development teams
    • Ghosts of redesigns past lingered
    

    View Slide

16. T Y P O G R A P H Y
    

    View Slide

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
    

    View Slide

18. F O R M E L E M E N T S
    

    View Slide

19. Symbols
    Templates
    Sketch Libraries
    Plugins
    S K E T C H F E A T U R E S
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

31. THANK YOU
    QUESTIONS?
    September 27, 2017 | #sogui
    denisedmiqueli.com
    SO GUI: The importance of pattern libraries in UI design
    

    View Slide