디자인의 대칭 및 비대칭 이해

디자이너는 청중이 인식할 수 있는 올바른 메시지를 전달하기 위해 시각적 균형 개념을 마스터하는 것이 중요하다는 것을 알고 있습니다. 종종 균형은 사물이 대칭이거나 디자인의 양쪽에서 동일한 무게를 가질 때만 달성되는 것으로 간주됩니다. 이것은 사실이 아닙니다. 다른 방법으로도 균형을 이룰 수 있습니다. 이를 위해서는 먼저 디자인의 균형이 의미하는 바를 이해해야 합니다. 디자인 요소의 분포로 알려져 있습니다. 디자인의 중력을 시각적으로 해석한 것입니다. 크고 조밀한 물체는 더 무거워 보이는 반면 작은 요소는 더 가벼워 보입니다. 디자인의 균형을 이루는 방법에는 여러 가지가 있습니다. 우리는 널리 사용되는 두 가지 방법인 대칭 및 비대칭 설계에 대해 논의할 것입니다.

대칭이란 무엇입니까?

핀

대칭은 경로 또는 중심을 따라 축을 가로질러 이미지에서 반복되는 부분의 시각적 품질을 나타냅니다. 양면이 동일하고 항상 균형을 이루는 요소와 구성. 대칭의 개념을 이해하기 위해 자연에서 얻을 수 있는 가장 좋은 참고 자료는 나비입니다. 모든 반대 모양은 서로 대응되며 완벽한 비율입니다. 이러한 완벽한 대칭은 시각적으로 보기 좋은 조화를 만들어 잘 인식되는 경우가 많습니다.

다양한 종류의 대칭을 달성하는 다양한 방법이 있습니다. 그 중 몇 가지를 살펴보겠습니다.

1. 반사 대칭:

핀

양방향 대칭으로도 알려진 반사 대칭은 대칭의 가장 일반적이고 대중적인 형태입니다. 이러한 대칭에서 중심축은 대칭에 영향을 주지 않고 수평 또는 수직으로 위치할 수 있습니다. 세로축과 가로축뿐만 아니라 이러한 대칭은 여러 대각선 축에서도 찾을 수 있습니다. 예를 들어 중심축을 어디에 두든 대칭인 눈송이를 예로 들어 보겠습니다. 이러한 대칭은 중심축의 양쪽에 변형이 없기 때문에 순수 대칭이라고도 합니다.

웹 디자인에 반사 대칭을 도입하면 레이아웃에서 그렇게 할 수 있습니다. 기본 원칙은 동일하게 유지됩니다. 그러나 이러한 관행에서 영감을 얻어야하며 비례적으로 유사하다면 중심축의 양쪽에 있는 요소가 어떻게 보이는지 조금이라도 벗어나는 것을 부끄러워하지 않아야 한다는 점에 유의해야 합니다. 이 방법은 위 웹 사이트의 예에서 볼 수 있듯이 때때로 고대비를 만드는 데 도움이 됩니다.

2. 회전 대칭:

핀

회전 대칭은 방사형 대칭이라고도 합니다. 디자인에 움직임을 추가하는 데 사용됩니다. 기본 아이디어는 변위와 속도를 암시하는 둘 이상의 다른 각도로 표시하여 디자인에서 해당 요소의 움직임을 묘사하는 데 도움이 되도록 요소를 어느 정도 회전시키는 것입니다. 역동적인 동작을 전달합니다. 회전 대칭이 되려면 시각적 개체의 거리, 빈도 및 각도가 동일해야 합니다. 자연에서 영감을 얻는다면 회전 대칭의 가장 좋은 예는 해바라기 꽃잎입니다.

웹 디자인이나 로고 디자인에 대해 이야기할 때 Mitsubishi의 로고 디자인에서 회전 대칭의 가장 좋은 사용을 볼 수 있습니다. 같은 패턴을 중심에서 연결된 세 개의 다른 각도로 회전시켜 꽃의 디자인을 닮아 회전 대칭을 사용하여 움직임을 연출합니다.

3. 병진 대칭:

핀

병진 대칭은 일반적이거나 정확한 방향을 유지하면서 개체를 다른 위치로 재배치하여 달성됩니다. 일반적으로 평평한 표면이나 2차원 표면에서 복잡한 패턴을 "인라인"으로 유지하기 위해 테두리에 사용됩니다. 모든 요소가 동일한 크기일 필요는 없습니다. 동일한 방향으로 반복되는 패턴의 크기를 여러 번 변경하면 거리, 이동 또는 근접도 표시할 수 있습니다. 디자인에서 속도, 사운드 및 액션을 생성하는 이상적인 방법입니다.

웹 디자인과 관련하여 디자이너는 전체 웹 사이트를 그런 방식으로 디자인하는 대신 웹 페이지의 단일 요소 중 하나를 사용하는 경우가 많습니다. 로고 디자인을 위한 훌륭한 연습이기도 합니다. Public Broadcasting Service 로고는 모노크롬과 융합된 과도기적 대칭성을 탁월하게 활용하여 로고의 대비를 보여줍니다.

4. 색상 대칭:

핀

대칭은 종종 모양과 배열에서만 고려되고 논의되지만 색상 측면에서도 구현될 수 있습니다. 색상환 자체는 완벽한 대칭에 있어 각 음영, 각 색상이 지능적인 대칭으로 이어지는 편안한 반대 색상을 갖습니다. 개별 디자인 요소로서의 색상 자체는 웹사이트의 시각적 미학과 언어에 중요한 영향을 미칩니다. 따라서 웹 사이트에서 색상 대칭을 만드는 것은 사용자 경험을 눈에 편안하고 편안하게 만드는 데 필수적입니다. 또한 디자이너가 관심 지점, 독창성 및 캐릭터와 같은 다양한 요소 간의 이상적인 균형을 유지하는 데 도움이 될 수 있습니다.

Apple은 웹사이트 디자인에서 흑백 또는 단색의 가장 인기 있고 고전적인 조합을 사용하여 성공적인 색상 대칭을 달성합니다. 색상의 대비는 전체 웹 사이트 경험뿐만 아니라 개별 요소에 호흡 공간을 제공합니다. 정보가 매우 조직적이고 구조화되어 있기 때문에 사용자는 사이트를 탐색할 때 편안함을 느낍니다.

이제 대칭 저울의 종류를 알았으므로 설계에 사용할 때의 이점에 대해 논의할 수 있습니다.

신뢰감 전달: 대칭 레이아웃은 신뢰감을 전달하려는 디자이너에게 적합합니다. 또한 안정감을 줍니다. 따라서 은행에서 일하는 경우; 대칭 디자인이 올바른 선택일 수 있습니다.

단일 상호 작용 개체가 있는 페이지의 경우: 대칭 균형은 단일 대화형 개체가 있는 페이지에 가장 적합합니다. 일반적으로 로그인/가입 페이지에는 이러한 페이지가 있습니다. 중심에 주요 상호 작용 개체 또는 중요한 메시지를 사용하여 중심 초점을 가질 수 있습니다.

페이지에 둘 이상의 필수 선택 사항이 있는 경우: 비대칭 균형을 사용하면 방문자가 웹사이트의 모든 페이지에 동등하게 집중할 수 있습니다. 이것이 도움이 될 수 있는 가장 좋은 곳은 남성과 여성 모두를 위한 제품이 있는 쇼핑 웹사이트입니다. 따라서 페이지의 한 섹션은 남성 섹션과 다른 여성 섹션을 표시할 수 있습니다.

다양한 종류의 대칭 균형과 다양한 디자이너가 이를 디자인에 통합한 방법에 대해 논의했으므로 이제 비대칭 디자인이 무엇인지 이해해 보겠습니다.

비대칭이란 무엇입니까?

핀

대칭이 없는 균형을 비대칭 균형이라고 합니다. 혼란스러운 구성 방식처럼 보이는 것은 서로의 이미지를 반영하지 않는 다양한 가중치의 요소를 사용하면서도 디자인에 어떻게든 여전히 균형 감각이 있는 의도적인 구성입니다. 많은 방법이 이를 달성할 수 있습니다. 예를 들어 캔버스의 한쪽 끝에 무거운 요소를 놓고 디자인의 반대쪽에 더 가벼운 개체와 균형을 맞출 수 있습니다. 이러한 관행은 디자인을 보다 역동적이고 현대적으로 보이게 합니다. 또한 보다 의미 있는 메시지를 전달하는 데 도움이 될 수 있습니다.

더 어둡고 큰 물체는 항상 작고 가벼운 물체보다 더 무겁다는 것을 기억해야 합니다. 비대칭 디자인은 구성을 만들기 위해 둘 이상의 요소 간의 복잡한 관계를 사용하므로 더 많은 관심을 끌 수 있습니다. 대칭 균형을 사용하여 달성되는 조화로운 균형이 있지만 때로는 약간 수동적입니다. 비대칭 균형을 올바르게 사용하는 디자이너는 대칭 디자인보다 스토리텔링 범위가 더 많기 때문에 청중의 관심을 끄는 것에 대해 걱정할 필요가 없습니다.

유명한 화가 Vincent Van Gogh는 비대칭 균형의 좋은 예인 "별이 빛나는 밤"이라는 유명한 그림을 그렸습니다. 컴포지션의 오른쪽 상단 위치에 있는 밝은 달은 그림의 왼쪽 하단에 있는 어두운 나무에 의해 균형을 이루고 보완됩니다.

비대칭 디자인은 유연성, 예측 불가능성 및 스토리텔링의 자유를 제공합니다. 그러한 디자인은 더 무질서하고 혼란스러워 보이지만 쉽게 만들 수 있다고 가정해서는 안됩니다. 이러한 혼란스러운 디자인 프로세스에서 균형을 만드는 것은 더 어려울 수 있습니다.

