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

Sweating The Small Stuff

Brian Graves
July 31, 2015
Design
0
71

Sweating The Small Stuff

Brian Graves and Ryan Heap of DEG take a look at using a combination of Style Tiles and Atomic Design to create design systems that can take content all of the places it needs to go and keep it looking great, extendable and user friendly along the way.

Brian Graves

July 31, 2015
Tweet

More Decks by Brian Graves

See All by Brian Graves
Using Tomorrow's CSS Today
briangraves
0
19k
Using Tomorrow's CSS Today
briangraves
1
130
Using Tomorrow's CSS Today
briangraves
2
97
Using Tomorrow's CSS Today
briangraves
0
280
Using Tomorrow's CSS Today [Email]
briangraves
1
71
Winning the Design Battle on Every Screen
briangraves
0
83

Other Decks in Design

See All in Design
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
2
200
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
0
450
世界中のチームワークを どうデザインしているのか
ka3zu1ma10
0
160
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
110
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
330
新しいemoji😄のアイデアを Unicodeが募集中‼️🏃‍♀️💨💨💨 傾向を学んでみんな提案しよう💪
oguemon
2
660
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
1
760
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
250
Dreamia
elsh
0
150
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.1k
ENEOS社事例｜アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
160
エムスリー株式会社　デザイングループ紹介資料 / m3design-team-profile
m3designer
0
3.9k

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Code Reviewing Like a Champion
maltzj
519
39k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
How GitHub (no longer) Works
holman
311
140k
GraphQLとの向き合い方2022年版
quramy
43
13k
How to Ace a Technical Interview
jacobian
275
23k
Optimizing for Happiness
mojombo
376
69k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
A designer walks into a library…
pauljervisheath
202
24k

Transcript

  1. Creating a Bottom-Up Design System with Style Tiles and Atomic

    Design

  2. Brian Graves @briangraves

  3. Ryan Heap @ryanmheap

  4. None
  5. None
  6. None
  7. None
  8. None

  9. https://www.flickr.com/photos/otterman/4475203104

  10. Design Front-End Back-End Launch! Linear Workflow

  11. None
  12. None

  13. https://www.flickr.com/photos/brad_frost/10413977065/in/album-72157636818350863/

  14. https://www.flickr.com/photos/lukew/10460063574/in/album-72157636814608894/

  15. None

  16. We’ve changed the end product. But most people are still

    working in the same old way.
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None

  23. https://www.flickr.com/photos/otterman/4475203104

  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None

  38. https://www.flickr.com/photos/samuraislice/2985048261

  39. https://www.flickr.com/photos/samuraislice/2985914042

  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None

  72. TODO: Make the green arrows point in both directions and

    jump from various stages
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None

  81. Photoshop (or Sketch)

  82. None
  83. None
  84. None

  85. Pattern Lab

  86. http://patternlab.io

  87. Pattern Lab: Your Site Generator

  88. None
  89. None
  90. None
  91. None
  92. None
  93. None
  94. None

  95. Pattern Lab: Your Style Guide

  96. None

  97. Pattern Lab: Your Project Hub

  98. Designers

  99. Developers

  100. Managers & Clients

  101. None
  102. None
  103. None
  104. None
  105. None

  106. @ryanmheap @briangraves Thank You!

  107. bit.ly/1G27mV3 Resources & Slides