디자인 원칙 – 시각적 계층 구조 소개

기술과 사용자 인터페이스가 변화함에 따라 시각 디자인의 디자인 기술에 대한 요구는 계속해서 증가하고 있습니다. 매년 등장하는 일반적인 사용자 인터페이스의 새로운 예와 함께 시각적 계층 구조, 인식 및 구성에 대한 기본 이해가 변경되었습니까?

시각 지각의 현대적 개념은 과학뿐만 아니라 심리학에도 뿌리를 두고 있습니다. 결과적으로 사용자 인터페이스가 계속 변경되더라도 시각적 정보를 보고 인식하는 방식은 동일하게 유지됩니다. 이를 고려할 때 그래픽 구성 및 시각적 계층 구조의 기반을 기반으로 현대 인터랙션 디자인이 개선될 수 있습니까?

시각적 인식의 기본 규칙은 의미가 포함된 정보를 가능한 한 빨리 전달할 수 있는 방법을 지시하기 때문에 모든 시각적 디자인에 중요합니다. 그러나 시각 디자인은 그래픽 디자인의 가까운 사촌이기 때문에 이러한 표준은 인쇄 매체에 대해 설정되었으며 아직 디지털에 대해 재정의되지 않았습니다.

잠재적으로 새로운 디자인 원칙을 수립할 수 있는 "디지털 바우하우스 학교"와 같은 것이 아직 형성되지 않았습니다. 사람들이 인쇄와 완전히 다른 방식으로 UI를 경험함에 따라 시각적 계층 구조 및 구성 규칙은 구식일 뿐만 아니라 사용자 인터페이스에서 무너질 뿐입니다.

대부분의 경우 디자이너는 여전히 화면을 정적인 2차원 개체로 취급하는 경향이 있으며 대화형 디자이너의 과제는 단순히 디지털 미디어 프로젝트에 인쇄 형식을 적용하는 것 이상으로 혁신하는 것입니다. 그러나 새로운 디자인이 발전하기 전에 시각적 계층, 지각 및 구성에 대한 근본적인 이해를 다시 검토해야 합니다.

시각적 계층 구조: 대화형 인터페이스를 위한 시각적 구성에 대한 새로운 이해

시각적 계층 구조란 무엇이며 왜 중요한가요? 시각적 계층 구조는 정보를 효과적으로 전달하고 의미를 전달하기 위해 컴포지션에 콘텐츠를 배치하는 것입니다. 시각적 계층 구조는 시청자를 가장 중요한 정보로 먼저 안내한 다음 보조 콘텐츠로 안내합니다.

크기, 색상, 모양, 거리, 비율 및 방향을 적절히 사용하여 설정한 구성의 의미, 개념 및 분위기는 시각적 계층을 결정하는 그래픽 요소를 창의적으로 사용하여 전달됩니다.

시각적 계층 구조는 방문자의 눈을 안내해야 하는 방문 페이지든 모바일 UI 탐색이든 관계없이 모든 유형의 시각적 디자인에 중요합니다. 모든 요소에 대한 사용자의 이해는 구성의 다른 요소와 해당 컨텍스트를 기반으로 합니다. 시각적 관계를 형성하고 디자인 전반에 걸쳐 시각적 계층 구조를 설정하기 위해 구성 요소가 적절하게 처리됩니다.

시각적 계층의 색상

시각적 계층 구조의 많은 규칙은 매우 간단하고 심지어 진부해 보일 수 있지만 좋은 시각적 디자인을 위한 중요한 기초입니다. 예를 들어, 색상은 시각 디자인에서 가장 영향력 있는 창의적 요소입니다.

적십자와 단색 십자가의 즉각적인 의미를 고려하십시오. 거의 보편적으로 적십자는 중립과 보호를 의미합니다. 색상을 사용하여 즉각적인 의사 소통이 가능합니다. 색상은 세 개의 단색 중 하나의 적십자가 어떻게 든 더 중요한 것으로 눈에 띄는 것처럼 그룹을 식별하는 데 자주 사용됩니다.

밝고 풍부한 색상은 음소거된 색상보다 눈에 띄므로 시각적 효과가 더 큽니다. 인터페이스에서 색상은 구조감을 표현하고 사용 가능한 상호 작용을 가리키는 데 사용할 수 있습니다. 단색 인터페이스 내의 단일 색상은 선택 항목을 구별할 수 있으며 사용자가 가리키고 있는 버튼 너머에 있는 것을 제안할 수도 있습니다.

색상은 또한 시청자의 잠재의식에 명시적 정보를 전달할 수 있는 의미와 감정을 심어줍니다. 브랜딩에서 색상은 소비자가 브랜드와 의미 있는 상호작용을 하기 전에 본능적인 반응을 일으키기 때문에 많은 심리학적 연구가 수행되었습니다. 예를 들어, 파란색은 종종 신뢰할 수 있고 안전하며 차분한 것으로 인식되는 반면 빨간색은 자극적이고 사람들의 심박수를 증가시키는 것으로 알려져 있습니다. 그러나 색상은 문화에 따라 다른 의미를 가질 수 있습니다.

웹 디자인에서 의미 있고 구조적으로 색상을 사용하는 좋은 예는 Names for Change 사이트입니다. 사이트는 즉시 색상을 사용하여 구조를 전달합니다. 조직은 기본적으로 흩어져 있지만 주제 및/또는 색상별로 재정렬할 수 있습니다.

그러나 선택된 음색은 사이트의 의미에 대한 잠재적인 어려움 중 하나를 극복하는 데 도움이 됩니다. 양말이나 탐폰과 같은 일상 용품을 위한 기금 마련은 그 자체로 팔릴 만큼 흥미롭지 않으므로 사이트의 급진적인 그래픽 톤은 일상 용품의 지각 가치를 높이는 동시에 필요한 기본 조직 구조를 구축합니다.

시각적 계층의 크기

큰 새 한 마리가 작은 새 세 마리 옆에 앉아 있는 그림을 상상해 봅시다. 추가 정보 없이 이 간단한 그래픽은 가족을 집합적으로 전달하는 부모와 자식이라는 요소 간의 관계를 즉시 전달합니다.

전통적인 그래픽 디자인에서 일반적인 전략은 가장 중요한 요소를 가장 크게 만든 다음 계층적으로 요소를 축소하는 것입니다. 크기는 가장 큰 요소가 먼저 주의를 끌고 가장 중요한 것처럼 보이기 때문에 시각적 계층 구조를 설정합니다.

헤더, 섹션 및 따옴표와 같은 중요한 차이점을 나타내기 위해 다른 글꼴 크기도 종종 텍스트 본문에 사용됩니다. 이미지 캡션과 같은 보조 콘텐츠는 일반적으로 텍스트의 본문과 경쟁하지 않도록 더 작습니다.

Instagram과 같이 가장 널리 사용되는 시각적 인터페이스를 고려하십시오. 화면의 어떤 것도 이미지 및 비디오와 경쟁할 수 없습니다. 대부분의 화면에서 60% 이상을 차지합니다. UI의 목적은 즉각적입니다.

웹 디자인에서 시각적 계층 구조의 일반적인 구조를 뒤집은 예는 아트/디자인 스튜디오 Ro/Lu의 포트폴리오 사이트입니다. 그들의 특이한 사이트는 가장 직관적이지 않을 수 있지만 일반적인 온라인 크리에이티브 포트폴리오의 시각적 배열에 도전합니다. 다양한 프로젝트를 의도적으로 무작위화하기 때문에 방문자가 사이트를 방문할 때마다 다른 프로젝트가 지배적인 것으로 나타나 각 방문을 독특하고 흥미롭게 만듭니다.

대부분의 창의적인 디자인 스튜디오의 포트폴리오에서는 작업이 계층적으로 구성되지 않습니다. 각 프로젝트는 고유하고 똑같이 중요하기 때문입니다. Ro/Lu 사이트의 디자인은 방문할 때마다 다양한 관심 수준으로 역동적인 구성을 만들고 시청자가 스튜디오의 광범위한 포트폴리오를 조사하도록 권장합니다. 결과적으로 디자인 스튜디오의 절충적이고 학제적인 특성은 콘텐츠의 무작위 표시로 표현됩니다.

시각적 계층의 정렬

시각적 계층 구조의 정렬은 요소를 공간적으로 연결하여 질서감을 전달합니다. 비선형 소설의 챕터와 마찬가지로 그래픽 구성에서 선을 벗어난 사각형을 상상해 보십시오. 하나의 요소가 기존의 구조를 깰 때 구성에서 두드러져 나머지 요소에 비해 의미를 얻습니다.

