brunch

You can make anything
by writing

C.S.Lewis

by 레오 Nov 03. 2022

디자인시스템 관련 자료 모음집  

튜토리얼, 레퍼런스, 공식 디자인 가이드 등을 모두 담았습니다.

제가 활동하고 있는 커뮤니티에서 공유된 다양한 자료들을 모아두었습니다.

혹시 들어오시면 '레오' 찾아주세요! 반갑게 맞이해드리겠습니다 :)



1. 리메인 디자인 시스템 가이드 무료 튜토리얼

리메인에서 무료로 발행한 오픈 튜토리얼 디자인 시스템. 해상도와 그리드시스템, 타이포그래피, 컬러 ,아이콘, 컴포넌트, 계층구조 등 디자인시스템 구축을 위한 a to z에 대해서 살펴볼 수 있는 튜토리얼.
https://www.remain.co.kr/page/designsystem/icon-size.php 




2. 디자인 콤패스 디자인 시스템 모음

디자인콤패스에서 뽑은 최고의 디자인시스템 top10! 애플의 Human interface Guideline, 구글의 Material Design, MS의 Fluent등 표준 디자인시스템들에 대한 지식도 얻을 수 있고 바로 공식가이드라인으로 이동할 수 있는 링크까지 연결되어있다.

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




3. 구글 머터리얼 디자인


구글해서 발행한 공식 가이드. 안드로이드 앱은 이렇게 디자인 하는 것이 좋습니다! 라는 가이드.

안드로이드 앱을 개발한다면, 안드로이드 앱을 디자인하거나 / 기획한다면 필수적으로 들어가봐야 하는 곳.
https://material.io 




4. IBM 카본디자인시스템

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


5. apple 휴먼인터페이스 가이드라인

구글에 Material Design이 있다면 애플에는 HGI가 있다. IOS 앱을 만들거나 디자인하거나 기획한다면 꼭 봐야하는 가이드. 별개로 UX의 표준이 무엇일까? 깔끔한 디자인은 어떻게 하는 것일까? 에 대해서 감을 익히기에도 좋다고 생각한다. 애플의 철학이 묻어있는 디자인 가이드이기 때문.


https://developer.apple.com/design/human-interface-guidelines/platforms/designing-for-ios 


6. 라인 디자인 시스템


https://designsystem.line.me 




7. 국내 해외 디자인 시스템 및 스타일 가이드 모음

https://brunch.co.kr/@5bb7412700ae45a/2 




8. 해외기업들 디자인시스템

https://adele.uxpin.com 


9. 소카 블로그에서 발행한 컴포넌트 제작 / 사용 관련 포스트

https://tech.socarcorp.kr/design/2020/07/31/component-01.html 


10. 브런치 - 디자인 시스템 만들기 글

https://brunch.co.kr/@sylviasolution/67


11.DesignSystemsForFigma

figma에서 바로 사용할 수 있는 figma community 내 다양한 디자인 시스템 레퍼런스 모음.

https://www.designsystemsforfigma.com/


12. Components.gallery

디자인시스템 구축을 위해 필요한 알림/뱃지/버튼 등 컴포넌트들을 살펴볼 수 있는 사이트

https://component.gallery/components/


----11월 7일 추가 업데이트---


13. 개미는 뚠뚠 - 포트폴리오 레퍼런스 중 디자인시스템 잘 정리해둔 레퍼런스.

https://www.behance.net/gallery/147262623/-ANTOON-l-Webtoon-Community-Service



14. 에어비엔비의 디자인시스템에 대한 브런치 글 

https://brunch.co.kr/@eunlune/15


15. 아카이빙 노션사이트

 디자인시스템이 아카이빙된 노션 사이트 . 많은 양의 자료가 아카이빙 되어있습니다.

https://designshare.notion.site/2ab85db37e35456987abdece44d6a5bd


16.  핀터레스트의 디자인 시스템인 게슈탈트.

핀터레스트에서 볼 수 있는 독특한 수직정렬 레이아웃인 Mansory에 대한 내용도 담겨있고, 모달, 알림 등등을 자세히 구분해놓았다는 특징까지.

 https://gestalt.pinterest.systems/home


17. HR 플랫폼 flex의 디자인 시스템 관련 슬라이드

디자인시스템의 정의에 대한 고민, flex의 디자인 시스템 linear에 담긴 철학 등이 담겨있다.

https://speakerdeck.com/soyoung210/dijain-siseutem-hyeongtaereul-neomeoseo?slide=1


작가의 이전글 제품 주도 성장은 어떻게 하는걸까?
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari