Design Systems in 2016 and how to make your own.

Ziya Fenn

Published in

UX Planet

4 min readDec 18, 2016

2016 was a great year for UX. Many great articles were published and many exceptional thoughts were shared.

One of the important topics in UX was so called “Design Systems”.

I’d like to share with you a list of Design Systems and a recap of helpful articles to help you get started with creating your own Design System.

A few great examples of Design Systems you should be aware of:

Material Design

Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.

material.io

iOS Human Interface Guidelines

Design Principles - Overview - iOS Human Interface Guidelines

Learn about designing apps for iOS.

developer.apple.com

Microsoft Design

Principles

Edit description

www.microsoft.com

IBM Design

IBM Design: design in motion

Design is a constant exploration of creation and destruction; of cacophony and utter loneliness. We need space and…

www.ibm.com

Airbnb design

Building a Visual Language

This article is part of a series on our new Design Language System. Karri recently answered questions about this topic…

airbnb.design

Clarity Design System

We work closely with product teams to understand and solve the vast array of challenges they face. These solutions are…

vmware.github.io

The Harmony Design System

Harmony Design System

Harmony is a living design system that unites Intuit's small business products, brand and marketing experiences across…

harmony.intuit.com

BBC GEL

BBC GEL | Homepage

Our Global Experience Language (GEL) is the BBC's shared design framework which enables us to create consistent and…

www.bbc.co.uk

Lightning Design System

Utilize our detailed guidelines to confidently design excellent apps that fit right into the Salesforce ecosystem. With…

www.lightningdesignsystem.com

MailChimp

Grid System | MailChimp

Our grid system is composed of 8 flexible columns with a gutter between columns of 30px. We apply border-box so that…

ux.mailchimp.com

PEGA

Pega UX Design System

Our world is rapidly becoming more and more digital. 70% of customer experience is now digital user experience . As…

design.pega.com

LonelyPlanet

Lonely Planet Travel Guides and Travel Information

Style Guide Documentation Performance Monitoring About Rizzo

rizzo.lonelyplanet.com

GE’s Predix Design System

Scaling Atomic Design for the Enterprise

medium.com

Oracle Alta

Oracle Alta UI Patterns: Introduction

Adaptive/Responsive Design - Responsive Design lets teams utilize the same semantic markup to lay out a multiple UI…

www.oracle.com

U.S. Web Design Standards

Draft U.S. Web Design Standards Documentation | UI components

Welcome to the Draft U.S. Web Design Standards! Here, you'll find open-source UI components and visual styles to create…

standards.usa.gov

Here are a few articles and resources which will help you to get started with creating a Design System:

Atomic Design

Atomic Design | Atomic Design by Brad Frost

Atomic design is a methodology for crafting effective design systems

atomicdesign.bradfrost.com

Pattern Lab (Based on Atomic Design)

Pattern Lab | Build Atomic Design Systems

Unlike static design tools, Pattern Lab lets you easily swap in different representative content into your components…

patternlab.io

How Creating A Design Language Can Streamline Your UX Design Process

How Creating A Design Language Can Streamline Your UX Design Process - Smashing Magazine

Around a year ago, while working at a digital agency, I was given the objective of streamlining our UX design process…

www.smashingmagazine.com

Creating a Design System Language

Creating a Design System Language…

It seems like the current buzz word in the design industry and everyone wants one. But how exactly can a product…

medium.com

Promoting a Design System Across Your Products

by Published in Nathan Curtis Industry , Project Management The scene: day one of a consulting gig with a new client to…

alistapart.com

Some practical tips:

How to create a FRONT END FRAMEWORK with Sketch

Some aspects to consider:

medium.com

How To Be More Organized While Designing UI

After working 4 years in the field of digital design I got obsessed with tidying up and sorting information.

medium.com

Intro to the 8-Point Grid System

Learn how it can take your design to the next level

medium.com

5 Things to Do Before You Start Your Next Design File in Sketch

5 Things to Do Before You Start Your Next Design File in Sketch, or, Preparing Your Design “mise en…

Our new Style Guide is available using all of the tips laid out in this article!

medium.com

