What is Gestalt
● 게슈탈트 Gestalt는 독일어로 전체 모양(configuration), 형태, 모습, 형상 등 의미를 시각적으로 형상화한 개념
● 심리학에서 게슈탈트는 세상을 지각하는 방식을 의미한다. 세상을 볼 때, 우리는 눈으로 들어오는 정보를 단순히 받아들이지 않고 몇몇 부분을 수정하거나 보강해서 지각하게 되는데 이것을 게슈탈트라고 한다. 착시의 원인이 이것이다.
상단 내용이 웹상에 대부분 서술돼 있는 게슈탈트에 대한 내용이다. 좀 더 자세한 분류와 심도 있는 글들은 웹상에 많이 존재하므로 검색해서 보시길 바란다. 오늘은 편집 디자인할 때, 디자이너들이 약속이나 한 듯 스스로 지키는 게슈탈트 현상을 집고 넘어가려 한다.
- 폐쇄성, 완결성 closure
인간의 시지각은 분리된 조각이 아닌 하나의 완성된 사물로 보도록 작용한다 - 연속성 Continuity
유사한 반복적 배열이 하나의 묶음으로 지각하는 원리
직선 또는 부드러운 곡선을 따라 배열된 대상이 하나의 단위로 보인다. - 유사성 Similarity
사용자가 형태를 시각적으로 집단화, 지각하려는 원리
비슷해 보이는 사물들이 하나의 묶음으로 인식한다. - 근접성 Proximity
가까운 것끼리 묶어서 지각하려는 원리
사용자가 형태를 지각할 때, 가까운 것 끼리 묶어서 지각한다. - 피규어 그라운드 Figure & Ground
어떤 대상이나 이미지를 볼 때 특정 형태를 나타내는 부분을
전경 또는 그림으로 판단, 그 외 나머지 부분은 배경으로 인식하게 함
디자인 그룹화
디자인 하려는 내용의 그룹화를 시도하려면, 정말 당연한 이야기지만 해당 내용을 숙지하고, 비슷한 내용을 분류하고 우선순위를 정하는 일이다. 잘 조직된(그룹화) 정보들은 전체적인 덩어리(면적)가 생기고 전반적인 흐름이 좋아져 이해가 빨라지는 장점이 있다. 그룹화가 가장 많이 쓰이는 곳은 편집디자인(예를 들어 명함 디자인, 리플릿)이 있다.
▲ 01
사진과 텍스트가 정리가 안된 모습. 연관성 없이 의식의 흐름대로 무작정 지면에 올리다 보면 디자인은 산으로 간다. 무엇을 먼저 봐야 할지도 모르겠고, 우선순위도 없다.
▲ 02
사진과 텍스트의 내용을 고려해 같은 내용의 요소끼리 배열하고, 텍스트의 시각적 우선순위를 만들어 그룹화시켰다.
사실 forest와 city의 간격을 조금 더 벌리면 조금 더 효과적이지만, 우리가 일하는 세계는 지면을 넉넉하게 주지 않는다.
다시 한번 강조하지만, 사진과 내용의 연관성 + 배열은 그룹화의 기초지만 간과하고 넘어가는 사례들이 있다.
기초를 지켜보자.
" 마법의 디자인 / 31페이지 "
그룹화의 3 Point
point 1. 같은 의미나 역할을 하는 요소를 연결한다
연관성 높은 정보끼리 가깝게 배치해서 그룹화한다. 시각적인 연관성이 높기때문에 인식하기 쉬운 레이아웃이 완성된다
point 2. 연관성이 낮은 요소는 서로 연결시키지 않는다
연관성이 낮은 요소는 가깝게 배열하지 말아야 한다. 적절하게 거리를 떨어뜨림으로써 연관성이 없다는 것을 명확하게!
point 3. 배경을 적절히 이용한다
디자인에서 배경이란 여백을 의미하고, 앞에서 언급한 것처럼 연관성이 높은 그룹과 낮은 그룹을 배열하는 경우에는 명확한 차이를 알 수 있게 의식적으로 여백이 만들어지도록 신경을 쓰는 것이 좋다.
-
명함 디자인할때 디자인에 무심한 분들은, 모든 걸 다 크게! 잘 보이게! 두껍게! 가까이! 뭉쳐! 이렇게 작업을 맡기거나 요구를 하시곤 합니다. 제발, 피해 주세요! 시각 공해입니다. 왜 내 명함은 뭔가 산만하고 글이 잘 안 읽히지?라는 의문이 든다면 다른 회사의 명함과 한번 비교해보세요. 그룹화가 잘 돼있고, 빈 여백도 알맞게 있는 상태입니다.
tip
먼저 정보의 우선 순위를 1. 회사명(로고), 2. 직함과 이름 3. 주소와 연락처 등 총 3개의 그룹을 만들고 서로의 거리에 여백을 주세요. 순간 깔끔해집니다!
2020/05/06 - [Design log/손안에 디자인] - 05.손안에 디자인 - 시각보정 vol.2 (기준과 무게)
2020/05/03 - [Design log/손안에 디자인] - 04.손안에 디자인 - 낱자 크기 균형 (시각보정 )
2020/04/30 - [Design log/손안에 디자인] - 03.손안에 디자인 - 폰트 행간에 대해서 알아보자! (feat. 글줄 사이)
2020/04/27 - [Design log/손안에 디자인] - 02. 손안에 디자인 - 폰트 자간 사용에 대한 기초를 알아보자! 디자인 초보 탈출 방법 Tip
2020/04/19 - [Design log/손안에 디자인] - 01. 손안에 디자인 - 폰트(서체) 너비에 대해 / 장체와 평체
2020/04/08 - [Design log/손안에 디자인] - 00. 손안에 디자인 - 폰트(서체)에 대한 기본 지식! 왕초보 탈출하기
'Design log > 손안에 디자인' 카테고리의 다른 글
| 09. 손안에 디자인 - 타이포그래피에 도움되는 10가지 규칙 (Blind 제공) (1) | 2020.05.24 |
|---|---|
| 08. 손안에 디자인 - 부호, 표상, 상징의 차이 (3) | 2020.05.22 |
| 07. 손안에 디자인 - 판면과 여백에 대한 매우 짧은 이야기 (0) | 2020.05.17 |
| 05.손안에 디자인 - 시각보정 vol.2 (기준과 무게) (0) | 2020.05.06 |
| 04.손안에 디자인 - 낱자 크기 균형 (시각보정 ) (0) | 2020.05.03 |
댓글