SlideShare a Scribd company logo
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
Profilmanual
Statisk PDF med retningslinjer
Inkonsistens
Mangler designsystem
Automatisk komponentbibliotek
Integrert del av plattform
Levende designsystem
Forvaltet, integrert del av organisasjonen
Manuell stilguide
Designbibliotek med kodeeksempler
KLP Design System
Hva
Hva kan jeg lage?
Hvordan
Hvordan lager jeg det?
Hvorfor
En overordnet beskrivelse av
rasjonalet bak Hva og Hvordan
Brand
Visuelt
formspråk
Design
CSS + doc
Komponent
React
Hva Hvordan
Prosjekt
Prosjekt Prosjekt
Prosjekt
Hvorfor
LEGO Police Command Base (1988)
Politibetjent,
motorsykkel
Hjelm
Hode
Hofte
Bein
Skinnjakke
Hender
Armer
Politibetjent,
motorsykkel
Politimester
Hjelm Lue
Hode
Hofte
Bein
Hender
Armer
Skinnjakke Uniformsjakke
Block Element Modifier
/* Block */
.btn {}
/* Element (children) */
.btn__price {}
.btn__text {}
/* Modifiers */
.btn--orange {}
.btn--green {}
.btn--big {}
.btn--small {}
<a class="btn btn--big btn--orange" href="#">
<span class="btn__price">$9.99</span>
<span class="btn__text">Subscribe</span>
</a>
<a class="btn btn--small btn--green" href="#">
<span class="btn__price">$10.49</span>
<span class="btn__text">Buy now!</span>
</a>
Atomic Design
Atomer Molekyler Organismer Maler Sider
CSS?
Markdown
Markdown Komponenter
+
Levende
dokumentasjon
=
Eat your own dog food!
Versjonering
Prosjekt
Prosjekt Prosjekt
Prosjekt
Latest4.0.0
Latest 3.9.0
Latest
4.0.0
3.9.5
3.9.0
...
.klp-block__element--modifier
Design Tokens
XML (Android)JSON (iOS)SCSS (Web)
Theo
border-radius.yml
global:
type: size
category: radius
cssProperties:
- 'border*radius'
props:
BORDER_RADIUS_SMALL:
value: .125rem
cssProperties:
- 'border*radius'
BORDER_RADIUS_MEDIUM:
value: .25rem
comment: 'Icons in lists, ...'
BORDER_RADIUS_LARGE:
value: .5rem
cssProperties:
- 'border*radius'
BORDER_RADIUS_PILL:
value: 15rem
cssProperties:
- 'border*radius'
BORDER_RADIUS_CIRCLE:
value: '50%'
comment: 'Circle for global use, ...'
WEB
Token
Data
(JSON)
Variabler
(Stylus)
Variabler
(LESS)
Variabler
(Sass)
ANDROID
Token
Data
(XML)
Token
Data
(YAML)
Design
Decisions
System
Docs
IOS
Team-modell
Isolert Sentralisert Forent
Designbibliotek
Komponentbibliotek
TeamTeam
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
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.”
Et hjem
www
Gi produktet et navn
Gel, Glue, Comet, Material Design, Clarity, Lightning DS
Tagline
“UX guidelines, HTML/CSS framework, and Angular 2
components working together to craft exceptional
experiences”
Roadmap
Hva kan brukerne forvente, og når?
Kontakt
Support, dialog, bidrag
Hva får du?
Designere vs utviklere
How to
Installasjon, kom i gang
Alexander Perry
@perry_
Ronny Siikaluoma
@siiron
Takk!

More Related Content

Featured

How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
Christy Abraham Joy
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
Alireza Esmikhani
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
Project for Public Spaces & National Center for Biking and Walking
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
Erica Santiago
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Saba Software
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
Simplilearn
 

Featured (20)

How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
 

Levende designsystemer enhetlige brukeropplevelser i digitale økosystemer