쇼파이(Shopify)는 온라인 상점과 소매점 판매점 시스템을 위한 이름뿐인 독점 플랫폼을 가진 캐나다의 전자상거래 회사다. 이 회사는 또한 쇼파이(Shopify)와 쇼파이(Shopify) 상인들이 더 나은 사용자 경험을 쌓도록 돕는 것을 목표로 하는 폴라리스(Polaris)라는 디자인 시스템의 배후에 있다.

Polaris는 디자인, 컴포넌트, 패턴 섹션뿐만 아니라 콘텐츠 섹션도 제공하며, 음성 톤, 문법, 카피링 팁에 대한 가이드라인을 제공한다.

Material Design by Google

2014년 구글에 의해 디자인 언어로 처음 소개된 Material Design은 이후 사용자 인터페이스 설계의 베스트 프랙티스를 지원하는 적응형 가이드라인, 구성요소 및 도구 시스템으로 진화했다. Material Design은 오픈 소스 코드를 기반으로 설계자와 개발자 간의 협업을 촉진하고 팀이 제품을 신속하게 제작할 수 있도록 돕는다.

Atlassian Design

Atlassian은 호주의 엔터프라이즈 소프트웨어 회사로, 이슈 추적 애플리케이션 지라와 팀 협업 도구와 위키 컨플루언스로 가장 잘 알려져 있다. 아틀라시안은 또한 2012년 아틀라스 디자인 가이드라인(ADG)으로 처음 공개된 디자인 시스템을 스포츠로 활용한다.

시스템은 매우 상세하며 설계 패턴, 코드 구성요소, 스케치(Sketch)의 UI 자산 라이브러리 등으로 구성되어 있다. 당신은 또한 각각의 선택 뒤에 숨겨진 추리를 찾을 수 있다.

IBM Design Language

IBM의 디자인 시스템은 다른 사람들처럼 화려하거나 멋지지 않을 수도 있지만, 오히려 매끈하고 기능적이며, 직각적인 방식으로 기능하기 때문에 그 기능도 남다르다. 애니메이션, 아이코노그래피, 색상, 재사용 가능한 코드 등에 대한 논리적이고 깔끔한 개요와 함께 설계 시스템에 대한 몇 가지 사용 사례가 있다.

Airbnb Design

에어비앤비는 전세계적으로 저렴한 환대 서비스를 제공할 뿐만 아니라, 그 회사는 또한 최첨단 기술을 특징으로 하는 그들만의 디자인 시스템에 대한 통찰력을 공유한다.

Airbnb Design은 "살아있는 유기체의 요소와 같은 요소"인 요소들로 구성되는데, 여기서 속성 집합은 각각의 구성요소를 정의하며, 고유의 개성과 기능을 가지고 있다. 구성요소는 여전히 더 크고 진화하는 생태계의 일부인 반면 다른 구성요소와 함께 작동하거나 스스로 진화할 수 있다.

Fluent by Microsoft

유창한 디자인 시스템은 2017년 마이크로소프트가 개발한 것으로 모든 윈도 10 기기 및 플랫폼에 맞게 설계된 소프트웨어 내에서 사용되는 디자인과 상호작용에 대한 지침을 포함하고 있다.

감각 요소는 평면 스크린을 넘어 적용하고자 하는 의향이 증가하면서 빛, 깊이, 움직임, 물질, 눈금 등 5가지 핵심 구성요소에 기초한다.

MailChimp

이메일 및 마케팅 자동화 서비스 MailChimp는 설계 시스템이 완전히 싹트기 몇 년 전에 사용 가능한, 잘 확립된 설계 시스템을 특징으로 한다. 설계 시스템은 견고하며 단순하고 사용자 친화적으로 유지된다.

MailChimp에는 편리한 콘텐츠 스타일 가이드도 있다.

Nachos by Trello

프로젝트 매니지먼트 애플리케이션 트레로는 깔끔하고 경량화된 접근방식으로 간편하게 찾아볼 수 있으며, 따라 하기 쉬운 원리를 가진 디자인 시스템을 갖추고 있다. 명시된 원칙은 스타일과 구성요소를 포함하며, 무엇이 Trailo 음색과 일치하는지 그리고 무엇이 그렇지 않은지를 식별하는 데 도움이 된다.

Solid by BuzzFeed

미국의 인터넷 매체, 뉴스, 엔터테인먼트 회사인 버즈피드는 뻔뻔하고 장난기 많은 스타일로 유명하며 그들의 디자인 시스템 솔리드도 예외는 아니다. 솔리드는 자신감이 넘치지만 여전히 간결하며 버즈피드의 CSS에 유용한 참고자료로 작용한다.

버퍼는 소셜 미디어를 관리할 수 있는 플랫폼을 제공하며, 회사는 또한 그들의 디자인 시스템 원리에 대한 통찰력을 제공한다. 버퍼 스타일 가이드는 원자 설계의 개념에 기초하고 있는데, 여기서 독립적인 부분(아톰)은 더 큰 구조(분자)로 결합될 수 있으며, 이는 다시 더 큰 구조(조직)로 결합될 수 있다는 것이 주된 생각이다. 조직을 확장할 때 일관성, 명확성 및 단순성을 보장하는 훌륭한 아이디어.

Apple

마이크로소프트의 유창함과 유사하게 애플의 디자인 시스템은 애플 제품 및 서비스 제품군의 경험을 향상시키기 위한 것이다. 이 디자인 시스템에서는 사용자가 친숙하고 미래에 대비할 수 있는 경험을 쌓기 위한 비디오 세션과 튜토리얼을 시청할 수 있으며, iPhone X의 경험 최적화 방법(예: 소리 디자인 및 푸시 알림의 쓰기)을 볼 수 있다.

Lightning by Salesforce

Salesforce는 CRM, 고객 서비스, 마케팅 자동화, 분석 및 애플리케이션 개발을 포함한 클라우드 기반 소프트웨어 내의 핵심 요소다. 이 미국 회사는 비즈니스 앱 구축에 초점을 맞춘 오픈 소스 프로젝트인 번개라고 불리는 철저하고 문서화된 디자인 시스템을 스포츠한다. 디자인 시스템은 접근성, 구성요소, 패턴, 유틸리티, 디자인 토큰 등에 대한 전문적이고 포괄적인 가이드를 제공한다.

***

디자인 시스템을 만들고 유지하는 것은 확실히 단기 프로젝트나 장밋빛 침대도 아니지만, 여러분이 그것에 쏟을 모든 노력은 결국 모든 조직의 재사용 가능한 코드와 요소 면에서 결실을 맺을 것이다.

keyword

zabiss 소속 직업 기획자

에이전시 기획자의 소소한 생각과 경험에 대한 이야기

구독자 651

매거진의 이전글 모바일 CTA 버튼을 위한 최적의 배치(번역)

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari