[유데미x스나이퍼팩토리] 11일차 (0508)

 

UI 디자인을 위한 그래픽 원리

1. Color

컬러는 색의 의미에 따라서 결정해주는 것이 좋다

컬러의 상징성을 이용해 마케팅에 주요하게 사용되어지므로 브랜드의 컬러는 매우 중요하다

 

 

그럼 색을 어떻게 써야 실패하지 않지?

1. 단색 활용 : 같은 계열에서 명, 채도만 변화주기
2. 유사색 활용 : 20색상환 표 에서 메인 색의 주변색으로 유사색들을 보조로 활용
3. 반대색(보색) 활용 : 더 다채로워보임
4. 포인트 컬러 : 최대 20%이내로 사용한다

 

2. 폰트

3종류 있음

1. 시스템 폰트 : 모든 컴퓨터와 디바이스에 있는 기본폰트
2. 웹폰트 : 다운로드해야함. 디바이스에 없어도 서버 업로드로 호출가능한 폰트
3. 이미지폰트 : 그래픽작업을 통해 폰트를 사용하면 이미지로 내보내기 후 사용

 

폰트 고를 때 유의 사항

• 브랜드 메세지
• 가독성
• 디자인에 어울리는가?

 

폰트사용원칙 8가지

• 글꼴 3개 이상 x
• 기본 표준 글꼴 사용 : 비주얼영역외의 이미지폰트는 x
• 가독성 높은 폰트 : 고딕
• 다양한 사이즈 대응가능한 폰트
• 위계에 따른 폰트 가이드 : 중요도에 따라서 크기가 다른 폰트
• 자연스런 행간사용 : 글자크기 * 1.618
• 색상 명도 대비 주의 (장애인 차별 금지법)
  작은 폰트 = 4.5:1
  큰폰트(b-14pt 이상, R-18pt 이상) : 3:1

 

국영문 폰트의 구조적 차이로 인한 시각차이 조정하기

-> 국 영문 폰트 분리로 디테일을 살리자

 

3. 그리드

왜 쓰나?

• 시각적 안정감
• 컨텐츠 정렬로 명확한 정보전달

디바이스의 Safe Area 주의해서 정렬할 것

 

---

게슈탈트 지각원리: 형태 심리학

전체로서의 형태, 사람은 전체 이미지를 각 부분들 사이의 상호관계와 맥락 속에서 지각한다.

1. 근접성 : 거리 가까운 요소끼리 묶어서 지각
2. 유사성 : 시각적으로 비슷한 요소끼리 묶어 지각
3. 폐쇄성 : 형태나 선으로 이어 기존에 알던 관념, 원형과 연결
4. 연속성 : 직선, 곡선을 이루는 시각적 요소들을 더 쉽게 인지
5. 전경과 배경 : 보이는 부분 전경, 그 외 부분은 배경으로 인지