UI UX 디자인 학습 일지 / Week 3 - 13 : Interface Design
✔︎ Elevation Depths
높낮이 표현을 위해 shadow사용.(컨텐츠의 계층을 반영)
✔︎ 밀도와 해상도. Density Resolution
정의한 버튼의 사이즈가 유사하게 출력되어야 하여 밀도차이를 두어 계산해 맞춤
사이즈는 비슷하게 하되 내부 밀도에 차이를 반영
High-density display & Lower density display
1dp=1px일 때 mdpi가 표준
Screen Size 타겟 디바이스에 맞는 해상도에 맞게 아트보드 정의. 최신폰보다 한 두 단계 아래 기종으로 많이 사용
✔︎ LAYOUT
✔︎ GRID SYSTEM
보이지 않는 guideline. 화면 구성하는 요소들을 일관된 시스템 속에 배치하는 것으로, 화면을 효과적으로 사용하기 위해 가상의 구역을 나누어 놓는 것.
-> 일관된 규칙성 보여주는 것이 중요. 디지털 프로덕트 디자인 시 전체 플랫폼에 공통으로 적용할 레이아웃과 그리드 시스템을 정의하는 것이 중요 !
Grid System의 세팅 - 4/8px 단위로 세팅 (안드로이드 보통 8배수. depth 있게 사용 시 2/4배수까지도 사용. 짝수 기준 !
✔︎ Column, Gutters, Margins - 그리드 시스템은 전체 화면에 일괄 반영.
* Column: 붉은 색의 단.
- 4columns: 360 해상도에서 많이 사용
- 8columns: 태블릿
* Gutters: 단과 단 사이의 간격, 컨텐츠를 분리. 한 개 당 가로폭. 모바일 플랫폼 디자인 시 모듈간 간격 정의 해상도 넓어질수록 Gutter도 더 넓게 사용됨* Margin: 화면상 가장 좌, 우측 여백의 너비. 고정값으로 사용됨, 화면 넓어질수록 여백 넓게 잡아줌
✔︎ 디지털 프로덕트의 Color System
* Primary (main) - Range잡아 main color톤이 유지.반영 되도록.
* Secondary
* Gray Scale
*Background/ Surface(모듈 내 표면 컬러)/ Error
✔︎ Typography
체계적으로 시스템화 하여 정의한 후 사용해야 함. (어플이 어떤 서체 등을 쓸지 정의가 선행되어야)
Body 잡는 것이 가장 중요. 보통 14-16 에서 본문 사이즈 사용
✔︎ Brand Font
ex. 배달의민족, 나이키(푸츄라), LUSH
자사 브랜드 서체 활용 시 브랜드의 캐릭터, 이미지가 반영 - 가독성을 해치지 않고 아이덴티티를 반영하는 정도로 사용
가독성, 정보를 위해서는 산세리프체를 사용하기도.
- LUSH 손글씨->흘림체로 캐주얼함 강조, 반문화정서가 담겨 사회/환경문제에 적극적으로 목소리를 내는 LUSH 이미지와 부합
/헬베티카->안정감, 정직함 전달
✔︎ SYSTEM Font
* Android
- Roboto (Google Fonts) 안드로이드 인터페이스 전용 서체, 다양한 weight
* iOS
- San Fransisco
어제는 어렵사리 업계에 진입하는 꿈을 꿨는데, 꿈인데도 처음 하는 필드다보니 잔뜩 겁을 먹었다.
자고 일어나서 무서움에 떨었을 정도..!
기초 이론 강의는 무조건 한 바퀴를 더 돌아야겠다. 비전공자라 겁부터 먹게 되는데 꿈에까지 나오다니..!
그리고 학습일지를 강의를 들으며 필기 겸 작성하고 있는데 이렇게 작성하는 게 맞는 것인지 모르겠다.
필기를 따로 할 태블릿이 없고, 학습일지는 필수라 최선의 방법이라 생각하고 작성해나가고 있다.
추후 이론 관련 노트처럼 확인하기 위함인데 이렇게 작성하니 학습일지가 꽤 도움이 되는 것 같다 !
남은 이번 주도 화이팅 -!