네거티브 스페이스를 사용하여 멋진 웹사이트를 만드는 방법

웹 사이트와 앱에는 버튼, 열, 아이콘, 이미지, 선, 미디어 및 타이포그래피와 같이 공존해야 하는 모든 종류의 시각적 요소가 있습니다. 이러한 모든 요소에는 캔버스(빈 웹 페이지) 가 필요 하고 해당 캔버스에는 공백, 즉 음수 또는 공백이 필요 합니다. 보는 사람의 눈은 그것 없이는 보이는 것을 처리할 수 없습니다.

YouTube 채널 구독

네거티브 스페이스란?

긍정적인 공간은 주제나 다른 초점으로 채워진 작품의 일부입니다. 음의 공간이 나머지를 차지합니다. 색상이나 디자인이 대조되는 공백 또는 흰색일 수 있으며, 미묘한 배경 이미지가 무엇이든 간에 가득 차거나 어수선한 대신 텅 빈 느낌이 들 것입니다. 하지만 네거티브 공간이 비어 있다고 해서 그것이 중요하지 않다는 것은 아닙니다. 긍정적인 공간에 주목하게 하고, 때로는 다르게 볼 때 긍정적인 공간 자체가 되기도 합니다.

음수 공간의 예

네거티브 스페이스와 이에 대응하는 포지티브 스페이스는 웹 디자인을 포함한 모든 종류의 예술과 디자인에 있습니다. FedEx 로고를 살펴보겠습니다. 보라색과 주황색 글자가 보이시죠? 하지만 공백에 화살표가 있습니다.

숨겨진 FedEx 화살표는 그리기 및 페인팅과 유사한 방식으로 음수 공간을 사용합니다. 외곽선은 양수 공간이 생성되는 것처럼 생성됩니다. 이와 같은 예에서 음수 공간은 단순히 양수 공간 이 생성되지 않기 때문에 생성 되지 않습니다 .

NBC 공작도 같은 일을 합니다.

네거티브 공간의 포인트는 일반적으로 긍정적인 공간에 초점을 맞추는 것이지만 때로는 영리한 디자인의 초점 이 됩니다 . 여기 또 다른 예가 있습니다. 늑대의 이빨이 어떻게 나무를 형성하는지 보세요.

이에 대한 용어가 있습니다. Figure-ground reversal. 기본적으로 전경색과 배경색이 위치를 바꿔 관점과 해석을 바꾸는 것을 의미합니다. 이에 관심이 있다면 MC Escher의 작업, 특히 그의 변신 프린트를 확인하십시오.

네거티브 스페이스는 사진에서도 같은 역할을 합니다. 내가 사촌의 아들 Julian을 찍은 이 초상화를 보세요. 검은 배경은 그에게 모든 초점을 둡니다.

꽃잎 사이의 공간과 같은 자연의 네거티브 공간과 커피잔의 손잡이를 통한 공간과 같은 기능적인 디자인을 찾을 수 있습니다.

저희 웹사이트에서도 사용하고 있습니다. 우리 홈페이지에는 많은 정보가 있지만 우리가 그것을 배치한 방식 때문에 압도적이지 않습니다. 그리고 배경 디자인에 추가 할 색상과 약간 모양의 힌트에도 불구하고, 그것은 어떤 방식으로 혼란에 - 그것은 여전히 유쾌히있는 (그리고 온 브랜드이다) 지루하지 않고 비어의 모양을 제공합니다.

네거티브 스페이스의 유형

네거티브 스페이스에는 몇 가지 유형이 있습니다. 마이크로 및 매크로는 컴포지션의 음수 공간 크기를 나타냅니다. 능동 및 수동은 해당 영역이 사용자를 위해 수행하는 작업을 나타냅니다.

마이크로 대 매크로 네거티브 스페이스

