A presentation at Yggdrasil 2017 in in Sandefjord, Norway by Ronny Siikaluoma
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
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:
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
By systematically addressing design challenges, you can ensure that the user experience becomes comprehensive and robust. By combining a well-documented style guide, web components and a visual design language, you can create a common hub that works for designers, developers and content producers.
Here’s what was said about this presentation on social media.
for free. You
can too.