Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
All the things I know about building design systems
Diana
April 01, 2016
Design
3
840
All the things I know about building design systems
Lightning talk for the Clarity conference closing party.
Diana
April 01, 2016
Tweet
Share
More Decks by Diana
See All by Diana
Color from Chaos
broccolini
5
86
Design Systems: when and how much?
broccolini
5
840
Color Systems
broccolini
2
400
Building design systems at GitHub
broccolini
6
1.2k
Competence, compassion, and confidence
broccolini
2
330
Empowering designers to code (2)
broccolini
13
780
Empowering Designers to Code
broccolini
3
620
Responding to change
broccolini
0
200
Designing Your App
broccolini
15
560
Other Decks in Design
See All in Design
Lee_CheeseburgerKid222.pdf
leemwitz
1
200
Lean UX でまわす、まわるプロダクト開発
mariosakata
1
740
不確実性というデザインのパースペクティブ
recruitengineers
PRO
1
300
Blend the DESIGN - 融ける“デザインのチカラ” / Designship2022
visional_engineering_and_design
1
2.5k
副業デザイナーズで作るデザイン組織 / Design Teams as a Side Job Designer
kgsi
0
650
Mimi
kignato1
0
530
UX ROCKET#4サイボウズ企業説明会資料 / UXRocket4_2022
kamimu
0
210
プロダクトマネジメントと人間中心設計 - デザイナーからPMへのキャリアシフト -
hiromasa_yoshikawa
1
990
Research Process of MusicTongue
mxair95000
0
170
サービスピボット時におけるデザイナーの役割
vivion
0
920
プロダクトと並行して育てるデザインシステム / A Design System Growing In Parallel to the Product
makotoomura
0
600
本質を理解してデザインに取り組む / Hatena Engineer Seminar #23 aoym_05
hatena
0
390
Featured
See All Featured
Navigating Team Friction
lara
177
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
43k
Teambox: Starting and Learning
jrom
124
7.9k
Practical Orchestrator
shlominoach
178
8.9k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
Building Your Own Lightsaber
phodgson
96
4.9k
Infographics Made Easy
chrislema
235
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
590
A better future with KSS
kneath
230
16k
Building Flexible Design Systems
yeseniaperezcruz
314
35k
Transcript
How people build software ! " G’day
How people build software ! " I’m Diana Mounter @broccolini
How people build software ! Diana Mounter! Come to Buzzfeed
and do a talk! 3 About what? All the things you know!
How people build software ! " All the things I
know About building design systems
How people build software ! ! 5 !
How people build software ! Write down your principles 6
1
How people build software ! Yup! 7 You’re gonna do
it OOCSS/ functional/atomic/BEM right?
How people build software ! 8 When you actually see
the code
How people build software ! 9 Lots of arguments vibrant
discussions
How people build software ! 10 After 6 months of
learning the hard way… Principle led development!
How people build software ! ! 11 !
How people build software ! 12 IT’S A UNIX SYSTEM
I KNOW THIS!
How people build software ! "
How people build software ! "
How people build software ! 15
How people build software ! ! Write down your principles
16 •Styleguide driven design and development •Obvious and transparent •Components, Objects, Utilities •Naming convention •Property order
How people build software ! Naming things is hard, but
it can be easier 17 2
How people build software ! 18 Choose a naming convention
• Show the options in code • Describe the pros and cons
How people build software ! 19 Is it searchable? •
In markup and CSS
How people build software ! 20 Easy to understand, quick
to internalize <div class="box xs-mt-2 bg-gray">
How people build software ! 21 Make a list of
all your classes .boxed-group .simple-box .box-group .box-simple
How people build software ! You can keep things (mostly)
up-to-date 22 3
How people build software ! 23 Use routine events to
make updates • Onboarding • Training
How people build software ! 24 Make it part of
your code review checklist • Did you update the docs?
How people build software ! Make it easy for everyone
to contribute to documentation 25 4
How people build software ! 26
How people build software ! Let people play with the
lego 27 5
How people build software ! Let people play with the
lego 28 1
How people build software ! 29 Cap: Check out basscss.
It’s a class library that lets you build new UI elements quickly. Sam: I hate it! https://medium.com/buzzfeed-design/how-i-learned-to-stop- worrying-and-love-the-atomic-class-98d6ccc45781#.ootp6rbxh
How people build software ! 30 Give designers a prototyping
environment that is easy to setup and uses production CSS.
How people build software ! 31 Styleguides are a gateway
drug for empowering designers to code.
How people build software ! Look forward, don’t look back
32 6
How people build software ! 33
How people build software ! 34 Not everything needs to
be changed all at once.
How people build software ! Just do it (but choose
your ships!) 35 7
How people build software ! " Thanks!