-
[컨퍼런스 후기] UX/UI Design System - 듀오톤 정다영Writing about UX/Conference review 2020. 6. 21. 21:59
디자인 시스템 장점
1. 일관된 브랜드 아이덴티티를 전달할 수 있고, 일정한 사용자 경험을 제공할 수 있다.
2. 콜라보레이션 할 때, 한 가지 방향(목적)을 가지고 진행할 수 있다.
3. 돈과 시간을 절약할 수 있다.
4. 수정사항이 생겼을 때 바로 반영이 가능하다.
디자인 시스템 단점
1. 디자인이 진부해질 수 있다. (다 똑같이 생기게 될 우려가 있다.)
2. 크레이티브한 디자인에 제한을 준다.
3. 언제나 모든 상황에서 필요하지 않다. (때문에 디자인 시스템이 정말 필요한가 고찰해볼 필요가 있다.)
디자인 시스템 사례
1. Apple - Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/
2. Google - Material Design
3. Microsoft - Fluent Design System
https://www.microsoft.com/design/fluent/
4. IBM - Carbon Design System
https://www.carbondesignsystem.com/
5. Airbnb Design System
https://airbnb.design/building-a-visual-language/
6. Polaris Design System
7. Atlassian Design System
8. Audi Design System
https://www.audi.com/ci/en/guides/user-interface/introduction.html
9. RIDI Design System
디자인 시스템 구조 설계
1. Atomic Design System
ATOMS > MOLECULE > ORGANISM > TEMPLATE > PAGE
Text(style) Buttons Cards Skeleton of Screens or
Colors Text fields List Screen Page
Icons Menu Navigation Bar Modal
Etc Etc Etc
2. Material Design System
Foundation > Components > Patterns
Text(style) Buttons Cards Skeleton of Screens or
Colors Text fields List Screen Page
Icons Menu Navigation Bar Modal
설계 방법
1. 참고할 만한 디자인 시스템 구조 파악
2. 내 디자인 시스템에 꼭 필요한 것들 선정
3. 나만의 디자인 시스템 구조 설정
4. 구조 내용 하나씩 채우기
고려해야할 목록 설명
1. Color
[타입]
[중요도] - Primary Color / Secondart Color(모든 디자인 시스템에 필요하진 않다.)
[밝기] - Light / Nomal / Dark
2. Typo
[타입]
[언어종류]
[사이즈]
[칼라]
[Align] - Left / Center / Right
** 각각의 타이포그래피가 어떤 경우에 사용되는 지 서술해야한다. "이 타이포는 버튼에서만 사용해!"
3. Icon
[카테고리]
[Lable(세부 카테고리/이름)]
[사이즈] - 표준 사이즈를 골라 각각의 아이콘의 규격을 통일 시키는 게 좋다.
- SVG 파일로 만들면 자유로운 사이즈 조절이 가능하다.
4. Button
[타입] - 아이콘만 있는 버튼인지, 텍스트만 있는 버튼인지, 아이콘과 텍스트가 함께 있는 버튼인지 등등
[유형] - Contained Button , Outlined Button, Text Button 등 (주목도에 따라, 위계에 따라 선정)
[사이즈]
[Status] - Enabled / Disabled / Hover / Focused / Pressed -> 전부 정의해야 한다.
완성된 디자인 시스템 공유
1. Sketch Cloud를 통해 완성된 디자인 시스템을 올린다.
2. 각각의 디자이너들이 Sketch Cloud에서 디자인 시스템을 다운받는다.
3. 변경사항이 있을 경우, 다 같이 변경되기 때문에 편리하다.
마무리 지으며
1. 모든 것을 공통 시스템을 이용해 할 필요는 없다. 한가지 앱에서도 디자인 시스템이 필요한 경우가 있고, 없는 경우가 있기 때문에 이를 잘 고려해서 작성해야한다.
2. 만드는 것보다 유지하는 것이 더 중요하다.