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

  • Elements (<button>, <input>, <a>) + Accessibility + Responsive + Cross device, cross browser Composition Size Themeing

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