Living Design Systems: Cohesive User Experience in Digital Ecosystems

A presentation at Yggdrasil 2017 in April 2017 in Sandefjord, Norway by Ronny Siikaluoma

Slide 1

Slide 1

Levende designsystemer Enhetlige brukeropplevelser i digitale økosystemer

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

Modenhet i designsystemer

Slide 6

Slide 6

Marcelo Somers @marcelosomers John Gully @johngully

Slide 7

Slide 7

Inkonsistens

Slide 8

Slide 8

Profilmanual

Slide 9

Slide 9

Manuell stilguide “Zombie stilguide”

Slide 10

Slide 10

Automatisk komponentbibliotek

Slide 11

Slide 11

Levende designsystem

Slide 12

Slide 12

Levende designsystem Forvaltet, integrert del av organisasjonen Automatisk komponentbibliotek Integrert del av plattform Manuell stilguide Designbibliotek med kodeeksempler Profilmanual Statisk PDF med retningslinjer Inkonsistens Mangler designsystem

Slide 13

Slide 13

Slide 14

Slide 14

KLP Design System

Slide 15

Slide 15

Hva Hva kan jeg lage?

Slide 16

Slide 16

Hvordan Hvordan lager jeg det?

Slide 17

Slide 17

Hvorfor En overordnet beskrivelse av rasjonalet bak Hva og Hvordan

Slide 18

Slide 18

Prosjekt Prosjekt Brand Visuelt Hvorfor formspråk Prosjekt Prosjekt Design Hva CSS + doc Komponent Hvordan React

Slide 19

Slide 19

LEGO Police Command Base (1988)

Slide 20

Slide 20

Slide 21

Slide 21

Hjelm Hode Skinnjakke Armer Hender Hofte Bein Politibetjent, motorsykkel

Slide 22

Slide 22

Hjelm Lue Hode Skinnjakke Uniformsjakke Armer Hender Hofte Bein Politibetjent, motorsykkel Politimester

Slide 23

Slide 23

Block Element Modifier

Slide 24

Slide 24

/* Block / .btn {} <a class=”btn btn—big btn—orange” href=”#”> <span class=”btn__price”>$9.99</span> / Element (children) / .btn__price {} <span class=”btn__text”>Subscribe</span> </a> .btn__text {} / Modifiers */ .btn—orange {} <a class=”btn btn—small btn—green” href=”#”> .btn—green {} <span class=”btn__price”>$10.49</span> .btn—big {} <span class=”btn__text”>Buy now!</span> .btn—small {} </a>

Slide 25

Slide 25

Atomic Design

Slide 26

Slide 26

Atomer Molekyler Organismer Maler Sider

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

CSS?

Slide 32

Slide 32

Slide 33

Slide 33

Slide 34

Slide 34

Markdown

Slide 35

Slide 35

  • Markdown = Komponenter Levende dokumentasjon

Slide 36

Slide 36

Slide 37

Slide 37

Eat your own dog food!

Slide 38

Slide 38

Versjonering

Slide 39

Slide 39

Prosjekt Prosjekt 4.0.0 Latest Prosjekt Latest Prosjekt Latest 4.0.0 3.9.5 3.9.0 … 3.9.0

Slide 40

Slide 40

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

Slide 46

Slide 46

Slide 47

Slide 47

Slide 48

Slide 48

Slide 49

Slide 49

.klp-block__element—modifier

Slide 50

Slide 50

Slide 51

Slide 51

Design Tokens

Slide 52

Slide 52

Slide 53

Slide 53

Slide 54

Slide 54

SCSS (Web) JSON (iOS) XML (Android)

Slide 55

Slide 55

Theo

Slide 56

Slide 56

border-radius.yml global: BORDER_RADIUS_LARGE: type: size value: .5rem category: radius cssProperties: cssProperties:

  • ‘border*radius’
  • ‘border*radius’ props: BORDER_RADIUS_SMALL: BORDER_RADIUS_PILL: value: 15rem cssProperties: value: .125rem
  • ‘border*radius’ cssProperties: BORDER_RADIUS_CIRCLE:
  • ‘border*radius’ BORDER_RADIUS_MEDIUM: value: .25rem comment: ‘Icons in lists, …’ value: ‘50%’ comment: ‘Circle for global use, …’

Slide 57

Slide 57

System Docs Variabler (Sass) IOS Design Decisions Token Data (YAML) Token Data (JSON) Variabler (LESS) WEB Variabler (Stylus) Token Data (XML) ANDROID

Slide 58

Slide 58

Team-modell

Slide 59

Slide 59

Isolert Sentralisert Forent

Slide 60

Slide 60

Designbibliotek Team Team Komponentbibliotek

Slide 61

Slide 61

Produkt - ikke prosjekt

Slide 62

Slide 62

Nathan Curtis @nathancurtis A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.

Slide 63

Slide 63

Produkt - ikke prosjekt Gi produktet et navn Hva får du? Et hjem How to Tagline Kontakt Unique Selling Points “With Comet, Discovery Education can collaborate better, gain efficiencies, and ultimately produce a more cohesive, higher quality, scalable experience across the product portfolio.” Roadmap Gel, Glue, Comet, Material Design, Clarity, Lightning DS www “UX guidelines, HTML/CSS framework, and Angular 2 components working together to craft exceptional experiences” Designere vs utviklere Installasjon, kom i gang Support, dialog, bidrag Hva kan brukerne forvente, og når?

Slide 64

Slide 64

Takk! Alexander Perry @perry_ Ronny Siikaluoma @siiron