Super easy Atomic Design documentation with Sketch app

A quick look at how Nordnet designers submit work to our UI Kit, and a simple way to document the process.

nordnet.design

And a few more links to read more about Design Systems:

Researching Design Systems

An inventory of the most popular design systems out there.

danielmall.com

Styleguides + Design Languages

Ones I like

medium.com

All about creating design style guides

Style guide is a set of standards that establish and enforce style to improve communication.

medium.mybridge.co

UXPin Step-by-Step Guide for creating a Design System

Creating a Design System: The Step-by-Step Guide

A full guide based on real projects and case studies. See the complete 9-step process.

www.uxpin.com

Hope you enjoyed the article! If so, please don’t forget to like it ;)

If you have any resource that would fit this list i will be happy to update it.

Follow me on Dribbble and Behance.

UX Planet

Design Systems in 2016 and how to make your own.

Material Design

Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.

Design Principles - Overview - iOS Human Interface Guidelines

Learn about designing apps for iOS.

Principles

Edit description

IBM Design: design in motion

Design is a constant exploration of creation and destruction; of cacophony and utter loneliness. We need space and…

Building a Visual Language

This article is part of a series on our new Design Language System. Karri recently answered questions about this topic…

Clarity Design System

We work closely with product teams to understand and solve the vast array of challenges they face. These solutions are…

Harmony Design System

Harmony is a living design system that unites Intuit's small business products, brand and marketing experiences across…

BBC GEL | Homepage

Our Global Experience Language (GEL) is the BBC's shared design framework which enables us to create consistent and…

Lightning Design System

Utilize our detailed guidelines to confidently design excellent apps that fit right into the Salesforce ecosystem. With…

Grid System | MailChimp

Our grid system is composed of 8 flexible columns with a gutter between columns of 30px. We apply border-box so that…

Pega UX Design System

Our world is rapidly becoming more and more digital. 70% of customer experience is now digital user experience . As…

Lonely Planet Travel Guides and Travel Information

Style Guide Documentation Performance Monitoring About Rizzo

GE’s Predix Design System

Scaling Atomic Design for the Enterprise

Oracle Alta UI Patterns: Introduction

Adaptive/Responsive Design - Responsive Design lets teams utilize the same semantic markup to lay out a multiple UI…

Draft U.S. Web Design Standards Documentation | UI components

Welcome to the Draft U.S. Web Design Standards! Here, you'll find open-source UI components and visual styles to create…

Atomic Design | Atomic Design by Brad Frost

Atomic design is a methodology for crafting effective design systems

Pattern Lab | Build Atomic Design Systems

Unlike static design tools, Pattern Lab lets you easily swap in different representative content into your components…

How Creating A Design Language Can Streamline Your UX Design Process - Smashing Magazine

Around a year ago, while working at a digital agency, I was given the objective of streamlining our UX design process…

Creating a Design System Language…

It seems like the current buzz word in the design industry and everyone wants one. But how exactly can a product…

Promoting a Design System Across Your Products

by Published in Nathan Curtis Industry , Project Management The scene: day one of a consulting gig with a new client to…

How to create a FRONT END FRAMEWORK with Sketch

Some aspects to consider:

How To Be More Organized While Designing UI

After working 4 years in the field of digital design I got obsessed with tidying up and sorting information.

Intro to the 8-Point Grid System

Learn how it can take your design to the next level

5 Things to Do Before You Start Your Next Design File in Sketch, or, Preparing Your Design “mise en…

Our new Style Guide is available using all of the tips laid out in this article!

Super easy Atomic Design documentation with Sketch app

A quick look at how Nordnet designers submit work to our UI Kit, and a simple way to document the process.

Researching Design Systems

An inventory of the most popular design systems out there.

Styleguides + Design Languages

Ones I like

All about creating design style guides

Style guide is a set of standards that establish and enforce style to improve communication.

Creating a Design System: The Step-by-Step Guide

A full guide based on real projects and case studies. See the complete 9-step process.

Sign up to discover human stories that deepen your understanding of the world.

Free

Membership

Published in UX Planet

Written by Ziya Fenn

Responses (2)