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

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