Patterns, Language, and the tale of the Million Dollar Button

5c4d712a068b58cd07e8650838cb647e?s=47 Vince
October 11, 2017
220

Patterns, Language, and the tale of the Million Dollar Button

5c4d712a068b58cd07e8650838cb647e?s=128

Vince

October 11, 2017
Tweet

Transcript

  1. Patterns, Language, and the tale of the miLlioN dollar button

    CSS Dev Conf • October 2017
  2. I used to read WordUp magazine It was all a

    dream
  3. 
 @snailbites Vincent Nalupta

  4. T Living Style-Guide Design Language System The Cookbook

  5. Design Masters Design
 APIs .btn {…} Style Guide Production Apps

    Code Pen React NG Design
 APIs .btn {…}
  6. Design Masters Design
 APIs .btn {…}

  7. Language

  8. • Sluggish delivery • Inconsistency • Communication CONCERNS

  9. None
  10. “Can we move this 5px down?”

  11. There is a difference between a website and a picture

    of a website.
  12. Get to the final medium as quickly as possible Then

    iterate.
  13. None
  14. None
  15. $ $ …inset? % “Responsive Inset.” “Use section 3.” .u-section-3

  16. None
  17. • Translating is slow • Translating creates barriers • Translating

    narrows our focus
  18. % section inset 3 ' Section! $ $ …inset? .u-section-3

  19. None
  20. My name is Hov Allow me to reintroduce myself

  21. RESEARCH

  22. The process of getting from an abstract concept to a

    spoken word. Lexical Retrieval
  23. None
  24. None
  25. –Potter et. al, 1984, p. 14 “the surface difference between

    pictures and words virtually disappears.”
  26. None
  27. • Have a Science Fair • Iterate together • Shared

    language is powerful! language
  28. I got you stuck off the realness.

  29. $ Code

  30. None
  31. None
  32. This System makes it easy to do great work

  33. CSS is hard

  34. Design System + Cascade

  35. The million dollar button

  36. • Organize into data objects • Write self-evident code •

    Maintain a low specificity Tips!
  37. From the first to the last of it delivery is

    passionate
  38. * Teams

  39. Your customers sit rightnext to you.

  40. OKRS

  41. “How can designers and devs work better together?”

  42. None
  43. 
 @snailbites Vincent Nalupta