Tweet
Tweet

Slide 1

Slide 1 text

BUTTONS SmashingConf — New York, NY — Tuesday, June 13, 2017 Nathan Curtis
 @nathanacurtis AND YOU THOUGHT WAS EASY DESIGNING

Slide 2

Slide 2 text

2 Design systems? Style guides? Everyone’s doing it.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

4 seman8c-ui.com

Slide 5

Slide 5 text

5 lightningdesignsystem.com

Slide 6

Slide 6 text

6 getbootstrap.com

Slide 7

Slide 7 text

7 Systems solve easy, recurring problems so products can focus on hard problems

Slide 8

Slide 8 text

8 System Quality ≥
 Product Quality

Slide 9

Slide 9 text

9 Two Ques8ons You Must Have an Answer For: “What do you mean by quality?”
 &
 “How do you assure that quality?”

Slide 10

Slide 10 text

10 Component QA Checklist ✔ Visual Quality ✔ States & Varia8ons ✔ Responsiveness ✔ Content Resilience ✔ Composability ✔ Func%onality ✔ Accessibility ✔ Browser & Device Compa%bility

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Save Save Save Save Save Save Save Save Save Bu;ons on Backgrounds? Complicated

Slide 15

Slide 15 text

Save DEFAULT Save Save Save Save Save PROGRESS FOCUS HOVER PRESS DISABLED A Complete Solu8on Solves an Arc of Interac8on

Slide 16

Slide 16 text

Submit Save Secondary ≠ Disabled

Slide 17

Slide 17 text

Save Save Save Save Save Save Save Save Save Beware of Ghosts

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

BUTTON

Slide 21

Slide 21 text

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 + QUALITY RESPONSIVE ACCESSIBLE THEMABLE BROWSERS/DEVICES +

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

SUBMIT BUY NOW

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

28 Stabilize Brand Colors Early PRIMARY BLUE PRIMARY RED PRIMARY WHITE

Slide 29

Slide 29 text

29 Talk to Brand About It. Really, You Can Talk To Them. DIGITAL ORANGE BRAND ORANGE

Slide 30

Slide 30 text

30 Drop the Neutral Neutrals DARKS LIGHTS 05 10 20 30 40 50 60 70 80 90 Muddy Accessibility Danger Zone

Slide 31

Slide 31 text

31 Go Digital Blue. So Many Others Do. PRIMARY BLUE #0071BC DIGITAL BLUE #0067C5 Button Link Color

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

35 Define Meaningful Sub-Pale;es, Like Feedback h-p:/ /comet.discoveryeduca?on.com/visual-style/color.html

Slide 36

Slide 36 text

36 Making Themes Magic Light & Dark Color Systems bit.ly/8s-light-dark-color-systems class=“system-container--dark"

Slide 37

Slide 37 text

37 2 Background Choices

Slide 38

Slide 38 text

38 4 Background Choices

Slide 39

Slide 39 text

39 8 Background Choices

Slide 40

Slide 40 text

40

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

42

Slide 43

Slide 43 text

43

Slide 44

Slide 44 text

44

Slide 45

Slide 45 text

45

Slide 46

Slide 46 text

46

Slide 47

Slide 47 text

47 contrast-grid.eightshapes.com

Slide 48

Slide 48 text

48 System Op8on, Copied Sublime Code Editor, Somewhere Else .system-button { background-color: #1781FB; } Sketch Artboard, Somewhere

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

50 Let’s use #247865 as our color for interactive elements like buttons, links, and more. A designer, thinking systema8cally “

Slide 51

Slide 51 text

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)

Slide 52

Slide 52 text

52 Living Design System h?ps:/ /medium.com/salesforce-ux/living-design-system-3ab1f2280ef7

Slide 53

Slide 53 text

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…)

Slide 54

Slide 54 text

54 Discovery Educa8on Comet System Tokens comet.discoveryeduca8on.com/resources/tokens.html

Slide 55

Slide 55 text

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; }

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

57 How much style complexity
 is in our libraries?

Slide 58

Slide 58 text

58 6 Libraries, Lots of Not-Yet-Processed CSS Material Design Lite Bootstrap ZURB Founda?on Salesforce Lightning Discovery Comet NetApp LUCI

Slide 59

Slide 59 text

59 6 Systems, 11,500+ CSS Declara8ons

Slide 60

Slide 60 text

60

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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?

Slide 63

Slide 63 text

63 Let’s make a grid. We’re done! Right?

Slide 64

Slide 64 text

64 Space and the Magic Number(s)

Slide 65

Slide 65 text

65 Scale Op8ons Nonlinearly a, ar, ar2 , ar3 , ar4 , ar5 LINEAR GEOMETRIC PROGRESSION

Slide 66

Slide 66 text

66 Name Stops Memorably 1x 2x 3x 1/2x 1/4x 1/8x

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

71 Inset CARD ERROR MESSAGE PILL ICON BUTTON

Slide 72

Slide 72 text

72 Inset Squish BUTTON DATA TABLE LIST GROUP 50% top & bo?om inset

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

76 With Space Solved, Revisit Grid Grid Margin Grid Gutter 32 64 64 32 16 16 8 8 Comfortable Luxurious Default Compact

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

78 Offer Spacer “Helpers” but Monitor Use CONCEPTS HELPERS

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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!

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

82 medium.com/eightshapes-llc

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

Thanks! @nathanacur8s @nathanacur8s