UX 디자이너가 알아야 할 6 가지 시각 디자인 원칙
아티클 번역하기
원문: https://uxdesign.cc/6-visual-design-principles-that-ux-designers-should-be-aware-of-f609f9293703
대학에서 시각 커뮤니케이션 디자인을 공부할 때, 사람들이 특정 방식으로 생각하고 느끼고 행동하게 만드는 데 있어 디자이너가 얼마나 많은 파워를 가지고 있는지에 매료되었다.
10 년 동안 제품을 수백만 명의 사용자로 확장하고 제품 및 UX 디자이너로서 매출을 올리는 데 도움을 준 후에도, 저는 처음 몇 년 동안 배운 많은 기본 교훈을 계속 사용한다. 모양, 레이아웃을 검토하고 제품을 사용하는 사람들에게 양식이 어떤 영향을 미치는지 생각한다.
우리는 면, 선 등과 같은 모든 시각적 디자인 요소들에 대해 배워왔고 대조, 강조, 리듬 같은 원칙을 가지고 있어 왔다. 나는 그래픽 디자이너로서 교육을 배운 자주 언급되는 원칙이 아니라 몇 가지 미묘한 부분을 공유할 것이다. 그러나 나는 지금도 여전히 사용하고 있다. 그것들을 진보되었다고 부르고 덜 알려져 있지만 내가 공유함으로써 우리가 전체적으로 디자인 커뮤니티의 수준을 높일 수 있기를 바란다!
원칙
1. 중력
중력은 시각적 커뮤니케이션에서도 물체와 모양에 적용된다. 이상하게 들릴 수 있다. 중력이 실제 생활에서 처럼 2차원 물체를 아래로 당기는 실제 힘과는 다르다.
그러나 중력은 현실에 대한 우리의 인식에 너무나 깊이 뿌리 박혀 페이지의 2차원 물체로도 해석된다. 아래 이미지를 예로 들어 보겠다. 언제든지 상단의 원이 떨어지기를 기다리는 것처럼 약간 불편할 것이다.
이제 아래 이미지를 보면, 그 반대이다.
이 컴포지션은 떨어질 공처럼 느껴져야 한다. 페이지 하단에 있는 물체처럼 느껴져야 한다.
상단에 있는 시각적으로 무거운 물체가 불편하고 불안감을 느낄 수 있도록 디자인할 때 의도적이고 인지력을 발휘하라. (물론 전달하려는 느낌이 아닌 경우)
2. 읽기 방향
서구 사회에서는 왼쪽에서 오른쪽으로, 위에서 아래로 읽는다. 이것 때문에, 왼쪽에 있는 개체는 들어온 것으로 인식되고 오른쪽에 있는 개체는 나가는 것으로 인식된다.
여기 왼쪽에 원이 있다. 다시 말하지만 왼쪽에서 오른쪽으로 읽기 때문에 원이 구도에 들어가는 것처럼 느껴진다. 아래에서 원이 나가는 것처럼 느껴진다.
이것을 사용하여 특정 감정을 전달할 수도 있다. 예를 들어, 사물을 들여다보는듯한 느낌을 주고 싶은가? 아래와 같은 구성을 만들 수 있다.
아니면 반대로 도망가는 물체 (또는 캐릭터)를 전달하고 싶은가?
3. 읽기 우선순위
우리는 왼쪽에서 오른쪽으로 위에서 아래로 읽기 때문에 자연스럽게 왼쪽 상단에 있는 물체를 먼저 본 다음 눈이 자연스럽게 오른쪽 아래로 이동하고 그 후 거기에서 사물을 보게 된다.
모양 / 색상 / 크기가 같더라도 물건을 배치하는 위치에 시각적 계층 구조를 만드려고 하면 (사용자가 제목을 먼저 보고 그다음에 콘텐츠를 보기 원할 수 있다.
아래의 예를 살펴보라.
대부분의 경우, 당신이 영어 책을 왼쪽 위에서 오른쪽 아래로 읽으면서 자랐다면, 오른쪽 아래에있는 왼쪽 위 원을 먼저 보았을 것이다.
4. 시각적 장력
나는 한때 이것이 물리적 긴장이 번역되고 증폭되었다고 설명했다. 테이블 가장자리에 액체가 가득 찬 유리 잔을 볼 때 느끼는 느낌이다.
종종 시각적인 장력은 의도하지 않은 것이다. 디자이너들은 실수로 서로 인접한 모양을 배치하여 무의식적으로 장력을 생성한다는 사실을 깨닫지 못한다. 이것은 조잡해질 수 있다. 아래 이미지를 살펴보라.
아직 불편한가? 아래에 강조 표시된 모든 긴장 지점이 있다.
의도적이라면 시각적 인 긴장감을 사용하여 사용자의 눈을 끌고 불안감을 조성 할 수 있다. 시위를 위한 포스터를 디자인하거나 누군가의 관심을 무언가에 집중하고 싶을 수 있다. 그런 경우에는 긴장이 의도적이며 실수처럼 보이지 않도록해야 한다.
다음은 특정 위치에 집중하고 의도적으로 긴장된 동일한 구성이다.
5. 동적 vs 정적
정적 구성은 종종 지루할 수 있다. 양념을 더하고 더 흥미 진진하게 만드는 쉬운 방법은 단순히 수평선을 기울이는 것이다. 다음은 부실한 정적 이미지의 예이다.
이제 수평선을 기울이면 갑자기 도시 풍경이 훨씬 더 흥미로워 보인다.
컴포지션을 더욱 역동적이고 흥미롭게 만들기 위해 테두리를 사용하고 모양이 바깥쪽으로 번지도록 할 수 있다. 이 3점 투시 구성을 확인하라.
6. 네거티브 스페이스 활성화
방향 모양을 사용하여 음의 공간을 활성화 할 수 있다. 방향력이 너무 작아서 음의 공간이 비활성 상태로 유지된다. 여기, 당신의 주의를 끌고 눈을 위쪽과 오른쪽으로 움직이는 모양이 있다.
문제는 페이지의 오른쪽 상단에 도달 할 때까지 관심이 사라질 가능성이 있다는 것이다. 당신의 눈은 물체를 지나쳐 움직이지만 거기에는 너무 많은 공간이 있고 눈이 떨어지는 물체의 방향력이 너무 적다. 공간은 비활성 상태로 유지된다. (약간의 자르기 / 크기 조정)
갑자기 모양 주변의 공간이 의도적이고 활동적으로 보인다. 누군가의 눈을 움직이려고한다면, 비활성 부정적인 공간을 인식하라. 쉬운 방법은 손가락으로 물체를 가리키고 눈이 자연스럽게 움직이는 방향으로 움직이고, 주의가 자연스럽게 떨어지는 위치를 알아 차리는 것이다. 원하는 경우 레이아웃 (모양 또는 테두리)을 조정하여 부정적인 공간을 활성 상태로 유지해야한다.
