Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
KODE FOR DESIGNERE YGGDRASILKONFERANSEN 2017
Å bytte hjul på
et tog i fart
Eirik Backer, NRK
Fagansvarlig grensesnittutvik...
OVER
90 MILLIONER
SESJONER
ET SETT LOVER OG
REGLER SETTER
RAMMENE FOR
NRKS VIRKSOMHET
“
#1 CSS = VANSKELIG
Tekst
Tekst
BLOCK FLOAT INLINE
Tekst
som en
lenke
Tekst
Tekst
POSITION
Tekst
left
top
INLINE-BLOCK
Tekst Tekst
mellomrom
d...
CASCADING STYLESHEETS
TILGIVENDE SYNTAKS
IKKE EKSPRESSIVT
SPECIFICITY
GOTCHAS
web = open source word
Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis.
Aliquam...
Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a.
Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam...
Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a.
Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam...
Pellentesque euismod purus est, vitae auctor ipsum
ullamcorper a. Phasellus ma is nisl ac arcu ultrices
venenatis. Aliquam...
Pellentesque euismod purus est, vitae auctor ipsum
ullamcorper a. Phasellus ma is nisl ac arcu ultrices
venenatis. Aliquam...
BEST PRACTICE
ANTI-PATTERNS
NÅR VI BRUKER MYE TID
PÅ Å UTVIKLE ET PRODUKT,
KAN PRODUKTET I SEG SELV
BLI VIKTIGERE
ENN HVA DET LØSER
#2 TID = KOMPLEKSITET
HVILKEN REKKEFØLGE
SKRIVER DU DIN CSS?
HVILKEN REKKEFØLGE
SKRIVER DU DIN CSS?
ETTER LAYOUT?
HVILKEN REKKEFØLGE
SKRIVER DU DIN CSS?
ETTER LAYOUT?
ETTER KOMPONENTER?
PROSJEKT.CSS
SPECIFICITY
GRAPH
– Harry Roberts
h ps://jonassebastianohlsson.com/specificity-graph/ nrk.no
h ps://jonassebastianohlsson.com/specificity-graph/
#container> .group-reference.sAUTO > .group > .group-reference.s18 > .g...
#3 KOMMUNIKASJON
METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM
1
3METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM
6METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM
10METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM
15METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM
HVA SKJER
NÅR SYSTEMET
FÅR 48 ENHETER?
1128METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM
UHELDIGVIS ER IKKE
STRUKTUR MELLOM
MENNESKER LIKE
VELORGANISERT
LINEÆR VS. EKSPONENSIELL KOMPLEKSITET
ENHETER
KOMPLEKSITET
ORDEN OG REDUSERT
KOMPLEKSITET KOMMER
MED EN KOST.
ORDEN OG REDUSERT
KOMPLEKSITET KOMMER
MED EN KOST.
DU MÅ DEFINERE ORDEN.
ORDEN OG REDUSERT
KOMPLEKSITET KOMMER
MED EN KOST.
DU MÅ DEFINERE ORDEN.
OG DET ER VANSKELIG.
LA OSS SI PROOF OF CONCEPT
TAR 2 TIMER OG PRODUKT FOR
SLUTTBRUKER TAR 2 UKER
LINEÆR VS. EKSPONENSIELL KOMPLEKSITET
ENHETER
KOMPLEKSITET
LINEÆR VS. EKSPONENSIELL KOMPLEKSITET
ENHETER
KOMPLEKSITET
#4 INNHOLD
HVA ER SYSTEMET?
ER DET KODEN?
.nrk-xs-1of12 {width:8.33333%}
.nrk-xs-2of12 {width:16.6666%}
.nrk-xs-3of12 {width:25%}
.nrk-xs-4of12 {width...
ER DET EN STILGUIDE?
ER DET EN LEVEDE STILGUIDE?
“We did it! We launched a guide.
Mission accomplished.”
bit.ly/8s-system-is-product
ELLER ER DET NOE MER ENN
GUIDEN I SEG SELV?
A DESIGN SYSTEM
ISN’T A PROJECT.
IT’S A PRODUCT,
SERVING PRODUCTS.
– Nathan Curtis
NRK ER IKKE GOOGLE
1.TRY
1.TRY 2.FAIL
1.TRY 2.FAIL 3.COLLAPSE
1.TRY 2.FAIL 3.COLLAPSE 4.SOB
nrk.no
tv.nrk.no
nrksuper.no
yr.no
radio.nrk.no
nrk.no
tv.nrk.no
nrksuper.no
yr.no
radio.nrk.no
<div class="nrk-grid">
<div class="nrk-xs-1of12">1</div>
<div class="nrk-xs-2of12">2</div>
<div class="nrk-xs-3of12">3</di...
... you get a CSS!
and you ... and you ...
and you, and you ...
#1 PRINSIPP:
IKKE BREKKE NOE
.nrk-grid
.nrk-button
.nrk-button--o
.nrk-pagination
.nrk-fade
.nrk-sr
.nrk-sr-focus
.nrk-color-base
.nrk-color-spot
.nrk-...
#2 PRINSIPP:
BAKOVER KOMPATIBEL
/* Grid and sizing
---------------------------------------------------------------- */
.nrk-grid.nrk-grid { /* Double sele...
A B
.nrk-grid
C D
E
<div class="nrk-grid"> .
<div class="nrk-xs-1of12">1</div>
<div class="nrk-xs-2of12">2</div>
</div>
A B
.nrk-grid
C D
E mellomrom
A B
.nrk-grid
C
D Emellomrom
/* Grid and sizing
---------------------------------------------------------------- */
.nrk-grid.nrk-grid { /* Double sele...
#3 PRINSIPP:
EKSPRESSIV
NAVNGIVNING
class="nrk-xs-12of12"
class="nrk-xs-12of12 "nrk-md-6of12
class="nrk-xs-12of12 "nrk-md-6of12 nrk-lg-3of12
class="nrk-xs-12of12 "nrk-md-6of12
class="nrk-xs-12of12"
Din NRK-profil
.my-component {
@extend %grid;
}
.my-component__item {
@extend %grid-item;
@extend %one-halve;
@extend %one-quater--medium...
<div class="my-component">
<div class="my-component__item">
...
</div>
</div>
VS
<div class="my-component">
<div class="nr...
<ul class="listobject-list clear">
<li class="listobject">
<a href="#" class="listobject-link">
<div class="aspect-ratio-w...
nrk.notv.nrk.no
<ul class="nrk-grid">
<li class="nrk-xs-12of12 nrk-md-6of12">
<a class="tv-plug" href="#">
<div class="asp...
#4 PRINSIPP:
TILPASNINGSDYKTIG
.nrk-button::-moz-focus-inner { border: 0; padding: 0 } /* Reset Firefox */
.nrk-button {
-webkit-appearance: none; /* Res...
.nrk-button::-moz-focus-inner { border: 0; padding: 0 } /* Reset Firefox */
.nrk-button {
-webkit-appearance: none; /* Res...
.nrk-button::-moz-focus-inner { border: 0; padding: 0 } /* Reset Firefox */
.nrk-button {
-webkit-appearance: none; /* Res...
.nrk-button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: .4;
border: inherit;
...
.nrk-button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: .4;
border: inherit;
...
#5 PRINSIPP:
FORUTSIGBAR
.nrk-color-base { color: #26292a; background-color: #fff }
.nrk-color-spot { color: #26292a; background-color: #00b9f2 }
....
@font-face { font-family: 'NRK Etica Slab'; font-weight: 700; font-style: normal; ... }
@font-face { font-family: 'NRK Eti...
body { font-family: "Comic Sans" }
.nrk-button::-moz-focus-inner { border: 0; padding: 0 } /* Reset Firefox */
.nrk-button {
-webkit-appearance: none; /* Res...
#6 PRINSIPP:
KOGNITIV OG
TEKNISK YTELSE
.nrk-xs-100 {
width: 100vw;
margin-left: calc(50% - 50vw);
}
.nrk-xs-80?
.nrk-xs-100
.nrk-xs-10of12
Will the user notice an extra 2px? Unlikely.
Will the user notice the website ge ing
slower because we have an unnecessary...
#7 PRINSIPP:
ÅPENT OG ENKELT
A DESIGN SYSTEM’S VALUE IS
REALIZED WHEN PRODUCTS
SHIP FEATURES USING PARTS
FROM THE SYSTEM.
– Nathan Curtis
<link rel="stylesheet" href="https://static.nrk.no/bjartmar/1.0.0/nrk-style.css">
bit.ly/8s-system-team-models
FAQ
Hva kommer til å endre seg?
Skal de e open-sources?
Hva med et bedre navn?
BJARTMAR.CSS
NRK.NO TV RADIO YR P3 SUPER
NRKS DESIGNPROGRAM
Styleguide Styleguide Styleguide Styleguide Styleguide Stylegu...
.tv-navbar li:hover,
.tv-navbar li.is-active { color: #66d1f2; border-color: currentColor }
.tv-navbar--small { padding-bo...
Q&A
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Prochain SlideShare
Chargement dans…5
×

Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer

1 308 vues

Publié le

Eirik Backers presentasjon på Yggdrasil 2017, 4. april 2017.

Publié dans : Design
  • Soyez le premier à commenter

Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer

  1. 1. KODE FOR DESIGNERE YGGDRASILKONFERANSEN 2017 Å bytte hjul på et tog i fart Eirik Backer, NRK Fagansvarlig grensesnittutvikling
  2. 2. OVER 90 MILLIONER SESJONER
  3. 3. ET SETT LOVER OG REGLER SETTER RAMMENE FOR NRKS VIRKSOMHET “
  4. 4. #1 CSS = VANSKELIG
  5. 5. Tekst Tekst BLOCK FLOAT INLINE Tekst som en lenke Tekst Tekst POSITION Tekst left top INLINE-BLOCK Tekst Tekst mellomrom display: none; display: inline; display: block; display: inline-block; display: contents; display: list-item; display: inline-list-item; display: table; display: inline-table; display: table-cell; display: table-column; display: table-column-group; display: table-footer-group; display: table-header-group; display: table-row; display: table-row-group; display: table-caption; display: flex; display: inline-flex; display: grid; display: inline-grid; display: ruby; display: ruby-base; display: ruby-text; display: ruby-base-container; display: ruby-text-container; display: run-in; float: left; float: right; position: absolute; position: relative; position: static; position: sticky; position: fixed; FLEX
  6. 6. CASCADING STYLESHEETS TILGIVENDE SYNTAKS IKKE EKSPRESSIVT SPECIFICITY GOTCHAS
  7. 7. web = open source word
  8. 8. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique.
  9. 9. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio, aliquet nec urna ac Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vita aliquam ligula. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique.
  10. 10. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique.
  11. 11. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna.
  12. 12. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna.
  13. 13. BEST PRACTICE ANTI-PATTERNS
  14. 14. NÅR VI BRUKER MYE TID PÅ Å UTVIKLE ET PRODUKT, KAN PRODUKTET I SEG SELV BLI VIKTIGERE ENN HVA DET LØSER
  15. 15. #2 TID = KOMPLEKSITET
  16. 16. HVILKEN REKKEFØLGE SKRIVER DU DIN CSS?
  17. 17. HVILKEN REKKEFØLGE SKRIVER DU DIN CSS? ETTER LAYOUT?
  18. 18. HVILKEN REKKEFØLGE SKRIVER DU DIN CSS? ETTER LAYOUT? ETTER KOMPONENTER?
  19. 19. PROSJEKT.CSS
  20. 20. SPECIFICITY GRAPH – Harry Roberts
  21. 21. h ps://jonassebastianohlsson.com/specificity-graph/ nrk.no
  22. 22. h ps://jonassebastianohlsson.com/specificity-graph/ #container> .group-reference.sAUTO > .group > .group-reference.s18 > .group nrk.no
  23. 23. #3 KOMMUNIKASJON
  24. 24. METCALFES LOV: KOMPLEKSITET VOKSER PROPORSJONALT MED KVADRATET AV ANTALL ENHETER I ET SYSTEM 1
  25. 25. 3METCALFES LOV: KOMPLEKSITET VOKSER PROPORSJONALT MED KVADRATET AV ANTALL ENHETER I ET SYSTEM
  26. 26. 6METCALFES LOV: KOMPLEKSITET VOKSER PROPORSJONALT MED KVADRATET AV ANTALL ENHETER I ET SYSTEM
  27. 27. 10METCALFES LOV: KOMPLEKSITET VOKSER PROPORSJONALT MED KVADRATET AV ANTALL ENHETER I ET SYSTEM
  28. 28. 15METCALFES LOV: KOMPLEKSITET VOKSER PROPORSJONALT MED KVADRATET AV ANTALL ENHETER I ET SYSTEM
  29. 29. HVA SKJER NÅR SYSTEMET FÅR 48 ENHETER?
  30. 30. 1128METCALFES LOV: KOMPLEKSITET VOKSER PROPORSJONALT MED KVADRATET AV ANTALL ENHETER I ET SYSTEM
  31. 31. UHELDIGVIS ER IKKE STRUKTUR MELLOM MENNESKER LIKE VELORGANISERT
  32. 32. LINEÆR VS. EKSPONENSIELL KOMPLEKSITET ENHETER KOMPLEKSITET
  33. 33. ORDEN OG REDUSERT KOMPLEKSITET KOMMER MED EN KOST.
  34. 34. ORDEN OG REDUSERT KOMPLEKSITET KOMMER MED EN KOST. DU MÅ DEFINERE ORDEN.
  35. 35. ORDEN OG REDUSERT KOMPLEKSITET KOMMER MED EN KOST. DU MÅ DEFINERE ORDEN. OG DET ER VANSKELIG.
  36. 36. LA OSS SI PROOF OF CONCEPT TAR 2 TIMER OG PRODUKT FOR SLUTTBRUKER TAR 2 UKER
  37. 37. LINEÆR VS. EKSPONENSIELL KOMPLEKSITET ENHETER KOMPLEKSITET
  38. 38. LINEÆR VS. EKSPONENSIELL KOMPLEKSITET ENHETER KOMPLEKSITET
  39. 39. #4 INNHOLD
  40. 40. HVA ER SYSTEMET?
  41. 41. ER DET KODEN? .nrk-xs-1of12 {width:8.33333%} .nrk-xs-2of12 {width:16.6666%} .nrk-xs-3of12 {width:25%} .nrk-xs-4of12 {width:33.3333%} .nrk-xs-5of12 {width:41.6666%} .nrk-xs-6of12 {width:50%} .nrk-xs-7of12 {width:58.3333%} .nrk-xs-8of12 {width:66.6666%} .nrk-xs-9of12 {width:75%} .nrk-xs-10of12{width:83.3333%} .nrk-xs-11of12{width:91.6666%} .nrk-xs-12of12{width:100%}
  42. 42. ER DET EN STILGUIDE?
  43. 43. ER DET EN LEVEDE STILGUIDE?
  44. 44. “We did it! We launched a guide. Mission accomplished.” bit.ly/8s-system-is-product
  45. 45. ELLER ER DET NOE MER ENN GUIDEN I SEG SELV?
  46. 46. A DESIGN SYSTEM ISN’T A PROJECT. IT’S A PRODUCT, SERVING PRODUCTS. – Nathan Curtis
  47. 47. NRK ER IKKE GOOGLE
  48. 48. 1.TRY
  49. 49. 1.TRY 2.FAIL
  50. 50. 1.TRY 2.FAIL 3.COLLAPSE
  51. 51. 1.TRY 2.FAIL 3.COLLAPSE 4.SOB
  52. 52. nrk.no tv.nrk.no nrksuper.no yr.no radio.nrk.no
  53. 53. nrk.no tv.nrk.no nrksuper.no yr.no radio.nrk.no
  54. 54. <div class="nrk-grid"> <div class="nrk-xs-1of12">1</div> <div class="nrk-xs-2of12">2</div> <div class="nrk-xs-3of12">3</div> <div class="nrk-xs-4of12">4</div> <div class="nrk-xs-5of12">5</div> <div class="nrk-xs-6of12">6</div> <div class="nrk-xs-7of12">7</div> <div class="nrk-xs-8of12">8</div> <div class="nrk-xs-9of12">9</div> <div class="nrk-xs-10of12">10</div> <div class="nrk-xs-11of12">11</div> <div class="nrk-xs-12of12 nrk-md-6of12">12</div> </div>
  55. 55. ... you get a CSS! and you ... and you ... and you, and you ...
  56. 56. #1 PRINSIPP: IKKE BREKKE NOE
  57. 57. .nrk-grid .nrk-button .nrk-button--o .nrk-pagination .nrk-fade .nrk-sr .nrk-sr-focus .nrk-color-base .nrk-color-spot .nrk-color-invert .nrk-color-shade-1 .nrk-color-shade-2 .nrk-color-shade-3 .nrk-color-shade-4 .nrk-xs-100 .nrk-xs-1of12 .nrk-xs-2of12 .nrk-xs-3of12 .nrk-xs-4of12 .nrk-xs-5of12 .nrk-xs-6of12 .nrk-xs-7of12 .nrk-xs-8of12 .nrk-xs-9of12 .nrk-xs-10of12 .nrk-xs-11of12 .nrk-xs-12of12 .nrk-sm-1of12 .nrk-sm-2of12 .nrk-sm-3of12 .nrk-sm-4of12 .nrk-sm-5of12 .nrk-sm-6of12 .nrk-sm-7of12 .nrk-sm-8of12 .nrk-sm-9of12 .nrk-sm-10of12 .nrk-sm-11of12 .nrk-sm-12of12 .nrk-md-1of12 .nrk-md-2of12 .nrk-md-3of12 .nrk-md-4of12 .nrk-md-5of12 .nrk-md-6of12 .nrk-md-7of12 .nrk-md-8of12 .nrk-md-9of12 .nrk-md-10of12 .nrk-md-11of12 .nrk-md-12of12 .nrk-lg-1of12 .nrk-lg-2of12 .nrk-lg-3of12 .nrk-lg-4of12 .nrk-lg-5of12 .nrk-lg-6of12 .nrk-lg-7of12 .nrk-lg-8of12 .nrk-lg-9of12 .nrk-lg-10of12 .nrk-lg-11of12 .nrk-lg-12of12
  58. 58. #2 PRINSIPP: BAKOVER KOMPATIBEL
  59. 59. /* Grid and sizing ---------------------------------------------------------------- */ .nrk-grid.nrk-grid { /* Double selector ensures grid nestability */ display: flex; flex-wrap: wrap; font-size: 0; } .nrk-grid > * { box-sizing: border-box; flex-shrink: 0; display: inline-block; vertical-align: top; font-size: 1rem; }
  60. 60. A B .nrk-grid C D E
  61. 61. <div class="nrk-grid"> . <div class="nrk-xs-1of12">1</div> <div class="nrk-xs-2of12">2</div> </div>
  62. 62. A B .nrk-grid C D E mellomrom
  63. 63. A B .nrk-grid C D Emellomrom
  64. 64. /* Grid and sizing ---------------------------------------------------------------- */ .nrk-grid.nrk-grid { /* Double selector ensures grid nestability */ display: flex; flex-wrap: wrap; font-size: 0; } .nrk-grid > * { box-sizing: border-box; flex-shrink: 0; display: inline-block; vertical-align: top; font-size: 1rem; }
  65. 65. #3 PRINSIPP: EKSPRESSIV NAVNGIVNING
  66. 66. class="nrk-xs-12of12"
  67. 67. class="nrk-xs-12of12 "nrk-md-6of12
  68. 68. class="nrk-xs-12of12 "nrk-md-6of12 nrk-lg-3of12
  69. 69. class="nrk-xs-12of12 "nrk-md-6of12
  70. 70. class="nrk-xs-12of12" Din NRK-profil
  71. 71. .my-component { @extend %grid; } .my-component__item { @extend %grid-item; @extend %one-halve; @extend %one-quater--medium; } .my-component { @mixin %grid; } .my-component__item { @mixin %grid-item; @mixin %one-halve; @mixin %one-quater--medium; }
  72. 72. <div class="my-component"> <div class="my-component__item"> ... </div> </div> VS <div class="my-component"> <div class="nrk-grid"> <div class="nrk-xs-12of12 nrk-sm-6of12"> <div class="my-component__item"> ... </div> </div> </div> </div>
  73. 73. <ul class="listobject-list clear"> <li class="listobject"> <a href="#" class="listobject-link"> <div class="aspect-ratio-wrapper ratio-16x9"> <img class="aspect-ratio-fix" src="#" alt="" /> <div class="overlay-shadow"></div> </div> <h3 class="listobject-title">Unge lovende</h3> </a> </li> <li class="listobject"> <a href="#" class="listobject-link"> <div class="aspect-ratio-wrapper ratio-16x9"> <img class="aspect-ratio-fix" src="#" alt="" /> <div class="overlay-shadow"></div> </div> <h3 class="listobject-title">Anno</h3> </a> </li> </ul> nrk.notv.nrk.no <div class="cf flow-content container-widget lp_flow relations"> <div class="g50 col fln s6 sl9 sl12 sl18 article-reference relation flow-relation"> <article class="article widget lean plug lp_plug cf"> <a class="autonomous" href="#"> <figure class="image widget lean plug-image"> <div class="responsive-img F169"> <img src="#" alt=""> </div> </figure> <h2 class="title">Færre arbeidsledige </h2> </a> </article> </div> <div class="g50 col fln s6 sl9 sl12 sl18 article-reference relation flow-relation"> <article class="article widget lean plug lp_plug cf"> <a class="autonomous" href="#"> <figure class="image widget lean plug-image"> <div class="responsive-img F169"> <img src="#" alt=""> </div> </figure> <h2 class="title">– Ikke vent til siste</h2> </a> </article> </div> </div>
  74. 74. nrk.notv.nrk.no <ul class="nrk-grid"> <li class="nrk-xs-12of12 nrk-md-6of12"> <a class="tv-plug" href="#"> <div class="aspect-ratio-wrapper ratio-16x9"> <img class="aspect-ratio-fix" src="#" alt="" /> <div class="overlay-shadow"></div> </div> <h3 class="listobject-title">Unge lovende</h3> </a> </li> <li class="nrk-xs-12of12 nrk-md-6of12"> <a class="tv-plug" href="#"> <div class="aspect-ratio-wrapper ratio-16x9"> <img class="aspect-ratio-fix" src="#" alt="" /> <div class="overlay-shadow"></div> </div> <h3 class="listobject-title">Anno</h3> </a> </li> </ul> <div class="nrk-grid"> <div class="nrk-xs-12of12 nrk-md-6of12"> <a class="nrkno-plug" href="#"> <figure class="image widget lean plug-image"> <div class="responsive-img F169"> <img src="#" alt=""> </div> </figure> <h2 class="title">Færre arbeidsledige </h2> </a> </div> <div class="nrk-xs-12of12 nrk-md-6of12"> <a class="nrkno-plug" href="#"> <figure class="image widget lean plug-image"> <div class="responsive-img F169"> <img src="#" alt=""> </div> </figure> <h2 class="title">– Ikke vent til siste</h2> </a> </div> </div>
  75. 75. #4 PRINSIPP: TILPASNINGSDYKTIG
  76. 76. .nrk-button::-moz-focus-inner { border: 0; padding: 0 } /* Reset Firefox */ .nrk-button { -webkit-appearance: none; /* Reset iOS */ box-sizing: border-box; display: inline-block; vertical-align: middle; white-space: nowrap; position: relative; margin: 3px 1px; padding: 0 19px; border: 0 solid; border-radius: 99px; height: 41px; min-width: 41px; /* Ensure minimum touch target */ font: inherit; font-size: 14px; line-height: 41px; text-align: center; text-decoration: none; background: transparent; color: inherit; transition: .2s; }
  77. 77. .nrk-button::-moz-focus-inner { border: 0; padding: 0 } /* Reset Firefox */ .nrk-button { -webkit-appearance: none; /* Reset iOS */ box-sizing: border-box; display: inline-block; vertical-align: middle; white-space: nowrap; position: relative; margin: 3px 1px; padding: 0 19px; border: 1px solid #f6f6f6; border-radius: 99px; height: 41px; min-width: 41px; /* Ensure minimum touch target */ font: inherit; font-size: 14px; line-height: 41px; text-align: center; text-decoration: none; background: transparent; color: inherit; transition: .2s; }
  78. 78. .nrk-button::-moz-focus-inner { border: 0; padding: 0 } /* Reset Firefox */ .nrk-button { -webkit-appearance: none; /* Reset iOS */ box-sizing: border-box; display: inline-block; vertical-align: middle; white-space: nowrap; position: relative; margin: 3px 1px; padding: 0 19px; border: 1px solid; border-radius: 99px; height: 41px; min-width: 41px; /* Ensure minimum touch target */ font: inherit; font-size: 14px; line-height: 41px; text-align: center; text-decoration: none; background: transparent; color: inherit; transition: .2s; } currentColor;
  79. 79. .nrk-button::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .4; border: inherit; border-radius: inherit; border-width: 1px; } ::a er
  80. 80. .nrk-button::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .4; border: inherit; border-radius: inherit; border-width: 1px; }
  81. 81. #5 PRINSIPP: FORUTSIGBAR
  82. 82. .nrk-color-base { color: #26292a; background-color: #fff } .nrk-color-spot { color: #26292a; background-color: #00b9f2 } .nrk-color-invert { color: #fff; background-color: #141517 } .nrk-color-shade-1 { color: #26292a; background-color: #f6f6f6 } .nrk-color-shade-2 { color: #26292a; background-color: #e9e9e9 } .nrk-color-shade-3 { color: #26292a; background-color: #e0e0e0 } .nrk-color-shade-4 { color: #26292a; background-color: #c8c8c8 }
  83. 83. @font-face { font-family: 'NRK Etica Slab'; font-weight: 700; font-style: normal; ... } @font-face { font-family: 'NRK Etica Slab'; font-weight: 400; font-style: normal; ... } @font-face { font-family: 'LFT Etica'; font-weight: 400; font-style: italic; ... } @font-face { font-family: 'LFT Etica'; font-weight: 500; font-style: italic; ... } @font-face { font-family: 'LFT Etica'; font-weight: 600; font-style: italic; ... } @font-face { font-family: 'LFT Etica'; font-weight: 700; font-style: italic; ... } @font-face { font-family: 'LFT Etica'; font-weight: 800; font-style: italic; ... } @font-face { font-family: 'LFT Etica'; font-weight: 400; font-style: normal; ... } @font-face { font-family: 'LFT Etica'; font-weight: 500; font-style: normal; ... } @font-face { font-family: 'LFT Etica'; font-weight: 600; font-style: normal; ... } @font-face { font-family: 'LFT Etica'; font-weight: 700; font-style: normal; ... } @font-face { font-family: 'LFT Etica'; font-weight: 800; font-style: normal; ... }
  84. 84. body { font-family: "Comic Sans" }
  85. 85. .nrk-button::-moz-focus-inner { border: 0; padding: 0 } /* Reset Firefox */ .nrk-button { -webkit-appearance: none; /* Reset iOS */ box-sizing: border-box; display: inline-block; vertical-align: middle; white-space: nowrap; position: relative; margin: 3px 1px; padding: 0 19px; border: 1px solid; border-radius: 99px; height: 41px; min-width: 41px; /* Ensure minimum touch target */ font: inherit; font-size: 14px; line-height: 41px; text-align: center; text-decoration: none; background: transparent; color: inherit; transition: .2s; } FORUTSIGBART
  86. 86. #6 PRINSIPP: KOGNITIV OG TEKNISK YTELSE
  87. 87. .nrk-xs-100 { width: 100vw; margin-left: calc(50% - 50vw); }
  88. 88. .nrk-xs-80?
  89. 89. .nrk-xs-100 .nrk-xs-10of12
  90. 90. Will the user notice an extra 2px? Unlikely. Will the user notice the website ge ing slower because we have an unnecessary amount of CSS? More likely. “ – Shaun Bent, BBC
  91. 91. #7 PRINSIPP: ÅPENT OG ENKELT
  92. 92. A DESIGN SYSTEM’S VALUE IS REALIZED WHEN PRODUCTS SHIP FEATURES USING PARTS FROM THE SYSTEM. – Nathan Curtis
  93. 93. <link rel="stylesheet" href="https://static.nrk.no/bjartmar/1.0.0/nrk-style.css">
  94. 94. bit.ly/8s-system-team-models
  95. 95. FAQ Hva kommer til å endre seg? Skal de e open-sources? Hva med et bedre navn?
  96. 96. BJARTMAR.CSS NRK.NO TV RADIO YR P3 SUPER NRKS DESIGNPROGRAM Styleguide Styleguide Styleguide Styleguide Styleguide Styleguide DESIGN SYSTEM
  97. 97. .tv-navbar li:hover, .tv-navbar li.is-active { color: #66d1f2; border-color: currentColor } .tv-navbar--small { padding-bottom: 1px; height: 3em; line-height: 3em; font-size: 14px } .tv-plug { margin: 0; margin-bottom: 1rem; font-size: .9rem; transition: transform .2s } .tv-plug img { display: block; width: 100%; margin-bottom: .5rem; transform: scale(1.002) } .tv-plug h2 { font-weight: 800; font-size: 24px; line-height: 1 } .tv-plug h3 { font: inherit; color: #66d1f2 } .tv-plug p { margin: 0; line-height: 1.5; opacity: .7; transition: .2s } .tv-plug--fade { position: relative; overflow: hidden; margin-bottom: 3% } .tv-plug--fade h2 { max-width: 600px; font-size: 2vw; text-transform: uppercase } .tv-plug--fade figcaption { position: absolute; left: 30px; right: 30px; bottom: 0; padding: .5rem } .tv-plug--fade::before { content: ''; position: absolute; right: 0; bottom: 0; left: 0; padding-top: 50%; background: linear-gradient(rgba(20,21,23,0), rgba(20,21,23,1) 95%; } .tv-footer { padding: 2rem 0; font-size: 13px; opacity: .8 } .tv-footer::before { content: ''; display: block; margin: 1rem .5rem; border-top: 1px solid } .tv-footer a { color: #66d1f2 }
  98. 98. Q&A

×