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

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

Vince
October 11, 2017
420

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

Vince

October 11, 2017
Tweet

Transcript

  1. Patterns, Language,
    and
    the tale of the
    miLlioN dollar button
    CSS Dev Conf • October 2017

    View full-size slide

  2. I used to read WordUp magazine

    It was all a dream

    View full-size slide


  3. @snailbites
    Vincent Nalupta

    View full-size slide

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

    View full-size slide

  5. Design
    Masters

    Design

    APIs
    .btn {…}
    Style Guide
    Production Apps
    Code Pen
    React NG
    Design

    APIs
    .btn {…}

    View full-size slide

  6. Design
    Masters

    Design

    APIs
    .btn {…}

    View full-size slide

  7. • Sluggish delivery
    • Inconsistency
    • Communication
    CONCERNS

    View full-size slide

  8. “Can we move this 5px down?”

    View full-size slide

  9. There is a difference
    between a website and
    a picture of a website.

    View full-size slide

  10. Get to the final medium as
    quickly as possible
    Then iterate.

    View full-size slide

  11. $
    $
    …inset?
    %
    “Responsive
    Inset.”
    “Use section 3.” .u-section-3

    View full-size slide

  12. • Translating is slow
    • Translating creates barriers
    • Translating narrows our
    focus

    View full-size slide

  13. %
    section inset 3
    '
    Section!
    $
    $
    …inset?
    .u-section-3

    View full-size slide


  14. My name is Hov
    Allow me to
    reintroduce myself

    View full-size slide

  15. The process of getting from
    an abstract concept to a
    spoken word.
    Lexical Retrieval

    View full-size slide

  16. –Potter et. al, 1984, p. 14
    “the surface difference between
    pictures and words virtually
    disappears.”

    View full-size slide

  17. • Have a Science
    Fair
    • Iterate together
    • Shared language
    is powerful!
    language

    View full-size slide

  18. I got you stuck off the realness.

    View full-size slide

  19. This System makes it
    easy to do great work

    View full-size slide

  20. Design System
    + Cascade

    View full-size slide

  21. The
    million dollar
    button

    View full-size slide

  22. • Organize into data objects
    • Write self-evident code
    • Maintain a low specificity
    Tips!

    View full-size slide


  23. From the first
    to the last of it
    delivery is
    passionate

    View full-size slide

  24. Your customers sit
    rightnext
    to you.

    View full-size slide

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

    View full-size slide


  26. @snailbites
    Vincent Nalupta

    View full-size slide