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
120
Design Systems: when and how much?
broccolini
5
1.1k
Color Systems
broccolini
2
530
Building design systems at GitHub
broccolini
6
1.5k
Competence, compassion, and confidence
broccolini
2
500
Empowering designers to code (2)
broccolini
13
1k
Empowering Designers to Code
broccolini
3
840
Responding to change
broccolini
0
300
Designing Your App
broccolini
15
590
Other Decks in Design
See All in Design
Credence
lratmansunu
0
460
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
4.8k
ito aya|Portfolio2409
itoaya116
0
260
太田博三(@usagisan2020)
otanet
0
190
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
550
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
310
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
400
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.9k
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
180
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
490
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.2k
Карта реализации историй — убийца USM
ashapiro
0
210
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Documentation Writing (for coders)
carmenintech
65
4.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Building an army of robots
kneath
302
43k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Bash Introduction
62gerente
608
210k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Become a Pro
speakerdeck
PRO
25
5k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
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!