WordPress 테마 구매자가 일반적으로 저지르는 11가지 디자인 실수

WordPress 테마로 웹 사이트를 만들고 있지만 최종 결과가 테마 데모처럼 보이지 않습니까? 나는 웹사이트 제작자들이 종종 간과하는 11가지 일반적인 디자인 실수를 나열했습니다.

완벽한 WordPress 테마를 찾았습니다. 테마의 데모는 흠잡을 데 없이 보였습니다. 고객이 매우 좋아했고 구매에 동의했습니다. 당신은 그것을 구입하고 설치하고 클라이언트의 필요에 맞게 테마를 편집하기 시작했습니다.

로고도 바꾸고, 테마도 바꾸고, 슬라이더 이미지와 내용도 넣었는데, 결국 만든 웹사이트는 데모 같지가 않네요. 뭔가 잘못되었다는 것을 알지만 무엇을 감지할 수 없습니다. 익숙한 소리?

지난 5년 동안 WordPress 테마 비즈니스에서 디자이너로 일하면서 WordPress 테마로 만든 아름다운 웹 사이트의 수많은 예를 보았습니다.

그러나 때때로 나는 견고한 기초를 가지고 있지만 몇 가지 작은 디자인 실수로 인해 전반적인 경험을 망치는 웹 사이트를 봅니다. 누구나 쉽게 고칠 수 있는 작은 일들을 말하는 것입니다.

특히 디자이너가 아닌 경우 이러한 결함을 발견하기가 어렵다는 것을 알고 있습니다. 이러한 이유로 저는 고객의 웹사이트를 더 보기 좋게 개선하는 방법에 대한 블로그 게시물을 작성하기로 결정했습니다.

이 블로그 게시물을 북마크에 추가하고 다음에 WordPress 테마로 웹사이트를 구축할 때 아래 목록을 살펴보세요. 모든 결함을 제거하는 데 한두 시간 밖에 걸리지 않지만 결과는 100% 더 좋아 보일 것입니다.

1. 슬라이더의 텍스트 대비 불량

저는 슬라이더 이미지에 대해 해야 할 것과 하지 말아야 할 것에 대해 이야기해 왔으며 이제 간략하게 설명하겠습니다. 원칙은 간단합니다.

• 슬라이더의 텍스트 색상이 흰색이면 어두운 배경을 선택합니다. 슬라이더 텍스트가 어두우면 밝은 배경을 선택하십시오.
• 텍스트가 나타나는 영역의 배경에 너무 많은 시각적 노이즈가 없는지 확인하십시오. 어수선한 배경은 전면에 있는 텍스트의 가독성을 떨어뜨리고 슬라이더에 적힌 주요 가치 제안을 놓칠 수 있습니다.

다행히도 대부분의 테마에는 텍스트 뒤에 반투명 단색 배경 옵션이 포함되어 있습니다. 최신 WordPress 테마에는 슬라이더의 모든 텍스트에 그림자가 적용되어 대비가 훨씬 좋습니다.

2. 너무 큰 슬라이더 이미지

WordPress 테마로 만든 웹 사이트를 보면 사용자가 너무 큰 슬라이더 이미지를 사용한다는 사실을 자주 알 수 있습니다. 화면 높이의 100%를 차지하는 슬라이더 이미지를 갖는 것은 사진 작가이고 사진이 최종 제품인 경우에만 허용됩니다. 다른 경우에는 안전한 편에 서서 테마 권장 사항을 따르십시오. 웹사이트의 완벽한 시각적 균형을 유지합니다.

3. 빈약한 화이트(네거티브) 공간

웹 디자인의 공백 또는 음수 공간은 위젯, 텍스트 블록, 이미지 또는 웹사이트의 다른 부분 사이의 공백으로, 모든 것이 구성되고 최종 사용자에게 명확하고 논리적인 흐름을 제공하는 데 도움이 됩니다.

