디자인에서 비대칭과 대칭을 사용하는 방법

Vectornator의 모양 도구를 사용하여 균형을 만드는 방법

모든 레이아웃은 빈 페이지에서 시작됩니다.

그런 다음 로고, 메뉴, 텍스트 섹션, 사진, 일러스트레이션 등의 디자인 요소가 나옵니다.

요소의 배치에 따라 성공적인 디자인이 될 것입니다. 그렇기 때문에 디자이너가 새 페이지에서 작업을 시작할 때 가장 먼저 하는 일 중 하나는 해당 페이지에서 요소의 배열을 결정하는 것입니다.

이미지 출처: Andra C Taylor Jr

페이지의 공백 요소에 대한 두 가지 기본 접근 방식이 있습니다. 디자이너는 보다 대칭적인 요소 배열 또는 비대칭 배열을 선호할 수 있습니다.

이제 언뜻 보기에는 너무 단순하고 제2의 천성으로 보일 수 있는 두 가지 강력한 디자인 원칙을 살펴보겠습니다. 너무 많은 생각을 보증합니다. 그러나 우리는 그들의 능력과 효과의 이점을 과소평가하지 않는 것이 현명할 것입니다.

구성 요소를 중심점이나 축 주위에 고르게 분포시킬 때마다 우리는 대칭적인 디자인을 만듭니다. 자연에서 대칭의 좋은 예는 나비입니다. 나비의 오른쪽과 왼쪽은 서로 매우 유사합니다(동일하지는 않지만).

반사된 두 면이 정확히 동일한 경우 대칭을 찾습니다. 완벽한 거울 이미지. 욕실 거울 표면에 오른손 손가락을 대고 비스듬히 반사된 거울을 살펴보세요. 거울이 깨끗하다고 ​​가정하면 항상선택할 수 있는 옵션이 너무 많기 때문에 다른 모든 사이트보다 눈에 띄고 이탈률을 줄이려면 사이트가 특별해야 합니다. 디자이너는 비대칭을 마스터하면 더 기억에 남을 제품을 만듭니다.

이미지 출처: Olia Gozha

To Convey Dynamicism

웹디자이너가 '역동적'이라는 용어를 사용할 때 그들이 말하는 것은 보는 사람의 시선이 디자인을 통해 이동하는 디자인입니다. 비대칭 디자인은 움직이는 느낌을 불러일으킬 수 있습니다. 그렇기 때문에 많은 스포츠 브랜드가 로고와 같은 개별 요소에 비대칭 레이아웃과 비대칭을 사용합니다.

관심을 끌기

비대칭은 관심을 끕니다. 적절한 비대칭 레이아웃은 자동으로 보는 사람의 시선을 초점으로 가져옵니다. 시선은 자연스럽게 디자인의 중요한 부분에 먼저 고정됩니다. 페이지에서 요소를 배치하고 조정하여 다른 영역으로 시선을 돌릴 수 있습니다.

초점을 선택할 때 모든 디자인의 주요 목표는 커뮤니케이션이라는 점을 기억하세요. 디자인하는 각 웹 페이지에서 방문자에게 스토리를 전달하므로 이 스토리를 가장 효과적으로 전달하는 데 도움이 되는 초점을 선택해야 합니다.

그림을 그릴 수 있는 몇 가지 사항은 다음과 같습니다. 주의:

• 대비. 대비는 특정 요소를 강조하거나 숨기는 데 사용할 수 있습니다. 특정 요소의 대비를 증가시켜 눈에 띄게 만듭니다.반대로 대비를 낮추면 요소가 배경
• 공백으로 희미해지게 만들 수 있습니다. 공백을 사용하여 한 요소를 다른
• Movement에서 분리합니다. 인간의 눈은 움직이는 물체
• 방향 신호에 주의를 기울이도록 고정되어 있습니다. 눈은 방향 신호를 따릅니다(예: 방향 신호는 특정 방향을 가리키는 화살표일 수 있음)
• 인간의 얼굴. 사진에서 눈은 시선의 궤적을 따라가므로 사이트 방문자는 디자인에서 사람과 같은 방향을 보게 됩니다.

디자인에서 대칭과 비대칭의 결합

이미지 출처: Artem Kniaz

대칭이 항상 양자택일의 결정은 아닙니다. 대칭과 비대칭을 결합하여 가장 매력적이고 심미적으로 만족스러운 디자인을 만들 수 있습니다.

레이아웃을 더 작은 섹션으로 나누고 각 섹션에서 대칭 또는 비대칭 균형을 이루도록 노력할 수 있습니다. 예를 들어 관심 지점을 만들고 유사한 요소 그룹 내에서 시각적 계층 구조를 구성하는 데 비대칭이 사용되는 대칭 레이아웃을 가질 수 있습니다.

대칭(또는 대칭 부족)은 디자이너의 작업에서 강력한 도구가 될 수 있습니다. 공구 상자. 대칭은 자연스럽게 질서정연함을 불러일으키는 반면, 비대칭은 디자이너가 디자인의 독특함과 특성을 달성하는 데 도움이 될 수 있습니다. 두 가지를 결합하면 독특하고 기억에 남을 디자인을 만들 수 있습니다.모양의 왼쪽 상단 모서리. 반면 다각형과 별은 모양의 중심에서 자동으로 그려집니다.

모서리 반경을 편집하는 방법

벡터 모양의 모든 꼭지점은 모서리가 뾰족하거나 둥글며 Vectornator에서 , 모서리 반경 슬라이더를 사용하여 도형의 개별 모서리 반경을 조정할 수 있습니다.

도형 모서리의 반경을 변경하려면 스타일 탭 내부의 모서리 반경에서 손가락이나 연필을 드래그하기만 하면 됩니다.

모양의 모서리 하나를 변경하려면 노드 도구를 사용하여 선택한 다음 모서리 반경 슬라이더를 따라 손가락을 밀어 조정합니다.

다각형의 모서리 반경을 편집하는 방법

도형을 선택할 때마다 '빠른 작업' 메뉴를 사용하여 도형의 모서리 반경을 조정할 수 있습니다. 이렇게 하려면 메뉴에서 모서리 반경 아이콘을 탭한 다음 좌우로 슬라이드하여 값을 변경합니다.

직선 그리는 방법

에서 선 아이콘을 선택하여 선 도구를 활성화합니다. 도구 모음. 선을 시작하려는 위치에 연필이나 손가락을 놓은 다음 선을 끝내려는 위치로 끕니다. 캔버스에 두 번째 손가락을 대고 선을 가로, 세로 또는 45° 간격으로 스냅합니다.

별 만드는 방법

별 도구를 사용하여 Vectornator에서 별을 쉽게 만들 수 있습니다. . 활성화하려면 툴바 안에 있는 모양 아이콘을 누른 다음 별을 선택하면 됩니다.새 별을 그리려면 별의 중심이 될 위치를 탭하기만 하면 됩니다.

별 도구 오른쪽에는 별표의 포인트 수를 제어할 수 있는 슬라이더가 있습니다. 별. 슬라이더에 표시된 숫자는 포인트 수에 해당합니다.

별 도구로 그릴 때 모양의 포인트와 방향을 수정하는 데 도움이 되는 몇 가지 제스처를 활성화합니다.

• 뾰족한 방향 변경 – 별의 가시 방향을 수정하려면 위아래로 드래그하여 별 모양 변경 – 별을 그리는 동안 두 번째 손가락을 잡고 별의 지점을 편집합니다.

나선 그리기 방법

Vectornator에서 나선형 만들기는 나선형 도구를 사용하여 만들 수 있습니다. 활성화하려면 도구 모음 안에 있는 나선형 아이콘을 누르기만 하면 됩니다.

나선형 오른쪽에서 감소 값을 제어할 수 있습니다. 감소는 이전 바람에 비해 나선형의 각 바람이 감소해야 하는 양을 지정합니다.

