[UXUI 아티클 분석 04] 시각적으로 균형있는 디자인하는 방법(시각 보정 팁)

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

시각적으로 균형있는 디자인하는 방법(시각 보정 팁)

 

 

 

게슈탈트 이론

- 우리의 눈이 어떻게 이미지를 구분하고 우리의 뇌가 어떻게 그들을 해석하는지에 대한 과정

 

 

1. 측정한 크기와 눈에 보이는 크기

시각적으로 더 커 보이고 영역을 많이 차지하는 아이콘 사이에는 공간을 좀 더 남겨두고

시각적으로 더 작아 보이는 아이콘은 영역을 키움으로써, 도형마다 너비를 보정할 것을 추천

 

▷ 시각적 균형을 체크하는 가장 쉬운 방법

각 모형 블러 처리> 아이콘이 서로 비슷하게 덩어리 진 다면, 동일한 시각적 무게를 가진 것

☆기억해야 할 것

▷ 시각적 무게는 인간의 눈이 오브젝트의 중요도와 크기를 인식하는 방법. 반드시 픽셀 사이즈와 영역이 동일할 필요는 없음

▷ 원, 다이아몬드, 삼각형, 그 외 비사각형 도형들은 사각형 도형들과 시각적 균형을 맞추기 위해 더 키워질 필요가 있음

▷ 아이콘 영역은 시각적 균형을 위해 조금의 여백을 두어야 함. 이는 아이콘 세트를 만들 때 일관성을 갖기 위해 매우 중요한 요소

 

 

2. 다양한 도형의 배열(정렬)

(좌) 대문자 높이 정렬 Cap-height (우) 소문자 높이 정렬 x-height

☆기억해야 할 것

▷ 뾰족한 가장자리를 지닌 도형은 사각형 오브젝트 가까이에 있을 때, 시각적 균형을 맞추기 위해 더 길거나 크게 만들어야 함

▷ Cap-height 정렬은 버튼명과 버튼 배경을 배치할 때 효과적인 방법

▷ 버튼 위의 삼각형 아이콘 위치를 바로잡을 때 효과적인 방법 중 하나는 그것(삼각형)을 원으로 둘러싼 후 배경과 정렬하는 것

 

 

3. 시각적으로 올바른 모서리 라운딩

 

시각적으로 수정된 원이 더 "원형"으로 보임

(좌) 기하학적인 원 (우) 수정된 원

☆기억해야 할 것

▷ 기하학적인 둥근 모서리는 직선이 갑자기 곡선을 바뀌는 점을 쉽게 볼 수 있어서 인위적으로 보임

▷ 시각적으로 올바른 모서리 라운딩은 특별한 공식이나 수동으로 모양을 조정하는 것이 필요함

 

 

4.

 

 

 

 

 

 

 

---

 

텍스트 버튼에서 영어 대문자 소문자 높이 맞추는 건 완벽히 이해가 되지 않았음. 타이포에 대해 더 알아봐야 할듯하다

아이콘을 만들때 나는 임의로 옮기면서 시각보정을 했는데 실무에서는 이 원에 꼭 가둬서 비율을 맞춰야하는지 궁금증이 생겼음