어떤 경우에도 피해야 할 8가지 일반적인 웹 디자인 오류(및 Divi가 도움이 되는 방법)

WordPress와 적절한 테마를 사용하면 몇 시간 만에 사이트를 쉽게 구축하고 실행할 수 있습니다. 그러나 전문가처럼 보이는 디자인을 만드는 것은 작업이 필요합니다. 특히 가상 페인트 브러시를 손으로 가볍게 칠할 수 없는 경우에는 더욱 그렇습니다.

다행히도 매력적인 웹사이트를 만들기 위해 숙련된 디자이너가 필요하지는 않습니다. 가장 일반적인 몇 가지 함정을 피하기 위해 노력하는 한, 디자인은 전문가처럼 멋지게 나올 것입니다.

이 기사에서 우리는 좋은 웹 디자인을 만드는 요인과 사람들이 그 과정에서 저지르는 가장 흔한 8가지 오류를 탐구할 것입니다.

시작하자!

좋은 웹 디자인을 구성하는 요소

'좋은'웹 디자인을 구성하는 것에 대한 보편적 인 기준이 아니라, 보편적으로 많은 웹 디자이너에 의해 허용되는 몇 가지 모범 사례가 있습니다. 예를 들어:

• 좋은 웹 디자인은 목적 달성에 중점을 둡니다.
• 좋은 웹 디자인은 사용성을 고려해야 합니다.
• 사이트의 핵심 요소와 메시지를 강조 표시해야 합니다.
• 잘 디자인된 웹사이트는 탐색하기 쉬워야 합니다.
• 전체 사이트에서 일관성을 유지해야 합니다.
• 모바일 장치에서 잘 표시되어야 합니다.

우리는 과거에 이러한 주제 중 일부를 다루었으며 이 기사 전체에서 그 중 일부에 대해서도 논의할 것입니다. 이제 무엇이 좋은 웹 디자인을 구성 하지 않는지 논의해 보겠습니다.

어떤 대가를 치르더라도 피해야 할 8가지 일반적인 웹 디자인 오류

웹사이트를 디자인할 때 저지를 수 있는 많은 실수 가 있지만 우리는 가장 일반적이고 쉽게 피할 수 있는 8가지 실수를 고수하기로 결정했습니다. 이러한 걸림돌을 피하기 위해 노력한다면 디자인이 훨씬 앞서야 합니다.

1. 가독성이 나쁘다

작업 중인 웹사이트의 유형에 관계없이 서면 콘텐츠가 지배적일 것입니다. 이것이 귀하에게 적용되는 경우 방문자를 좌절시키지 않기 위해 각 게시물을 가능한 한 읽기 쉽게 만드는 것이 중요합니다.

가독성이 떨어지는 디자인의 예.

사람들은 책과 관련하여 끊기지 않은 긴 단락을 기꺼이 참을 수 있지만 웹사이트의 경우에는 그렇지 않습니다. 콘텐츠를 쉽게 스캔할 수 있어 방문자가 귀하의 글을 빠르게 이해하고 원하는 것을 찾을 수 있습니다.

콘텐츠를 더 읽기 쉽게 만드는 방법에는 여러 가지가 있지만 가장 간단하게 고려할 수 있는 방법은 다음과 같습니다.

• 가능하면 부제목을 사용하여 게시물과 페이지를 논리적 섹션으로 분리하십시오.
• 부제목을 가능한 한 설명적으로 만드십시오. 이를 통해 독자는 콘텐츠를 보다 쉽게 ​​훑어볼 수 있습니다.
• 눈에 보기 쉬운 색 구성표를 구현하는 것을 고려하십시오. 결국 방문자가 주변에 머물면서 콘텐츠를 읽기를 원합니다 .
• 가능하면 대부분의 게시물에 sans-serif 글꼴을 사용하십시오. 세리프체보다 가독성이 좋은 것으로 입증되었습니다.

이렇게 하면 콘텐츠가 디자인 관점에서 읽어야 하는 귀찮은 일이 아님을 확인할 수 있습니다.

Divi가 도움이 되는 방법

Divi는 테마 및 모듈 커 스터마이저 덕분에 가독성 문제를 쉽게 해결할 수 있습니다. 대시보드의 Divi 탭에서 이 두 기능에 모두 액세스한 다음 글꼴 설정, 머리글 스타일 및 일부 항목이 너무 작아 제대로 읽을 수 없는 경우 섹션 크기를 가지고 놀 수 있습니다.

추가 조정을 하고 싶다면 언제든지 Divi Builder를 사용하여 각 모듈의 고급 디자인 설정 을 확인할 수 있습니다. 이 섹션에는 가독성을 높이는 데 필요한 거의 모든 것이 포함되어 있으며(앞서 언급한 항목 포함) 빌더를 종료하지 않고도 웹사이트의 변경 사항을 미리 볼 수도 있습니다.

2. 잘못된 탐색

웹사이트는 탐색이 어렵지 않아야 하며, 모든 사용자는 검색하지 않고도 원하는 콘텐츠를 찾을 수 있어야 합니다. 웹사이트가 이 두 가지 기준을 충족하지 못한다면 해야 할 일이 있습니다.

무의미한 탐색으로 웹 사이트를 탐색해야 하는 것만큼 짜증나는 일도 거의 없습니다. 탐색 모음이 이상한 위치에 있거나 끊어진 링크가 포함되어 있거나 아무렇게나 구성되어 있는 경우 이런 일이 발생할 수 있습니다. 또한 이러한 좌절감으로 인해 이탈률이 높아지고 전환율이 낮아지며(사람들이 원하는 것을 찾을 수 없기 때문에) 전반적으로 재방문 횟수가 줄어들 수 있습니다.

탐색 메뉴가 없는 웹사이트의 예.

고맙게도 오늘날 대부분의 웹 사이트는 간단한 탐색의 이점에 대해 잘 교육되어 있습니다. 그러나 사용하기 쉽게 유지하려면 다음 팁을 항상 고려해 볼 가치가 있습니다.

• 탐색 메뉴에 쉽게 액세스할 수 있는지 확인하십시오. 모바일 구현에 대해 이야기하지 않는 한 소위 '숨김' 또는 '팝아웃' 메뉴를 사용하지 않는 것이 좋습니다.
• 사용자는 각 링크가 자신을 어디로 연결하는지와 그곳에서 찾을 정보를 해독할 수 있어야 합니다.
• 웹 사이트에 여러 범주가 포함된 경우 다단계 메뉴를 구현해야 할 수 있습니다. 이 경우 디자인이 구성 요소 간의 명확한 계층 구조를 의미하는지 확인하십시오.

많은 사람들이 탐색 메뉴를 부주의하게 조합하는 경향이 있습니다. 그러나 이러한 요소는 사이트의 성공에 매우 중요할 수 있으며 그에 따라 처리해야 합니다. 같은 실수를 하지 마세요!

Divi가 도움이 되는 방법

Divi를 사용하면 헤더를 사용하여 탐색 설정을 즉석에서 조정할 수 있습니다. 이전 섹션에서 논의한 도구와 거의 동일한 방식으로 작동하는 모듈 사용자 지정 프로그램입니다. 탐색 스타일을 완전히 전환하려면 테마 설정을 수정하면 됩니다.

마지막으로 사용자 정의 도구 또는 게시물 탐색 모듈을 사용하여 게시물 탐색 설정을 조정할 수도 있습니다. 이 기능을 사용하면 사용자가 이전 또는 다음 옵션을 클릭할 때 표시되어야 하는 게시물을 조정할 수 있을 뿐만 아니라 전역적으로 또는 특정 장치에 대해 숨길 수 있습니다.

3. 불균형한 음의 공간

올바르게 사용하면 네거티브 공간이 주변 콘텐츠를 향상시킬 수 있습니다. 이것은 당신이 그들이 가고 싶은 곳으로 방문자의 눈을 안내 할 수 있습니다.

네거티브 공간을 올바르게 사용하는 방법.

반대로, 주요 섹션 주위에 충분한 공간을 남기지 않으면 웹사이트가 어수선해 보일 수 있습니다.

어수선한 디자인의 예.

이 예에서 사용자는 압도되어 귀하의 사이트와 경쟁업체를 떠나게 만들 수 있습니다.

음수 공간을 사용하여 사이트의 가독성을 높일 수도 있습니다. 각 부제목 사이에 약간의 추가 공간을 두고 이미지와 목록을 사용하여 긴 단락을 나누면 됩니다. 여기의 목표는 콘텐츠가 체계적으로 보이고 독자가 피로해지지 않도록 하는 것입니다. 또한 이러한 기본 사항 중 일부를 웹사이트의 전체 디자인에 적용하여 깔끔하게 보이게 할 수 있습니다(블로그에서 한 것처럼).

네거티브 공간을 바로 잡는 것은 까다로울 수 있지만 디자인을 현대적이고 깔끔한 모양으로 만드는 가장 간단한 방법 중 하나입니다.

Divi가 도움이 되는 방법

Divi의 고급 디자인 및 사용자 정의 CSS 옵션을 사용하면 선택한 섹션의 여백, 패딩 및 거터를 포함하여 디자인의 거의 모든 요소를 ​​조정할 수 있습니다. 이는 음수 공간을 사용하여 창의력을 발휘하기에 충분합니다.

이러한 각 옵션을 수정하는 것이 이보다 더 쉬울 수는 없습니다. 대부분의 경우 픽셀 단위로 값을 설정하고 미리보기 기능을 사용하여 해당 값이 표시에 있는지 확인하고 필요한 경우 표시될 때까지 계속 조정하기만 하면 됩니다.

4. 최적화되지 않은 클릭 유도문안(CTA)

CTA는 버튼, 제목 및 일반 텍스트와 같은 다양한 형태로 제공됩니다. 그러나 그들의 목적은 항상 동일합니다. 즉 독자가 행동을 취하도록 촉구하는 것입니다. 블로그에서 사용 방법의 예를 확인하십시오.

인터넷 마케팅에 대해 한두 가지만 알고 있다면 좋은 CTA가 얼마나 중요한지 알 것입니다. 올바른 메시지를 사용하면 전환이 크게 증가할 수 있으며 이를 표시하는 방법도 마찬가지로 중요합니다. 반대로 CTA를 구현 하지 않거나 모호한 단어를 사용하면 전환에 영향을 줄 수 있습니다.

CTA와 관련하여 두 가지를 염두에 두어야 합니다. 바로 배치와 눈에 띄는 것입니다. 방법은 다음과 같습니다.

• 이상적으로는 페이지의 시작 과 끝 부분에 CTA를 포함해야 합니다. 이를 통해 즉시 전환할 준비가 된 방문자와 귀하의 콘텐츠를 읽은 후 흥미를 느끼는 방문자를 잡을 수 있습니다.
• CTA는 페이지의 나머지 부분에서 눈에 띄어야 합니다. 대비되는 색상, 독특한 버튼 디자인을 활용하거나 굵은 텍스트를 사용하여 이를 수행할 수 있습니다.
• 특히 모바일 사용자가 클릭하기 쉬운 CTA를 확인하세요. 일반적으로 이것은 너무 작게 만들지 않는 것을 의미합니다.

CTA에 약간의 주의를 기울이면 전환과 관련하여 많은 시간을 투자할 수 있습니다. 이메일 구독 또는 판매에 관심이 있는지 여부는 중요하지 않습니다. CTA는 이러한 노력에 매우 중요합니다.

Divi가 도움이 되는 방법

Divi의 Call to Action 모듈에는 스타일 및 모바일 최적화를 다루는 설정을 포함하여 CTA를 눈에 띄게 만드는 데 필요한 거의 모든 사용자 정의 옵션이 있습니다.

또한 Divi의 기본 제공 분할 테스트 기능인 Divi Leads를 사용하여 언제든지 CTA를 최적화할 수 있습니다. 이것은 Divi에 강력한 분할 테스트 기능을 제공하며 WordPress 대시보드에서 직접 관리됩니다.

5. 모바일 최적화 부족

웹사이트가 모바일 친화적인지 확인하는 것이 그 어느 때보다 중요합니다. 모바일 트래픽은 2016년에 처음으로 데스크톱 트래픽을 넘어섰고 이러한 추세는 조만간 되돌릴 것 같지 않습니다.

최적화되지 않은 모바일 사이트의 예.

간단히 말해서 모바일 사용자를 위해 웹 디자인을 최적화하고 있지 않다면 지금이 시작하기에 좋은 시기입니다. 그렇지 않으면 트래픽의 상당 부분을 위협할 위험이 있습니다.

다행히도 다음과 같이 모바일 최적화와 관련하여 염두에 두어야 할 몇 가지 요소를 이미 다루었습니다.

• 가독성: 작은 표시 영역을 다루게 되므로 콘텐츠 형식이 올바른지 확인하는 것이 중요합니다.
• 탐색: 모바일 사용자가 마우스에 액세스할 수 없다는 점을 고려하면 탐색 메뉴를 찾고 사용하기 쉬워야 합니다.
• CTA 최적화 : 당신의 메뉴와 같은 대부분은 이러한 필요성이 파악하고 상호 작용과 함께하기 쉽게합니다.

이 주제에 관해서는 할 말이 더 많으며 과거에 이미 자세히 다루었습니다. 주제에 대한 자세한 내용은 모바일 웹 디자인 최적화를 위한 10가지 팁 목록을 확인하세요.

Divi가 도움이 되는 방법

모바일 최적화와 관련하여 Divi가 지원합니다! 테마는 즉시 반응에 최적화되어 있으며 테마 사용자 정의 기능을 사용하여 모바일 장치에서 사이트가 어떻게 보이는지 항상 확인할 수 있습니다.

그러나 보다 실질적인 접근 방식을 취하고 싶다면 전용 고급 디자인 메뉴를 통해 각 모듈이 표시되는 방식을 미세 조정할 수 있습니다. 이를 통해 데스크탑, 태블릿 및 모바일 뷰포트에 대한 디자인 컨트롤을 조정할 수 있습니다.

6. 일관성이 없고 초점이 맞지 않는 디자인

이상적으로는 전체 웹사이트가 명확한 초점을 가진 균일한 디자인을 자랑해야 합니다. 단일 사이트 전체에서 여러 스타일을 사용하면 거슬리는 효과가 있을 수 있으며 사용자에게 혼란을 줄 수도 있습니다.

또한 색상 팔레트 및 균일한 스타일과 같이 웹사이트에 대한 고유한 아이덴티티를 생성하면 브랜딩이 향상됩니다. 예를 들어 페이스북을 보자. 그들은 깨끗하고 알아볼 수 있는 파란색 팔레트로 몇 년 동안 같은 스타일을 선보이고 있습니다. 웹에서 가장 세련된 디자인은 아닐 수 있지만 작업을 완료하고 지금쯤이면 브랜드와 관련이 있게 되었습니다.

웹사이트에서 사용하는 스타일은 대부분 개인적인 결정입니다. 균일하게 유지하는 한 괜찮습니다. 세부 사항에 어려움을 겪고 있다면 머티리얼 디자인과 같은 시각적 디자인 언어에서 항상 영감을 얻을 수 있습니다.

Divi가 도움이 되는 방법

Divi의 모든 모듈은 처음부터 멋지게 보이도록 균일하게 스타일이 지정되어 있습니다. 그러나 고급 디자인 설정 및 사용자 정의 CSS 기능을 사용하여 개별적으로 사용자 정의하고 나중에 사용할 수 있도록 조정을 Divi 라이브러리에 저장할 수도 있습니다.

또한 테마 사용자 지정 프로그램 을 사용하면 전체 테마의 미학을 즉석에서 조정할 수 있으며 다른 기능 중에서 색 구성표 및 모바일 스타일을 변경할 수 있는 옵션이 포함되어 있습니다.

7. 이미지 및 애니메이션의 잘못된 사용

많은 사람들은 웹사이트에 가능한 한 이미지와 애니메이션을 포함하는 것이 좋은 것이라고 생각합니다. 2000년대 초반 플래시 기반 사이트의 유행을 기억한다면 우리가 무슨 말을 하는지 아실 것입니다.

이러한 미디어 유형에 너무 많이 의존하면 사이트가 어수선해 보일 뿐만 아니라 로딩 속도에도 영향을 미칠 수 있습니다. 게다가 잘못하면 검색 엔진 최적화(SEO)에도 영향을 미칠 수 있습니다.

웹 페이지에서 불필요한 애니메이션의 예.

물론 거의 모든 사이트에는 디자인을 향상시키기 위해 여기저기서 약간의 그래픽이 필요하며 여기서 핵심 단어는 "향상"입니다. 포함하기로 선택한 모든 이미지나 애니메이션은 콘텐츠에 방해가 되어서는 안 되며 관련성이 있는 경우 에만 사용해야 합니다 . 예를 들어, 이 기사에서는 주요 초점이 아닌 컨텍스트를 제공하기 위해 이미지만 포함했습니다.

마지막으로 웹 디자인 트렌드에 대한 최근 기사에서 논의한 바와 같이 가능하면 완전한 애니메이션을 마이크로인터랙션으로 대체하는 것도 고려해야 합니다. 훨씬 덜 방해가 되며 여전히 사용자에게 특정 작업을 강조 표시할 수 있습니다.

Divi가 도움이 되는 방법

Divi의 많은 모듈에는 방문자가 콘텐츠에서 주의를 분산시키지 않는 세련된 애니메이션이 내장되어 있습니다. 소매를 걷어 올리는 것에 반대하지 않는다면 CSS를 사용하여 자신의 것을 추가할 수도 있습니다.

또한 Fullwidth Header 와 같은 Divi의 일부 모듈을 사용하면 널리 사용되는 시차 기능을 구현할 수 있습니다. Divi의 Slider 의 경우와 같이 기본적으로 지원하지 않는 일부 모듈에 수동으로 추가할 수도 있습니다.

8. '숨겨진' 연락처 정보

마지막으로 연락처 정보에 대해 이야기해 보겠습니다. 당신이 디자인하는 웹사이트의 유형에 따라, 당신의 방문자 중 적어도 일부 는 당신이나 그 책임자에게 연락하기를 원할 것입니다. 연락처 정보가 눈에 잘 띄게 표시되도록 하는 것이 이를 활성화하는 가장 좋은 방법입니다.

말할 필요도 없이 일부 웹사이트는 연락처 정보를 쉽게 찾을 수 있도록 하지 않으면 다른 웹사이트보다 더 큰 영향을 받습니다. 예를 들어, 서비스 웹 사이트에서 연락처 세부 정보가 누락되거나 숨겨져 있으면 비즈니스 기회를 잃을 수 있습니다.

대부분의 사이트에서는 홈페이지나 자체 섹션 또는 둘 다에서 사용할 수 있는 간단한 문의 양식을 설정하는 것이 좋습니다.

바닥글 또는 보조 메뉴에 이메일이나 전화를 추가하는 것도 사이트 디자인에 따라 훌륭한 접근 방식이 될 수 있습니다. 포함하는 내용에 관계없이 주요 내용은 눈에 잘 띄어야 한다는 것입니다!

Divi가 도움이 되는 방법

대부분의 주요 기능과 마찬가지로 Divi는 최적화된 형식으로 미리 스타일이 지정된 Contact Form 모듈을 제공합니다. 얼마 전 우리는 단순하고 현대적인 디자인을 찾고 있다면 큰 도움이 되는 무료 연락처 페이지 레이아웃 팩을 출시했습니다.

디자인을 수동으로 조정하고 싶다면 Divi의 Contact Form 모듈을 사용하여 원하는 만큼 필드를 추가하고 개별적으로 스타일을 지정할 수 있습니다. 모듈 설정을 벗어나지 않고도 사용자가 제출 후 읽을 수 있도록 성공 메시지를 설정할 수도 있습니다.

결론

WordPress 사용자는 파악하기 쉬운 기능 덕분에 매력적인 웹사이트를 구성할 때 대부분의 사람들보다 더 간단합니다. 그러나 이 때문에 잘못된 디자인 선택이 프로젝트에 침투하기 쉽고 전반적인 시각적 품질을 쉽게 떨어뜨릴 수 있습니다.

이 글에서 우리는 다음 프로젝트에서 피해야 할 가장 일반적인 8가지 웹 디자인 함정을 보여주었습니다. 요약하자면:

1. 가독성이 좋지 않습니다.
2. 잘못된 탐색입니다.
3. 불균형한 음의 공간.
4. 최적화되지 않은 CTA입니다.
5. 모바일 최적화가 부족합니다.
6. 일관성이 없고 초점이 맞지 않는 디자인.
7. 이미지와 애니메이션의 잘못된 사용.
8. '숨겨진' 연락처 정보.

모든 사용자가 피해야 하는 최고의 웹 디자인 오류는 무엇이라고 생각하십니까? 구독하고 아래 의견 섹션에서 우리와 함께 생각을 공유하십시오!

Meilun/Shutterstock.com의 기사 축소판 이미지