마이크로 네거티브 스페이스는 요소 사이의 작은 공간, 즉 텍스트 줄 사이의 간격 또는 탐색 메뉴의 링크 사이 영역을 나타냅니다. 이것은 독자가 콘텐츠를 읽을 수 있는 정도에 영향을 줍니다. 줄 사이에 공간이 충분하지 않거나 텍스트가 여백을 벗어나면 사용자가 읽고 이해하는 데 어려움을 겪을 것입니다.

매크로 음수 공간이 더 큽니다. 레이아웃 주변의 공간과 큰 디자인 요소 사이의 공간입니다. 예를 들어 콘텐츠 블록 사이의 영역이 있습니다. 전체 디자인을 담는 것은 컨테이너의 빈 부분입니다.

매크로 네거티브 공간이 적은 웹사이트는 매우 유익한 경향이 있습니다. 매크로 네거티브 공간이 많은 웹 사이트는 종종 미니멀리즘적이거나 고급스러움을 보여줍니다. 첫 번째 예는 작은 매크로 음수 공간이고 두 번째 예는 큰 매크로 음수 공간입니다.

능동 대 수동 네거티브 공간

활성 네거티브 공간은 페이지 구조를 추가하고 콘텐츠의 흐름을 개선하며 사용자를 원하는 곳으로 안내합니다. 패시브 네거티브 공간은 웹사이트의 모양을 개선하지만 특정 흐름을 통해 사용자를 이동하지 않습니다. 공간이 중심에서 벗어나 비대칭인 경우 일반적으로 활성화됩니다. 균형이 잡히고 대칭적일 때 일반적으로 수동적입니다. 움직임을 덜 유발하므로 사용자가 특정 방식으로 보도록 강요하지 않습니다. 다음은 활성 음수 공간의 예입니다.

다음은 수동 음수 공간의 예입니다.

네거티브 스페이스와 구성

음수 공간은 다음과 같은 몇 가지 이유로 구성에 중요합니다.

• 균형을 잘 유지하려면 컴포지션에서 공간을 확인해야 합니다.
• 또한 디자인에서 서로 다른 개체 간의 관계를 가지고 놀 수 있습니다.
• 웹 디자인에서 페이지에 사람들을 유지하는 중요한 역할을 할 수 있습니다.
• 요소 주위의 공간의 양은 요소에 대한 초점의 정도를 결정합니다. 공간이 많을수록 초점이 더 많이 걸립니다.

음수 공간과 양수 공간의 올바른 균형 선택

당신이 사용하는 부정적인 공간과 긍정적인 공간의 양은 당신이 추구하는 모습과 보는 사람에게 무엇을 불러일으키고 싶은지에 달려 있습니다.

• 미학적으로 만족스러운 디자인을 원한다면 음수 공간과 양수 공간을 같은 부분으로 사용할 것입니다.
• 의도적으로 적나라하고 미니멀하게 보이는 디자인의 경우 더 부정적인 공간이 필요합니다.
• 압도적이고 대범해 보이려면 더 긍정적인 공간을 선택할 수 있습니다.

디자이너는 브랜드와 웹사이트의 의도된 목적에 적합한 균형을 이룰 때까지 간격을 두고 플레이해야 합니다.

네거티브 스페이스로 텍스트가 많은 웹사이트 정리하기

한 페이지에 엄청난 양의 정보를 압축해야 하는 경우 음수 공간을 어디에 둘 것인지 파악하기가 까다로워집니다. 특히 해당 정보가 텍스트가 많아 빠르게 어수선해 보일 수 있는 경우에는 더욱 그렇습니다. HostingDude는 너무 많은 긍정적인 공간의 좋은 예입니다.

반면에 New York Times는 눈을 미치게 하지 않으면서 뉴스로 홈페이지를 포장하는 방법을 알아냈습니다. 이 모든 것이 공백(및 색상 선택) 덕분입니다. 매크로 공간을 위한 공간은 많지 않지만 마이크로 공간을 활용했습니다.

