1
Slide 1
Slide 2
Living design systems at UCLA.
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
Tools 15
Slide 16
Internet Hall of Fame On October 29, 1969, something happened in Boelter Hall that changed the world. On that day a team of computer scientists, including grad student Vinton Cerf M.S.’70, Ph.D.’72 and led by Professor Leonard Kleinrock, transmitted the first message between two computers hundreds of miles apart. It was the birth of the Internet. 16
Slide 17
“We shape our tools and our tools shape us.” –Marshall McLuhan 17
Slide 18
Groups across the University of California are converging in their efforts to build a culture of collaboration. 18
Slide 19
Our toolkit. Speaking Code Presentations Version Control Print Maps and dataviz Graphics Infographics Web Project Management 19
Slide 20
Sharing Code 20
Slide 21
DataViz and Infographics 21
Slide 22
Project Management 22
Slide 23
Collaboration 23
Slide 24
Talking 24
Slide 25
“If our environment is always changing, we need to be always learning. And to do that we need to let go of what we know.” –Wilson Miner 25
Slide 26
“At times of change, the learners are the ones who will inherit the world, while the knowers will be beautifully prepared for a world which no longer exists. ” –Alistair Smith 26
Slide 27
What kind of people use products we make? 27
Slide 28
28
Slide 29
Who else? 29
Slide 30
Everyone can access the world wide web. 30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36
Slide 37
All the good things I’ve made at UCLA have been with other people. 37
Slide 38
38
Slide 39
39
Slide 40
40
Slide 41
Design with people 41
Slide 42
Design with people 42
Slide 43
Design with people 43
Slide 44
Design with people 44
Slide 45
Working on a team takes patience takes empathy takes listening takes practice 45
Slide 46
The UCLA brand encompasses the work of many different people. 46
Slide 47
What do you want to build? 47
Slide 48
48
Slide 49
What kind of an eco-system do we want to work in? 49
Slide 50
Learn how to give and receive feedback. 50
Slide 51
“Avoid bad meetings at all costs if you’re looking to increase productivity.” 51
Slide 52
Signs of a bad meeting… 52
Slide 53
Signs of a bad meeting… 53
Slide 54
Signs of a bad meeting… 54
Slide 55
Signs of a bad meeting… 55
Slide 56
Signs of a bad meeting… 56
Slide 57
Signs of a bad meeting… 57
Slide 58
Signs of a bad meeting… 58
Slide 59
Is it time for a brand refresh of meetings? 59
Slide 60
“Just moving from 3 developers to 4, doubles the number of lines of communication.” –Rich Rodgers 60
Slide 61
UCLA design system 61
Slide 62
Design systems are a team sport. 62
Slide 63
“Design Systems are as much social as they are technical and we should think of them as communities and not just projects.” –Jina Anne 63
Slide 64
64
Slide 65
A design system is the story of how your organization designs and builds digital products. 65
Slide 66
Do we have a shared design language? 66
Slide 67
Typography. Color palette. Logo. 67
Slide 68
Flyers. Invitations. Newsletters. Presentations. 68
Slide 69
Email templates. Social media cards. Web components. 69
Slide 70
What would a UCLA design system look like? 70
Slide 71
A collection of visual assets, accessible UI components, frontend code, and guidelines following web standards and UCLA’s brand identity. 71
Slide 72
Design systems can include… Design principles Design tools Design tokens Coding standards Brand guidelines Code repositories UX guidelines Development guides UI patterns Writing guides Page templates 72
Slide 73
Rules Loose Strict Parts Integrated Modular Organization Centralized Federated Distributed 73
Slide 74
What are we missing? 74
Slide 75
What happens the day after launch? 75
Slide 76
“Art direction is how to make someone feel through design.” –Andy Clarke 76
Slide 77
77
Slide 78
78
Slide 79
What would the soul of a UCLA design system feel like? 79
Slide 80
UCLA is very complex so the ideal design system is needs to flexible and bespoke. 80
Slide 81
Would art directed layouts work at UCLA? 81
Slide 82
What is UCLA design culture like? And how should our design system live? 82
Slide 83
It would be a community, a place to collaborate, to share and benefit from a campus full of knowledge and expertise. 83
Slide 84
What kinds of people? It would be diverse. And it would be inclusive. 84
Slide 85
85
Slide 86
What will we make after the design system starter blocks are built? 86
Slide 87
Institute of the Environment and Sustainability Thank You scott.gruber@g.ucla.edu www.scottgruber.me @scott_gruber 4356 Life Sciences 87
