Upgrade to Pro — share decks privately, control downloads, hide ads and more …

All the things I know about building design systems

2d84f9cec8c91449388bfb2b8078ef28?s=47 Diana
April 01, 2016
Design
3
830

All the things I know about building design systems

Lightning talk for the Clarity conference closing party.

2d84f9cec8c91449388bfb2b8078ef28?s=128

Diana

April 01, 2016
Tweet

More Decks by Diana

See All by Diana
Color from Chaos
2d84f9cec8c91449388bfb2b8078ef28?s=48 broccolini
5
78
Design Systems: when and how much?
2d84f9cec8c91449388bfb2b8078ef28?s=48 broccolini
5
810
Color Systems
2d84f9cec8c91449388bfb2b8078ef28?s=48 broccolini
2
400
Building design systems at GitHub
2d84f9cec8c91449388bfb2b8078ef28?s=48 broccolini
6
1.2k
Competence, compassion, and confidence
2d84f9cec8c91449388bfb2b8078ef28?s=48 broccolini
2
280
Empowering designers to code (2)
2d84f9cec8c91449388bfb2b8078ef28?s=48 broccolini
13
740
Empowering Designers to Code
2d84f9cec8c91449388bfb2b8078ef28?s=48 broccolini
3
580
Responding to change
2d84f9cec8c91449388bfb2b8078ef28?s=48 broccolini
0
160
Designing Your App
2d84f9cec8c91449388bfb2b8078ef28?s=48 broccolini
15
550

Other Decks in Design

See All in Design
Designing for trust: Applying Promise Theory to collaborate effectively with your remote teams
0eb7b7e396243e93a186ba20649d9aa6?s=48 akiramotomura
0
500
サービス設計12箇条で紐解く「サービスデザイン思考」
40638b9e3a098313234f358d35103735?s=48 y150saya
0
600
GFS - Startup School 2022
Ad94879495e21b7362d0d2c845f44bc0?s=48 soham
0
330
マルチブランドの実装としてのペパボのデザインシステム「Inhouse」
D68325e19d3f264e847c0fe5543015b6?s=48 shikakun
1
300
YOUは何しにそのデザインチームへ？【デザインマネージャー編】RAKSUL編
B69dc298b4efc6dad8b9ea6178799a5e?s=48 izumi_junichi
1
670
yamanohanabuta logoguideline
4a9fb6423c8832a316433031d06523f1?s=48 misamochimasu
0
200
The Frog Bandit
B789f3884732c5e0bd031a91f1930f3e?s=48 senamiyazaki
0
180
The Party! - Story Sequence
77b4173a70942a13969b84335c2e7695?s=48 diablicos_
0
150
アプリデザインの 難しさ
0b035ebcffb3af51d4b759733619beb0?s=48 yutaabe200
1
200
PLAID_デザイナー採用資料
755ac6e09cca0a46485ff24157f03aa1?s=48 plaid
PRO
0
500
創造学群表現学類2021_ソーシャルチームプレゼン
4f1699756ddbf3f2b6f5517c29747518?s=48 zhikto
1
150
【デザイナー採用】YUMEMI_会社紹介/yumemi_company_introduction_designer
D9e091468953393d8465ea4f29621368?s=48 yumemi_design
1
650

Featured

See All Featured
Embracing the Ebb and Flow
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
73
3.4k
What’s in a name? Adding method to the madness
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.6k
The Mythical Team-Month
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
210
39k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
127
8.5k
GraphQLの誤解/rethinking-graphql
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
31
6.8k
The Invisible Customer
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
Building Adaptive Systems
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
1.2k
A better future with KSS
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
226
16k
How to name files
0a4f62e90c976eeb44d33add75cca5af?s=48 jennybc
40
63k
Build The Right Thing And Hit Your Dates
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
19
1.2k
5 minutes of I Can Smell Your CMS
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k
The Web Native Designer (August 2011)
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
75
2k

Transcript

  1. How people build software ! " G’day

  2. How people build software ! " I’m Diana Mounter @broccolini

  3. How people build software ! Diana Mounter! Come to Buzzfeed

    and do a talk! 3 About what? All the things you know!

  4. How people build software ! " All the things I

    know About building design systems

  5. How people build software ! ! 5 !

  6. How people build software ! Write down your principles 6

    1

  7. How people build software ! Yup! 7 You’re gonna do

    it OOCSS/ functional/atomic/BEM right?

  8. How people build software ! 8 When you actually see

    the code

  9. How people build software ! 9 Lots of arguments vibrant

    discussions

  10. How people build software ! 10 After 6 months of

    learning the hard way… Principle led development!

  11. How people build software ! ! 11 !

  12. How people build software ! 12 IT’S A UNIX SYSTEM

    I KNOW THIS!

  13. How people build software ! "

  14. How people build software ! "

  15. How people build software ! 15

  16. How people build software ! ! Write down your principles

    16 •Styleguide driven design and development •Obvious and transparent •Components, Objects, Utilities •Naming convention •Property order

  17. How people build software ! Naming things is hard, but

    it can be easier 17 2

  18. How people build software ! 18 Choose a naming convention

    • Show the options in code • Describe the pros and cons

  19. How people build software ! 19 Is it searchable? •

    In markup and CSS

  20. How people build software ! 20 Easy to understand, quick

    to internalize <div class="box xs-mt-2 bg-gray">

  21. How people build software ! 21 Make a list of

    all 
 your classes .boxed-group .simple-box .box-group .box-simple

  22. How people build software ! You can keep things (mostly)

    up-to-date 22 3

  23. How people build software ! 23 Use routine events to

    make updates • Onboarding • Training

  24. How people build software ! 24 Make it part of

    your code review checklist • Did you update the docs?

  25. How people build software ! Make it easy for everyone

    to contribute to documentation 25 4

  26. How people build software ! 26

  27. How people build software ! Let people play with the

    lego 27 5

  28. How people build software ! Let people play with the

    lego 28 1

  29. 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

  30. How people build software ! 30 Give designers a prototyping

    environment that is easy to setup and uses production CSS.

  31. How people build software ! 31 Styleguides are a gateway

    drug for empowering designers to code.

  32. How people build software ! Look forward, don’t look back

    32 6

  33. How people build software ! 33

  34. How people build software ! 34 Not everything needs to

    be changed all at once.

  35. How people build software ! Just do it (but choose

    your ships!) 35 7

  36. How people build software ! " Thanks!