Living Design Systems at UCLA
A presentation at UCLA BruinTech conference in in Los Angeles, CA, USA by Scott Gruber
1
Living design systems at UCLA.
3
4
5
6
7
8
9
10
11
12
13
14
Tools 15
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
“We shape our tools and our tools shape us.” –Marshall McLuhan 17
Groups across the University of California are converging in their efforts to build a culture of collaboration. 18
Our toolkit. Speaking Code Presentations Version Control Print Maps and dataviz Graphics Infographics Web Project Management 19
Sharing Code 20
DataViz and Infographics 21
Project Management 22
Collaboration 23
Talking 24
“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
“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
What kind of people use products we make? 27
28
Who else? 29
Everyone can access the world wide web. 30
31
32
33
34
35
36
All the good things I’ve made at UCLA have been with other people. 37
38
39
40
Design with people 41
Design with people 42
Design with people 43
Design with people 44
Working on a team takes patience takes empathy takes listening takes practice 45
The UCLA brand encompasses the work of many different people. 46
What do you want to build? 47
48
What kind of an eco-system do we want to work in? 49
Learn how to give and receive feedback. 50
“Avoid bad meetings at all costs if you’re looking to increase productivity.” 51
Signs of a bad meeting… 52
Signs of a bad meeting… 53
Signs of a bad meeting… 54
Signs of a bad meeting… 55
Signs of a bad meeting… 56
Signs of a bad meeting… 57
Signs of a bad meeting… 58
Is it time for a brand refresh of meetings? 59
“Just moving from 3 developers to 4, doubles the number of lines of communication.” –Rich Rodgers 60
UCLA design system 61
Design systems are a team sport. 62
“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
64
A design system is the story of how your organization designs and builds digital products. 65
Do we have a shared design language? 66
Typography. Color palette. Logo. 67
Flyers. Invitations. Newsletters. Presentations. 68
Email templates. Social media cards. Web components. 69
What would a UCLA design system look like? 70
A collection of visual assets, accessible UI components, frontend code, and guidelines following web standards and UCLA’s brand identity. 71
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
Rules Loose Strict Parts Integrated Modular Organization Centralized Federated Distributed 73
What are we missing? 74
What happens the day after launch? 75
“Art direction is how to make someone feel through design.” –Andy Clarke 76
77
78
What would the soul of a UCLA design system feel like? 79
UCLA is very complex so the ideal design system is needs to flexible and bespoke. 80
Would art directed layouts work at UCLA? 81
What is UCLA design culture like? And how should our design system live? 82
It would be a community, a place to collaborate, to share and benefit from a campus full of knowledge and expertise. 83
What kinds of people? It would be diverse. And it would be inclusive. 84
85
What will we make after the design system starter blocks are built? 86
Institute of the Environment and Sustainability Thank You scott.gruber@g.ucla.edu www.scottgruber.me @scott_gruber 4356 Life Sciences 87
for free. You
can too.
Video
Resources
The following resources were mentioned during the presentation or are useful additional information.
