Design Systems Overview

Design Systems Overview

Varya Stepanova @ Aalto University, 2022

Me

Varya Stepanova

Design Systems Architect
engineering manager, frontend architect, independent consultant

Contacts

linkedin.com/in/varyastepanova
varya.me
@varya_en

Definition

"Design systems" is a systematic approach for creating, implementing, and maintaining user interfaces on the web.

Design language

Credits: Andrey Okonetchnikov, https://www.youtube.com/watch?v=sV4chQq-H7o

Do those buttons function the same way?​

Do those buttons function the same way?​

Credits: Andrey Okonetchnikov, https://www.youtube.com/watch?v=sV4chQq-H7o

Ugly house

Nice house

Industry context

THOUSANDS

of pages

UPDATES

every week, or even every day

GROWING TEAMS

of designers, developer, product people

Design and UI require a systematic approach​

Design and development paths

  • Libraries of components

  • Styleguide-drive development

  • Systematic design approaches

  • Design tools (Sketch, Figma)

  • Design Systems

Components and patterns

Visual language

Diagram 1

Diagram 2

Diagram 3

Diagram 4

Literature review (2018)

https://varya.me/blog/design-systems-review/

Design system is everyone's business​

What exactly changes?

The old school way​

Dashed process​

Products are systems

Products are systems rather than pages and as soon as we stop perceiving them as that, the better.

Anna Debenham​

UI composition

Creating UI with a design system​

Business value of design system

  • Product recognizability​
  • Faster design and development​
  • Fewer costs​
  • "Time to market" decreased​
  • Doing "real work"

Getting mature

⬅

Maturity

The highest levels of maturity are achieved with design systems

The very fact of design systems emerging as a new approach and a set of artifacts that affect the process of development demonstrates the subject of Organizational Innovation and Deployment.

Examples

"Complete" design system

https://miro.com/app/board/uXjVPXCoofw=/

Thank you

Slides: varya.me/design-systems-overview-2022/

by Varya Stepanova

linkedin.com/in/varyastepanova
varya.me
@varya_en