시각적 격자, 즉 질서감에서 요소가 눈에 띄지 않는 한 딱딱한 구성은 정체되어 시각적으로 흥미롭지 않게 보일 수 있습니다. 오정렬 또는 "격자 깨기"는 그래픽 요소에 시각적 무게를 더할 수 있는 기회입니다. 이 개념은 디자인의 시각적 계층 구조의 기본입니다.

전통적인 시각 디자인의 원칙에 따르면 프레임의 중앙에 배치되는 요소가 더 중요해 보입니다. 예를 들어 기본 콘텐츠 또는 인터페이스 요소는 중앙에 배치되고 탐색, 메뉴 및 기타 보조 콘텐츠는 종종 측면에 배치됩니다.

그러나 선구적인 디자이너들은 현상 유지에 도전하기를 좋아합니다. 인터랙티브 디자인이 기본적인 시각적 계층 구조 원칙을 적용한 다음 혁신적인 시각적 구성으로 경계를 확장할 때 흥미로운 새로운 경험이 만들어집니다. 다른 정렬을 사용하여 요소 간에 새로운 연관성과 의미가 만들어집니다.

예를 들어, DNA 프로젝트는 일련의 분리된 계층 구조를 사용하여 음악가의 앨범의 창의적인 구성을 전달하는 사이트입니다. 사이트의 구조는 앨범의 구성과 마찬가지로 복잡합니다.

첫째, 방문자는 전통적으로 앨범 형식으로 정렬된 앨범의 트랙을 클릭하여 음악을 듣도록 초대됩니다. 그러나 방문자가 사이트의 DNA 요소를 재정렬할 수 있도록 함으로써 앨범의 개념은 일련의 트랙이 아니라 시간이 지남에 따라 단편화된 요소의 비선형 구성으로 전달됩니다.

시각적 계층 구조의 모양

모양의 경우 대부분의 소셜 네트워킹 UI에서 단순한 하트 모양이 '좋아요'의 잠재적인 용도를 얼마나 즉각적으로 전달하는지 고려해 보겠습니다. 중요성이나 그룹을 설정하려면 네 개의 원 중 하나의 마음을 고려하십시오. 기하학적 형태는 모양이 요소에 개성이나 의미를 부여하는 특정 함축을 전달한다는 점에서 색상과 같습니다.

인터랙티브 디자인에서 기하학적 모양은 텍스트보다 더 빠르고 보편적으로 의미를 전달하므로 효율적인 의사 소통을 위해 필수적입니다. 텍스트 대신에 단순한 기하학적 모양인 아이콘(기호)은 대부분의 탐색 시스템 및 UI에서 아날로그가 되었습니다.

이미지 '좋아요', 파일 다운로드, 전화 걸기, 메시지 확인 등의 목적을 아이콘(기하학적 형태)으로 간단하고 직접적으로 전달합니다. 이러한 형태의 효율적인 시각적 커뮤니케이션은 디지털 제품이 종종 여러 언어로 방대한 국제 청중에게 서비스를 제공하는 글로벌 시장에서 점점 더 중요해지고 있습니다.

전통적인 인쇄 매체와 디지털 매체 간의 다양한 상호 작용 모드를 강조하기 위해 실제 신문에서 예술 섹션을 검색하는 것과 대부분의 앱에서 검색 아이콘을 사용하는 것의 차이점을 고려하십시오. 최근까지 대부분의 신문 웹사이트는 마치 인쇄된 것처럼 페이지를 배치했으며 콘텐츠를 샅샅이 뒤지는 경험은 서툴고 방향 감각을 잃었습니다.

Signes du Quotidien 웹사이트는 전통적인 웹 레이아웃을 깨고 기본적인 정사각형과 원 모양을 미묘한 방식으로 사용하여 방문자를 콘텐츠를 통해 안내하는 독특한 시각적 계층 구조를 제시합니다. 메뉴는 페이지 중앙에 있으며 방문자가 클릭하면 사이트의 4개 섹션을 나타내는 4개의 컬러 점이 나타납니다. 그런 다음 방문자는 점 중 하나를 사각형으로 끌어 해당 섹션으로 이동합니다.

시각적 계층의 모션

움직이는 요소는 정체된 요소 그룹에서 더 큰 시각적 무게를 가집니다. 시각적 계층 구조의 모션은 인쇄물에서는 사용할 수 없지만 시각적 디자이너의 툴킷에는 확실히 포함될 수 있는 원칙입니다.