새 나선형을 그리려면 연필을 잡고 캔버스의 아무 곳이나 드래그합니다. 선을 시작하려는 위치에 스타일러스(또는 손가락)를 놓은 다음 아래에서 위로 또는 그 반대로 드래그하여 방향을 설정합니다.

결론

균형 잡힌 구도가 적절하게 느껴집니다. 안정적이고 심미적으로 만족스럽습니다.

일부 요소는 초점이 되어 시선을 끌 수 있지만구성의 한 영역이 다른 영역을 볼 수 없을 정도로 시선을 사로잡습니다.

구성의 균형을 맞추려면 디자인의 어떤 영역도 다른 영역을 압도하지 않는 방식으로 긍정적인 요소와 부정적인 공간을 모두 배치해야 합니다. . 모든 것이 함께 작동하고 완벽하게 조화를 이룹니다. 개별 부분이 합계에 기여하지만 합계가 되려고 하지 않습니다.

균형이 맞지 않는 구성은 긴장을 유발할 수 있습니다. 디자인이 불균형하면 개별 요소가 전체를 지배하고 구성은 부분의 합보다 작아집니다. 일부 프로젝트에서는 전달하려는 메시지에 불균형이 적합할 수 있지만 일반적으로 균형 잡힌 구성을 원합니다.

대칭은 아름답습니다. 그것이 우리 대부분이 보는 방식입니다. 대칭은 조화와 즐거운 미학의 감각으로 이어집니다. 대칭은 종종 형식적이고 정적인 것과 관련이 있습니다. 반면에 비대칭은 내재된 아름다움이 부족하면서도 더 흥미롭고 역동적인 것으로 간주되는 경우가 많습니다.

성공한 그래픽 디자이너는 균형이라는 시각적 개념을 숙달하는 것이 효과적인 커뮤니케이션의 핵심임을 알고 있습니다. 디자인이 균형을 이루면(대칭 및 비대칭 디자인 모두에서 발생할 수 있음) 더 큰 통일성을 얻을 수 있으며 청중은 정보를 받아들이는 데 에너지를 적게 사용할 것입니다.

대칭과 비대칭을 이해하는 것은 어렵지 않습니다. ,하지만 그것을 받고처음에는 까다로울 수 있습니다. 그러나 Vectornator와 같은 선도적인 도구를 사용하면 상상할 수 있는 모든 것을 최대 30% 더 빠르게 디자인할 수 있습니다. 원할 때마다 이동 중에도 세련된 일러스트레이션, 멋진 레이아웃 목업, 균형 잡힌 비주얼을 만들 수 있습니다.

편집, 사용자 정의 또는 자신만의 브러시를 만들 수도 있습니다. 각 브러시 스트로크는 압력에 민감하므로 전체 드로잉 경험을 종이에 펜으로 그리는 것과 같은 느낌을 줍니다. 프로토타이핑 및 목업 디자인이 그 어느 때보다 빨라졌으며 인포그래픽도 간편해졌습니다. 가능성은 말 그대로 무한합니다.

"균형은 찾는 것이 아닙니다. 당신이 만드는 것입니다.” 따라서 창의력을 마음껏 발휘하여 완벽한 대칭과 불완전한 비대칭 디자인의 균형을 잡으십시오.

다행히도 대칭 디자인은 동일한 미러링에 의존하지 않습니다. 효과에 근접하는 것이 중요합니다. 정확할 필요는 없습니다. 디자인에서 기하학적 완벽함을 고려하지 않고도 사용자의 눈을 쉽게 조작할 수 있다는 점을 기억하세요.

반대로, 비대칭은 어떤 종류의 대칭도 없는 것입니다. 중심점이나 축 주위에 고르지 않게 분포된 요소로 구성된 디자인을 만들 때마다 결과적으로 비대칭 디자인이 됩니다. 우리는 비대칭성을 이용하여 디자인 영역에 주의를 끌거나 역동성 또는 움직임을 전달할 수 있습니다.

생물학에서와 마찬가지로 요소는 세포나 생태계의 일부와 같습니다. 궁극적으로 우리는 대칭을 사용하여 할 수 있는 건물 균형이 '건강하고' 더 효과적인 디자인을 만든다는 점을 명심해야 합니다.

