brunch

매거진 쓸모있는 디자인

라이킷 98 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 도토리 Dec 20. 2022

글로벌 대표 기업의 디자인 시스템 10

10 most popular design systems to learn from in 2022 for UX Designers

다양한 사례를 통해 디자인을 배우고 영감을 얻을 수 있도록

글로벌 기업에서 개발하고 관리하는 디자인 시스템 목록을 소개합니다.

지난 몇 년 동안 인터페이스 설계의 규모 및 속도가 크게 증가했습니다. 수백만 개의 웹 및 모바일 애플리케이션이 있으며 수백만 개의 웹사이트 또는 앱에는 수백, 수천 개의 화면이 있을 수 있습니다.

규모에 맞게 디자인을 관리하고 프로세스를 간소화하려면 잘 만들어진 디자인 시스템이 필요합니다.

전 세계 기업들은 디지털 트랜스포메이션에 지속적으로 투자하고, 그만큼 신제품을 구축하는 데 걸리는 시간을 단축하고자 합니다. 디자인 시스템은 여러 터치포인트에서 효율적인 작업을 위해 도움이 되는 리소스 중 하나입니다.

디자인 시스템이란?

정확하고 직접적인 정의를 찾아 보았지만, 인터넷에는 막연한 개념도 많은 것 같습니다.

어쩌면 그 범위는 누구에게 질문하느냐에따라 다른 것 같습니다.

아래에는 그 중 적절하다고 생각되는 두 가지 정의를 옮겨보았습니다.

“The complete set of design standards, documentation, and principles along with the toolkit(UI patterns and code components) to achieve those standards.” (source: uxpin.com)

“Design systems are essentially collections of rules constraints in principles implemented in the design and code. These three attributes serve distinct functions and provide a coherent system at systemic order in systems for buttons to single-page applications.” (source: medium.muz.li)

요약하자면 디자인 시스템은 중복을 줄이고 일관성을 유지하여 규모에 맞는 디자인을 관리하기 위한 일련의 표준 규약 시스템을 말합니다.

그럼 이제 살펴볼까요?

1. 구글 머터리얼 디자인(Material Design)

구글에서 개발한 플랫 디자인 기반의 심플하고 우아한 디자인 패턴과 스타일을 포함한 디자인 가이드입니다.

https://material.io/

2. MS 플루언트 디자인 시스템 (Fluent Design System)

Microsoft에서 개발한 Win10과 Win11의 장치와 플랫폼에서 디자인과 인터랙션을 고려해 만들어졌으며,

빛(light), 깊이(depth), 동작(motion), 재질(material) 그리고 스케일(scale)의 5가지를 기본요소로 구성합니다. 새로운 디자인언어로서 (prominent use of motion)과 깊이(depth) 및 반투명효과(translucency effects)를 포함했습니다.

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