sumini dev

posts

디자인시스템 참고 자료 모음

profile-image

Choi su min

Design system 만들기

  1. 쏘카 - 쏘카프레임 구축 배경과 과정

semantic 컬러, 네이밍 통일, 컴포넌트 속성 등 실질적으로 헤맬만한 + 개발자와 의사소통하기 힘들만한 주제들을 쉽게 풀어내줘서 유용했다! 쏘카의 프로덕트팀 구성원들이 얼마나 긴밀하게 협업하고 있는지를 엿볼 수 있는, 좋은 자료다.

  1. 리디 - 플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기

디자인시스템 도입을 고민하고 있거나, 이제 막 디자인시스템을 도입한 조직이 참고하면 정말 좋을 것 같은 자료다. 발표 자료는 디자인시스템을 구축해가는 프로세스 자체에 대한 설명이 주를 이루고 있지만, 리디 디자인 시스템을 참고하면 체게적인 Principles, Writings, Colors system 적용 사례들을 확인할 수 있다! Writing등은 실제로 디자인하면서 놓치기 쉬운 부분인데, 체계적으로 잡혀있어 정말 좋은 참고 자료가 될 것 같다.

  1. 마일리얼트립 - 날고 있는 여러 비행기 넘나 들며 정비하기

제시된 적용 사례가 디테일하지 않아 그대로 갖다 쓰긴 어렵다. 개념 위주로 이해하고 넘어가기 좋은 자료다~

디자인시스템 예시

  1. 리디 디자인 시스템

Writing system을 다룬 유일한 공개 디자인시스템(한글로 된). 아이콘, 컬러 등에 대한 정의도 디자인적으로 매우 자세하게 설명되어있어 참고하기 좋다.

  1. 쏘카 프레임

Overview - Getting Started에 플랫폼별 해상도, 단위, 가이드라인등에 대한 유용한 팁이 있다.

  1. Shopify Polaris

접근성, 챗봇 UX등 꽤나 지엽적인 부분까지 커버하고 있는 디자인시스템!

  1. Gitlab Pajamas Design System

DESIGN SYSTEM1개 더보기

DESIGN1개 더보기

모든 글 보기

이전 글

아토믹 디자인(Atomic Design) 적용기 : 한계점, 단점

다음 글

Next.js 10, 뭐가 바뀌었을까?

profile-image

Choi su min

Sogang Univ.

AWESOME.DEV Lead

Anyang, Gyeong-gi, Republic of Korea

github-iconmail-iconrss-icon