이 기사에서는 대칭과 디자인을 위한 비대칭 작업. 각 접근 방식에 대한 기본 기술, 팁 및 모범 사례를 다룰 것입니다.

대칭이란 무엇입니까?

이미지 출처: 페이 코니시

오랫동안 대칭(형식적 균형)은 디자인의 금본위제로 생각되었습니다. 대칭 레이아웃 선택에 대한 선호도는 아키텍처에서 특히 두드러집니다. 이것의 좋은 예세계에서 가장 아름다운 건축물 중 하나인 타지마할. Taj Mahal은 미학적으로 보기 좋게 만드는 많은 특성을 가지고 있지만 그 대칭적인 균형은 주요한 것 중 하나입니다.

디자인에서 대칭을 사용하는 이점은 허공에서 나온 것이 아닙니다. 많은 디자인 원칙과 동일합니다. 그것은 인간의 마음이 시각적 데이터를 구조화하고 배열하는 방법을 설명하는 인간 행동 이론인 게슈탈트 원리에서 나왔습니다.

우리의 마음은 자연스럽게 우리가 보는 것에서 질서를 만듭니다. 그렇기 때문에 대칭이 매우 강력합니다. 대칭적 디자인은 질서와 안정성이 있어 눈에 편안한 디자인입니다.

대칭 유형

이미지 출처: Vincent van Zalinge

대칭에는 반사, 회전 및 병진 대칭의 세 가지 유형이 있습니다.

반사 대칭

아마도 사람들이 '대칭'이라는 단어를 들었을 때 가장 먼저 생각하는 것일 것입니다. 거울 효과라고도 하는 반사 대칭은 모든 것이 중심 축을 중심으로 거울처럼 보일 때 발생합니다.

축은 어떤 방향이든 될 수 있습니다.축의 한 쪽에 있는 것이 다른 쪽에 미러링되거나 반사되는 한 수평, 수직, 대각선 및 그 사이의 모든 것입니다.

디자이너는 종종 반사 대칭을 사용하여 양쪽에 동일한 가중치를 부여하거나 재미있는 시각적 효과를 만듭니다.

회전 대칭

이 유형의 대칭은 모든 것이 공통 중심을 중심으로 회전할 때 발생합니다. 회전 대칭은 모든 것이 회전하는 공통 중심이 있고 요소가 중심점 주위에 균등한 간격으로 배치되어 있는 한 모든 각도 또는 주파수에서 발생할 수 있습니다.

회전 대칭은 실생활에서 매우 일반적입니다. 예를 들어, 불가사리의 팔은 중앙에서 밖으로 방사됩니다. 많은 교회의 천장 그림도 회전 대칭을 사용합니다.

웹 디자이너는 작업에 회전 대칭을 통합하여 움직임을 묘사하거나(예: 진행 또는 움직임을 추론) 데이터를 매혹적인 방식으로 시각화합니다.

병진 대칭

이 유형의 대칭은 요소가 일반적이거나 정확한 방향을 유지하면서 공간의 다른 위치에서 반복될 때 발생합니다. 병진 대칭은 요소의 방향이 유지되는 한 모든 방향에서 발생할 수 있습니다.

동일한 개체가 일정한 간격으로 여러 번 이동됩니다. 말뚝 울타리는 병진 대칭의 좋은 예입니다.

병진 대칭을 적절히 사용하면 디자인의 리듬을 만들 수 있습니다. 웹 디자이너는 종종병진 대칭을 수동 요소로 사용하여 배경 패턴을 만듭니다. 그러나 경우에 따라 병진 대칭을 메시지를 전달하는 능동적 요소로 사용할 수 있습니다.

완벽한 대칭을 달성하려고 하지 마십시오

디자인에 있어 대칭은 동일한 미러링과 동일합니다. 완벽한 대칭은 웹 디자인과 실생활 모두에서 드뭅니다.

우리가 환경에 대해 생각할 때 우리 주변의 대부분의 자연물과 창조물은 완전히 대칭적이지 않습니다. 예를 들어, 우리는 얼굴과 몸을 두 개의 미러링 부분으로 생각하는 데 익숙합니다. 그러나 얼굴의 왼쪽은 오른쪽과 완전히 동일하지 않습니다.

디자이너는 레이아웃에 대한 사용자의 인식을 가지고 놀면서 대칭을 만들 수 있으며 각 측면에 약간의 변형을 두는 것은 전적으로 괜찮습니다. 보는 사람이 완제품에서 대칭감을 느끼기만 하면 됩니다.

비대칭이란 무엇입니까?

이미지 출처: Kajetan Sumila

비대칭은 당연히 대칭이 없는 것입니다. 자연에서는 나무 가지나 구름 모양 등 거의 모든 곳에서 비대칭을 볼 수 있습니다.

디자인에서 비대칭은 시각적 긴장감을 조성하는 데 자주 사용됩니다. 동시에 비대칭 디자인 요소 간의 관계가 더욱 복잡해지기 때문에 비대칭은 숙달하기 어려운 개념일 수 있습니다. 전체적이고 응집력있는 것을 만드는 것은 어려울 수 있습니다.design.

이것이 많은 디자이너들이 예측 가능한 대칭 레이아웃을 찾는 이유입니다. 그러나 비대칭을 마스터한 디자이너는 표현의 자유가 더 큽니다.

대칭과 균형

많은 디자이너는 균형이 대칭 레이아웃에서만 달성할 수 있는 것이라고 믿습니다.

그런 일이 발생합니다. '비대칭'이라는 용어는 균형 부족을 의미하기 때문입니다. 비대칭의 정의는 대칭의 부족이지만 일부 사람들이 잘못 생각하는 것처럼 균형의 부족이 아닙니다. 대칭이 없는 디자인도 균형을 유지해야 합니다.

즉, 어떤 레이아웃을 생성하든 , 대칭이든 비대칭이든 균형이 맞지 않는 구성은 보는 사람에게 불편함을 주기 때문에 균형을 이루는 것이 중요합니다.

균형(대칭 및 비대칭 모두)을 마스터하는 적절한 기술은 페이지의 각 요소를 다음과 같이 생각하는 것입니다. 시각적인 무게감이 있습니다. 시각적 가중치는 요소의 크기(작은 개체가 큰 개체보다 무게가 가벼울 수 있음)와 대비(대조 요소가 중립 요소보다 무게가 더 나갈 수 있음)와 같은 시각적 속성에 따라 달라집니다.

디자이너는 요소가 효율적인 균형에 도달할 때까지.

물론 대칭 레이아웃에서 균형을 이루는 것은 상당히 쉽습니다. 페이지의 오른쪽과 왼쪽 부분에 동일한 가중치를 적용하기만 하면 됩니다.

비대칭 디자인의 경우 작업이더 세게. 다른 쪽에 있는 큰 물체의 균형을 맞추려면 한쪽에 여러 개의 작은 항목이 필요할 수 있습니다.

반 고흐의 별이 빛나는 밤은 비대칭 균형의 훌륭한 예입니다. 반 고흐는 다양한 크기의 물체를 사용하고 색상과 대비를 활용하여 균형을 만듭니다.

또 다른 유형의 균형에는 다음이 포함됩니다.

• 혼돈의 예에서 모자이크 균형(또는 결정학적 균형) 결과 균형의. 잭슨 폴락의 그림을 생각해 보십시오. 구성에 뚜렷한 초점이 없고 요소가 균일하게 강조됩니다. 계층 구조의 부족은 언뜻 보기에 시각적 노이즈로 이어집니다. 어쨌든 모든 것이 함께 작동합니다.

전반적으로 그림에서와 동일한 균형 원칙이 웹 디자인에 적용됩니다.

완벽한 균형을 위한 공식

"균형을 측정할 수 있습니까?" 디자이너들 사이에서 상당히 일반적인 질문입니다. 이 질문에 대한 답을 찾기 위해 많은 설계자들은 모든 것이 균형을 이루고 있는지 계산할 수 있는 특정 공식을 검색합니다. 나쁜 소식: 잔액을 계산하는 공식이 없습니다. 희소식: 강력한 도구를 사용하여 구도의 균형 여부를 직접 확인할 수 있습니다.

