1

6 Top and Popular Design Systems

 3 years ago
source link: https://uxplanet.org/the-single-source-of-truth-design-systems-c98e7f19c769
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Image for post
Image for post
Photo by Miguel Á. Padriñán from Pexels

DESIGN LESSON

6 Top and Popular Design Systems

The single source of truth: Design Systems.

Design System groups all the elements that will allow the teams to design, realize, and develop a product. So a Design System is not a deliverable, but a set of deliverables. It will evolve constantly with the product, the tools, and the new technologies.

Let's take a look at the top and popular design systems.

  1. Material design

Material Design is a design language that Google developed in 2014. Expanding on the “card” motifs that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

Material is a design system — backed by open-source code — that helps teams build high-quality digital experiences.

In 2018, Google detailed a revamp of the language, with a focus on providing more flexibility for designers to create custom “themes” with varying geometry, colors, and typography. Google released Material Theme Editor exclusively for the macOS design application Sketch.

As of 2021, most of Google’s mobile applications for Android as well as its web app counterparts had applied the new design language, including Gmail, YouTube, Google Drive, Google Docs, Google Sheets, Google Slides, Google Photos, Google Maps, Google Classroom, Google Translate, Google Chrome, Google Keep, Google Play, and most other Google products. It is also the primary design language of Android and Chrome OS.

Image for post
Image for post
Material Design is a design language that Google developed in 2014.

2. Fluent design system

Fluent Design System officially unveiled as Microsoft Fluent Design System, is a design language developed in 2017 by Microsoft. Fluent Design is a revamp of Microsoft Design Language 2 (popularly known as “Metro”) that includes guidelines for the designs and interactions used within software designed for all Windows 10 devices and platforms.

The system is based on five key components: Light, Depth, Motion, Material, and Scale. The new design language includes more prominent use of motion, depth, and translucency effects.

Image for post
Image for post
Fluent Design System officially unveiled as Microsoft Fluent Design System

3. Carbon design system

Carbon is IBM’s open-source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

Carbon is funded and built by IBM. Although that means we build for the company’s business needs, it also means we have a brilliant team of engineers and designers working full time to make Carbon better. It is maintained by a core team of designers, developers, and writers based in the Austin, Texas IBM Design Studio.

The goals of the design system include improving UI consistency and quality, making the design and development process more efficient and focused, establishing a shared vocabulary between designer and developer, and providing clear, discoverable guidance around design and development best practices.

Image for post
Image for post

4. Spectrum design system

Adobe’s Spectrum creates a common framework for creating consistent, collaborative, and cloud-centric experiences that put the user first. … Spectrum is more than a set of consistent visual elements to be used by our teams when building Adobe apps and services; it is a new set of experience guidelines.

Image for post
Image for post
Adobe’s Spectrum

5. Apple HIG

The Human Interface Guidelines — “HIG” for short — offers in-depth information and UI resources for all of Apple’s platforms, including specific technology areas. … It offers a high-level and comprehensive view of key UI elements and associated APIs, and best practices to help you implement features into your app.

Image for post
Image for post
The Human Interface Guidelines

6. Polaris Design System

The Shopify Polaris design system is a set of comprehensive guidelines and principles that designers can use while building apps and channels for Shopify. It offers a range of resources and building elements like patterns and is available to all Shopify partners.

Image for post
Image for post
The Shopify Polaris design system

Also read,

Disha Garg is a product designer and writes about design, technology, and mindfulness. Her writing can be found on LinkedIn, Medium, and Tweet at the.dishagarg to say hello.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK