목차
디자인 용어 여백의 의미와 그래픽 디자인에서 어떻게 사용되는지 알아보세요.
또한보십시오: 폰티네이터 소개여백이라는 용어는 레이아웃과 페이지 일러스트레이션에서 디자인 요소 사이의 흰색 빈 공간을 의미하며 읽을 수 있는 단일 문자와 문자 사이의 거리. 경우에 따라 공백을 음수 공간이라고 합니다. 이 용어는 디자인 캠페인을 인쇄하기 위해 백서를 사용하는 인쇄 디자인 프로젝트에서 파생되었습니다.
빈 흰색 배경이 디자인 요소로 간주되는 것이 처음에는 이상하게 보일 수 있습니다. 그럼에도 여백의 전략적 배치는 캠페인이나 디자인의 구성을 극적으로 개선할 수 있습니다. 여백은 보는 사람의 눈과 두뇌가 정보와 시각적 콘텐츠의 맹공격으로부터 처리하고 휴식을 취할 수 있도록 합니다.
여백의 구현은 보는 사람의 인지 부하를 크게 줄입니다. 콘텐츠의 가독성을 극적으로 최적화하여 보는 사람이 여전히 쉽게 소화할 수 있도록 큰 정보 블록을 구성합니다.
여백의 전략적 구현은 보는 사람의 시선을 유도하는 이상적인 도구입니다. 이것은 공간 낭비가 아닙니다!
여백은 단지 무의미한 여백이 아닙니다. 전략적으로 사용되는 중요한 디자인 요소가 될 수 있습니다. 시청자의 평균 집중 시간이 점차 짧아지고 있어 여백을 영리하게 사용할 수 있습니다.essential!
공백의 다양한 유형:
공백이라는 포괄적 용어 내에는 4개의 정의된 하위 범주가 있습니다.
매크로 공백:
매크로 공백은 텍스트 본문, 이미지, 그래픽 디자인 요소와 같은 디자인 요소 사이의 공간입니다. 매크로 여백의 주요 목적은 웹 사이트의 레이아웃을 개선하고 더 쉽게 이해하고 탐색할 수 있도록 하는 것입니다. 디자인 요소를 둘러싼 상당한 양의 매크로 공간은 보는 사람이 해당 디자인 요소를 보도록 강제할 수 있습니다.
매크로 공백의 예는 다음에서 찾을 수 있습니다.
• 웹사이트의 여백에서
• 아이콘의 로고 주위
• 영웅 이미지
• 메인 콘텐츠와 사이드바의 분리
• CTA 버튼 주위
마이크로 화이트스페이스
마이크로 화이트스페이스는 문자 사이의 공간, 단락 사이의 거리, 줄 사이의 공간(커닝) 및 줄 높이( 선행).
마이크로 여백의 주요 목적은 콘텐츠의 가독성과 가독성을 향상시키는 것입니다. 텍스트 본문과 개별 문자의 커닝 및 줄 높이 측면이 텍스트의 일반적인 가독성에 매우 중요하기 때문에 문자 간격에서 미세 여백의 중요성을 과소평가해서는 안 됩니다. 소문자와 대문자의 혼합, f.ex. ~이다여백의 차이로 인해 대문자만 사용하는 것보다 읽기가 훨씬 쉽습니다.
활성 공백
활성 공백은 웹사이트나 인쇄 캠페인의 내용이 잘 흐른다는 것을 의미합니다. , 독자는 모든 CTA(Call to action) 요소로 쉽게 안내되고 독자의 초점은 꾸준하고 잘 지시됩니다.
수동적 공백
수동적 공백은 그래픽 요소 또는 텍스트 배치의 자동 결과입니다. 글자와 디자인 이미지는 일정한 거리가 필요합니다. 그렇지 않으면 이러한 요소가 겹쳐 캠페인이나 웹사이트를 읽을 수 없게 됩니다.
공백과 네거티브 스페이스의 차이점은 무엇입니까?
질문에 답하자면 차이가 없습니다. 이 두 용어는 같은 의미로 사용할 수 있습니다.
여백이라는 용어는 인쇄된 캠페인이나 레이아웃에서 파생됩니다. 백서에서 인쇄되지 않은 부분을 여백이라고 합니다. 공백 공간은 흰색에 국한되지 않고 인간의 눈으로 인지할 수 있는 모든 색상으로 구성될 수 있습니다.
네거티브 공간이라는 용어는 사진에서 유래되었습니다. 포지티브 스페이스는 시선을 사로잡는 오브젝트를 정의하고 네거티브 스페이스는 배경 요소로 구성됩니다.
여백 사용 방법
여백의 전략적 사용은 시각적인 초점과 방향을 바꿀 수 있습니다. 뷰어의. 주변에 많은 공백디자인 요소, 텍스트 본문 또는 단일 문자는 요소를 시각적으로 분리하여 보는 사람의 즉각적인 관심을 끌 수 있습니다.
여백은 회사의 브랜딩 또는 대부분의 고급 브랜드에 필수적일 수 있습니다. 웹사이트, 레이아웃 또는 광고 캠페인 f.ex. 넉넉한 여백을 포함하는 공간은 깨끗하고 세련되며 고급스러운 것으로 인식됩니다.
이 디자인 팁의 다음 부분에서는 레이아웃에서 여백을 전략적으로 사용하고 배치하는 몇 가지 대표적인 예를 보여드리겠습니다. 레터링, 로고 디자인, 이른바 여백 로고.
왜 여백이 디자인에 사용되는가:
로고 안에 숨겨진 요소를 강조하기 위해
여백은 로고 디자인에도 사용할 수 있는 디자인 요소; 여기에 몇 가지 훌륭한 예가 있습니다.
네거티브 스페이스의 가장 유명한 용도 중 하나는 FedEx의 로고입니다. "d"와 "E" 문자 사이의 여백은 전략적인 디자인 요소입니다. 문자 "E"와 "x" 사이의 음수 공간은 오른쪽을 가리키는 화살표를 만듭니다.
이미지 출처: vaccodadesign.com
여백 로고의 또 다른 멋진 디자인은 WWF (세계자연기금) 중 하나. 눈은 시각적 인식에서 즉시 팬더를 형성합니다. 여백이 너무 훌륭하게 구현되어 네거티브 여백으로 만들어졌다는 사실을 간과할 뻔했습니다.
이미지 출처: Inspirationfeed.com
To Drive the Attention of the User to to특정 개체
아래에서 공백을 진정으로 훌륭하게 사용하는 두 가지 예를 볼 수 있습니다.
이미지 출처: impactplus.com
또한보십시오: UX 디자인 프로세스: 시작하는 방법 & 단계는 무엇입니까여기에서 확인할 수 있습니다. 제품과 그 이름을 둘러싼 엄청난 양의 공백으로 인해 시청자는 새로운 MacBook Air의 디자인에 감탄하는 것 외에 다른 선택의 여지가 없습니다. 흰색 공간은 매혹적인 영웅 이미지 중앙 무대를 제공하고 문자 "A"와 "R"의 수평선을 대체합니다.
이미지 출처: Pinterest.co.uk
In 영화 백설공주와 일곱 난장이의 포스터를 위한 이 뛰어난 디자인을 보면 여백을 사용하여 또 다른 이미지를 만들 수 있음을 알 수 있습니다. 공허함은 보는 사람의 눈에 갑자기 그래픽 이미지를 형성합니다.
텍스트를 더 읽기 쉽게 만들기
무질서한 레이아웃은 모든 독자의 기쁨을 빨아들입니다. 아래의 비좁고 어수선한 잡지 레이아웃 페이지를 살펴보십시오. 이것은 당신에게 즐거운 독서처럼 보입니까? 보고 있으면 긴장이 되고 기사를 읽느니 차라리 잡지를 쓰레기통에 버릴 것 같습니다.
이미지 출처: barnyardmarketing.com
이제 정리된 잡지를 살펴보세요. 동일한 콘텐츠의 여백 레이아웃:
이미지 출처: barnyardmarketing.com
아아, 훨씬 낫네요. 당신은 즉시 쓰레기통에서 잡지를 꺼내고 앉아서 좋은 여백 디자인의 놀라운 힘을 완벽하게 보여주는 기사를 읽고 싶습니다!시각적인 무게감과 혼돈이 풀렸습니다! 콘텐츠는 즉시 매력적이고 이해하기 쉬워집니다!
시각적 계층 구조
시각적 계층 구조는 보는 사람의 눈이 이동하는 방식을 설명하는 용어입니다. 시각적 계층 구조의 개념은 게슈탈트 원리를 기반으로 합니다. 최초의 게슈탈트 원리는 1920년대에 독일 심리학자 Max Wertheimer, Kurt Koffka, Wolfgang Kohler가 고안했습니다. 이들은 일반적으로 인간이 주변의 혼란스러운 자극으로부터 의미 있는 인식을 얻는 방법을 이해하고자 했습니다.
시각적 계층 구조는 보는 이의 시선을 체계적으로 이끕니다.디자이너 Will Paterson과 함께하는 이 동영상에서 레터링 및 디자인 레이아웃의 시각적 계층 구조 측면에 대해 자세히 알아보세요.
시각적 계층 구조는 여백, 색상, 대칭, 움직임, 그룹화, 대비, 그리고 더 많은 디자인 측면.
디자이너가 그래픽 디자인에서 시각적 계층 구조를 전략적으로 사용할 수 있는 방법에 대한 자세한 내용은 블로그를 참조하십시오.근접성의 법칙
근접성의 법칙은 게슈탈트 원리의 하나로 서로 가까이 있는 물체가 멀리 떨어져 있는 물체보다 더 관련이 있는 것으로 인식된다고 합니다.
이 경우 , 여백을 체계적으로 사용하면 관련 콘텐츠 요소를 그룹화하여 보는 사람이 콘텐츠의 방향과 탐색을 쉽게 할 수 있습니다.
이 이론은 특히 여백에서 고려해야 합니다.UX 및 UI 디자인 구현 및 정보 시각화. 여백 기법을 사용하여 UX 및 UI 관련 요소를 그룹화하면 전반적인 가독성과 내비게이션이 향상됩니다. 이 기술을 사용하면 연결된 점(디자인 요소라고도 함)을 더 가깝게 그룹화하여 보는 사람이 점을 연결할 수 있도록 도와줍니다.
블로그에서 게슈탈트 원리와 근접성의 법칙에 대해 자세히 알아보세요.결론
여백은 보는 사람의 시선을 유도하고 콘텐츠를 구성하며 보는 사람의 인지적 휴식을 위한 중요한 디자인 요소입니다. 여백의 측면은 콘텐츠의 전반적인 가독성을 높이고 디자인과 브랜딩의 분위기를 설정하며 초점과 주의를 유도합니다.
정보를 이해하기 쉽게 만들기 전에 공백의 의미와 적절한 사용을 이해해야 합니다. 공백. 여백을 체계적으로 사용하는 것은 '광학적 간격의 예술'로 볼 수 있습니다.
공간을 두려워하지 마세요. 유용하게 사용하세요!
