미니멀 UI 디자인 : 여백에 관한 완벽한 가이드

미니멀한 UI 디자인이란 무엇입니까?

미니멀한 UI 디자인은 기본적으로 미니멀 디자인으로 거슬러 올라갑니다. 제품에 상관없이 20세기 디자인 철학은 "더 적은 것"입니다. 웹 디자인에서 사용 편의성과 우수한 사용자 경험을 유지하면서 주어진 디자인의 기능에 절대적으로 필요한 요소만 포함하여 미니멀리즘을 달성합니다.

 

“최소주의는 무언가 부족한 것이 아닙니다. 모든 필수 요소의 완벽한 양일뿐입니다.” (Inkoniq Design의 UI / UX 디자이너 Sumit Jaiswal)

 

 

간단하게 들리나요? 그러나 기존 웹 사이트 디자인에서 단순히 요소를 제거하여 미니멀리즘을 달성할 수는 없습니다. 디자인을 정사각형으로 다시 생각해야 합니다.미니멀리즘과 단순성의 개념은 우리에게 그것이 항상 덜 중요하다고 생각하도록 속였습니다. 결국, 기능적 미니멀리즘은 공허의 개념에 의존하지만 아무것도 아닌 것은 아닙니다. 웹 사이트 와이어 프레임이 유용한 곳에서 디자이너는 적절한 양의 정보로 인터페이스를 와이어 프레임 한 다음 코드로 이동하기 전에 사용자의 인터페이스를 테스트할 수 있습니다.

Functional Minimalism vs Aesthetic Minimalism

 

 

 

 

 

여백 : 미니멀리스트 웹 디자인의 보이지 않는 무기

미니멀리스트 웹 디자인의 기둥 중 하나는 네거티브(negative) 또는 "백색"공간입니다. 여백은 사용자 인터페이스 요소 사이의 영역으로, 사용자의 시각적 흐름을 안내합니다. 일반적으로 콘텐츠 주변의 여백이 많을수록 콘텐츠의 내용이 눈에 더 끌립니다. 여백은 논란의 여지가 있는 디자인 요소입니다. 실제로 가장 큰 디자인 신화(myths) 중 하나는 공백이 단순히 공간 낭비라는 것입니다. 많은 디자이너들이 여백을 과하게 사용을 하지만 이 포스트에서는 여백을 최대한 효율적으로 활용하는 것이 어떤 것인지 보여드리겠습니다.

 

우리가 공백에 관해 이야기할 때, 우리는 종종 끝없는 하얀 들판을 묘사합니다. 그러나 다양한 요소 간 균형과 조화를 만들기 위해 많은 여백 공간을 넣어야 하는 것은 아닙니다.

• 유동적인 여백은 더 나은 구조와 레이아웃을 위해 의도적으로 비워둔 공간입니다. 또한 콘텐츠 영역을 강조하고 독자를 한 요소에서 다른 요소로 안내합니다.

• 여백은 레이아웃 프로세스의 일부를 구성하는 웹페이지 외부 주변의 빈 공간 또는 내용 내부의 빈 공간입니다. 이는 요소간의 조화와 시각적 편안함을 만드는데 도움이 됩니다.

• 매크로 여백은 컴포지션에서 주요 요소 사이의 공간입니다.

• 마이크로 공백은 더 작은 요소 사이의 간격입니다. 목록 항목 사이, 캡션과 이미지 사이 또는 단어와 문자 사이입니다.

그런 다음 시각적, 레이아웃, 텍스트 및 콘텐츠 공백 사이에 차이가 있습니다. 아, 그리고 공백은 반드시 흰색 일 필요는 없습니다!

Composing a Page | Page Layout and Design for Digital Scrapbooking | InformIT

여백의 주요 목표 미니멀 디자인은 콘텐츠 자체에 주목해야 합니다. 

Content-First Design

---

공백 디자인의 장점

요소 사이에 적절한 양의 공백이 있는 최소 UI 디자인은 사용자에게 몇 가지 이점이 있습니다.

 

 

가독성 :

