+ - 0:00:00
Notes for current slide
Notes for next slide

Escape the "zombie styleguides"


3 methods to arm yourself
and defeat them


Thibault Mahé

1

About



"I build design systems
for startups and larger companies."

2

The entropy of the production

production curve
Patch + patch + patch + patch + ...

3

Design system

A set of interconnected patterns and shared practices coherently organized to meet a specific strategy


  • Visual consistency and shared vocabulary for an easier communication
  • Fast testing and prototyping
  • More methodical and modular workflow

4

Zombie Styleguide

styleguide curve
Entropy always "infects" a static styleguide

5

Zombie Styleguide

A "zombie styleguide" (Jina Bolton) is an
"abandoned" styleguide, half-living half-dead.

6

Zombie Styleguide

design system curve
A design system is a process that constantly takes control over the growth of the entropy

7

Fight the zombie styleguide

8

1. Align the team around a strategy

9

Systems

design system foundation

"A system is an interconnected set of elements that is coherently organized in a way that achieves something."

Donella Meadows

10

Systems


A system is made of:

  • elements,
  • interconnections,
  • a function.


The digestive system

11

Strategies

design system foundation

Zurb Foundation

design system IBM

IBM

design system intuit

Intuit

design system mailchimp

MailChimp
12

Strategies

design system foundation

A world's toolkit Prototyping efficiently - ∞ teams / products

design system IBM

An Enterprise's language Consistency and collaboration - 100 teams / products

design system intuit

A portfolio's guide Consistency and collaboration - 10 teams / products

design system mailchimp

A Team's playbook Efficiency - 1 team / product
13

The elements of User Experience

the 5 planes of UX

  • Surface: the visual product
  • Skeleton: optimizing the arrangements of the elements
  • Structure: how to find the information
  • Scope: features
  • Strategy: goals and users needs

From Jesse James Garrett
"Elements of the User Experience"

14

The elements of User Experience

the 5 planes of UX

ripple effect

From Jesse James Garrett
"Elements of the User Experience"

15

"A Design System isn’t a Project.
It’s a Product, Serving Products."

Nathan Curtis

16

Designing a product

the value proposition book

17

Value Proposition Design

the value proposition canvas Screenshot from Alex Osterwalder's
"Value Proposition Design"

18

canvas done

19

Identify the users

Agathe

Front-end dev
  • Well organized
  • Scatterbrain

Vincent

Front-end dev
  • Conscientious
  • Go-getter

Dominique

Freelance
  • Hard worker
  • Snowed under

Gilles

Intern
  • Motivated
  • Inexperienced
20

Identify the users

Iberibaen

UI Designer
  • Accessible
  • Meticulous

Marine

Back-end dev
  • Concerned
  • Solitary

Guillaume

Back-end dev
  • Curious
  • Focused

Constance

Product owner
  • Empathic
  • Impatient
21

Segmentation

22

canvas done

23

Proposition Value Canvas: the "customer jobs"

24

Proposition Value Canvas: the "pains" / "fears"

25

Proposition Value Canvas: the "gains" / "dreams"

26

canvas done

27

Keypoints


  1. Identify and "segment" the users
  2. Get a canvas, some post-its and some pencils
  3. Lead the workshop for every segment
  4. Gather the tasks, fears and dreams
  5. Prioritize the post-its
  6. Synthesize and share results
28

Benefits


  • Involving and aligning the whole team encourage the product's adoption
  • Gather all the needs to define a proper strategy and make yours the design system
  • Foster the debates and discussions about the subject
  • "Recreational"
29

2. Identify the system as a team

30

Design system

design system foundation

"A system is an interconnected set of elements that is coherently organized in a way that achieves something."

Donella Meadows

31

Toward a new metaphor: Lego


Screenshot from Brad Frost's "Atomic Design"

32

Toward a new metaphor: the industrial process


Screenshot from Stephen Kieran & James Timberlake's "Refabricating ARCHITECTURE"

33

Toward a new metaphor: the Music

34

Toward a new metaphor: the Language


Screenshot from Marcin Treder's article
"Design Systems Are a Language. Product Is a Conversation"

35

Toward a new metaphor: the Chemistry


Screenshot from Brad Frost's "Atomic Design"

