Ruter Design System A design system for public transport 12.2.2019 Christian Nordström, Design Manager, Ruter Ingrid Hagelund, Designer, Making Waves Ronny Siikaluoma, Designsystem Lead, Making Waves
A presentation at Design Systems Day 2019 in February 2019 in Oslo, Norway by Ronny Siikaluoma
Ruter Design System A design system for public transport 12.2.2019 Christian Nordström, Design Manager, Ruter Ingrid Hagelund, Designer, Making Waves Ronny Siikaluoma, Designsystem Lead, Making Waves
60+
50%
DIGITAL
VEHICLES
WAYFINDING
INDUSTRIAL
SERVICE DESIGN
MARKETING
EXPERIENCE
OUTDATED
Defining
DESIGN SYSTEM MATURITY Living Design System A process built into the organization Automatic Reusable components as part of application build process Hard-to-cross «chasm» for most organizations Manual Style Guide Simple copy/paste code snippets Static One-time PDF with brand guidelines Inconsistency The lack of a design system
DESIGN SYSTEM MATURITY Living Design System A process built into the organization Automatic Reusable components as part of application build process Hard-to-cross «chasm» for most organizations Manual Style Guide Simple copy/paste code snippets Static One-time PDF with brand guidelines Inconsistency The lack of a design system
DEFINING THE DESIGN SYSTEM Product What is offered?
DEFINING THE DESIGN SYSTEM Product What is offered? UI Kits Code components Documentation
DEFINING THE DESIGN SYSTEM Operations Product How to cooperate? What is offered? Planning UI Kits Tools Code components Communication Documentation Management
DEFINING THE DESIGN SYSTEM “Ruter Design System consists of tools, components, guidelines and processes that enable teams to create rich, cohesive and meaningful experiences.”
Tools
TOOLS RuterBrand https://ruter.frontify.com RuterComponents https://components.ruter.as
WHERE DO YOU SAVE YOUR DESIGN FILES? Ruters Dropbox My companys Dropbox My personal Dropbox Locally on my machine Google Drive External hard drive Ruters file server My companys file server Axure team-disk 0 2 5 7 9
TOOLS Abstract Sketch Libraries Sketch App
TOOLS React Sass
TOOLS React Lerna Sass Webpack Babel
Essentials
COLOR
COLORS
CSS Stats https://cssstats.com/
COLORS
DESIGN TOKENS
COLORS AS DESIGN TOKENS YAML COLOR_RED_10: “#A20000” COLOR_RED_20: “#B80000” COLOR_RED_30: “#D60606” COLOR_RED_40: “#E60000” COLOR_RED_50: “#EB3333” COLOR_RED_60: “#ED4D4D” COLOR_RED_70: “#F28181” COLOR_RED_80: “#F7B3B3” COLOR_RED_90: “#FACDCD” COLOR_RED_100: “#FDEBEB”
DESIGN TOKENS SCSS Design Decisions CSS JSON Web iOS YAML SWIFT XML UI Kit Android
COLORS AS DESIGN TOKENS YAML COLOR_RED_10: “#A20000” COLOR_RED_20: “#B80000” COLOR_RED_30: “#D60606” COLOR_RED_40: “#E60000” COLOR_RED_50: “#EB3333” COLOR_RED_60: “#ED4D4D” COLOR_RED_70: “#F28181” COLOR_RED_80: “#F7B3B3” COLOR_RED_90: “#FACDCD” COLOR_RED_100: “#FDEBEB” SCSS $colors-map: ( ‘color-red-10’: (#A20000), ‘color-red-20’: (#B80000), ‘color-red-30’: (#D60606), ‘color-red-40’: (#E60000), ‘color-red-50’: (#EB3333), ‘color-red-60’: (#ED4D4D), ‘color-red-70’: (#F28181), ‘color-red-80’: (#F7B3B3), ‘color-red-90’: (#FACDCD), ‘color-red-100’: (#FDEBEB) ); CSS :root { —color-red-10: #A20000; —color-red-20: #B80000; —color-red-30: #D60606; —color-red-40: #E60000; —color-red-50: #EB3333; —color-red-60: #ED4D4D; —color-red-70: #F28181; —color-red-80: #F7B3B3; —color-red-90: #FACDCD; —color-red-100: #FDEBEB; }
SPACING
SPACING NONE XXXS XXS XS S M L XL XXL XXXL
VS
.rds-mycomponent { @include p(spacing-m); } .rds-mycomponent { padding: 1.5rem; } /* 24px / .rds-mycomponent { @include pr(spacing-m); } .rds-mycomponent { padding-right: 1.5rem; } / 24px / .rds-mycomponent { @include my(spacing-xl); } .rds-mycomponent { margin-top: 3rem; margin-bottom: 3rem; } / 48px / / 48px */
<MyComponent className=”rds-p—xs”> My Component </MyComponent> <MyComponent className=”rds-p—xs rds-p—xl@l”> My Component </MyComponent>
SPACING AS DESIGN TOKENS YAML JSON { SPACING_NONE: ‘0px’ SPACING_XXXS: ‘2px’ SPACING_XXS: ‘4px’ SPACING_XS: ‘8px’ SPACING_S: ‘16px’ SPACING_M: ‘24px’ SPACING_L: ‘32px’ SPACING_XL: ‘48px’ SPACING_XXL: ‘64px’ SPACING_XXXL: ‘128px’ “SPACING_NONE”: “0px”, “SPACING_XXXS”: “2px”, “SPACING_XXS”: “4px”, “SPACING_XS”: “8px”, “SPACING_S”: “16px”, “SPACING_M”: “24px”, “SPACING_L”: “32px”, “SPACING_XL”: “48px”, “SPACING_XXL”: “64px”, “SPACING_XXXL”: “128px” } JS ARRAY module.exports = [ {key:’SPACING_NONE’, value:’0px’}, {key:’SPACING_XXXS’, value:’2px’}, {key:’SPACING_XXS’, value:’4px’}, {key:’SPACING_XS’, value:’8px’}, {key:’SPACING_S’, value:’16px’}, {key:’SPACING_M’, value:’24px’}, {key:’SPACING_L’, value:’32px’}, {key:’SPACING_XL’, value:’48px’}, {key:’SPACING_XXL’, value:’64px’}, {key:’SPACING_XXXL’, value:’128px’} ]
COMPONENTS
Block - Element - Modifier
Block - Element - Modifier
Team
DESIGN SYSTEM TEAM Christian Nordström Design Manager Ronny Siikaluoma Design System Lead Martin Dahl Frontend Developer Marte Mettenes Frontend Developer Maria Sætre Designer Ingrid Hagelund Designer Åse Lindersen Delivery Manager
DESIGN SYSTEM TEAM Christian Nordström Design Manager Ronny Siikaluoma Design System Lead Marte Mettenes Frontend Developer Ingrid Hagelund Designer
ORGANIZING THE TEAM Makers Users Customers
DESIGN SYSTEM TEAM
Takeaways
SHARE
PROTOTYPE
ASSIST
GET FEEDBACK
REACH OUT
