A presentation at Dagen@ifi in in Oslo, Norway by Ronny Siikaluoma
Design systems Cohesive User Experience in Digital Ecosystems
Hyvää iltapäivää! Husbanken Norrøna DSS Amedia Jotun Vitus Apotek Ruter KLP Kongsberg Digital Datatilsynet Nettbuss Nordic Choice NSB Norgesgruppen Valgdirektoratet LO NRK DSB Stortinget Canal Digital Ronny Siikaluoma Principal Frontend Developer & Lead Design Systems
Hyvää iltapäivää! Husbanken Norrøna DSS Amedia Jotun Vitus Apotek Ruter KLP Kongsberg Digital Datatilsynet Nettbuss Nordic Choice NSB Norgesgruppen Valgdirektoratet LO NRK DSB Stortinget Canal Digital Ronny Siikaluoma Principal Frontend Developer & Lead Design Systems
What is a Design System?
System “A system is a group of interacting or interrelated elements that act according to a set of rules to form a unified whole.” - Wikipedia
Designed by Massimo Vignelli and Bob Noorda, Unimark, 1970
Designed by Richard Danne and Bruce Blackburn, Danne & Blackburn, 1975
Ethan Marcotte • «Responsive Web Design», May 25, 2010 – A List Apart • «Responsive Web Design», Aug 23, 2011 – A Book Apart 23. sep. 2022
STEPHEN HAY “We’re not designing pages; we’re designing systems of components.”
ATOMIC DESIGN Abstract Concrete
ATOM SEARCH THE SITE Label Input Button
MOLECULE SEARCH THE SITE
ORGANISM SEARCH THE SITE Home Products Services About Contact
Border radius Background color Padding top Padding left & right Padding bottom Color Font size Font-weight Font-family Text Transform Margin Box shadow
Typography Color Iconography
Typography Color Iconography
Typography Color Iconography
A Typography Color Iconography
Layout Typography Color Iconography Motion Imagery Content Etc.
Misconception: «Buttons are easy»
Misconception: «Buttons are easy» Prominent Flat Standard Outline
Misconception: «Buttons are easy» Default Hover Active Focus Disabled Prominent Standard Flat Outline
Misconception: «Buttons are easy» Default Icon Left Only Icon Right Prominent Standard Flat Outline
Misconception: «Buttons are easy» Prominent Standard Flat Outline
Misconception: «Buttons are easy» Small Medium Large Prominent Standard Flat Outline
Misconception: «Buttons are easy»
Misconception: «Buttons are easy» Types States
Opinionated guesstimate
And the result…hrmf…
MediaBlock Popover Tags RadioButton Input Cta Link Fieldset Spacing Datepicker Search Buttons Label Modal Card Tabs Panel Callout Accordion Message Legend Image Navigation SkipLink Loader Switch Lists FileUpload ProgressBar Breadcrumb FormBlock Grid Radio AspectRatio Typography Table Tooltip Slider Field HelpText Dropdown Select Entry Byline Quote Figure Footer FormGroup TextArea Badge Checkbox Pagnation Divider Icons Header Stepper Figure
Design System Maturity Online Manual Manually updated code snippets, downloadable assets Static A one-time PDF of your brand guidelines Inconsistent The absence of a design system
NATHAN CURTIS “A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem. “
Dynamic Static START START END Style Guide Static artifact can never respond to a constantly growing inconsistency of the interface Design System is a process that improves and controls growth of inconsistency
Design System Maturity Automation Reusable components is part of application build process This is the «chasm» that is hard for organizations to cross Online Manual Manually updated code snippets, downloadable assets Static A one-time PDF of your brand guidelines Inconsistent The absence of a design system
Design System Reach Angular Product Product HTML CSS SASS React Visual Design Language Product Vue.js Product ? Brand Guidelines UI framework-agnostic design system Legacy UI framework-specific implementation of design system Product Product-specific UIs built with design system
Design System Maturity Living design system Process is built into your organization and maintained as a service Automation Reusable components is part of application build process This is the «chasm» that is hard for organizations to cross Online Manual Manually updated code snippets, downloadable assets Static A one-time PDF of your brand guidelines Inconsistent The absence of a design system
https://github.com/siiron/norwegian-design-systems 23. sep. 2022
Kiitos paljon! Ronny Armas Siikaluoma Principal Frontend Developer & Lead Design Systems ronny.siikaluoma@noaignite.com @siiron En del av NoA-familien
A brief look at design systems from the 60s until today. Also showing the benefits of maturing from a static style guide to a living design system fully integrated into the organisation.
for free. You
can too.