Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
All the things I know about building design sys...
Search
Diana
April 01, 2016
Design
3
1k
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
150
Design Systems: when and how much?
broccolini
5
1.2k
Color Systems
broccolini
2
570
Building design systems at GitHub
broccolini
6
1.6k
Competence, compassion, and confidence
broccolini
2
550
Empowering designers to code (2)
broccolini
13
1.1k
Empowering Designers to Code
broccolini
3
870
Responding to change
broccolini
0
330
Designing Your App
broccolini
15
650
Other Decks in Design
See All in Design
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Saudade typeface
tiagoporto
0
330
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
620
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
5
710
Storyboard Honey
rocioparronrubio
0
290
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
330
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
390
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
190
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
480
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
440
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
760
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
300
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Music & Morning Musume
bryan
46
6.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Producing Creativity
orderedlist
PRO
346
40k
Typedesign – Prime Four
hannesfritz
42
2.7k
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!