숙련된 디자이너는 균형이 맞지 않는 레이아웃을 한눈에 알아차릴 수 있습니다. 그러나이 목표를 달성하려면 실제 프로젝트를 수행하고 다른 디자이너의 작업에서 영감을 얻어 눈을 훈련해야 합니다. 더그렇게 할수록 디자인 결정을 내릴 때 자신의 판단을 더 신뢰하게 됩니다.

대칭 대 비대칭

이미지 출처: Zachary Shakked

궁극적으로 레이아웃을 디자인할 때 대칭 또는 비대칭 디자인을 생성할지 여부를 결정해야 합니다. 이 질문에 대한 보편적인 대답은 없습니다. 선택은 프로젝트의 세부 사항에 따라 다릅니다. 디자인에서 대칭과 비대칭이 어떻게 사용될 수 있는지 살펴보겠습니다.

대칭이 가장 잘 작동하는 경우

다음은 레이아웃 디자인에 대칭적인 접근 방식을 따르는 것이 더 나은 몇 가지 일반적인 경우입니다.

• 진지한 미학을 추구하는 분(고전주의를 전달하고 싶은 분)
• 인식력과 기억력을 향상시키고 싶은 분(대칭 형태로 정보를 더 쉽게 기억할 수 있도록 함)
• 원하는 분 더 많은 질서와 구조를 달성하기 위해
• 요소 배열에 많은 생각을 하고 싶지는 않지만 여전히 균형을 이루고 싶습니다(대칭 레이아웃은 본질적으로 안정적이고 균형이 맞음).

이제 이러한 사례가 실제로 어떻게 보이는지 검토해 보겠습니다.

신뢰감 전달

대칭 레이아웃은 신뢰감을 표현하려는 디자인에 적합합니다. 당연히 신뢰를 우선시하는 많은 회사들이 디자인에 대칭을 사용합니다. 많은 자동차 제조업체는 디자인에 대칭을 사용하여꾸준함.

대칭 디자인이 예측 가능합니다. 따라서 안정성이 요구되는 웹사이트(예: 은행 또는 보험 회사 사이트)를 디자인하는 경우 대칭 디자인이 적합할 수 있습니다.

페이지에는 단일 상호 작용이 있습니다. Object

Symmetry는 단일 상호 작용 개체가 있는 페이지에 적합합니다. 전형적인 예는 로그인 또는 가입 페이지입니다. 주요 상호작용 개체나 중요한 메시지를 중앙에 배치하면 페이지 중앙에 초점을 맞출 수 있습니다.

Google 검색 페이지는 단일 상호작용 개체가 있는 대칭 레이아웃의 좋은 예입니다.

페이지에는 2개(또는 그 이상)의 똑같이 중요한 옵션이 있습니다.

대칭 디자인을 사용하면 페이지의 모든 영역에 똑같이 관심을 끌 수 있습니다. 한 가지 전형적인 예는 여성과 남성 모두를 위한 제품을 판매하는 온라인 상점입니다. 대칭은 디자이너가 동일한 공간에서 똑같이 중요한 두 가지 메시지를 전달하도록 도와줍니다.

비대칭이 가장 효과적일 때

대칭은 일반적으로 안정적이고 조화로운 것으로 보입니다. 그러나 어떤 사람들에게는 안정성이 예측 가능하고 지루할 수 있습니다. 비대칭 레이아웃은 더 흥미롭고 역동적인 경향이 있습니다.

다음과 같은 경우 비대칭 레이아웃을 선택하세요.

• 균형을 달성하는 고유한 방법을 찾기 위해 요소를 배열하는 데 추가 시간을 할애할 준비가 되었습니다.
• 사용자의 관심을 끌기 위해 보다 재미있는 레이아웃을 찾고 있습니다.
• 레이아웃을 돋보이게 합니다.

오늘날 사용자가