Recommended
More Related Content
What's hot
What's hot (20)
Similar to 디자인 시스템 디자인하기
Similar to 디자인 시스템 디자인하기 (20)
디자인 시스템 디자인하기
- 1. Sketch Seoul Summer Meetup DESIGNING DESIGN SYSTEM
- 2. 디자이너는 자르고 개발자는 붙여서 돌려보고 DESIGNING DESIGN SYSTEM
- 3. 디자이너는 .PSD 파일 주고 개발자가 자르고 붙여서 돌려보고 DESIGNING DESIGN SYSTEM 개발자 성향에 따라 천차만별
- 6. DESIGNING DESIGN SYSTEM UI KIT
- 7. DESIGNING DESIGN SYSTEM UI KIT = 효율적인 UI 설계
- 8. DESIGNING DESIGN SYSTEM UI KITDesign System
- 9. DESIGNING DESIGN SYSTEM 디자인 개 발 DESIGN SYSTEM = UI KIT X DEV 심볼라이브러리를통한디자인중심이아닌실제개발까지효율적으로이어지게끔상호작용하는시스템을디자인시스템이라고한다.
- 10. DESIGNING DESIGN SYSTEM 스케치가 최대한 할 수 있는 건 심볼 라이브러리 기반의 UI 컴포넌트 제작 및 배포. - 스크립트 기반의 동적 케이스 처리 불가 Component 가 가지고 있는 경우의 수를 동적으로 처리 불가
- 11. DESIGNING DESIGN SYSTEM 여기서 제공하는 조합으로 내가 원하는 스크린 패턴이 다 나올까?
- 15. DESIGNING DESIGN SYSTEM UI Components - TITLE VALUE
- 16. DESIGNING DESIGN SYSTEM TITLE VALUE TITLE VALUE Atoms
- 17. DESIGNING DESIGN SYSTEM TITLE VALUE TITLE VALUE Atoms 구조화하면 할수록 복잡해짐
- 18. DESIGNING DESIGN SYSTEM 운영 > 심미성 운영 = 심미성 심미적인 부분이 약해짐 원자/콤포넌트 관리 포인트가 상대적으로 증가
- 19. DESIGNING DESIGN SYSTEM “디자인시스템은 유기적이어야 하는데 오히려 구속되어서…” 디자이너 사보미가 만들다 문득 든 생각…
- 21. DESIGNING DESIGN SYSTEM 디자인 시스템을 디자인하기 전에 해야 할 게 좀 있음.
- 23. DESIGNING DESIGN SYSTEM Structure Organize - 패턴을보고규칙을 만들어정리하라. - 개발지식없이디자이너 스스로만들기어렵다.
- 24. DESIGNING DESIGN SYSTEM 개발자랑 친해지세요.
- 25. DESIGNING DESIGN SYSTEM DESIGNING DESIGN SYSTEM
- 26. DESIGNING DESIGN SYSTEM 디자인 시스템을 만드는 것은 마치 농사짓는 거와 같다.
- 27. DESIGNING DESIGN SYSTEM 빠르면 3개월 늦으면 6개월
- 28. DESIGNING DESIGN SYSTEM 디자인시스템을구축하기위해스케치에서고민해야할것들. - Nested Symbol - Code - Documented - Be patient
- 29. DESIGNING DESIGN SYSTEM 스케치에서 모든 경우를 심볼화하면 Overrides 구조 복잡 해짐. Overrides 변수가 많이 뜨면 최초 제작자 아니면 매뉴얼 없이 제작하기 어려워지게 됨. - DO와 DO NOT 사례를 담은 매뉴얼 제작 - Group Folder 사용 Nested Symbol
- 30. DESIGNING DESIGN SYSTEM 진정한 의미의 디자인 시스템은 스케치 심볼 라이브러리 구축이 아닌 디자인과 개발을 효율적으로 이어주는 구조가 되어야 한다. 디자인팀이 UI Kit을 가지고 있다면 UI팀은 코드 기반의 UI Library를 가지고 있어야 한다. Code
- 31. DESIGNING DESIGN SYSTEM Value <div class="selbox_comm v2" style="width:250px;margin-right:10px;"> <a href="javascript:;" class="btn_option ico" onclick="select_type(thisValue X</a> <ul class="list_option"> <li><a href="javascript:;" onclick="selboxOpt(this);">Value 1</a></li> <li><a href="javascript:;" onclick="selboxOpt(this);">Value 2</a></li> <li><a href="javascript:;" onclick="selboxOpt(this);">Value 3</a></li> </ul> </div> ㄷㅈㅇ
- 32. DESIGNING DESIGN SYSTEM 1. UI 패턴을 뽑아본다. 2. 리스트를 작성한다. 3. 레이어 이름, 컴포넌트 이름 등 추출한 패턴에 근거한 규칙을 만든다. *개발자의 자문을 받으면 더 좋다. Layer name = Asset name 패턴 분석: 어떤 콤포넌트가 있는지..아이콘 종류, 서체 스타일, 적용된 컬러 등 Documented
- 33. DESIGNING DESIGN SYSTEM Be patient Component Color TextIcon
- 34. DESIGNING DESIGN SYSTEM Be patient
- 35. DESIGNING DESIGN SYSTEM 컴포넌트 구성 요소가 아주 매우 복잡해 짐 컴포넌트 관리가 어려워짐. 동시에 스타일 + 텍스트를 모듈 안에서 다시 모듈화 해서 관리하기는 정말 복잡하고 어렵다. 심미성을 포기하고 모듈화에 집중해야 될지도. 컬러 혹은 텍스트이 새롭게 추가 되면 관리 항목 개수가 비례 증가함.
- 36. DESIGNING DESIGN SYSTEM 한번에 한방에 완성 안됩니다. 하나씩 조금씩 쌓으세요
- 37. DESIGNING DESIGN SYSTEM 家內手工業 실제로 한 일 - 밖에서 사람들이 화려하게 말하는 디자인 시스템과 현실에서 내가 하고 있다는 거와 많이 다르다는 것을 체감 작업하다 보면 실제로 뭐가 중요한지 깨닫게 됨.
- 38. DESIGNING DESIGN SYSTEM 家內手工業 벡터화 심볼제작 구조화
- 39. DESIGNING DESIGN SYSTEM 시스템화구조화 경량화 +스타일 家內手工業
- 40. DESIGNING DESIGN SYSTEM 시스템화심볼제작 구조화 경량화 +스타일 무한반복 家內手工業
- 41. DESIGNING DESIGN SYSTEM Color Diet
- 42. DESIGNING DESIGN SYSTEM 18px 20px Icon Diet
- 43. DESIGNING DESIGN SYSTEM 그래도 끝난 게 끝난 게 아니더라.. 매 순간 효율성을 고민해야 되고 개선해야만 된다.
- 44. 디자인 시스템을 구축하는 건 농사짓는 거와 같다. 어쩌면 일년이 걸릴 수도 있다. 매 순간 개선 포인트가 발생한다. 그래서 구축 전략을 가지고 있어야 한다. DESIGNING DESIGN SYSTEM
- 45. 아무리 디자인 예쁘게 정성 들여 잘해 놓아도 구현이 안되면.. DESIGNING DESIGN SYSTEM
- 46. 디자이너도 개발을 알아야 한다. 어떤 개념으로 스크린이 제작 되는 지식 정도라 할지라도 그래야 구현가능한 범위에서 효율적인 디자인을 할 수 있음 DESIGNING DESIGN SYSTEM
- 47. 심볼은 항상 최소 사이즈로 제작. 예) 가로 폭 375로 제작하면 320인 경우 레아아웃이 깨지는 현상 생김. 320으로 만들어서 375로 늘려 쓰도록. 컬러 이름은 HEX 코드로 지정. 밝은 파랑, 연한 파란, 솔리드 블루, 마린블루 등 제 3의 컬러를 생성시 네이밍 잡기 어려움. Yellow-default, Yellow-dark, Yellow-Light, Yellow-Lighter, Yellow-Super-Lighter.