Case Study: Experimenting with Design Systems

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Style Guides Color Palettes Iconography Imagery Typography Typographic Scale Grid Deﬁnitions

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

Design Systems Style Guide Pattern Library Tools & Utilities Principles Rules

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text