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

Case Study: Experimenting with Design Systems

Case Study: Experimenting with Design Systems

Bermon Painter

April 04, 2018
Tweet

More Decks by Bermon Painter

Other Decks in Design

Transcript

  1. Case Study:
    Experimenting with
    Design Systems
    @bermonpainter | #cltdesign

    View full-size slide

  2. Tonight’s Agenda
    Contrast style guide vs. pattern library vs. design system
    Building your own
    Case study: Internal applications at Cardinal
    1
    2
    3

    View full-size slide

  3. Style Guides
    Defines abstract styles in the form static documentation
    that describes how the design itself should be applied
    to a product or service.

    View full-size slide

  4. Style Guides
    Color Palettes
    Iconography
    Imagery
    Typography
    Typographic Scale
    Grid Definitions

    View full-size slide

  5. Pattern Libraries
    A set of reusable components that are used across
    single or multiple products or services.

    View full-size slide

  6. Pattern Libraries
    Component Names
    Visual Representation
    Variations
    Use Cases
    Considerations
    Code Samples
    Templates

    View full-size slide

  7. Design System
    Forms the foundation of a shared design language and
    allows the team to communicate shared rules and
    connections around how to build a product or service.

    View full-size slide

  8. Design Systems
    Style Guide
    Pattern Library
    Tools & Utilities
    Principles
    Rules

    View full-size slide

  9. Design System
    Rules and Connections
    Style Guide
    Abstract Styles
    Pattern Library
    Reusable Components

    View full-size slide

  10. A style guide is an artifact of a
    design process. A design system
    is a living, funded project with
    a roadmap & backlog, serving
    an ecosystem.


    – Nathan Curtis

    View full-size slide

  11. PATTERN
    LIBRARY
    APP
    DESIGN
    SYSTEM

    View full-size slide

  12. PATTERN
    LIBRARY
    APP
    DESIGN
    SYSTEM
    APP

    View full-size slide

  13. PROSPECT
    METRE
    EVOKE
    DESIGN
    SYSTEM
    FULCRUM
    ENLIST

    View full-size slide