[제로베이스 UIUX스쿨] 3주차_4

인터페이스 디자인 기초

디자인환경

Z축으로 깊이감을 표현

elevation 뎁스마다 요소가 있고 이것이 모인 것이 엘레먼트
 
밀도와 해상도

보여지는 사이즈는 최대한 비슷하거나 같게 하되 그 안에 밀도차이를 줌

1DP=1픽셀이 기준점 (mdpi가 표준)
DP의 사이즈는 어떤 해상도에서도 같음 다만, 보여지는 동일한 사이즈 내에 포함하고 있는 밀도감은 다름
 

레이아웃 그리드 시스템

스크린 사이즈
타겟 디바이스에 맞춰 진행(대게 최신폰에서 한두단계 아래의 제품을 사용)
리서치 기반으로 타겟사이즈를 선정하기도 함 

360*640

2배수의 xhdpi(720*1280)을 1배수의 mdpi(360*640)로 변환하여 작업
큰 사이즈로 디자인할수록 용량과 리소스가 커지기때문에 1배수로 하는 것을 추천
 
레이아웃/그리드 시스템
레이아웃- 설계, 지면의 배열, 배치/ 잡지나 광고, 출판물 등을 디자인할 때 텍스트나 이미지 등의 요소를 보기좋게 배열하는 것을 의미
그리드시스템- 디자인에서 화면을 구성하는 요소들을 일관된 시스템 속에 배치하는 것으로 화면을 효과적으로 사용하기 위해 가상의 구역을 나누어 놓은 것(보이지 않는 가이드라인)

포토샵으로 간단하게 잡은 격자 레이아웃

컬러시스템 프라이머리컬러/세컨더리/그레이스케일
무조건 같은 컬러만 쓰는 것이 아닌 컬러레인지를 잡고 디자인컬러를 반영하고 있음
백그라운드 맨밑
서페이스 바닥에서 한뎁스 올라온 것(모듈 안)
에러 레드계열을 기본으로 사용(프라이머컬러와 겹치지않도록 주의)

타이포그래피시스템
바디를 잘 잡아야 그 위와 아래를 잡을 수 있음
14-16을 본문사이즈로 주로 사용
브랜드폰트

 

시스템폰트
해당OS에서 제공하는 기본 폰트
안드로이드 로보토(Roboto)
ios 센프라시스코(SF Pro)

---

으악 강의가 점점 밀리고 있다 ..! 그래도 다음주에는 강의가 없던데 그때 들을 수 있지않을까?하면서 조금씩이라도 듣는중 ㅠ.ㅠ

하이팅하이팅