그래픽 디자인을 캔버스에 형태를 정리하는 과정으로 본다면 작품의 절반밖에 보지 못한 셈이다. 캔버스의 네거티브 공간을 적극적으로 활용할 수 있는지도 중요하기 때문이다.
디자인에는 공간의 형태와 배치의 변화가 포함되는데, 이를 보다 효율적으로 활용하기 위해서는 먼저 이를 적극적으로 인식하고 공간의 형태, 공간 스타일, 공간이 어떻게 변화하는지 관찰해야 합니다. 서로에게. 이것은 초보자가 숙달해야 하는 일련의 디자인 원칙 중 두 번째입니다. 1부에서는 주로 형태의 제어에 대해 이야기하고, 2부에서도 게슈탈트 원리를 바탕으로 디자인의 기본 원리에 대한 지식을 폭넓게 습득합니다.
게슈탈트 원리에 가장 적합한 공간 원리는 도형과 배경이다. 모든 것이 상호 배타적으로 설계되었습니다. 그들 사이의 관계는 해소될 수도 없고, 서로를 바꿀 수도 없습니다.
따라서 그래픽과 배경의 관계는 상호작용을 통해 효과를 높이거나 낮출 수 있으며, 디자인 목적을 달성하기 위해 서로의 관계를 효과적으로 구성하는 중요한 방법 중 하나입니다. . 배경을 설정할 때 디자인과 어떻게 접촉할지 신중하게 생각해야 합니다. 그리고 그들 사이의 원칙은 무엇입니까?
"여백은 단순한 수동적인 배경이 아닌 매우 활동적인 요소로 간주됩니다." - Jan Tschichold
위의 세 블록 스타일에 대해 생각해 보면 최종 왼쪽 블록에는 동일한 간격을 가진 일련의 검은색 선이 있습니다. 즉, 검은색 선과 흰색 선 사이의 동일한 간격이 검은색과 흰색이 번갈아 나타나는 패턴인 회색 영역을 형성합니다. 효과가 있습니다. 이때, 중앙 패널의 흰색을 제거하면 공간의 스타일이 보이지 않을 뿐만 아니라 다른 모든 요소가 하나의 요소가 됩니다.
가장 오른쪽 패널에서 해당 영역의 두 개의 검은 선이 삭제되었습니다. 이렇게 하면 이 영역이 회색 영역 위에 오도록 공간이 활성화되며 계속 진행할 수 있습니다. 더욱 깊이 있는 디자인.
(1) 안정적: 요소와 배경이 명확하고, 어떤 형태로든 눈에 띄는 주요 요소가 누구인지 명확합니다.
(2) 리버시블: 여기에 있는 두 가지 그래픽과 배경은 사용자를 깊이 끌어당기고 긴장감을 조성할 수 있으므로 다른 요소에 관계없이 유사한 방법을 사용하여 역동적인 디자인 효과를 만들 수 있습니다.
(3) 모호성: 요소들은 배경과 동시에 바뀌면서 서로 흥미로운 형태를 이루며 관객이 자신만의 진입점에서 구성할 수 있게 한다.
위의 관계에 따라 그래픽과 배경의 관계를 어떻게 설정하고 균형을 맞추느냐에 따라 관객은 다양한 부분의 디자인을 보고 맥락 간의 관계와 연계하여 해석하고 이해할 수 있다.
형태와 땅 사이의 관계는 게슈탈트 원칙에서 가장 두드러진 역할은 아닙니다. 다음은 두 가지입니다.
(1) 접근 방식: 관계를 연결하기 위해 밀폐된 공간 요소를 통해 접근합니다. 다른 요소 사이. 우리는 문단 사이의 간격이 문단 내 줄 사이의 간격보다 크다는 것을 간단히 이해할 수 있습니다.
(2) 폐쇄: 공간의 요소를 다르게 만듭니다. 관객은 자신의 과거 경험을 바탕으로 부족한 정보를 채워가며 전체를 완성하게 된다. 대부분이 배경이면 묶을 필요가 없습니다. 공간이 너무 적으면 클로저를 설정할 필요가 없습니다. 공백과 콘텐츠 영역 사이의 균형을 유지해야만 둘 사이의 관계를 올바르게 처리할 수 있습니다.
이제 음악을 생각해 보세요. 모든 음표나 코드가 동시에 연주되면 음악이 나오지 않고 소음이 들립니다.
음악은 소리 사이의 대비가 있을 때 발생합니다. 다양한 음의 시작과 정지는 리듬과 멜로디를 만들어내며, 정지가 없으면 음악도 존재할 수 없습니다.
마찬가지로 공간도 비슷한 기능을 수행할 수 있으며 공간의 통기성에 긍정적인 영향을 미친다. 디자인함으로써 눈은 앞뒤로 자유롭게 움직이며 요소를 찾을 수 있습니다.
긍정적인 것과 부정적인 대조로서, 공간이 없으면 디자인도 없고, 이는 디자인이 공간 디자인에 치중하지 않는 이상 시각적 소음을 발생시킵니다. 일반적으로 방문자는 공백이 너무 많다고 불평하지 않고 너무 적다고 불평합니다.
빈 영역에 대해 다음을 수행할 수 있습니다.
(1) 반대편 설정, 핵심 사항 강조 및 계층적 관계 설정
(2) 정서적 긴장감을 조성
(3) 요소들 사이에 통기성이 있다
그래픽과 배경의 관계처럼 공간에 몇 가지 기본 요소만 존재하면 되고, 추가 요소도 있으면 된다는 뜻이다. 요소가 너무 많은 공간은 덜 명확하게 보일 수 있으므로 그래픽과 배경 사이에 일정한 관계를 설정하여 서로 접촉을 유지해야 합니다.
공백의 가장 중요한 기능은 가독성과 가독성을 높이는 것입니다. 공백이 많으면 텍스트 부분이 더 매력적으로 보이고, 공백이 상대적으로 좁으면 요소가 더 명확해집니다.
마이크로스페이스: 요소 그룹 내의 공백입니다. 글자, 단어, 단락 사이의 공백입니다.
큰 공간: 주요 요소 사이의 공간입니다. 그것들은 별개의 요소 또는 요소들이 될 것이며, 눈이 그들 사이에 충분한 통기성을 갖고 통과할 수 있는 경로를 제공할 것입니다.
공백은 품질을 전달할 수 있으며 넓은 공간 영역에 매우 적은 요소가 나타나는 경우가 많습니다. 고급 제품과 할인 제품 포장을 비교할 수 있습니다. 어느 쪽이 더 많은 공간을 사용하게 될까요? 어느 패키지에 더 많은 공백이 있는지, 이는 모두 몇 가지 정보를 전달합니다.
공간은 품질과 같은 정보를 전달할 수 있습니다. 예:
(1) 정교함
(2) 단순함
(3) 고급스러움
(4) 깔끔함
(5) 개성
(6) 개방성
공간이 부족할 때 사용, 채워진 디자인을 사용할 수 있습니다. 또한 디자인 요소 간의 관련 연결을 캡처하여 공간 낭비를 피할 수도 있습니다.
사용된 공백도 디자인의 최종 형태 구조에 포함되므로 공백 사용을 두려워하지 마세요. 대신 여백을 디자인 완성의 요소로 여기세요.
웹 디자인에서 공백의 여러 사례
공백을 더 잘 사용하려면 먼저 공백에 대해 강한 인식을 갖고 있어야 하며 다양한 공백의 사용을 식별하는 데 익숙해야 합니다. 공백 디자인. 사용된 모양에 세심한 주의를 기울이고 그것이 캔버스 요소와 어떤 관련이 있는지 생각해 보세요. 이를 위해 일부 웹사이트 디자인에서 이러한 종류의 공백을 어떻게 사용하는지 살펴보겠습니다!
"Conservative"
Tom Johnson의 디자인 Conservative는 공백을 많이 사용하여 텍스트와 기타 요소에 숨을 쉴 수 있는 공간을 제공하여 시청자가 배경이 무엇인지, 무엇이 배경인지 착각하지 않도록 합니다. 중요한 요소입니다.
정보와 정보, 요소 간 해당 분리를 설계하고(이전 기사에서 언급한 근접성 원칙을 떠올릴 수 있음) 요소 그룹을 구분합니다. 우리는 그 사이의 공간에 따라 무언가가 시작되고 끝나는 시기를 명확하게 알 수 있습니다.
가장 중요한 콘텐츠는 페이지 중앙에 있으며, 양쪽에 넓은 공간이 있으며, 중간에 있는 요소들은 수시로 중단되며, 둘 사이의 연결을 활성화하는 선 요소가 있습니다. . 이는 사용자에게 이 영역이 특히 중요하다는 점을 상기시키는 데 도움이 됩니다.
Heroku의 상태 페이지
아래 이미지는 Heroku의 상태 페이지의 일부를 보여줍니다. 이 웹사이트에는 많은 사건이 보고되어 있습니다. 여기서 공백이 많을수록 더 나은 서비스를 의미합니다.
웹페이지의 기본 배경 공간이 흰색이고 매우 실용적이지만 페이지 배경이 반드시 흰색일 필요는 없다는 점은 주목할 가치가 있습니다. 상태 업데이트, 최신 보고서 등 알림이 필요하며 공백으로 인해 중단됩니다.
소설 소개
상단 공간에는 '소설을 소개합니다'라는 텍스트가 비대칭적이며 긍정적인 역할을 합니다. 눈의 콘텐츠로 직접 연결되는 페이지 왼쪽의 큰 공백을 확인하세요. 페이지를 클릭하고 위에서 아래로 스크롤해 보면 페이지의 공백이 분리되어 서로 결합되어 있는 것을 확인할 수 있습니다.
밝은 색상의 선은 이러한 분리되고 그룹화된 블록을 구별하는 데 사용됩니다. 본 웹사이트를 탐색하면 이 선이 블록을 구별하는 역할을 할 뿐만 아니라 블록 사이의 통기성과 유동성을 유지하는 역할도 한다는 것을 알 수 있습니다. 한 지점에 집중하지 마십시오.
Elliot Jay Stocks
이 웹사이트는 비대칭 공간을 사용하여 매우 역동적인 효과를 만들어 내기 때문에 많은 사람들이 이 웹사이트의 디자인에 익숙하다고 생각합니다.
이 페이지 상단의 큰 이미지는 아래 콘텐츠에 액세스하기 위한 임시 모듈로 사용될 수 있습니다. 또한, 편안한 통기성을 유지하기 위해 큰 이미지 주변에 충분한 여백을 두었습니다. 왼쪽 사이드바의 콘텐츠에 동일한 배경을 사용하면 눈이 둘 사이를 이동하기 쉽고 색상이 변경됩니다. 또한 더 어려울 것입니다.
또한, 위의 사이트와 마찬가지로 공간을 활용하여 서로 다른 정보와 그룹을 모아서 구분할 수 있고, 각 그룹을 돋보이게 할 수도 있어 그 과정에서 더 많은 정보가 나올 수 있도록 해준다. 정보를 검색하는 데 충분한 공백이 있으면 눈이 편안하고 휴식을 취할 수 있습니다.
Phil Coffman
이 웹사이트는 공백을 많이 사용하여 단일한 형태의 느낌을 줍니다. 원래 요소의 중요성을 강조하는 긍정적인 효과는 부족하지만.
다채로운 직사각형 배경을 사용하여 텍스트 주위에 충분한 공간을 확보하여 읽기 쉽고 페이지의 다른 텍스트와 혼동되지 않도록 합니다.
포커스 요소는 다양한 브라우저 창의 너비에 적응해야 하지만 단일 모양 서라운드는 여전히 존재합니다.
2013 New Adventures in Web Design 컨퍼런스에서 이와 같은 웹사이트를 많이 보게 될 것입니다. 공간의 다양한 정보 블록에는 다양한 정보가 포함되어 있으며 전체 페이지가 매우 생동감있게 보입니다.
눈여겨 볼 점은 이미지의 왼쪽 상단에 오른쪽을 가리키는 회색 원형 화살표가 있다는 점입니다. 이 화살표들은 서로 닿지 않기 때문에 공간의 유동성을 막지 않는다. 점선 하나하나에 불연속성이 있어 이 영역이 흐를 수 있음을 강조하고, 다른 영역의 흐름도 제한한다. 유동성을 높이기 위해 화살표가 지배적이지 않도록 밝은 회색 색상을 사용합니다.
즉, 많은 페이지를 탐색할 때 스크린샷을 찍게 되며 화살표가 주요 내용과 겹치지 않게 됩니다. 그러나 주요 콘텐츠 영역의 너비는 약 1280px입니다. 대체로 그것이 작동하는 방식은 화살표가 아니라 유동성이 더 나은지 여부입니다.
공백의 전형적인 예로 일부 로고를 사용하겠습니다. 동시에 그는 네거티브 스페이스가 사용된 점을 지적하고 어느 정도 지침을 주었으며, 여백의 활용에 대해 생각해 볼 수 있었다.
이러한 로고 중 일부는 폐쇄 원칙을 따릅니다. 실제로 존재하지 않는다는 것을 알 수 있지만 여전히 볼 수 있습니다. 이 로고는 그림과 배경 사이의 관계를 사용합니다. 배경을 보면 그래픽이 어떻게 보일지, 로고 전체에 약간의 변화가 있을 것입니다. 네거티브 스페이스를 많이 활용하는 이런 로고의 핵심은 관객으로 하여금 무엇인가를 생각하게 만드는 것이다.
구름과 침대의 조합, 검은 고양이, 트랜지션, 돌고래, 치과, 숲 등 다양한 로고
이 기사에서 가장 중요한 두 가지 요점을 얻을 수 있기를 바랍니다. 첫 번째는 그래픽과 배경을 사용하여 게슈탈트 원리에서 서로 간의 연결을 디자인하고 설정하는 것이며, 게슈탈트 원리도 필수 지침으로 디자이너.
두 번째이자 아마도 더 중요한 것은 디자인에서 공간이 어떻게 사용되는지 관찰하고 연구하는 데 필요한 노력입니다. 모든 페이지의 레이아웃은 공백의 상호 구성이기 때문에 공간을 좋은 디자인의 보조 위치로 삼지 마십시오. 이 공간을 잘 활용하여 디자인을 보다 효율적으로 완성해야 합니다.
의식적으로 격차를 분석하고 의도적으로 더 나은 디자인 환경을 만드는 능력. 액세서리로 만들지 말고 중요한 요소로 만들어 요소와 여백의 관계를 고민하고 형상화하여 긍정적인 효과를 만들어보세요.
앞으로는 더욱 관련성이 높은 게슈탈트 원칙 시리즈를 추가할 예정이며, 더 중요한 것은 시각적 무게와 균형 관계 등 이를 디자인에 적용하는 방법입니다.
/2014/05/design-principles-space-Figure-ground-relationship/