다양한 종류의 비대칭을 달성하는 다양한 방법이 있습니다. 그 중 몇 가지를 살펴보겠습니다.

1. 형태와 가치에 따른 배열:

핀

밝은 색상과 작은 크기의 시각적 개체는 크고 어두운 시각적 개체보다 무게가 적습니다. 이렇게 하면 디자인의 다른 면에 있는 하나의 더 큰 개체와 비교하여 디자인의 한 면에 여러 개의 작은 요소를 사용하여 디자인의 균형을 맞출 수 있습니다. 또한 컴포지션의 큰 빈 영역은 더 작은 복잡한 세부 사항으로 보완될 수 있습니다.

2. Texture를 사용한 배열:

핀

텍스처는 매력적이고 생생한 디자인을 만드는 데 사용되는 가장 강력한 기술 중 하나입니다. 그것은 물체의 표면 품질 또는 느낌으로 알려져 있습니다. 면, 양모, 황마와 같은 다양한 재료가 피부에 닿는 느낌을 알 수 있습니다. 이것은 그 머티리얼의 텍스처로 알려져 있습니다. 실제 세계에서 질감은 물리적으로 느껴지는 물질적 차이뿐만 아니라 시각적으로 두 요소를 구별합니다. 그러나 웹 디자인에서는 디자인이 디지털이기 때문에 질감은 만지는 것이 아니라 시각적인 트윅으로 표현될 수 있다. 색상의 질감은 매끄럽거나 거칠거나 기타 이러한 효과에 따라 조정할 수 있습니다. 서로 다른 질감을 사용하는 영역과 질감의 변화가 없는 영역 사이에 강렬한 대비를 보여줌으로써 균형감을 찾을 수 있다.

3. 색상별 배열: 핀

색상을 설명하는 방법에는 여러 가지가 있습니다. 기본 색상, 보조 색상이 있으며 더 상쾌한 색상과 따뜻한 색조의 색상도 있습니다. 일부 색상은 매우 선명하고 일부는 다소 흐릿한 반면 일부는 중간색입니다. 이에 대한 적절한 지식은 디자이너가 디자인에서 관련 색상을 선택하여 매력을 높이는 데 도움이 될 수 있습니다. 비대칭 디자인에서 디자이너는 디자인의 넓은 영역에 중간 색상을 사용하고 작은 영역의 밝고 생생한 색상과 대조하는 경우가 많습니다.

4. 눈 방향에 따른 배열:

핀

우리가 디자인에 대해 이야기할 때 일반적으로 많은 요소가 청중이 따라갈 수 있는 시각적 지침을 제공할 수 있으며 디자이너가 먼저 보고 싶어하는 것을 볼 수 있고 두 번째로 볼 수 있습니다. 삼각형 모양은 화살표나 포인터 역할을 하는 경우가 많으며 이러한 단서를 먼저 찾은 다음 나머지 디자인을 살펴보는 데 사람들의 관심이 집중됩니다. 또한 디자인 요소가 무언가를 가리키고 있을 때 청중의 주의를 그것이 가리키는 곳으로 리디렉션합니다. 그것은 청중을 호기심을 갖게 하고 따라서 비대칭 균형을 위한 디자인 요소의 필수적인 부분입니다.

이제 비대칭 저울의 종류를 알았으므로 설계에 사용할 때의 이점에 대해 논의할 수 있습니다.

레이아웃을 돋보이게 하려면: 비대칭 디자인은 스토리텔링의 특징이 있어 다른 부분과 차별화되어 고객의 마음에 오래 지속됩니다.

역동성을 보여주기 위해: 다이내믹 디자인은 보는 사람의 눈이 모든 요소를 ​​하나로 보는 대신 디자인 레이아웃을 통해 움직이는 디자인입니다. 비대칭 디자인은 움직임의 느낌을 표현합니다. 이것이 많은 스포츠 브랜드가 로고와 레이아웃에 비대칭 디자인을 사용하는 이유입니다.

주의를 끌기 위해: 비대칭 디자인이 주의를 끕니다. 방문자를 자동으로 초점으로 안내하고 시선은 디자인의 가장 중요한 부분에 먼저 자리를 잡습니다. 페이지의 요소를 조정하고 배치함으로써 디자이너는 보는 사람의 시선을 다른 영역으로 향하게 할 수 있습니다.

두 설계 방식 모두 고유하고 의미와 장점이 있지만 한계도 있습니다. 따라서 대칭 및 비대칭 디자인의 원칙을 결합하여 미적 디자인 레이아웃을 생성할 수 있습니다. 이를 수행하는 한 가지 방법은 레이아웃의 한 영역에 전체 대칭 레이아웃과 비대칭 영역 또는 요소를 사용하여 관심 지점을 만들고 유사한 요소 그룹 내에서 시각적 계층 구조를 구성하는 것입니다.

따라서 두 분야의 기술을 마스터하면 방문자에게 독특하고 기억에 남는 매력적이고 관련성 높은 레이아웃으로 훌륭한 웹사이트를 디자인하는 데 도움이 됩니다.