HostingDude의 요소는 서로 더 가깝지만 New York Times 웹 사이트의 요소는 추가 공간 덕분에 더 통일된 것처럼 보입니다. 눈은 페이지를 더 쉽게 이해할 수 있어 더 완벽하고 응집력 있는 디자인을 제공합니다. 눈이 쉴 기회가 있을 때 보고 있는 것을 더 잘 받아들일 수 있습니다. 음의 공간은 적을수록 많다고 믿습니다.

음수 공백으로 텍스트 나누기

디자이너가 미적으로 보기 좋고 텍스트가 많은 홈페이지를 만드는 방법을 보았지만 더 긴 텍스트 블록 자체는 어떻습니까? 짧은 단락과 긴 단락을 혼합하고, 헤드라인을 굵게 하고, 목록을 만들고, 기사 전체에 미디어를 추가하는 것은 모두 단어 주위에 부정적인 공간을 만드는 데 도움이 되어 독자를 더 매력적으로 만듭니다. 카피가 있더라도 외관은 중요하며 훌륭한 디자이너는 이를 고려합니다.

클라이언트에게 네거티브 스페이스 포인트 설명하기

웹사이트 디자이너는 부정적인 공간에 대해 클라이언트와 충돌할 수 있습니다. 고객은 중요하고 돈을 버는 정보를 짜낼 수 있는 더 많은 여지를 봅니다. 그들은 빈 공간이 낭비되는 공간이라고 생각합니다. 반면에 디자이너는 눈이 이미 존재하는 정보를 실제로 흡수하는 데 필요한 시각적 휴식을 봅니다. 그들은 웹사이트의 모든 공간, 심지어 콘텐츠가 없는 공간이 중요하다는 것을 알고 있습니다.

목업 및 프로토타이핑 도구가 유용한 곳입니다. 고객에게 웹사이트의 두 가지 버전을 보여주십시오. 하나는 만족할 만한 양의 공간이 있는 공간이고 다른 하나는 양의 공간으로 가득 차 있습니다. 그들에게 웹사이트를 나란히 놓고 함께 놀게 하십시오. 내 생각에 그들은 잘 디자인된 웹 사이트를 쉽게 탐색하고 제대로 디자인되지 않은 웹 사이트에서 길을 잃을 것입니다.

마무리

웹사이트에는 다양한 요소가 있으며 이러한 요소가 조화롭게 살고 시청자를 끌어들이려면 웹사이트 주변에 여백이 필요합니다. 사용하는 공백의 양과 기능은 (a) 브랜딩 및 (b) 사용자가 취하기를 원하는 작업에 따라 다릅니다. 색상을 반전시키거나 음수 공간으로 그림을 그려 흥미롭거나 눈에 띄는 방식으로 정의하는 것과 같이 공백으로 창의력을 발휘할 수도 있습니다.

어떤 접근 방식을 취하든 여백은 균형이 맞아야 하지만 이것이 반드시 대칭을 의미하지는 않습니다. 대신 요소가 서로 경쟁하지 않고 원하는 유형의 관심을 끌면서 페이지에 존재함을 의미합니다. 시청자에게 균형이란 혼란스럽거나 압도되지 않고 웹사이트를 볼 수 있는 것을 의미합니다.

웹사이트의 공백을 실험해 보세요. 일부를 추가하고 일부를 빼십시오. 매크로를 줄이고 마이크로를 늘리거나 그 반대의 경우도 마찬가지입니다. 특정 요소 주변의 공백이 사용자가 조치를 취하도록 유도하는 정도를 테스트합니다. 여백의 아름다움은 예술적 기법이라는 점입니다. 즉, 엄격하고 빠른 규칙이 없습니다.

여행 웹사이트를 디자인하시나요? 매크로 공간을 많이 사용하게 될 것입니다. 여행 웹사이트를 위한 Divi Child 테마 모음을 확인하세요.

StockVector / Shutterstock.com을 통한 추천 이미지