반응형
마감이 다가오는 과제 두 개를 최대한 작업해 보려 했다. 과제하다가 또는 특강을 듣다가 모르는 부분은 적극적으로 튜터님들께 질문드리고, 새로운 것들을 알게 되었다. 특히 실무에서 쓸 수 있는 팁들이라 잘 활용할 수 있을 것 같다. 두 과제 모두 디자인 가이드를 어느 정도 만들어야 한다. 덕분에 프라이머리 컬러와 세컨더리 컬러를 어떻게 결정하는지 또 그에 따라 그레이스케일은 어떻게 만들어야 하는지도 디테일하게 배울 수 있는 하루였다.
작업한 아이콘 개발자에게 배포할 때 유의할 점
- 언그룹 하고 배포하기 - 하나의 프레임 안에 하나의 레이어인 상태로 만들어야 한다. 그렇게 하지 않으면 쉐입 정리 제대로 하지 않고 보낸 것과 마찬가지다. 단, 원본은 나중에 수정할 것을 대비해 따로 정리해 놓는다. (아웃라인 스트로크 (라인 면처리) & 플래튼 Flatten 꼭! = 레이어 여러 개를 합침, 패스로 남김, 개발자가 SVG 추출할 때 오류 방지)
- 유니온 한 다음에 플래튼!
- 컨스트레인트 스케일로 설정
- 아이콘 이름 메타포 기준으로 지어야 중복되지 않음
- 시각적 보정해주기
- 바운딩 박스는 사용안해도 되는 부분, 바운딩 박스랑 그룹을.. 영역을 줌.. 걍 주먹으로 쥐고 있다고 생각하면 된다. 바운딩 박스를 빼면 아이콘 사이즈가 작아진다. 프레임으로 싸면, 사이즈도 가질 수 있고, 배경도 가질 수 있고.. (프레임으로 넣어야 한다. 그룹에 있으면 한계가 있고, 바운딩 박스로 svg 추출할 때 불필요한 코드가 들어간다.)
- 아이콘 배포 기본사이즈는 24X24 (개발자는 이 사이즈만 알고 있으면 된다. 늘이고 줄이고 다 하니까)
반응형
'디자인 > UX UI' 카테고리의 다른 글
[UX/UI] 프로덕트 디자인 역량 키우는 방법 (1) | 2024.07.10 |
---|---|
[UX/UI] 유저 리서치 중요성 & 종류와 목적 (0) | 2024.07.09 |
[UX/UI 디자인 스터디] 와이어프레임 (0) | 2024.06.17 |
[UX/UI 디자인 스터디] 웹 앱 차이점 (1) | 2024.06.17 |
[UX/UI 컴포넌트] 모달의 개념 Modal + 다이얼로그 (1) | 2024.06.14 |