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
140
Design Systems: when and how much?
broccolini
5
1.1k
Color Systems
broccolini
2
560
Building design systems at GitHub
broccolini
6
1.5k
Competence, compassion, and confidence
broccolini
2
540
Empowering designers to code (2)
broccolini
13
1.1k
Empowering Designers to Code
broccolini
3
860
Responding to change
broccolini
0
320
Designing Your App
broccolini
15
620
Other Decks in Design
See All in Design
線で考える画面構成
natsuume
1
810
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.3k
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
320
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
300
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
380
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
310
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.2k
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
520
OLTA株式会社/デザイン紹介資料
taxy
0
200
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
570
Cards | Storyboards
giofortuna_story
0
130
デザイナーとPMの両ロール_3つのポイント
toy1618
1
250
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
33
6.5k
Six Lessons from altMBA
skipperchong
27
3.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
25k
Optimizing for Happiness
mojombo
377
70k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Gamification - CAS2011
davidbonilla
81
5.2k
BBQ
matthewcrist
88
9.5k
Rails Girls Zürich Keynote
gr2m
94
13k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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!