모든 웹사이트 구축에 집중해야 할 3가지 중요한 디자인 영역

3부, 미니 시리즈 "Effective Divi Web Design Principles" 의 마지막 게시물에 오신 것을 환영합니다. 여기에서는 새로운 웹 디자이너와 "디자인에 대한 눈"이 없는 사람에게 권한을 부여하는 데 도움이 되는 효과적인 디자인 방법을 탐구하고 있습니다.

이제 우리는 디자인에 대한 더 나은 안목을 갖는 방법을 준비하고 배우는 방법을 다루었고 도구 상자에 포함할 몇 가지 효과적인 디자인 원칙을 살펴보았으므로, 잘 설계된 사이트.

바로 가자!

모든 웹사이트 구축에 집중해야 할 3가지 중요한 디자인 영역

이 시리즈의 처음 두 게시물을 계속 지켜봤다면 디자인에는 옳고 그름이 없다고 지적하는 것을 들었을 것입니다. 그러나 우리가 살펴본 효과적인 디자인 원칙과 함께 몇 가지 중요한 , 매번 성공적이고 눈을 즐겁게 하는 웹사이트 구축에 중점을 두고 있는 실용적인 디자인 영역입니다. 그리고 가장 중요한 부분은 이러한 아이디어를 모든 유형의 산업 또는 웹 디자인 스타일로 옮길 수 있다는 것입니다!

1) 타이포그래피와 폰트

귀하의 사이트는 아름다운 이미지, 매력적인 색상 및 즐거운 디자인 요소를 가질 수 있지만 유형이 사이트의 스타일에 맞지 않거나 어울리지 않으면 주요 방해 요소가 될 수 있습니다. 이 시리즈에서는 타이포그래피의 기본 사항을 다루지 않으므로 기본 사항에 대해 자세히 알아보려면 모든 웹 디자이너가 알아야 하는(그리고 이해해야 하는) 타이포그래피 용어 50가지를 다시 참조하세요. 커닝(kerning), 행간(leading), 자간(tracking), 산세(sans) 및 산세리프(sans-serif) 글꼴에 대한 이해는 활자체와 디자인을 더 잘하고자 하는 사람에게 큰 도움이 될 것입니다.

성공적인 Divi 웹 디자이너로서 내가 고수하는 몇 가지 실용적인 타이포그래피 지침을 제공하겠습니다.

귀하의 사이트 산업/디자인과 잘 어울리는 글꼴 사용 – 이 시리즈의 첫 번째 게시물에서 나는 훌륭한 이미지와 색상을 가지고 있지만 글꼴이 잘 어울리지 않는 사이트를 스스로 디자인한 예를 기억했습니다. 간단히 말해서, 그것은 산업 제조 현장이었고 처음에 사용한 글꼴은 회사의 모양과 브랜드에 실제로 맞지 않는보다 현대적이고 세련된 스타일이었습니다.

이것은 글꼴로 창의력을 발휘할 수 없거나 업계의 현상에 맞춰야 한다는 의미는 아니지만 실질적으로 전문 서비스 사이트에서 작업하는 경우 과도한 작업을 원하지 않을 것입니다. 상단의 예술적인 글꼴이 사용되었습니다. 그 반대의 경우, 독특하고 예술적인 분위기의 작업을 하고 있다면 Arial이나 Helvetica가 원하는 분위기와 맞지 않을 수 있습니다. 이것은 글꼴을 혼합하고 일치시키는 다음 단계로 안내합니다.

2~3개의 글꼴 사용 - 수십 년 동안 테스트를 견뎌온 기본 디자인 원칙은 사용하는 글꼴의 수를 제한하는 것입니다. 너무 많은 글꼴은 독자의 주의를 산만하게 하고 종종 계층 구조를 혼란스럽게 하며 솔직히 말해서 결국 무법자에 대한 보상을 구하는 오래된 서양 전단지처럼 보이게 됩니다. 나는 종종 머리글과 제목에 하나의 글꼴을 사용하고 일반적으로 모든 단락 텍스트에 쉽게 읽을 수 있는 산세리프 글꼴을 사용합니다. 때로는 메인 메뉴에 3번째 스타일 글꼴을 사용하지만 메뉴 글꼴은 종종 제목과 함께 간소화됩니다.

글꼴을 함께 짝짓는 방법에 대한 더 많은 아이디어는 웹 디자인의 글꼴 짝짓기: 공개 및 설명된 7가지 주요 원칙에 대한 이전 게시물을 참조하십시오.

텍스트와 함께 시각적 효과 제공 – 콘텐츠에 상당한 양의 텍스트가 포함되어 있으면 좋습니다. 사실, SEO 관점에서 도움이 되도록 페이지당 최소 300단어를 포함하는 것이 좋습니다. 그러나 텍스트가 너무 많고 시각 자료가 충분하지 않도록 주의하십시오. 책, 블로그, 기사 및 기타 긴 형식의 콘텐츠의 경우 많은 텍스트가 필요하지만 멋진 매력적인 랜딩 페이지를 디자인하는 경우 너무 많은 콘텐츠는 사용자가 더 이상 보기 전에 지루할 것입니다. 나는 종종 첫 페이지가 고객이 문을 통과하도록 하는 판매 깔때기이어야 한다는 마음가짐으로 디자인합니다. 그러면 고객이 더 자세한 정보를 위해 더 많은 페이지, 블로그 및 기타 리소스를 살펴볼 수 있습니다.

우아한 테마 홈페이지는 현재 그 완벽한 예입니다.

이 예에서 우리는 매력적인 제목, 클릭 유도문안 버튼이 있는 텍스트 단락 및 사용자의 참여를 유지하는 메시지와 연결되는 멋진 시각적 그래픽을 봅니다. 이것은 시각적으로 적절한 양의 텍스트를 구성할 때 따라야 하는 좋은 예입니다.

나는 한때 텍스트와 시각 자료로 디자인된 아름다운 프론트 페이지를 가지고 있었고 기본적인 편집을 위해 클라이언트에게 넘겨주었을 때 디자인의 흐름을 완전히 망친 책의 작은 장처럼 보이는 것을 프론트 페이지에 버려버렸습니다. 내가 만들었다. 따라서 이를 교훈으로 삼고 콘텐츠가 훌륭하지만 그에 따라 배치되어야 함을 알 수 있습니다!

다시 참조할 수 있는 또 다른 훌륭한 리소스는 2016년 주목해야 할 20가지 타이포그래피 트렌드입니다. 이러한 트렌드는 오늘날에도 여전히 유효하고 앞으로 나아갈 것입니다.

2) 이미지 및 색상 관리

타이포그래피와 마찬가지로 웹사이트 구축을 위해 최대 2~3개의 기본 색상을 사용하는 경향이 있습니다. 브랜드에 색상이 너무 많은 회사나 조직이 아닌 이상 색상이 너무 많으면(특히 색상이 잘 어울리지 않는 경우) 매우 산만하고 혼란스러울 수 있습니다. 다음은 색상과 이미지를 혼합할 때 고수하는 몇 가지 지침입니다.

기본 색상 및 강조 색상 – 최근 프로젝트에서 매우 성공적으로 발견한 한 가지 방법은 클라이언트의 브랜드를 가져오고 아직 그렇지 않은 경우 클릭 유도문안, 링크 등에 대한 멋진 강조 색상을 선택하는 것입니다. 예를 들어 다음과 같이 사이트에서 저는 로고의 브랜딩을 회색과 주황색으로 가져갔고 주황색을 기본 강조 색상으로 "팝"할 수 있도록 미묘하고 어두운 청록색/파란색을 추가했습니다.

이미지로 색상 간소화 – 디자인과 이미지를 효과적으로 결합하는 한 가지 방법은 웹사이트 색상을 일부 기본 이미지와 일치시키는 것입니다. 이 예는 웹사이트 색상을 고객의 의상과 일치시킬 수 있었기 때문에 이미지와 웹사이트 색상 사이에 매우 멋진 유선형 느낌을 줄 수 있었습니다.

나는 고객 복장에서 멋진 적갈색과 주황색을 가져 와서 전체 사이트를 멋진 유니폼 모양으로 통합 할 수있었습니다. 이제 이미지에서 전체 사이트를 브랜드화할 수 있는 상황은 거의 없을 것입니다. 그러나 클릭 유도문안 등과 함께 배경 이미지를 사용할 때도 이와 동일한 원칙을 적용할 수 있습니다!

실제로 특정 색상을 선택하는 방법을 잘 모르는 경우 10가지 색상 선택 도구가 있습니다.

너무 생생한 색상은 피 하십시오. 저는 신진 디자이너가 매우 밝은 녹색, 분홍색, 노란색 등을 사용하여 눈을 가늘게 뜨고 화면에서 멀어지는 것을 종종 봅니다. 여기서 나쁜 예를 지적하지는 않겠지만 색상이 당신을 외면하고 결코 뒤돌아보고 싶지 않은 사이트를 많이 보았을 것입니다. 생생한 색상에는 문제가 없습니다. 다만 그 효과가 나타나지 않는지 확인하십시오. 여기에서 다른 디자이너로부터 건설적인 비판과 피드백을 얻을 수 있습니다.

내 권장 사항은 텍스트, 배경 그래픽 등과 같은 기본 색상에 상당히 중성적인 색상을 사용한 다음 페이지 디자인의 클릭 유도문안, 링크 및 주의를 끄는 영역에 보다 생생한 색상을 사용하는 것입니다. 디자인이 처음이고 색상이 편안한 영역이 아닌 경우 색상을 더 잘 선택하는 방법에 대한 다양한 옵션을 제공하는 WordPress 웹 디자이너를 위한 색상 일치 기술을 다시 참조하십시오.

3) 강력한 클릭 유도문안

마지막으로 웹 디자인의 매우 중요한 영역 중 하나는 강력하고 명확한 클릭 유도문안(CTA)을 갖는 것입니다. 나쁜 웹 디자인의 가장 일반적인 문제 중 하나는 명확한 클릭 유도문안이 없는 무거운 텍스트 중심 콘텐츠를 갖는 것입니다. 콘텐츠는 훌륭하지만 모든 정보만 있고 전환이 없다면 고객은 확실히 만족하지 못할 것입니다. 강조 색상이나 멋진 호버 효과를 사용하여 CTA를 디자인의 다른 요소와 차별화하는 것이 좋습니다.

다음은 최근 고객에 대한 클릭 유도문안을 구현한 방법의 예입니다.

이 경우 웹사이트 사용자를 위한 클라이언트의 기본 클릭 유도문안은 이메일 업데이트에 가입하는 것이므로 즉시 가입할 수 있는 약간의 텍스트와 함께 어두운 배경 이미지에서 로고가 튀어나옵니다. 스크롤을 내리기도 전에. 이상적으로는 사용자의 시선을 클릭 유도문안으로 끌어들이는 것이 좋습니다. 사이트에 생생한 액센트 색상이나 효과가 있는 경우 매우 유용합니다.

다음은 클릭 유도문안과 관련하여 제가 고수하는 몇 가지 지침입니다.

강력한 클릭 유도문안으로 홈페이지를 마무리하십시오 – 제 홈페이지 디자인은 사이트 전체를 거의 요약한 것입니다. 예를 들어 사이트에 다음과 같은 구조가 있는 경우:

• 회사 소개
• 서비스
• 사용후기
• 블로그
• 연락하다

홈페이지의 각 섹션에 대한 클릭 유도문안을 만든 다음 이 경우 가입하는 주요 클릭 유도문안을 위한 최종적이고 세련된 디자인을 만들 것입니다. 내가 의미하는 바의 주요 예는 다음과 같습니다.

첫 페이지는 기본적으로 전체 사이트를 캡슐화하고 사용자가 갤러리, 비디오 및 추가 정보를 보기 위해 클릭할 수 있는 시작점입니다. 아마도 그러한 마음가짐은 홈페이지 디자인에서와 같이 당신을 도울 것입니다!

사이드바에 클릭 유도문안이 있습니다. 사이드바 에서 강력한 클릭 유도문안을 얻을 수 있는 기회를 잊지 마십시오! 특히 사이드바를 자주 사용하는 블로그 게시물이나 기타 페이지가 있는 사이트가 있는 경우. 이것은 추가 이메일 가입, 기부 버튼 또는 다른 주요 CTA에 대한 링크를 추가할 수 있는 좋은 기회입니다.

위의 사이트와 유사하게 내 개인 사이트에 대한 주요 클릭 유도문안 중 하나는 이메일 가입이며 이는 내 홈페이지의 전면 중앙에 있지만 내 블로그 게시물과 튜토리얼 페이지에서도 이를 매우 분명하게 보여주고 싶었습니다. .

여기에서는 각 게시물 템플릿의 오른쪽 상단에 기본 가입 양식 위와 아래에 강력한 시각적 개체가 있습니다. 따라서 사이드바가 있는 페이지가 있는 경우 해당 영역은 강력한 클릭 유도 문안을 위한 귀중한 부동산임을 기억하십시오! 그리고 CTA를 눈에 띄게 만들고 메인 콘텐츠 아래 모바일에서 가장 먼저 표시되는 사이드바 상단에 표시하는 것이 좋습니다.

하위 페이지 콘텐츠 다음에 클릭 유도문안이 있습니다. 마지막으로 아마도 가장 간과될 수 있는 것은 일반 페이지에 클릭 유도문안이 있다는 것을 기억하는 것입니다! 나는 최근까지 클라이언트가 요청했을 때까지 이것을 간과했습니다. 아래 예에는 주요 서비스 페이지 끝에 강력한 클릭 유도문안이 있습니다.

웹사이트 사용자가 해당 페이지를 볼 때 모든 정보를 확인한 다음 관심이 있는 경우 고객에게 연락할 기회를 갖게 됩니다. 페이지에서 팝니다. 예, 이전 게시물에서 일반적으로 CTA를 중간이나 오른쪽에 배치한다고 말했지만 이 레이아웃은 잘 작동하는 것 같았습니다.

시리즈 마무리

이 시리즈가 웹 디자인 노력에 적용할 수 있는 몇 가지 훌륭한 웹 디자인 원칙과 전술에 영감을 주는 데 도움이 되었기를 바랍니다! 전체 미니 시리즈에서 살펴본 내용을 간단히 요약해 보겠습니다.

1 부

• 마음가짐 준비하기
• 좋은 디자인 트렌드를 배우는 방법
• 작업에 대한 피드백과 건설적인 비판 받기

2 부

• 삼분의 일 법칙을 따르라
• 레이아웃 및 흐름
• 시각적 계층

3부

• 타이포그래피 및 글꼴
• 이미지 및 색상
• 강력한 클릭 유도문안

다시 말하지만, 전체 학문적 연구는 좋은 디자인에 전념했기 때문에 여기에서 표면을 긁고 있을 뿐이지만 이러한 원칙과 관행이 디자인을 더 잘하고 싶어하는 사람들을 올바른 방향으로 가리키는 데 도움이 되었기를 바랍니다. 공유하고 싶은 다른 디자인 원칙이나 방법이 있으면 아래 의견에 자유롭게 알려주십시오!

매일 더 나은 Divi Web Designer가 되는 우리 모두를 위한 소식입니다!

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!