cadion

ref. : https://brunch.co.kr/@thinkaboutlove/227

시각적 무게

• Bounding box VS 체적 ( bounding box / bounding circle... )

• 블러효과를 통해 인지적 무게 확인

• 일관성에 대한 규칙 예

배열과 인지

End point

실제와 인지 차이

주로 사용하는 리소스

• google fonts
  • 필터링 기능 제공 ( type face 기반 )
• adobe fonts

Type Face와 font-family

• Type Face : 폰트의 타입에 대한 구분
• Font Family : 폰트타입 내 바리에이션에 대한 구분 ( bold 등 )

대분류

• 영문
  •  Serif
    • 글꼴의 꼭지점에 획이 그어져 있는 형태

      

      •  

• Sans Serif
  
  • 글꼴의 꼭지점에 획이 안그어져 있는 형태
  • 주로 문단 등 장문/줄글에 적합
• Display
• Hand Writing
  • 손글씨
• Mono Space
  • 알파벳과 관계없이 너비가 일정한 자체. 프로그래밍 등 오탈자에 민감한 환경에 유리

• 한글
  • 바탕 ( 명조 )
    • 본문에 사용
    • 주로 명조
      • 가로획은 얇게, 세로획은 두껍게 그리고 가로획의 끝부분은 굵게 그린 한자 자체
  • 돋움 ( 고딕 )
    • 제목에 사용
    • 주로 고딕
      • 부리(serif)가 없고 가로획과 세로획의 대비가 적은 특징을 가진 한글 활자

체적 배분

• 글자의 심리적 체적이 클수록 자간 여백이 적어지는것을 추천
  • 글자의 크기가 크거나
  • 글자의 두께가 두껍거나
  • 글자의 종횡비가 크거나

• 정렬 시 bbox의 grid가 아니라 실제 drawing되는 영역의 가상 grid를 기준으로 정렬하도록 주의
  • text의 형태가 특이해서 글자 내 여백이 많을 경우

standard unit : inch

Human

 recognize capacity

• minimum separation distance ( for distinguish as objects )
  • outline
  • adjacent color contrast degree
• maximum information intensity

 Input accuracy

• per input type

Screen

 responsive UI

• multiples of 4
  • 0, 4, 8, 12, 24, 32, 64, 72 ~

Combine with 3D

 cost of screen occupancy

• opacity ( or geometric )
• inclined UI
• diegetic UI
• Icon
• contextual

Layered

 category

• by spatial

  

Grouping by function

ex) top/left/right/bottom

• for minimize
  • line of sight
  • recog searching time
• for cateogize
  • function in user recog

• by tap
• by access sequence ( depth )
• by depth ( order, dimension )