우리가 아무리 노력하고 WordPress 테마의 가능한 모든 측면을 방탄으로 만들더라도 사용자는 항상 공백을 파괴하는 방법을 찾습니다.

다행히도 테마에서 강력한 Page Builder를 사용하고 있습니다. 즉, 웹사이트 전체에서 쉽게 간격을 조정할 수 있습니다. Page Builder를 사용하면 위젯의 패딩, 행의 패딩을 변경할 수 있으며 열 사이의 여백 크기를 수정할 수 있습니다.

나는 세부 사항에 대해 이야기하지 않고 오히려 몇 가지 실용적인 예를 제공합니다.

• 대부분의 경우 웹사이트 제작자는 공백을 너무 적게 사용하여 콘텐츠가 숨을 쉴 수 없게 하므로 일반적으로 공백을 더 많이 적용할수록 더 나은 결과를 얻을 수 있습니다.
• 요소 간의 관계를 간격으로 표시합니다. 예를 들어 블로그 게시물의 제목과 게시물의 날짜와 같이 함께 가는 요소는 블로그 게시물의 날짜 및 페이지 헤더와 같이 다른 목적을 가진 요소보다 더 가깝습니다.
• 간격을 일정하게 유지하십시오 . 즉, 웹 사이트의 모든 단일 행은 위, 아래, 왼쪽 및 오른쪽에 동일한 양의 공백이 있어야 합니다.

그래서, 그것은 위젯에 온다. 페이지의 어디에 표시되든 동일한 양의 패딩과 여백이 적용되어야 합니다. 일관성은 웹사이트의 균형을 유지하고 중요한 내용인 콘텐츠에 초점을 맞춥니다.

4. 나쁜 모바일 친화성

절차와 규칙은 위의 데스크탑과 동일합니다. 여전히 공백에 주의를 기울여야 하지만 모바일의 경우 몇 가지 추가 규칙이 있습니다.

• 그 중 하나는 손가락 친화적인 디자인입니다. 손가락은 모바일에서 탐색하는 동안 웹사이트를 이동하는 도구이므로 페이지를 이에 맞게 조정해야 합니다. WordPress 테마를 디자인할 때 버튼과 클릭 가능한 요소가 50px 이상인지 확인합니다. WordPress 테마에 타사 요소를 추가하는 경우 충분히 큰지 확인하십시오. 또한 클릭 오류를 방지하기 위해 실행 가능한 구성 요소가 너무 많이 붙어 있지 않은지 확인하십시오.
• 속도를 위해 이미지를 최적화합니다. 많은 사람들이 이동 중에 웹 사이트에 액세스합니다. 이는 신뢰할 수 없고 때로는 연결 상태가 좋지 않음을 의미합니다. 느린 사이트 로딩(모바일에서)을 없애고 이미지를 최적화하십시오.
• 실제 모바일 장치에서 웹사이트를 테스트합니다 . 브라우저 창의 크기를 조정하여 모바일 보기를 볼 수 있지만 모든 조정이 끝나면 실제 모바일 장치에서 웹사이트가 어떻게 보이는지 확인하십시오.

운영 체제, 브라우저 및 전반적인 사용자 경험은 데스크톱과 모바일을 구분하며 일부 불평등이 발생할 수 있습니다.

Google은 웹사이트가 모바일 친화적인지 확인하기 위한 도구인 모바일 친화적 테스트를 개발했습니다.

우리는 모든 WordPress 테마가 쉽게 통과하는지 확인합니다.

5. 어울리지 않는 색상 사용하기.

올바른 색상 조합을 선택하는 것은 까다로운 일입니다. 당신이 재능이 있다면, 당신의 직감을 따라갈 수 있습니다. 그렇지 않으면 특별히 제작된 도구를 사용하십시오.

예를 보여 드리겠습니다.

대부분의 WordPress 테마는 기본 및 보조 색상으로 구성됩니다. 로고가 Shell의 로고처럼 보이면 기본 색상과 보조 색상을 선택하는 것이 간단합니다. 빨간색은 클릭 유도문안의 기본 색상으로 사용됩니다. 노란색은 배경 및 지원 요소에 사용되는 보조 색상입니다.

로고가 스타벅스 로고처럼 보이고 한 가지 색상으로만 만들어진 경우 보조 로고를 찾아야 합니다.

한 가지 옵션은 기본 색상과 보조 색상에 대해 동일한 녹색을 선택하는 것이지만 권장하지 않습니다.

디자이너의 직감이 없고 색상 조합을 선택하는 것이 어렵다면 Coolors라는 솔루션이 있습니다. 아름다운 색상 조합을 만들기 위한 사용하기 쉬운 도구입니다.

그들의 앱으로 이동하여 열 하단에 기본 색상의 16진수 색상 코드(내 경우 #006241)를 삽입합니다. 그런 다음 잠금 아이콘을 클릭하고 스페이스바를 눌러 잠급니다.

팁: 로고의 16진수 코드를 얻는 방법을 모르십니까? 유용한 Chrome 확장 프로그램이 있는지 확인하십시오.

내 결과는 다음과 같습니다.

보시다시피 모든 색상이 변경되었지만 기본 색상은 동일하게 유지됩니다. 원하는 색상이 없으면 스페이스바를 계속 누르십시오.

2차 색상을 선택하는 유일한 이유가 웹사이트에서 사용하기 위한 것이고 해당 색상이 다른 곳에서는 나타나지 않을 경우 너무 강력한 색상을 선택하지 마십시오. 우리의 경우 밝은 주황색이 나옵니다.

브랜드를 손상시키지 않고 기본 색상(이 경우 녹색)을 원활하게 지원하는 더 미묘한 색상을 선택해야 합니다.

내 개인적인 선택은 두 번째 베이지색(#d8c99b)이 될 것입니다. 왜냐하면 녹색과 완벽하게 작동하고 확실히 그것을 추월하지 않을 것이기 때문입니다.

이 특정 베이지 색이 완벽한 색상은 아니지만 충분히 좋은 옵션입니다. 여기 이유가 있습니다. 색상을 선택할 때 텍스트가 얼마나 어둡거나 흰색으로 보일지 생각하십시오.

내 예에서는 어두운 텍스트가 괜찮아 보이지만 약간의 대비를 추가하고 약간 밝은 베이지색을 선택하면 훨씬 나아질 것입니다.

다행히 Coolors 앱에는 또 다른 훌륭한 기능이 있습니다. 모든 색상의 다른 음영을 선택할 수 있습니다. 색상이 지정된 열 위로 마우스를 이동하고 "대체 음영"이라는 첫 번째 아이콘을 클릭합니다. 그런 다음 더 밝거나 더 어두운 색조를 선택하고 항상 대비를 염두에 두십시오.

이 두 색상이 함께 작동하는 방법에 대한 빠른 데모를 만들었습니다. 이를 위해 Adrenaline WordPress 테마를 가져와 스타벅스 웹사이트로 변환했습니다.

나는 Adrenaline WordPress 테마를 말 그대로 2분 만에 완전히 다른 것으로 얼마나 빨리 변경했는지에 깊은 인상을 받았습니다. 두 가지 색상을 변경하고 사용자 정의 영웅 이미지를 업로드하고 사용자 정의 로고를 업로드하기만 하면 됩니다. 직접 해보십시오.

6. 웹사이트 탐색을 어지럽히지 마십시오

읽기 쉽고 소화적인 방식으로 웹 사이트 탐색을 구성하십시오. 드롭다운에서 덜 중요한 항목을 그룹화하거나 상단 표시줄 또는 바닥글에 포함합니다. 탐색 계층 구조를 논리적으로 만들고 메뉴의 동일한 수준이 모두 동일한 우선 순위를 갖도록 합니다.

예를 들어, 조건과 계약은 일반적으로 기본 클릭 유도문안보다 덜 중요하므로 둘 다 같은 수준에 나타날 수 없습니다. 용어를 바닥글에 넣고 기본 클릭 유도문안을 머리글에 넣습니다.

최대 5개 또는 6개의 옵션으로 기본 탐색을 깨끗하게 유지하세요.

7. 로고가 너무 큽니다.

유명한 문장이 있습니다. "로고를 더 크게 만드십시오." 웹사이트 제작자로서 귀하의 임무는 웹사이트 방문자가 귀하의 로고가 얼마나 아름다운지 보기 위해 귀하의 웹사이트를 방문하지 않기 때문에 400픽셀 너비의 로고가 필요하지 않다는 것을 클라이언트에게 교육하는 것입니다.

WordPress 테마 작성자가 권장하는 크기로 로고를 업로드하십시오. 특정 테마에 가장 적합한 로고 크기를 가장 잘 알고 있을 것입니다.

로고는 웹사이트에 있는 많은 것 중 하나일 뿐이며 다른 콘텐츠와 조화를 이루어야 합니다.

내 말을 믿지 못한다면 월드 와이드 웹에서 주요 브랜드를 찾아보면 98%에 로고가 있고 모든 콘텐츠를 지원하기에 충분한 크기라는 것을 알 수 있습니다. 사용자는 웹사이트 뒤에 어떤 브랜드가 있는지 알아야 하지만 서비스, 제안 및 주요 클릭 유도문안에도 초점을 맞춰야 합니다.

8. 불량한 로고 품질

한 번은 Microsoft Word(.doc) 형식의 로고를 받은 적이 있습니다. 내가 말하고 싶은 것은 고객이 항상 당신을 놀라게 할 방법을 찾을 것이라는 것입니다.

로고는 픽셀 단위로 최상의 상태를 유지하는 것이 중요합니다. 이를 위해서는 벡터 형식(.pdf, .ai, .svg, .eps)이 필요합니다. 그런 다음 좋아하는 벡터 응용 프로그램(예: Adobe Illustrator)으로 이동하여 해당 로고를 테마 제작자가 권장하는 크기로 내보내야 합니다. 가장 선명한 로고를 얻을 수 있는 가장 좋은 기회입니다.

로고를 .png로 가져오면 잘 작동할 수 있지만 크기 조정 시 선명도가 약간 떨어질 수 있습니다. 크기 조정으로 로고가 손상되면 fiverr.com으로 이동하여 $5를 투자하여 벡터 형식으로 다시 그립니다. 큰 결과를 위한 또 다른 작은 투자.

9. 열악한 이미지 품질

상황은 매년 나아지고 있지만 여전히 양질의 사진에 충분한 관심이나 자원을 투입하지 않는 업체를 찾습니다.

특정 제품을 판매하는 웹사이트가 있는 경우 품질 이미지는 잠재 고객에게 가장 큰 영향을 미치며 잠재 고객이 제품 구매 여부를 결정할 때 중요한 역할을 합니다.

고객이 고품질 사진을 제공하지 않았거나 사진이 없으면 고객이 100달러를 투자하여 온라인에서 구매하도록 설득하는 것이 귀하의 일입니다.

고품질 사진의 훌륭한 출처는 Shutterstock입니다. 여기에서 한 달에 $99에 50개의 이미지를 얻을 수 있습니다. 소규모 웹사이트에 충분하며 웹사이트 사용자와 클라이언트 브랜드에 대한 전반적인 신뢰에 엄청난 영향을 미칩니다.

팁: 사진을 선택할 때 일반적이고 세련되고 비현실적인 사진은 피하십시오. 그 예로는 아주 하얀 치아와 흠잡을 데 없는 피부를 가진 백인 남자가 있습니다.

역효과를 일으킬 수 있지만 방문자에게 영향을 미치지는 않을 것입니다. 진정성이 있는 이미지를 찾아보십시오. 단순하게 만들려면 사실적인 모양과 느낌이 있는 이미지를 사용하십시오.

10. 타사 플러그인을 스타일링하지 않음

새로운 WordPress 테마를 만드는 과정에서 우리는 항상 테마를 만들고 있는 틈새 시장에 대한 연구를 수행합니다. 우리는 항상 테마에 필요한 모든 기능을 포함하기를 열망하지만 때로는 고객이 다른 것을 원하기도 합니다. 그 때가 WordPress 플러그인이 재생되는 때입니다.

문제가 없습니다. 플러그인을 설치하고 WordPress 테마에 포함시킨 후 프론트 엔드에서 어떻게 보이는지 살펴보십시오.

나는 종종 우리 고객들이 나머지 테마와 같은 스타일로 버튼, 형태, 색상의 스타일을 지정하는 것을 잊어버린다는 것을 알아차립니다.

이미 작성된 CSS 클래스를 타사 플러그인에 적용하는 데 10분밖에 걸리지 않지만 결국에는 상당한 영향을 미칩니다.

그렇게 할 수 있는 지식이 없다면 저희가 대신해 드릴 수 있습니다.

11. 나쁜 가독성

타이포그래피가 웹 디자인의 95%라는 유명한 주장이 있습니다.

테마의 데모를 만들 때와 같은 방법으로 위젯을 사용하면 가독성에 많은 노력을 기울이기 때문에 문제는 없지만 글꼴의 레이아웃과 스타일을 수정하는 경우 아래 규칙을 따라야 합니다.

• 모든 줄은 공백을 포함하여 60-80자 여야 합니다.
• 사용자 정의 행 높이를 설정하는 경우 글꼴 크기를 1.4에서 1.6으로 곱하십시오. 글꼴 크기가 16px인 경우 줄 높이는 22.4에서 25.6 사이여야 합니다.
• 텍스트 주위에 충분한 공간을 두십시오.
• 너무 밝은 텍스트 색상을 사용하지 마십시오. #777777보다 밝은 모든 것은 가독성에 부정적인 영향을 미칩니다.
• 권장되는 것보다 작은 글꼴을 사용하지 마십시오. 가장 낮은 값은 14px이지만 16px 또는 18px를 선택 하는 것이 좋습니다.
• 테마에 사용자 정의 글꼴을 설치할 때 주의하십시오 . 일부 글꼴은 제목 전용으로 만들어졌으며 작은 크기에서는 제대로 작동하지 않습니다. 일부 글꼴은 인쇄용으로 만들어졌으며 화면에서 제대로 작동하지 않으며 일부 글꼴은 제대로 만들어지지 않습니다. 기본 WordPress 테마의 글꼴을 다른 글꼴로 바꾸려면 두 번 생각하십시오. 그래도 바꾸고 싶다면 안전한 편에 서서 인기있는 것을 선택하십시오.

• 올바른 정렬을 사용하십시오. 95%의 경우 왼쪽 텍스트 정렬이 올바른 방법입니다. 다른 5%에서는 가운데 정렬을 사용하도록 허용하지만 짧은 지원 텍스트에만 사용하도록 하십시오.

오른쪽 정렬(오른쪽에서 왼쪽으로 쓰는 언어 제외) 및 양쪽 정렬은 문제가 되지 않습니다. 기간.

결론:

다음에 고객을 위한 웹사이트를 만들 때 위의 목록을 살펴보고 작은 결함을 모두 수정하십시오. 1-2시간이면 충분하지만 결국에는 훨씬 더 나은 결과를 얻게 될 것입니다. 즉, 고객이 더 행복해지고 참조가 더 잘 될 것입니다. 게다가, 우리는 과시할 환상적인 라이브 예제를 얻을 것이기 때문에 당신은 우리에게 호의를 보일 것입니다.

질문이 있으시면 아래에 댓글을 남겨주세요.

편집: 이 기사는 네덜란드어로 번역되었습니다. 귀하의 언어로 번역하고 싶다면 아래 의견에 알려주십시오.