눈을 편히 쉴 수 있는 깔끔하고 최소한의 UI 디자인으로 가독성과 스캔 성이 향상됩니다. 연구 결과에 따르면 사용자가 종이에서 읽을 수있는 것과 같은 방식으로 온라인에서 읽지 않는 것으로 나타났습니다. 스캔, 공간 및 헤드 라인은 온라인 독서 경험의 핵심 요소입니다. 디자인은 내용이 덜 복잡하고 더 읽기 쉽게 만듭니다. 컨텐츠와 공백 사이의 적절한 균형을 표시함으로써, 모여있는 정보를 더욱 쉽고, 사용자가 읽기 편하도록 개선할 수 있습니다.

Is the Underlined Link Hurting Readability? | UX Booth

 

직관적인 정보 아키텍처 :

UI에 포함된 요소가 적을수록 각 요소의 중요성이 커지고 디자이너가 완벽한 정보 계층 구조를 찾아야 하는 부담이 커집니다. 여백은 그리드, 타이포그래피, 간격, 비율 및 색상을 신중하게 사용해야 합니다. 프릴, 노이즈 및 중복을 피하고 웹페이지 또는 모바일 응용프로그램의 사용자 이해 및 유지를 향상할 수 있습니다.

 

이를 위해 요소 간 계층을 설정하고 관련 필드 옆에 레이블을 배치하고 관련 항목을 입력 필드에 그룹화하면 보다 직관적인 UI를 만들 수 있습니다.

 

인지 부하 감소 : 

우리 모두에게는 한계가 있으며 인간의 뇌는 복잡하지만 단점이 있습니다. 예를 들어, 화면과 책의 내용을 읽는 방식 은 크게 다릅니다. 매지컬 넘버 세븐 (Magical Number Seven)에 대한 그의 연구에서 조지 밀러 (George Miller)는 “자신의 내면을 설계하거나 긴장감을 인지하는 시스템을 디자인을 하는데에는 어떠한 제한이 존재한다”라고 선언했다. 즉, 정보 처리 능력이 제한되어 있으며, 일정 시점이 지나면 집중력이 비효율적으로 전환한다는 것이다.

 

 

Miller는 뇌가 관리해야 할 인지 부하를 구성하고 줄임으로써 집중력을 유지하는 것이라고 설명합니다. 그는“한 덩어리”로 만들거나 그루핑을 통해 관련 정보를 신속하게 찾거나 스캔할 수 있는 방법에 대해 이야기하면서 대량의 정보 암기 및 처리와 같은 주어진 작업에 집중하는 능력에 긍정적인 영향을 미쳤습니다.

 

 

사용자 흐름 : 

웹 페이지에 요소를 배치하는 방법에 따라 요소가 얼마나 잘 보이는지 결정할 수 있으므로 웹 사이트 또는 앱에 적합한 프레임 워크를 찾아야 합니다. 우리는 올바른 사람들을 올바른 장소로 안내하는 것과 많은 관련이 있다고 생각하며, 공백은 사용자의 시선을 집중시키는 데 도움이 될 수 있습니다. 미니멀리스트 웹 디자인의 기초는 견고한 그리드, 시각적 균형 및 정렬입니다. 또한 공백을 현명하게 사용하면 사용자와 의사소통하고 목적을 정의하는 방식으로 요소를 배열할 수 있습니다. 예를 들어, 충분한 양의 네거티브 공간은 세련된 모양을 만들고 페이지에서 가장 중요한 항목에 주의를 끌 수 있습니다..

"불필요하게 제거하는 것이 전부입니다." (Jonathan Ive, Apple Inc. 디자인 부사장)

오늘날 웹에서 방대한 양의 콘텐츠와 경쟁으로 인해 계층적 조직 또는 "한 덩어리 (chunking)"는 좋은 설루션처럼 보입니다. 일반적인 웹 방문자의 활동은 사이트의 가장 일반적인 개요 (홈 페이지)에서 시작하여 점차적으로 보다 명확한 하위 메뉴를 통해 계속됩니다. 그러나 "한 덩어리 (chunking)"는 대량의 정보를 하위분류하라는 말은 아닙니다. 텍스트를 작고 독립적인 모듈로 나누려면 공백을 사용해야 합니다. 각 모듈은 일반적으로 하나의 사용자 작업 ( 제품이 아닌 사용자 작업에 대한 정보에 중점)을 반영합니다..

 

 

 

최소한의 UI 디자인을 구축하는 방법

와이어 프레이밍 도구를 사용하면 미니멀리스트 웹 디자인을 쉽고 빠르게 모의하고, 초기 디자인을 반복하여 인터랙티브한 프로토타입, 웹으로 구축할 수 있습니다. 와이어 프레이밍 툴은 최소한의 웹 디자인을 조금 더 단순하게 만드는 다양한 기능을 가지고 있습니다..

 

사전 구축된 웹 사이트 예제 

Justinmind를 사용하여 웹 사이트 와이어 프레임을 구축하는 경우 특정 프로젝트에 적용할 수 있는 사전 구축된 다양한 웹 사이트 예제를 찾을 수 있습니다. 도구를 열자마다 설계하려는 장치 유형을 선택하고 예제 탭을 클릭한 후 템플릿 인터페이스를 선택하십시오. 우리는 미니멀리즘의 열렬한 팬이므로 각 예제는 공백을 염두에 두고 설계되었습니다. 필요에 맞게 조정하고 불필요한 휘파람과 벨을 추가하지 마십시오.

 

스마트 가이드 및 그리드

스마트 안내선 및 격자는 미니멀리즘 웹 사이트 와이어 프레임을 더 빠르게 만드는 데 도움이 됩니다. UI 웹 사이트는 UI 요소를 픽셀단위로 완벽하고 정확하게 정렬하는 데 도움이 되기 때문입니다. Justinmind에는 완벽한 미니멀 디자인 요소를 제자리에 고정시키는 눈금자, 가로 또는 세로 안내선 및 격자가 있습니다. instanec의 경우 Justinmind Data Grids의 셀 사이의 공백을 늘리거나 줄여서 보다 미니멀 한 방식으로 구조와 스타일을 정의할 수 있습니다.

Justinmind's User Interface module explained

 

시나리오

위에서 언급했듯이 미니멀리스트 디자인은 강력하고 직관적인 탐색 흐름에 달려 있습니다. 그러나 사용자에게 자연스럽고 동시에 제품의 목표를 높이는 탐색 흐름을 설계하는 것은 복잡할 수 있습니다. Justinmind를 사용하면 시나리오 탭 내에서 사용자 시나리오 및 탐색 흐름을 디자인할 수 있습니다. 화면작업과 같은 관련 구성 요소를 시나리오 캔버스로 드래그하고 디자인이 완료되면 탐색 흐름을 시뮬레이션하면 됩니다.웹 사이트 와이어 프레임을 작성하기 전에 시나리오를 작성하면 시나리오 화면이 와이어 프레임 화면의 아이콘으로 바뀝니다. 시나리오를 사용하여 웹 사이트 와이어 프레임을 만드는 방법에 대한 자세한 내용은 여기를 참조하십시오.

 

사용자 테스트 도구 통합

가독성, 인지 부하 감소 및 직관적 탐색과 같은 품질은 실제 사용자의 웹 와이어 프레임을 테스트해야만 확인할 수 있습니다. 대부분의 와이어 프레이밍 도구는 다양한 사용자 테스트 도구와 통합되어 있습니다. 사용자에 대한 최소한의 웹 디자인을 테스트 한 경험이 거의 없더라도 사용자 테스트 도구를 사용하면 대상 사용자를 선택하고 설문 조사 또는 작업을 구축 한 다음 가상 테스트를 기록할 수 있습니다. 이렇게 하면 코딩으로 넘어가기 전에 디자인에 공백이 있고 공간이 낭비되지 않도록 할 수 있습니다.

---

자료출처: https://www.justinmind.com/blog/minimalism-in-interactive-design-dreaming-of-a-white-space-xmas/

Minimal UI design: Complete guide to whitespace