36

Toward a new metaphor

Why using metaphors?

  • For educational and evangelisation purpose
  • For facilitating the definition of the sub-elements
37

Toward a new metaphor

38

The interface inventory


"An interface inventory is a comprehensive collection of the bits and pieces that make up your interface."

Brad Frost

39

The interface inventory

Brad frost interface inventory

Charlotte Jackson interface inventory

The screenshot approach from Brad Frost

The paper and scissors approach from Charlotte Jackson

40

The interface inventory

interface inventory

41

The interface inventory

interface inventory

42

The interface inventory

interface inventory

43

The interface inventory

interface inventory

44

The interface inventory

interface inventory

45

Code preview

code preview


  • Identify the potential issues
  • Share ideas and synchronize consistency
  • Reach an agreement on technical approach
  • Save time for the code reviews
  • Help onboarding new developers
46

Keypoints


  1. Gather the team
  2. Divide the interfaces into suggested patterns
  3. Group patterns and categorize each group
  4. Label and describe the patterns
  5. Align the team on the technical approach
  6. Prioritize the patterns


Brad Frost's template:
tinyurl.com/brad-frost-template

47

Benefits


  • Kickoff the design library by engaging the whole team
  • Check system consistency
  • Define and discuss the "shared vocabulary", ie. components' names and categories
  • Reach an agreement on the technical approach and identify the potential issues
  • Recreational too!
48

3. Involve the whole team in the building

49

Design system's issues


Assets and design "basis" are often still
managed locally and not at the system scale.

50

Design system's issues

  • Too wide range of unique... :
    • font sizes
    • colors
    • margin and padding sizes
    • media queries
    • border radiuses
    • ...

51

Design tokens


www.lightningdesignsystem.com

52

Design tokens

53

Design tokens


"Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values [...] in order to maintain a scalable and consistent visual system for UI development."



– Salesforce

54

Design tokens

Design tokens are...


  • stored
  • organized
  • centralized
  • propagated


visual design attributes...

...aiming for:


  • communication
  • consistency
  • reusability
  • maintainability (collaboration)
55

Organized

What can I do?
Every design system offers options.
Options are visual identity properties.


# Colors options
# ---------------------
blue-base: '#2b7de8'
blue-deep: '#38bfea'
blue-dark: '#3239e8'
grey10: '#262729'
grey20: '#313131'
grey30: '#4d4d4d'
grey40: '#888'
grey50: '#aeaeae'
grey60: '#ccc'
grey70: '#eaeaea'
grey80: '#f4f4f4'
56

Organized

What can I do?
Every design system offers options.
Options are visual identity properties.


# Colors options
# ---------------------
blue-base: '#2b7de8'
blue-deep: '#38bfea'
blue-dark: '#3239e8'
grey10: '#262729'
grey20: '#313131'
grey30: '#4d4d4d'
grey40: '#888'
grey50: '#aeaeae'
grey60: '#ccc'
grey70: '#eaeaea'
grey80: '#f4f4f4'

What choice do I make?
Design systems submit decisions.
Decisions are options applied to contexts.


# Colors decisions
# ---------------
# global
primary-color: $blue-base
text-color: $grey30
body-background: $white
# objects
navbar-link-text-color: $white
headband-color: $blue-base
hr-color: $grey40
57

Centralized


  • Stylesheets are "decisions propagated through a system" (Nathan Curtis)


// Design specifications
// ----------------------
.c-button {
  display: inline-block;
  font-size: $button-font-size-default;
  padding: $space-m;
  color: $text-color;
  background-color: $white;
  border-radius: $button-border-radius-default;
}
.c-button--primary {
  background-color: $primary-color;
  color: $white;
}
58

Centralized

At the root of the files system

Legible & editable
by anyone 

# Typography
font-family:
  base: 'Lato, Helvetica'
  heading: 'Montserrat, Helvetica'
font-size:
  xs: 8px
  s: 16px
  m: 20px
  l: 28px
  xl: 32px
  xxl: 40px
font-weight:
  light: 300
  regular: 400
  medium: 500
  bold: 700

Opened to everyone to foster
collaboration and maintainability

59

Propagated

Tokens are compiled with a task runner 