모션 자체가 문자 그대로 번역되는 것 외에 무엇을 전달할 수 있습니까? 모션은 종종 UI에서 요소가 상호 작용할 수 있다는 단서로 사용됩니다. 모션의 사용이 더 나아가 독특한 것을 전달하는 수단으로 사용될 수 있습니까? 시각적 계층이 커뮤니케이션의 효율성뿐만 아니라 내재된 의미에 관한 것이라면 모션이 필수적인 시각적 커뮤니케이션 도구로 어떻게 사용될 수 있을까요?

I Remember 사이트의 경우 상호 작용을 유도하는 메인 인터페이스(애니메이션)가 즉시 눈에 띕니다. 모션과 인터페이스는 기능적 탐색 도구이지만 시각 디자이너는 이러한 요소의 잠재적 손실을 웹사이트의 기본 임무인 알츠하이머병을 전달하는 방법으로 사용했습니다. 조직이 기금을 모으는 환자의 희미해지는 기억처럼 웹 사이트는 적극적인 상호 작용 없이 서서히 사라지고 맙니다.

정보 계층 구조의 소리

소리는 인쇄 매체에서 사용할 수 없는 또 다른 도구이지만 아직 계층 구조의 원칙 내에서 개발되지 않았습니다. 소리는 완전히 비시각적이므로 참조할 규칙이 없습니다. 그러나 소리는 내용뿐만 아니라 분위기나 의미를 효과적으로 전달하는 디자인 도구일 수도 있습니다. 특정 사운드를 전달하는 디자인 요소는 서로에 대해 그룹화될 수 있으며 가장 과감한 디자인 요소가 가장 중요해 보이거나 그룹으로부터의 분리를 의미할 수 있습니다.

요소에 첨부된 사운드의 품질은 콘텐츠를 신속하게 식별, 특성화 또는 구성하는 데 도움이 되어야 합니다. 관련된 시각적 요소와 대조되는 소리가 어떻게 새로운 의미를 전달할 수 있습니까?

소리 자체는 너무 복잡해서 시각적인 요소가 감지되기 ​​전에 전체적인 분위기나 디자인의 메시지를 형성할 수 있습니다. 다채로운 배경이 분위기를 조성하는 것처럼 사운드는 배경에 머물거나 모바일에서 버튼 탭에 응답하는 것과 같이 UI에서 피드백을 제공할 수 있습니다. 기술의 원리는 기본이지만 사용할 수 있는 창의성은 마법이 일어날 수 있는 곳입니다.

집단의 창조적인 작업에서의 중요성 때문에, 구겐하임에서 독일 예술가 그룹 ZERO의 전시회를 위해 만들어진 웹사이트는 분위기를 배경으로 소리를 사용하고 사이트를 탐색할 때 피드백의 형태로 사용합니다. 굵은 벨소리는 테마의 시작을 나타내는 조각을 설정하고 3차 프로젝트는 배경을 클릭합니다.

시각적 계층의 개념

시각적 계층 구조는 간단한 개념이며 이론을 이해하는 것이 잘 구성된 구성을 실행하는 디자이너의 실제 능력보다 실제로 더 쉽습니다. 그럼에도 불구하고 좋은 디자인을 유지하면서 새로운 매체에서 창의성을 발휘하는 것은 어려운 일입니다.

새로운 매체가 항상 등장하고 어려운 상황은 줄어들지 않습니다. 정반대입니다. 오늘날 200가지가 넘는 다양한 화면 크기가 사용되고 있습니다. 그리고 그것은 단지 2차원적인 것들입니다. 처음에는 인터넷, 데스크톱 브라우저, 그 다음에는 모바일 및 태블릿이 등장했으며 이제는 대화형 TV, IoT, 웨어러블, 가상 및 증강 현실과 같은 기술과 함께 새로운 영역으로 이동하고 있습니다.

디지털 미디어의 한계를 뛰어넘는 디자인은 아직 초기 단계입니다. 바라건대, 시각적 계층 구조와 좋은 디자인의 원칙은 기술의 급속한 발전을 따라잡아 디지털 미디어에 대한 우리의 경험이 의미와 즐거움으로 가득 차도록 유지될 것입니다.

Toptal Design 블로그에 대한 추가 정보:

• 명확한 시각적 계층 구조로 UX 향상
• 디자인 기초 – 시각적 계층 구조 가이드(인포그래픽 포함)
• 디자인 원칙: 계층 소개
• 더 나은 스캔 가능성을 위한 UI 디자인 모범 사례
• 이러한 성공적인 상호 작용 디자인 원칙으로 UX를 향상시키십시오.