Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design...

18
Why do we need a Design System? What | Why | How 1

Transcript of Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design...

Page 1: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

Why do we need a Design System?

What | Why | How

1

Page 2: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

What

2

What is it?

1

Page 3: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

3

“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” - InVision

Page 4: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

4

Design System

Design Tokens

Style Guide Pattern Library

Design Principles UX/Dev Guidelines

Brand, Voice & Tone

Page 5: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

Why

5

Why do we need one?

2

Page 6: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

Projects * Teams * Years =

6

Page 7: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

7

1. Set up NetID2. Apply for aid3. Explore housing4. SOAR5. Explore Courses

Page 8: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

Challenges○ Inconsistent application of best

practices and things like:○ User experience/Accessibility○ Code standards○ Mobile friendliness

○ Siloed development○ Wasted resources:

○ Continually solving solved problems

○ No easy way to collaborate on components/patterns & docs

8

Page 9: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

Benefits○ UI consistency and cohesion○ Faster production○ Higher-quality○ Shared vocabulary○ Easier to test○ Useful reference○ Future-friendly foundation

9

Page 10: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

How

10

How are we building it?

3

Page 11: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

Project Goals

11

● Create consistency among designers and developers

● Promote best practices for usable, accessible, and responsive web design

● Empower teams and speed up design and development velocity

● Allow for customization and individuality in the design system

AND OPEN SOURCE!

Page 12: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

12

Make our own or nah?

Talked with major players in the design system world like IBM, Google, Indiana University, U.S. Digital Service.

Page 13: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

13

Material Design○ Well researched & tested.○ Provides accessibility standards.○ Can be used with many frameworks

or none at all.○ Contains many design elements

campus projects already use (buttons, menus, icons, etc).

Page 14: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

“If your project is a web application, an enterprise system requiring authentication, or a task-focused application separate from your organization’s website, the UW IT Design System may be right for you.”

14

Who should use it?

Page 15: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

15Degree Planner: enroll.wisc.edu/degree-planner

Page 16: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

Stay in the Loop

16

How can you be involved?

4

Page 17: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

17

Stay in the LoopTeams: IT Design System CommunityFuture: Keep an eye out for Gitlab

Interested in being a design system pilot project, drop us a line in teams!

Page 18: Why do we need a Design System?€¦ · build any number of applications.” - InVision. 4 Design System Design Tokens Style Guide Pattern Library Design Principles UX/Dev Guidelines

18

“Favor community over control.”

– Nathan Curtis, Principles of Designing Systems