영감을 주는 최고의 디자인 시스템

10가지 맥락, 10개의 디자인 언어

2022.01.25 | 조회 2.73K |
0
|
디자인 나침반 레터의 프로필 이미지

디자인 나침반 레터

디자인을 탐구하는 디자인 나침반의 소식과 다양한 디자인 뉴스를 공유합니다.

첨부 이미지

디자인 시스템은 사용자가 동일한 경험을 할 수 있도록 언제나 일관된 원칙이 적용될 수 있도록 사용하는 규칙입니다. 일관된 원칙으로 같은 목소리로 같은 인상을 줄 수 있고, 불필요한 커뮤니케이션을 없애 효율적이죠. 이 시스템을 적용하는 범위에 따라 디자인 언어, 디자인 시스템에 대한 정의가 다릅니다. 시각적인 형태에 대한 가이드라인, 개발에 사용하는 코드, 구체적인 ux 패턴,  연관된 생태계의 모든 경험까지 회사에 따라 다양한 영역에 적용됩니다. 더 나은 디자인 언어를 만들 수 있도록 영감을 받을 수 있는 최고의 디자인 시스템에 대해 조사해봤습니다.

첨부 이미지

Apple Human Interface Guideline

매끄러운 사용자 경험의 교과서라 불리는 애플의 디자인 가이드라인입니다. 디자인뿐만 아니라 개발에도 필요한 상세한 가이드라인을 제공합니다. 플랫폼 특성에 알맞은 일관된 경험을 제공하기 위한 디자인 원칙과 애플이 제공하는 다양한 디바이스의 UI Kit을 제공합니다.

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

Themes, Interface Essentials

App Architecture

User Interaction

System Capabilities

Visual Design

Icons and Images

Bars

Views

Controls

Extensions

첨부 이미지

Google Material Design

구글이 디자인에 있어 진정한 표준으로써 미래를 제시할 수 있다는 신호였던 머티리얼 디자인입니다. 이 디자인 시스템이 발표된 이후 디자인 시스템의 기초에 대해 세상 모든 사람들이 알 수 있게 되었습니다. 전 세계 다양한 서비스, 브랜드가 이 언어를 기반으로 다양한 표현을 할 수 있는 단단한 기초 중의 기초인 디자인 시스템입니다. 현재는  버전 3까지 나왔으며 Material You라는 더 진보된 디자인 언어를 제안하고 있습니다.

https://material.io/

구성   

Foundation: Design Tokens, Adaptive Design...

Style: Color, Typography

Components: Buttons, Cards, Chips...

첨부 이미지

Microsoft Fluent

마이크로소프트의 디자인 시스템입니다. 복잡한 세계를 위한 설득력 있는 디자인 시스템을 지향합니다. 스큐어모피즘에서 플랫 디자인으로 옮겨가는데 큰 역할을 했던 마이크로소프트의 메트로 디자인의 후계입니다. 플루언트는 빛, 깊이, 움직임, 재질, 규모라는 구성요소를 중심으로 시스템을 구축했습니다.

https://www.microsoft.com/design/fluent/#/

플랫폼별 가이드라인 제공

Controls and Patterns

Layout

Style

Controls

Resources

첨부 이미지

IBM Carbon Design Language

세계적인 공룡 기업 IMB의 디자인 언어입니다. 모든 컴포넌트가 접근성 체크리스트를 준수합니다. 사용자의 시력, 청력, 신체, 인지적 장애 등으로 구분하고 일반 사용자에게 어떤 연관이 있는지도 설명합니다. 전 세계 다양한 영역에 끼치는 영향이 상당한 대규모 회사인 만큼 광범위한 범위의 모두를 위한 디자인 언어를 제안합니다.

https://www.ibm.com/design/language/

Philosophy

Typography

Color

Grid

Logos

Iconography

Illustration

Photography

Data Visualization

Layout

Animation

Resource

첨부 이미지

Ant Design

알리바바그룹의  디자인 시스템입니다. 거대한 기업단위 프로덕트가 많기 때문에 이를 포괄하기 위한 디자인 시스템을 제공합니다. 트위터에서 제공하는 부트스트랩처럼 다양한 웹 컴포넌트를 제공합니다.

https://ant.design/   

Global Styles

Design Patterns

Visualization

Motion

Illustrations

첨부 이미지

Atlassian’s Design Language

호주의 엔터프라이즈 소프트웨어 회사인 아틀라시안의 아틀라시안의 디자인 언어입니다. 이슈 추적 앱 지라, 협업용 위키 컨플루언스로 유명합니다. 설계 패턴, 코드 구성, UI 리소스를 제공합니다.

Atlassian Design System

Brand

Foundations

Content

Resource

첨부 이미지

SalesForce Lightning Design System

세일즈포스의 디자인 언어입니다. 맥락은 Shopify와 비슷하며 visualforce, heroku 등 다른 곳에서는 제공할 일이 없는 플랫폼의 가이드를 제공합니다. 상당한 숫자의 컴포넌트 가이드라인을 제공합니다.

https://www.lightningdesignsystem.com/

Platforms

Design Guidelines

Accessibility

Component Blueprints

Utilities

Design Tokens

Icons

Tools

Resource

첨부 이미지

Airbnb Design

업계의 디자인 문화를 이끌고 있는 에어비앤비의 디자인. 구현을 위한 디자인 이상의 디자인 문화에 대한 이야기를 구축했습니다. 디자인과 연관된 다양한 주제를 바탕으로 에어비앤비만의 문제 해결 방식에 대해 블로그 형식으로 풀었습니다. 

https://airbnb.design/

첨부 이미지

Adobe Spectrum

포토샵, 프리미어 등을 서비스하는 어도비의 디자인 언어입니다. 다양한 플랫폼을 위한 커뮤니티와 함께 성장하는 디자인 시스템을 목표로 합니다. 디자인 토큰과 같은 디자인 시스템의 토대에 대한 정의와 설명이 자세합니다. 또 콘텐츠에 쓰이는 글에 대한 가이드라인이 사려 깊게 정돈되어 있습니다.

https://spectrum.adobe.com/

Foundation

Content

Components

Patterns

Tools and Resources

첨부 이미지

Uber Design system

우버의 디자인 시스템입니다. 우버의 디자인 시스템 발표는 항상 화제를 불러일으켰었습니다. Wolff Olins가 디자인한 우버 브랜드가 담겨있습니다. 볼드하고 단단한 디자인 언어로 유명합니다. 특히 모션에 대한 섬세한 가이드라인이 인상적입니다.

https://medium.com/uber-design/uber-design-platform-1ebff86c89e7

https://baseweb.design/blog/

https://brand.uber.com/de/en/   

logo

color

composition

iconography

illustration

motion

photography

Tone of Voice

Typography

첨부 이미지

Audi Design System

세계적인 명차를 생산하는 아우디의 디자인 시스템입니다. 아우디라는 브랜드 아이덴티티가 어떻게 전달되야하는지 중심으로 전달합니다. 자동차부터 애플리케이션까지 아우디를 접하는 모든 터치포인트에서의 일관된 사용자 경험을 전달하는 것이 목표입니다.

https://www.audi.com/ci/en/renewed-brand.html   

Brand Appearance

Basics

User Interface

Communication Media

Corporate Branding

Corporate Sound

Motion Pictures

Brand in Space

Audi Motorsport

Dealer Facility

블로그에서 보기

https://designcompass.org/2022/01/23/top-10-design-system/

영감을 주는 최고의 디자인 시스템

10가지 맥락, 10개의 디자인 언어

designcompass.org

디자인 나침반  

Blog: https://designcompass.org/

Facebook: https://www.facebook.com/designcompasskr/

Instagram: https://www.instagram.com/designcompass/

News letter: https://maily.so/designcompass/embed?src=notion

Kakaotalk: https://open.kakao.com/o/g6wKtndc

 

다가올 뉴스레터가 궁금하신가요?

지금 구독해서 새로운 레터를 받아보세요

✉️

이번 뉴스레터 어떠셨나요?

디자인 나침반 레터 님에게 ☕️ 커피와 ✉️ 쪽지를 보내보세요!

댓글

의견을 남겨주세요

확인
의견이 있으신가요? 제일 먼저 댓글을 달아보세요 !
© 2024 디자인 나침반 레터

디자인을 탐구하는 디자인 나침반의 소식과 다양한 디자인 뉴스를 공유합니다.

메일리 로고

자주 묻는 질문 서비스 소개서 오류 및 기능 관련 제보

서비스 이용 문의admin@team.maily.so

메일리 사업자 정보

메일리 (대표자: 이한결) | 사업자번호: 717-47-00705 | 서울 서초구 강남대로53길 8, 8층 11-7호

이용약관 | 개인정보처리방침 | 정기결제 이용약관 | 라이선스