// Compile Design tokens
// -----------------------
gulp.task('build-token', function() {
  return gulp.src([paths.designTokens.files])
    // transform tokens from yaml into json
    .pipe(yaml())
    // store json
    .pipe(gulp.dest(paths.designTokens.jsonOutputFolder))
    // transform tokens from json into scss
    .pipe(jsonSass({
      delim: '-',
    }))
    // store to output folder
    .pipe(gulp.dest(paths.designTokens.outputFolder));
});

Json output

{
  "font-family": {
    "base":"Lato, Helvetica",
    "heading":"Montserrat, Helvetica"
  },
  "font-size": {
    "xs":"8px",
    "s":"16px",
    "m":"20px",
    "l":"28px",
    "xl":"32px",
    "xxl":"40px"
  },
  "font-weight": {
    "light":300,
    "regular":400,
    "medium":500,
    "bold":700
  }
}

Sass output

$font-family-base: Lato, Helvetica;
$font-family-heading: Montserrat, Helvetica;
$font-size-xs: 8px;
$font-size-s: 16px;
$font-size-m: 20px;
$font-size-l: 28px;
$font-size-xl: 32px;
$font-size-xxl: 40px;
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;
60

Synchronization and automation

61

Synchronization and automation


How the Comet design system present its option tokens.

62

Going further

Can our "decision" tokens match our actual decision approach?


"Object-oriented CSS"

// Button definition
// ----------------------
.c-button {
  display: inline-block;
  font-size: $font-size-m;
  padding: $space-m;
  color: $text-color;
  background-color: $white;
  border-radius: $border-radius-base;
  &--primary {
    background-color: $primary-color;
    color: $white;
  }
}

"Functional CSS"

// "Pure" CSS classes
// ----------------------
.u-bg-white { background: $white; }
.u-bg-grey { background: $grey; }
.u-bg-primary { background: $color-primary; }
.u-bg-secondary { background: $color-secondary; }
.u-white { color: $white; }
.u-grey { color: $grey4;}
.u-primary { color: $brand-primary; }
.u-secondary { color: $brand-secondary; }
.u-tertiary { color: $brand-tertiary; }
.u-inline-center { text-align: center; }
.u-inline-right { text-align: right; }
.u-inline-left { text-align: left; }
63

Going further


Classes could be compiled from tokens

// Compile Utility tokens
// ----------------------
gulp.task('build-utilities', function() {
  return gulp.src(paths.designUtilities.files)
    // transform tokens from yaml into json
    .pipe(yaml())
    // store json
    .pipe(gulp.dest(paths.designUtilities.jsonOutputFolder))
    // transform tokens from json into scss
    .pipe(jsonSassUtilities())
    // store to output folder
    .pipe(gulp.dest(paths.designTokens.outputFolder));
});

Input

position:
  relative: relative
background-color:
  bg-blue: *blue
  bg-green: *green

Output

.u-relative{ position: relative; }
.u-bg-blue{ background-color: $blue; }
.u-bg-green{ background-color: $green; }
64

Keypoints


  1. Identify the "visual atoms" of the system
  2. Store them in a data format (yml)
  3. Create a generating and propagating process
  4. Start to write the design specs with tokens
  5. Open the files to everyone and promote
65

Benefits


  • Collaboration: empowers non-developers to engage with code with a more human-readable language
  • Maintenance: living documentation, technology-agnostic tokens, and less hardcoded-values
  • Naming: "shared vocabulary" on the tokens too
  • Opportunities to synchronize and extend the system into designer tools (Sketch, Brand.ai, ...)
66

Trying to escape the zombie styleguide...

67

Escape the zombie styleguide

68

Escape the zombie styleguide

"Start with why" Simon Sinek

69

Thanks


@tibomahe

thibault.mahe.io/talks/escape-zombie-styleguides

70

Photo credits


Lego Star Wars chased by Zombie, by hoeynairda via Flickr

Lego zombie, by hoeynairda via Flickr

Wake up sunshine, by Foolish Lego via Flickr

Zombies!, by Michael Doak, via Flickr

Hazardous, by Kyle Hardisty, via Flickr

Apocalypse Commando, by Ma₪go, via Flickr

71

About



"I build design systems
for startups and larger companies."

2
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow