전환을 늘리기 위해 디자인 요소를 사용하는 방법

게시 됨: 2018-01-03

conversion-design

웹사이트 전환율을 높이고 싶으십니까? 명백한 수정에는 행동 유도, 더 매력적이고 매력적인 것을 제안하는 것이 포함될 것입니다. 또는 마케팅 및 판촉 자료 자체일 수도 있습니다. 결국, 사람들이 귀하의 사이트에 방문하기 전에 관심을 갖게 된다면 그들은 확실히 전환할 것입니다. 그렇죠?

사실, 모든 것이 디자인에서 시작된다는 사실에 놀라실 수도 있습니다. 의심의 여지없이 마케팅 관리자 또는 소규모 사업자로서 기본 사항을 이해하고 있을 것입니다. 로고, 색상 및 테마를 선택할 때와 오프라인 매장을 꾸밀 때 동일한 개념을 사용합니다. 그것은 모두 프레젠테이션과 방문자에게 제공하는 경험으로 귀결됩니다.

소비자의 거의 절반(46.1%) 느낌 디자인은 회사 또는 브랜드가 신뢰할 수 있는지 여부를 결정하는 가장 좋은 방법입니다. 그 외에도 사람들은 사이트가 보기 흉하면 사이트를 포기할 것입니다. 전체 방문자의 38%입니다. , 정확히는.

그렇다면 전환 가능성을 높이는 동시에 사이트를 매력적으로 만드는 가장 좋은 방법은 무엇입니까? 대답은 색상, 크기, 공간, 선, 모양, 질감, 가치와 같은 디자인의 기본 원칙을 준수하는 것입니다.

1. 색상

기본적으로 색상은 감정을 이끌어내고 시각적 호소력을 높이며 중요한 요소를 강조하는 데 사용됩니다. 선택한 색상은 보다 본능적인 수준에 영향을 미칩니다. 물론, 테마에 맞물리지 않는 두 가지 색상을 선택하는 것은 거슬리지만 방문자의 전반적인 경험을 방해하는 것은 방문자에게 끌어들이는 느낌과 감정입니다.

오렌지와 레드와 같은 따뜻하고 활동적인 색상은 보다 생생한 반응을 이끌어내는 경향이 있습니다. 파란색과 보라색과 같은 차갑고 수동적인 색상이 훨씬 더 기분이 좋기 때문에 파란색이 행복의 색상이라는 많은 연구 결과가 있습니다. .

배경 색상, 추가 시각적 요소 및 액센트, 타이포그래피 등을 선택할 때 이 점에 주의를 기울여야 합니다. 사이트의 분위기, 제품, 서비스 및 달성하고자 하는 바를 고려하십시오. 좀 더 편안하고 차분한 느낌을 주고 싶다면 다양한 딥 블루스와 같은 차가운 색상이 좋습니다. 주의를 끌고 싶다면 더 밝은 색상을 선택하는 것이 좋습니다. 하지만 다시 한 번 강조하지만 어떤 색상을 사용하느냐에 따라 달라집니다.

이 자세한 기사에서 색상 심리학을 사용하여 전환율을 높이는 방법에 대해 자세히 알아볼 수 있습니다. 닐 파텔. 나는 Converter의 이 감정 휠을 좋아한다. 색상의 다양한 감정적 트리거를 설명하기 위해:

clip_image002

2. 사이즈

알다시피 크기는 항목이나 요소가 얼마나 작거나 큰지를 나타냅니다. 디자인 요소와 관련하여 크기는 종종 한 항목과 주변의 다른 항목 간의 관계에 관한 것입니다. 요소가 클수록 시각적으로 더 두드러집니다. 따라서 크기를 사용하여 중요성을 정의하고, 시각적 관심을 생성하고, 주의를 끌며, 거의 줄거리처럼 초점을 안내하는 등의 작업을 수행할 수 있습니다.

헤드라인이나 제품 제목이 방문자의 관심을 즉시 사로잡도록 하려면 페이지의 다른 모든 것과 비교하여 눈에 띄는 크고 매력적인 글꼴을 사용하십시오. 이것은 또한 전체 디자인을 변경하지 않고 전환율을 높일 수 있는 좋은 방법입니다. 예를 들어 클릭 유도문안은 일반 콘텐츠와 차별화되도록 크기를 늘릴 수 있습니다.

코드에 익숙하지 않은 경우 스스로 이와 같은 변경 작업을 수행하는 것이 겁이 날 수 있습니다. 다행스럽게도 사이트가 WordPress에서 실행 중인 경우 제목 크기를 쉽게 변경할 수 있는 플러그인이 있습니다. 무료 플러그인을 사용해보십시오. .

3. 공간

공간은 타이포그래피, 텍스트 주변 여백 등을 포함한 다양한 요소 주변의 빈 영역입니다. 최소한의 디자인 전략은 더 많은 공간을 사용하는 것을 선호합니다. 존재하는 시각적 구성 요소에 중점을 둡니다. 어떤면에서는 모든 것이 눈에 띄고 아름답게 보이도록 깨끗한 ​​인터페이스를 유지합니다.

공백은 요소나 그룹을 구분하는 데 사용할 수 있습니다. 줄 바꿈 및 새 단락의 경우와 같이 텍스트를 나눌 수 있으며 시각적인 매력을 더할 수도 있습니다. 더 중요한 것은 공간이 보는 이의 눈을 쉬게 하는 것입니다. 중요하거나 봐야 할 내용이 포함되어 있지 않기 때문에 청중의 눈을 안내하거나 초점을 맞추는 데 사용할 수도 있습니다.

특정 개체, 이미지 또는 요소 주위에 충분한 공간을 배치하면 그 중요성을 진정으로 정의한 것입니다. 사실 매우 중요하므로 사이트의 텍스트와 콘텐츠의 바다 사이에서 자체적으로 존재합니다.

WordPress를 사용하는 경우 페이지 빌더가 포함된 테마를 찾으십시오. 페이지 빌더를 사용하면 랜딩 페이지에서 요소의 크기와 간격을 훨씬 더 세밀하게 제어할 수 있습니다. 내가 가장 좋아하는 것 중 하나는 Salient라는 테마입니다. .

4. 라인

엄밀히 말하면 선은 반대되는 두 점 사이의 표시입니다. 이미 알고 있듯이 선에는 여러 유형이 있으며 다양한 크기와 모양이 있습니다. 직선, 구불구불한 선, 곡선, 굵은 선, 가는 선 등이 있습니다.

공간과 유사한 선은 현대 디자인의 보편적인 구성 요소입니다. . 간단한 것부터 고급까지 다양한 용도로 사용할 수 있습니다. 악센트 라인을 사용하여 단어, 구 또는 이미지를 강조할 수 있습니다. 단일 추적선을 사용하여 요소를 함께 연결할 수 있습니다. 물론 여기서 끝이 아닙니다.

라인으로 전환율을 높이는 가장 좋은 전략은 라인을 사용하여 CTA 또는 리드 양식으로 시선을 끄는 것입니다. ConversionXL에서 발표한 한 사례 연구에서 , 로펌 스플릿은 시선 추적 연구에서 어떤 것이 가장 잘 수행되는지 확인하기 위해 여러 시각적 단서를 테스트했습니다. 리드 생성 양식을 가리키는 화살표가 확실한 승자였습니다.

clip_image004

5. 모양

모양은 본질적으로 분해할 때 높이와 너비의 조합입니다. 초등학교 때, 그리고 일반적으로 훨씬 더 일찍 이러한 기본 빌딩 블록으로 작업을 시작했습니다. 삼각형, 사각형, 원과 구, 육각형 등이 있습니다. 이상하거나 덜 일반적인 모양을 사용하여 주의를 끌 수 있습니다. 따라서 정지 표지판이 밝은 빨간색과 함께 있는 그대로 모양이 지정되는 이유는 무엇입니까?

모양은 기하학적, 자연적 및 추상의 세 가지 필수 유형으로 나눌 수 있습니다.

  • 기하학적: 삼각형, 정사각형, 직사각형, 원 등
  • 자연: 나뭇잎, 동물, 나무, 사람, 사물 등
  • 추상화: 아이콘, 양식화, 그래픽 표현, 기호, 윤곽선 등

모양을 사용하여 섹션, 요소 또는 영역의 시각적 매력을 확장할 수 있습니다. 예를 들어 버튼이나 다른 컨테이너(그 자체가 모양) 안에 클릭 유도문안을 넣는 것은 주의를 끌기에 좋은 방법입니다. Visual Website Optimizer의 이 예가 마음에 듭니다. :

clip_image005

6. 질감

실제로 우리는 질감을 물건이나 표면의 느낌으로 알고 있습니다. 콘크리트처럼 거칠거나 광택이 나는 나무처럼 매끄럽습니까? 디자인에서는 페이지나 화면의 요소를 실제로 느낄 수 없기 때문에 제대로 번역되지 않습니다. 그러나 아이템의 외형을 통해 질감을 나타낼 수 있습니다.

예를 들어 잘 알려진 벽돌 쌓기 패턴을 사용하여 단색의 단색에 시각적 깊이와 흥미를 더할 수 있습니다. 물론 묵시적인 질감이지만 그만큼 효과적으로 작동합니다. , 특히 적절한 스타일을 선택할 때.

벽돌, 콘크리트 및 돌과 같은 질감을 사용하여 강인함이나 의존성을 암시할 수 있습니다. 나뭇결 스타일을 사용하여 외관이나 우아함을 꾸밀 수 있습니다. 모든 것은 시각적 질감을 사용하는 방법과 위치, 디자인을 볼 때 어떤 종류의 감정적 반응을 이끌어내는지에 달려 있습니다.

한 사례 연구에서 중고 휴대폰을 수집하는 자선 단체는 리드 생성 양식에 질감이 풍부한 배경을 적용했습니다. , 그리고 기부금이 53% 증가했습니다. 이것은 CSS로 수행할 수 있는 간단한 트릭입니다. .

clip_image007

7. 가치

마케팅에서 우리는 가치를 어떤 식으로든 되돌려주는 것으로 정의합니다. 제품 또는 구성 요소의 고유 가치는 무엇입니까?

디자인에서 가치는 영역의 밝음 또는 어두움을 통해 표시됩니다. 현대 디자인에서 널리 사용되는 그래디언트는 가치를 표현하는 가장 일반적인 방법 중 하나입니다. 일반적으로 어두움에서 밝음으로, 또는 고체에서 투명으로 진행됩니다.

여기에 있는 다른 많은 구성 요소와 마찬가지로 값이나 그라디언트를 사용하여 시선을 끌 수 있습니다. 더 중요한 것은 특정 신체나 개념의 중요성을 강조하는 데 사용할 수 있다는 것입니다. CTA를 그라디언트의 가장 생생한 부분에 배치하거나 CTA 버튼을 유색 광선으로 둘러쌀 수 있습니다. 돋보이게 하기 위해.

아래 예에서는 Dribbble의 Denis Absullin이 디자인한 개념에서 , 장바구니에 제품을 추가하는 CTA 버튼 주위에 미묘한 빛을 볼 수 있습니다.

clip_image009

당신을 위해 일하기 위해 디자인의 요소를 넣어

디자인은 웹사이트의 성공에 중요한 요소이지만 복잡할 필요는 없습니다. 디자인 요소를 염두에 두는 것만으로도 브랜드를 효과적으로 홍보할 수 있는 눈에 띄는 사이트의 기반을 제공할 수 있습니다.