Creating Design Systems That Work

In a world of bootstrap, foundation, pure, topcoat, etc., designers are falling into a pattern – reusing the same ole' patterns for every project. You're solving a unique problem and you need a unique solution.

Rolling your own design system can help you solve problems, make decisions, retain consistency, and create a meaningful and recognizable experience for your users. Follow along as I explain the rationale, process, tools, and techniques that go into creating a deliverable and documented design system – be it from scratch or derived from an existing product.

BEM: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
OOCSS: http://www.stubbornella.org/content/2009/03/23/object-oriented-css-video-on-ydn/

Scales: https://github.com/yodasw16/scales
Inuit: https://github.com/csswizardry/inuit.css

uncss: http://davidwalsh.name/uncss
csso: http://css.github.io/csso/
gzip: http://www.fiftyfoureleven.com/weblog/web-development/css/the-definitive-css-gzip-method

yelp: http://www.yelp.com/styleguide
trulia: http://trulia.github.io/hologram-example/base_css.html
github: https://github.com/styleguide/css

style guide guide: http://vinspee.me/style-guide-guide/

interface inventory: http://bradfrostweb.com/blog/post/interface-inventory/

Transcript

1. Building That Work DESIGN SYSTEMS @VINSPEE
2. HARD Front End Development is
3. BROWSERS
4. DEVICES
5. USER EXPERIENCE
6. OPTIMIZATION
7. MAKING THINGS REALLY REALLY REALLY RIDICULOUSLY GOOD LOOKING
8. VINCE SPEELMAN
9. VINCE SPEELMAN
10. VIN’S PEE
11. LEVEL11 QL CURVE DET
12. WE HELP YOU MAKE YOU A BETTER YOU.
14. MAKING THINGS REALLY REALLY REALLY RIDICULOUSLY GOOD LOOKING
17. DESIGN SYSTEMS ENABLE YOU.
18. STAY SMALL
19. Write simpler code.
20. Create smaller assets.
21. How the heck?
22. Methods 1. BEM 2. OOCSS
23. Patterns 1. Scales 2. Inuit
24. Tools 1. uncss 2. CSSO 3. gzip
25. STAY SAME
26. Create a component library. Start now.
27. Yelp Trulia GitHub
29. Style Guide Guide
30. DON’T BE CLEVER
31. STAY SUPPLE
32. EMBRACE RESPONSIVE WEB DESIGN.
33. Build components and compositions, not particulars and pages.
34. PLEASE SHOW ME WHAT YOU’RE TALKING ABOUT
35. Contest Name BRANDING COUNTDOWN TO END DATE # PARTICIPANTS RANK AVATAR FIRSTNAME LASTNAME SCORE RANK AVATAR FIRSTNAME LASTNAME SCORE RANK AVATAR FIRSTNAME LASTNAME SCORE RANK AVATAR FIRSTNAME LASTNAME SCORE LIVE TICKER
36. PLEASE SHOW ME WHAT YOU’RE TALKING ABOUT
37. Contest Name BRANDING COUNTDOWN TO END DATE # PARTICIPANTS RANK AVATAR FIRSTNAME LASTNAME SCORE RANK AVATAR FIRSTNAME LASTNAME SCORE RANK AVATAR FIRSTNAME LASTNAME SCORE RANK AVATAR FIRSTNAME LASTNAME SCORE LIVE TICKER
38. PLEASE SHOW ME WHAT YOU’RE TALKING ABOUT
39. Contest Name BRANDING COUNTDOWN TO END DATE # PARTICIPANTS RANK AVATAR FIRSTNAME LASTNAME SCORE RANK AVATAR FIRSTNAME LASTNAME SCORE RANK AVATAR FIRSTNAME LASTNAME SCORE RANK AVATAR FIRSTNAME LASTNAME SCORE LIVE TICKER
40. Contest Name BRANDING COUNTDOWN TO END DATE # PARTICIPANTS RANK AVATAR FIRSTNAME LASTNAME SCORE RANK AVATAR FIRSTNAME LASTNAME SCORE RANK AVATAR FIRSTNAME LASTNAME SCORE RANK AVATAR FIRSTNAME LASTNAME SCORE LIVE TICKER
41. Decide-ish how it should look-ish.
42. As a channel11 viewer, I want to know how much time is remaining in a contest so that I know how much time I have left to score points. “
43. AS [PERSONA], I [DESIRE] SO [RATIONALE].
44. “ The countdown should display remaining days, hours, minutes, and seconds until the currently displayed contest is over. It should always show days, hours, minutes, and seconds, even if they are a zero value, until the competition has ended. After this, it should show the text "FINAL", letting users know this competition is over.
46. OMG THIS IS THE FIRST CODE HE’S SHOWN
47. 1 <time datetime="2014-12-25 17:00" class="countdown"> 2 <div class="countdown__value"> 3 <span class="countdown__number">127</span> 4 <span class="countdown__label">Days</span> 5 </div> 6 <div class="countdown__value"> 7 <span class="countdown__number">22</span> 8 <span class="countdown__label">Hours</span> 9 </div> 10 <div class="countdown__value"> 11 <span class="countdown__number">51</span> 12 <span class="countdown__label">Minutes</span> 13 </div> 14 <div class="countdown__value"> 15 <span class="countdown__number">37</span> 16 <span class="countdown__label">Seconds</span> 17 </div> 18 </time>
48. 1 .countdown! 2 font-size: 2rem! 3 line-height: 1! 4 background: nth($negative, 3)! 5 display: flex! 6 justify-content: space-around! 7 ! 8 .countdown__value! 9 display: flex! 10 flex-wrap: wrap! 11 justify-content: center! 12 align-items: center! 13 ! 14 .countdown__number! 15 color: nth($shade, 6)! 16 padding-top: .25rem! 17 padding-bottom: .25rem! 18 font-weight: 700! 19 ! 20 .countdown__label! 21 text-transform: uppercase! 22 color: nth($negative, 4)! 23 +hidden! 24 +breakpoint(527px)! 25 +visible! 26 +margin-x(ms(-5))
49. WOW MODULAR SUCH FLEX SO DECOUPLED VERY STABLE
50. THIS DUDE HASN’T SEEN MY PROJECT.
51. Interface Inventory
52. Try it.
53. QUESTIONS?
54. VINSPEE