A presentation at Design seminar, Skalar in in Oslo, Norway by Ronny Siikaluoma
Design systems Questions & Answers
Starting a design system How to create a design system from scratch (for a smaller product/startup) What components are a must? And what to consider?
Design System Lifecycle MONTH 1 2 3 Strategy 4 5 Formative S1 S2 S3 0.1 6 7 Operative S4 S5 0.5 S6 Product adoption 1.0 8
Design Ops Survey, Ruter april 2018 Ruters Dropbox Mitt firmas Dropbox Min personlige Dropbox Lokalt pĂĄ min maskin Google Drive Ekstern harddisk Ruters filserver Mitt firmas filserver Axure team-disk 0 1 2 3 4 5 6 7 8 9 10
Product Fleet Design System supports and serves other products
Product Fleet Design System supports and serves other products
Product Fleet Design System supports and serves other products
Interface Inventory aka UI Inventory, Interface Audit
Interface Inventory Template
Interface Inventory
Component Cut-Up Workshop
Component Cut-Up Cut Group Label Groups Tape Prioritize Label Components
The Component Cut-up Workshop
Parts, products and people A Team Activity to Start a Design System
16
Picking Parts, Products & People
Cost vs Gains, ROI
The Design System Efficiency Curve Productivity With a design system How long does this take? Without a design system Time
Design + Develop = đź’•đź’• How to coordinate a design system with developers? Best practices and different ways to do it.
Brad Frost & Dan Mall «Hot Potato Process»
Design Pipeline Android Core iOS App Web TRANSFORM VERIFY GENERATE Specify Github Style Dictionary Web ? ? New Hotness Design Token generation Development
Build your own, or…? Use or buy a design system
It Depends
Across Teams & Products Considerations when building design systems across teams and product. What can be common, when to be specific?
Use the existing one Ja Does it look the way you want it to? Ja Nei Change the existing one Can it still be used? Nei Ja Can it be altered to fit better? Ja Does a similar component already exist Nei Ja Create a new variant Can it be solved with a variant of the existing one? Nei Nei Ja Is it likely to be used in multiple locations? Put it into the design system Nei Keep it outside the design system
Creativity vs Systematic How to combine design exploration while laying the ground work for building design system?
Does systems make it hard to be creative?
Does systems make it hard to be creativity?
Pace Layering Stuff Space Plan Services Skin Structure Site Shearing layers of change. Because of the different rates of change of its components, a building is always tearing itself apart
Steward Brand “The power is in the slow parts, but the fast parts get all the attention.“
Pace layering Constructive turbulence Fast Fashion Rate of change Commerce Slow Discontinous, experimentation, innovation What works goes to building wealth, products, services Infrastructure Energy, transport food production, education Governance Stability, continuity law, democratic institutions Culture Beliefs, values, ideologies Nature Natural ecosystem
Gartner Pace Layering Strategy Systems of Innovation • New ideas • CompetitiveThreats Systems of Differention • Better Ideas • Unique Processes Systems of Record • Common Ideas • Greater Efficiency
Pace layering Fast Marketing Rate of change Product Design System Stratgey Goal Brand Slow FAST LAYERS Churn ideas & get all the attention SLOW LAYERS Regulate change & hold all the power
Workflow How far along in the design process to start creating a design system?
Workflow In what order to create design system content
A Typography Color Iconography Spacing 39
Examples Various examples of design systems (beyond Figma)
Entur Designsystem by ENTUR
Jøkul by Fremtind
Spor by Vy
Elvia Design System by Elvia
Ruter Design System by Ruter
Material Design by Google
Tegel Design System by Scania
Human Interface Guidelines by Apple
Atlassian Design System by Atlassian
Carbon by IBM
Fluent by Microsoft
Audi Design System by Audi
Clarity by VMware
Quickbooks by Intuit
Lightning Design System by Salesforce
References • Ben Calahan, 2021 – «The Never-Ending Job of Selling Design Systems» • https://alistapart.com/article/selling-design-systems/ • Nathan Curtis, 2017 - «Starting a Design System» • https://medium.com/eightshapes-llc/starting-a-design-system-6b909a578325 • Nathan Curtis, 2015 - «The Component Cut-Up Workshop» • https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517 • Nathan Curtis, 2016 – «Picking Parts, Products & People» • https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742 • Brad Frost, 2013 – «Interface Inventory» • https://bradfrost.com/blog/post/interface-inventory/ • Interface Inventory Template • https://docs.google.com/presentation/d/1GqFmiDV_NqKi36fXAwD3WTJL5-JV-gHL7XVD2fVeL0M/edit#slide=id.p • Steward Brand, 2018 – «Pace Layering: How Complex Systems Learn and Keep Learning» • https://jods.mitpress.mit.edu/pub/issue3-brand/release/2
Thank you! Ronny Armas Siikaluoma Principal Frontend Developer & Lead Design Systems @siiron ronny.siikaluoma@noaignite.com En del av NoA-familien
A deep dive Q&A covering some of the common questions we often ask when it comes to establishing a design system within an organization.
for free. You
can too.