Design Systems

Soma Szoboszlai - uithings.hu

Styles come and go. Good design is a language, not a style. – Massimo Vignelli

Overview

What is a design system?
Frameworks
Atomic Design
Create an effective system
Demo
Q&A

1. What is a

design system?

A holistic, strategic approach to design across an organisation.

What is a design systems?

Visual Language

Design System

Pattern Library

Style guide

Brand Guidelines

What’s the difference between a design system and a style guide or pattern library?

1. Style guide

Front-end style guides are a modular collection of all the elements in your product’s user interface, together with code snippets for developers to copy and paste as needed to implement those elements.

2. Pattern Library

Collection of user interface design elements. Recurring solutions that solve common design problems. Essentially a pattern library is a collection of design elements that appear multiple times on a site: Slideshows, News, Listings, Foot

3. Brand Guideline

A brand guide is a manual that explains how a brand is to be expressed verbally and visually. (design, marketing, sales, etc)

Why?

Bigmedium.com >

Why?

1976 NASA Graphics Standards Manual

History.

2015 - Google Material Design

Lamborghini <3

Frameworks

2011

These things are great, but...

Problems with Frameworks

"Jumpsuit effect"
Large file size
Might not do everything you need
Unneeded stuff

Problem with the "old system".

main_v15-4_final_v3_blue-light_v2final_reallyfinal.psd

Our goals with a design system.

Speed up design process
Speed up front-end development
Visual consistency
Faster onboarding
Better teamwork

Atomic Design.

In the natural world, atomic elements combine together to form molecules. These molecules can combine further to form complex organisms.

Atomic Design.

Atoms are the basic building blocks. They are our HTML tags, such as an input field and button.

Button

Email

Text

Atomic Design.

Molecules are groups of atoms. The smallest units in Atomic Design.

Input + Btn = Form

Subscribe

Name

Email

Atomic Design.

Organisms are groups of molecules joined together. A complex section of an interface, for example the footer.

Atomic Design.

Templates are groups of molecules joined together. A complex section of an interface, for example the header.

Atomic Design.

Pages are templates with real representative content.

(creatives)

Create an effective system.

Creating an effective system.

UX/ UI Designers to define the visual elements of the system
Front-end developers to create living Style Guide
Leaders to champion and align the vision throughout the company, including up to executive leadership

0. It Is a product!

-1. Stay Creative!