And You Thought Buttons Were Easy?

SmashingConf NYC June 2017

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
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
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
41. 41 Fill-in-the-Blanks for Text Colors ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
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
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 & correc@ons | terms & condi@ons | 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 .card__@tle .card__descrip@on .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