Levende designsystemer Enhetlige brukeropplevelser i digitale økosystemer

Modenhet i designsystemer

Marcelo Somers @marcelosomers John Gully @johngully

Inkonsistens

Profilmanual

Manuell stilguide “Zombie stilguide”

Automatisk komponentbibliotek

Levende designsystem

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

KLP Design System

Hva Hva kan jeg lage?

Hvordan Hvordan lager jeg det?

Hvorfor En overordnet beskrivelse av rasjonalet bak Hva og Hvordan

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

LEGO Police Command Base (1988)

Hjelm Hode Skinnjakke Armer Hender Hofte Bein Politibetjent, motorsykkel

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

Block Element Modifier

/* 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>

Atomic Design

Atomer Molekyler Organismer Maler Sider

CSS?

Markdown

  • Markdown = Komponenter Levende dokumentasjon

Eat your own dog food!

Versjonering

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

.klp-block__element—modifier

Design Tokens

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

Theo

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, …’

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

Team-modell

Isolert Sentralisert Forent

Designbibliotek Team Team Komponentbibliotek

Produkt - ikke prosjekt

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.

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?

Takk! Alexander Perry @perry_ Ronny Siikaluoma @siiron