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

And You Thought Buttons Were Easy?

And You Thought Buttons Were Easy?

SmashingConf NYC June 2017

Nathan Curtis

June 13, 2017
Tweet

More Decks by Nathan Curtis

Other Decks in Design

Transcript

  1. BUTTONS SmashingConf — New York, NY — Tuesday, June 13,

    2017 Nathan Curtis
 @nathanacurtis AND YOU THOUGHT WAS EASY DESIGNING
  2. 2 Design systems? Style guides? Everyone’s doing it.

  3. 3 Conversa8on on Twi;er about ‘design systems’ 2014 2016 2013

    2015 Tweets / 2 weeks 20 40 60 80 10 30 50 70 5 15 25 35 45 55 65 75 85 By @ashlie from @design
  4. 4 seman8c-ui.com

  5. 5 lightningdesignsystem.com

  6. 6 getbootstrap.com

  7. 7 Systems solve easy, recurring problems so products can focus

    on hard problems
  8. 8 System Quality ≥
 Product Quality

  9. 9 Two Ques8ons You Must Have an Answer For: “What

    do you mean by quality?”
 &
 “How do you assure that quality?”
  10. 10 Component QA Checklist ✔ Visual Quality ✔ States &

    Varia8ons ✔ Responsiveness ✔ Content Resilience ✔ Composability ✔ Func%onality ✔ Accessibility ✔ Browser & Device Compa%bility
  11. 11 Primary Hover Active Disabled Secondary Hover Active Disabled Flat

    Hover Active Disabled Ghost Hover Active Disabled Tooltip Split Button Option One Option Two Option Three Split Button Item 1 Item 3 Item 2 IMAGE IMAGE Rocks Rocks Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing Default Reverse 24:32 STATUS NEW Large Tab 1 Tab 3 Tab 4 Tab 2 Misonception Genes are not the same as chromosomes. Genes are segments of DNA that code for specific proteins. Each DNA molecule may contain hundreds or even thousands of genes. A chromosome is a structure that an entire DNA molecule forms along with some proteins that help give the chromosome shape. Exponential notation is a shorter way to write a number by using exponents. Teacher Note In this investigation, students will look closely to discern commonality of structure, MP. 7. Students develop a classification of quadrilaterals based on their properties, communicate justification of their classification to others, and critique each other’s work, MP.3. Focus Benchmark A Clear and Present Danger: SS.7.C.2.5, SS.7.C.3.6 Did You Know? Heat is not a thing. It is energy. LIST GROUP HEADER Active List Group Item List Group Item with Asset Type Icon and Rol List Group Subheader No Hairline List Group List Group Item with Asset Type Icon and Rol LIST GROUP HEADER Active List Group Item List Group Item with Asset Type Icon and Rol List Group Subheader Username or password is incorrect. Your profile has been saved. You haven’t attached any resources yet. This assessment can only be taken once. Display Text Placeholder Your password must contain a letter, a number, You must choose an option Password * Wednesday Thursday Display Text I accept the terms and conditions Monday Tuesday HEADER CELL Data Cell Data Cell Data Cell HEADER CELL Data Cell Data Cell Data Cell HEADER CELL Data Cell Data Cell Data Cell Cancel Assign to Classroom or Student Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra maximus velit eu aliquam. Donec at elit urna. Nulla at ultricies mi. Vestibulum ante massa, accumsan id magna sit amet, condimentum egestas odio. Proceed Anyway BUTTON
  12. BUTTON BORDER RADIUS BOX-SHADOW BACKGROUND COLOR PADDING-TOP PADDING-LEFT & -RIGHT

    PADDING-BOTTOM MARGIN COLOR FONT-SIZE FONT-WEIGHT FONT-FAMILY TEXT-TRANSFORM Bu;ons Set a Stylis8c Tone Bu?ons in Design Systems bit.ly/8s-bu?ons-in-design-systems
  13. None
  14. Save Save Save Save Save Save Save Save Save Bu;ons

    on Backgrounds? Complicated
  15. Save DEFAULT Save Save Save Save Save PROGRESS FOCUS HOVER

    PRESS DISABLED A Complete Solu8on Solves an Arc of Interac8on
  16. Submit Save Secondary ≠ Disabled

  17. Save Save Save Save Save Save Save Save Save Beware

    of Ghosts
  18. SALESFORCE LIGHTNING ON CRAFTMANSHIP h?ps:/ /www.lightningdesignsystem.com/guidelines/overview/

  19. 19 Etsy: Conven8on over Configura8on Designed for Growth bit.ly/8s-system-is-product

  20. BUTTON

  21. BUTTON BUTTON . BUTTON GROUP WITH OPTIONS BUTTON . Basic

    Menu Split Icon Group TYPE BUTTON BUTTON BUTTON Secondary Secondary Alt Primary Alt Primary BUTTON HIERARCHY + BUTTON BUTTON BUTTON BUTTON Default Hover Press Disabled STATE + ELEMENT <button> <a> <input type=“submit”> <input type=“button”> + QUALITY RESPONSIVE ACCESSIBLE THEMABLE BROWSERS/DEVICES +
  22. RESOURCE COST $100/HR COMBINED TEAM EFFORT (DESIGN + DEV +

    QA) 200HRS x TOTAL COST $20,000 Es8ma8ng Bu;on Cost
  23. RESOURCE COST $100/HR COMBINED TEAM EFFORT (DESIGN + DEV +

    QA) 200HRS TOTAL COST, ACROSS TEAMS $200,000 x PRODUCT TEAMS 10 x Es8ma8ng Bu;on Cost
  24. None
  25. SUBMIT BUY NOW

  26. 26 Color in Design Systems bit.ly/8s-color-in-design-systems BUY NOW

  27. 27 Brand Red, Implemented (We’ve All Been There)

  28. 28 Stabilize Brand Colors Early PRIMARY BLUE PRIMARY RED PRIMARY

    WHITE
  29. 29 Talk to Brand About It. Really, You Can Talk

    To Them. DIGITAL ORANGE BRAND ORANGE
  30. 30 Drop the Neutral Neutrals DARKS LIGHTS 05 10 20

    30 40 50 60 70 80 90 Muddy Accessibility Danger Zone
  31. 31 Go Digital Blue. So Many Others Do. PRIMARY BLUE

    #0071BC DIGITAL BLUE #0067C5 Button Link Color
  32. 32 Name Colors by HSL Lightness GRAYS, FROM 1 TO

    7 $color-gray-1 $color-gray-2 $color-gray-3 $color-gray-4 $color-gray-5 $color-gray-6 $color-gray-7 1 2 3 4 5 6 7 GRAYS BY BRIGHTNESS $color-gray-05 $color-gray-10 $color-gray-20 $color-gray-30 $color-gray-70 $color-gray-80 $color-gray-90 05 10 20 30 70 80 90
  33. 33 Limit Tint & Shade Quan8ty MATERIAL DESIGN’S DEEP ORANGE

    #FBE9E7 #FFCCBC #FFAB91 #FF8A65 #FF7043 #E64A19 #F4511E #FF5722 #D84315 #BF360C 050 100 200 300 400 700 600 500 800 900 OUR ORANGE #FF7043 #E64A19 #FF5722 #BF360C 400 700 500 900
  34. 34 Hand-Pick or Transform? Be Consistent FUNCTIONALLY TRANSFORMED #FF6C3D #EB3800

    #FF5722 #B82C00 Lighten 5% Darken 10% Base Darken 20% #FF7043 #E64A19 #FF5722 #BF360C 400 700 500 900 HANDPICKED
  35. 35 Define Meaningful Sub-Pale;es, Like Feedback h-p:/ /comet.discoveryeduca?on.com/visual-style/color.html

  36. 36 Making Themes Magic Light & Dark Color Systems bit.ly/8s-light-dark-color-systems

    class=“system-container--dark"
  37. 37 2 Background Choices

  38. 38 4 Background Choices

  39. 39 8 Background Choices

  40. 40

  41. 41 Fill-in-the-Blanks for Text Colors ? ? ? ? ?

    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
  42. 42

  43. 43

  44. 44

  45. 45

  46. 46

  47. 47 contrast-grid.eightshapes.com

  48. 48 System Op8on, Copied Sublime Code Editor, Somewhere Else .system-button

    { background-color: #1781FB; } Sketch Artboard, Somewhere
  49. Sublime Code Editor, Somewhere Else $system-blue: #135CB8; 49 System Variable,

    Reused .system-button { background-color: $system-blue; } Sketch Artboard, Somewhere
  50. 50 Let’s use #247865 as our color for interactive elements

    like buttons, links, and more. A designer, thinking systema8cally “
  51. WEB ANDROID IOS 51 Challenge: Decisions are Everywhere! Product 7


    (JSON) System
 Doc Product 1 (Sass) Product 4 (LESS) Product 5 (Stylus) Product 8 (XML) Product 2 (Sass) Product 3 (Sass) Product 6 (Stylus) Product 10 (Sass) Product 9 (LESS) Product 11 (Sass)
  52. 52 Living Design System h?ps:/ /medium.com/salesforce-ux/living-design-system-3ab1f2280ef7

  53. 53 Tokens can include: Color Background Color Text Color Border

    Color Font Family Font Size Line Height Spacing Radius Sizing Shadow Timing Breakpoints z-Index / Layering (Modal, Dialog, Tip…)
  54. 54 Discovery Educa8on Comet System Tokens comet.discoveryeduca8on.com/resources/tokens.html

  55. Sublime Code Editor, Somewhere Else 55 Maintainable System Decision .system-card

    { margin: $comet-space-stack-l; } .system-card__copy { background-color: $comet-background-color-light; color: $comet-text-color-on-light; font-size: $comet-font-size-paragraph; padding: $comet-space-inset-m; }
  56. 56 Token
 Data (JSON) Tokens as Variables (SASS) Tokens as

    Variables (LESS) Tokens as Variables (Stylus) Token
 Data (XML) Design Decisions ANDROID IOS WEB Tokens as Visual Style Abstrac8on Tokens in Design Systems bit.ly/8s-tokens-in-design-systems YAML Design System Doc
  57. 57 How much style complexity
 is in our libraries?

  58. 58 6 Libraries, Lots of Not-Yet-Processed CSS Material Design Lite

    Bootstrap ZURB Founda?on Salesforce Lightning Discovery Comet NetApp LUCI
  59. 59 6 Systems, 11,500+ CSS Declara8ons

  60. 60

  61. 61 BUTTON BORDER RADIUS BOX-SHADOW BACKGROUND COLOR PADDING-TOP PADDING-LEFT &

    -RIGHT PADDING-BOTTOM MARGIN COLOR FONT-SIZE FONT-WEIGHT FONT-FAMILY TEXT-TRANSFORM
  62. 62 Spacing can be so sloppy! VIDEO Supernova An astronomical

    event that occurs during the last stages of a massive star's life. Galaxies Speed of Light Milky Way View 22? 28? 26? 12?
  63. 63 Let’s make a grid. We’re done! Right?

  64. 64 Space and the Magic Number(s)

  65. 65 Scale Op8ons Nonlinearly a, ar, ar2 , ar3 ,

    ar4 , ar5 LINEAR GEOMETRIC PROGRESSION
  66. 66 Name Stops Memorably 1x 2x 3x 1/2x 1/4x 1/8x

  67. 67 From How Much to How
 (and then How Much)

  68. 68 Start with the Box Model VIDEO Supernova An astronomical

    event that occurs during the last stages of a massive star's life. Galaxies Speed of Light Milky Way View
  69. 69 Differen8ate Spa8al Concepts VIDEO Supernova An astronomical event that

    occurs during the last stages of a massive star's life. Galaxies Speed of Light Milky Way 16 16 16 16 16 8 8 8 8 View 32
  70. 70 A Vocabulary for Space VIDEO Supernova An astronomical event

    that occurs during the last stages of a massive star's life. Galaxies Speed of Light Milky Way View Inset Squished Inset Stack Inline
  71. 71 Inset CARD ERROR MESSAGE PILL ICON BUTTON

  72. 72 Inset Squish BUTTON DATA TABLE LIST GROUP 50% top

    & bo?om inset
  73. 73 Inset Stretch TEXTBOX TEXT AREA 150% top & bo?om

    inset
  74. 74 Stack VIDEO Supernova An astronomical event that occurs during

    the last stages of a massive star's life. Galaxies Speed of Light Milky Way View First Name Last Name Address CARD FORMS
  75. 75 Inline Galaxies Home Products Speed of Light Milky Way

    about us | contact us | complaints & [email protected] | terms & [email protected] | privacy policy | cookie policy | securedrop
  76. 76 With Space Solved, Revisit Grid Grid Margin Grid Gutter

    32 64 64 32 16 16 8 8 Comfortable Luxurious Default Compact
  77. 77 Space is Simple, as Cheat Sheet 32 32 64

    16 64 16 8 8 16 32 64 4 4 4 8 2 2 M M L M L L XL XL S S S S XS XXS XS M L XL S XXS XS Inset Inset Squish Inset Stretch Stack Inline 8 8 16 16 32 4 12 8 24 16 M
  78. 78 Offer Spacer “Helpers” but Monitor Use CONCEPTS HELPERS

  79. 79 Solve Collisions (Line Height vs Padding) VIDEO VIDEO Supernova

    Supernova An astronomical event that occurs during the last stages of a massive star's life. An astronomical event that occurs during the last stages of a massive star's life. With Line Height Colliding A8er Line Height Adjustment Mixin
  80. 80 Space Available as Tokens VIDEO Supernova An astronomical event

    that occurs during the last stages of a massive star's life. Galaxies Speed of Light Milky Way View Element .card__copy .card__type [email protected] [email protected] .pill .card__pill .card__pills .buBon .card__buBon .card 1 2 3 4 5 6 7 8 padding $space-inset-m 0 0 0 $space-inset-s - - $space-inset-squish-m - 0 margin 0 $space-stack-s $space-stack-m $space-stack-m 0 0 $space-s $space-s 0 $space-stack-m 0 0 $space-m $space-m 0 $space-stack-m (< 768px viewport) $space-stack-l (≥ 768px viewport) 1 2 3 4 5 6 7 8 90% COVERAGE!
  81. 81 Tune Space Centrally VIDEO VIDEO Supernova Supernova An astronomical

    event that occurs during the last stages of a massive star's life. An astronomical event that occurs during the last stages of a massive star's life. Galaxies Galaxies Speed of Light Milky Way Speed of Light Milky Way View View 16 8 24 12 ORIGINAL INSET LARGER INSET
  82. 82 medium.com/eightshapes-llc

  83. 83 h;ps:/ /designsystems.herokuapp.com/

  84. Thanks! @nathanacur8s @nathanacur8s