"비디자이너"를 위한 3가지 효과적인 웹 디자인 원칙

새로운 웹 디자이너와 "디자인에 대한 눈"이 없는 사람에게 권한을 부여하는 데 도움이 되는 효과적인 디자인 사례를 탐색하는 미니 시리즈 "Effective Divi Web Design Principles" 의 파트 2에 오신 것을 환영합니다.

이전 게시물에서 우리는 사고 방식을 준비하는 방법과 디자인에 대한 더 나은 눈을 개발하는 방법을 배우는 몇 가지 방법을 살펴보았습니다. 이 게시물에서 우리는 웹 디자인의 "디자인" 측면에서 더 나은 사람이 되기 위해 웹 디자인 노력에 즉시 적용할 수 있는 좋은 디자인의 몇 가지 보편적인 원칙에 초점을 맞출 것입니다.

바로 가자!

"비디자이너"를 위한 3가지 효과적인 웹 디자인 원칙

이 시리즈의 1부에서 언급했듯이 디자인에는 옳고 그름이 없습니다. 이 포스트에서 다룰 내용은 웹 디자인 커뮤니티 전반에 걸쳐 좋은 디자인 원칙으로 널리 받아들여지고 있습니다. 이것은 그래픽/인쇄 디자이너가 거의 10년의 경험과 더 중요하게는 수백 명의 행복하고 만족스러운 고객을 가진 Divi 웹 디자이너로 전향한 제 개인적인 지침이기도 합니다. 저는 이 원칙을 제가 구축하는 모든 Divi 웹사이트 디자인에 적용하고 있습니다. 항상 끔찍하거나 벽에서 벗어난 것을 원하는 고객이 한 명 있긴 하지만, 적어도 10번 중 9번은 귀하에게 도움이 될 것입니다.

1) 3분의 1의 법칙

웹 디자인, 그래픽 디자인, 인쇄 디자인, 사진 및 기타 크리에이티브 매체 전반에 걸쳐 가장 일반적인 관행 중 하나는 3분의 1 법칙이라는 간단한 규칙을 따르는 것입니다. 요컨대, 3분의 1 법칙은 대칭과 균형에 관한 것입니다. 3분의 1 법칙의 목적은 디자인에서 더 많은 균형과 조화를 달성하는 데 도움을 주기 위한 것입니다. 그리고 가장 좋은 점은 3분의 1 법칙을 그래픽, 이미지, 전체 웹 페이지 레이아웃 등에 적용할 수 있다는 것입니다!

3분의 1의 법칙이 과학적인지 아닌지에 대해 온라인에는 수많은 대화가 있지만, 그럼에도 불구하고 이미지나 디자인이 왼쪽과 오른쪽 또는 위쪽과 아래쪽이 너무 비슷하면 청중이 찾을 수 있다는 여론이 있습니다. 지루하거나 지루한. 어쨌든 3분의 1 법칙은 그것을 흥미롭게 유지하고 아래에서 다룰 좋은 흐름으로 이어질 수 있습니다.

Divi 웹 콘텐츠를 최적화하기 위한 디자인 팁에 대한 이전 게시물에서는 시각적으로 생각할 수 있는 좋은 방법인 그리드 시스템으로도 언급되었습니다. 다음과 같은 그리드를 상상해 보십시오.

이미지, 그래픽 또는 레이아웃에 이 가상 그리드를 사용하면 하나 이상의 주요 교차점 근처에 콘텐츠를 쉽게 배치할 수 있습니다.

물체와 초점을 4개의 교차점 중 1개 이상에 유지하면 주제가 교차점 아래에 있는 두 번째 예와 달리 훨씬 더 균형 잡힌 대칭 모양을 얻을 수 있습니다. 아래 이미지를 살펴보십시오. 첫 번째 예는 3분의 1 법칙을 따르지 않습니다.

이 예는 3분의 1 법칙을 따릅니다.

첫 번째 예는 여전히 좋은 이미지이지만 3분의 1 법칙을 사용하면 전경과 하단 교차점을 3분의 1 법칙에서 교차시켜 이미지에 완전히 다른 느낌을 제공합니다. 3분의 1 격자의 규칙으로 이미지를 살펴보겠습니다.

이제 3분의 1 교차 규칙을 정렬하지 않고 이미지를 살펴보겠습니다.

눈을 즐겁게 하는 디자인이 종종 하나 이상의 교차점과 정렬되는 방식에서 큰 차이를 볼 수 있습니다. 3분의 1 법칙은 사진과 비디오 촬영에서 가장 일반적으로 언급되지만 웹사이트 디자인에서도 마찬가지로 중요합니다. 제 개인 사이트에 3분의 1 법칙을 적용한 방법을 보여드리겠습니다. 다음은 "스크롤 없이 볼 수 있는 부분"의 초기 디자인 스냅샷으로, 이는 시청자가 아래로 스크롤하기 전에 보는 것에 적용됩니다.

이제 기본 섹션 위에 3분의 1 격자선을 놓고 어떻게 보이는지 봅시다. 이 경우 3분의 1 법칙을 구현한 기본 메뉴 아래의 콘텐츠에 집중하겠습니다.

이 예에는 교차점에 있거나 교차점에 가까운 4개의 주요 요소가 있습니다. 요컨대 다음을 강조하고 싶었습니다.

1. 내가 누구이며 이 사이트가 무엇인지에 대한 간략한 설명입니다.
2. 새로운 사용자가 누구의 말을 들을지 보고 더 편안하고 신뢰할 수 있는 사진입니다.
3. 사람들에게 가입할 이유를 제공하는 최신 전자책의 그래픽.
4. 마지막으로 클릭 유도문안 이메일은 사용자의 시선이 끝나는 마지막 2개의 프레임에 등록됩니다.

3분의 1 법칙을 사용하면 모든 교차점(특히 사진)에 무언가를 두는 것이 일반적으로 가장 좋은 방법은 아니지만 웹사이트 빌드에서 종종 이 레이아웃을 따릅니다. 참고로 우리는 왼쪽에서 오른쪽으로 읽기 때문에 화면 중앙이나 오른쪽에 클릭 유도문안이 있는 경우가 많습니다. 이 시리즈의 마지막 게시물에서 행동 촉구에 대해 더 자세히 다루겠지만 이것은 내가 설계에 삼분의 일 법칙을 구현한 좋은 예입니다.

따라서 웹 페이지 레이아웃 방법에 대해 확신이 서지 않거나 이미지, 텍스트 및 클릭 유도문안을 혼합하는 데 어려움을 겪고 있다면 3분의 1 법칙을 따르고 이것이 지침이 되도록 하십시오.

2) 레이아웃과 흐름

웹 페이지를 레이아웃하고 디자인할 때 옳고 그른 스타일은 없습니다. 그것은 종종 프로젝트, 클라이언트의 희망, 디자인 스타일 및 종종 목표로 하는 시장에 따라 다릅니다. 디지털 또는 웹 디자인 에이전시, 패션 및 사진과 같은 서비스에서는 최소한의 모양과 느낌으로 보다 현대적이고 트렌디한 디자인을 사용하는 경우가 많습니다. 현대적인 디자인에서는 더 많은 열린 공간, 더 적은 텍스트 기반 콘텐츠, 더 많은 이미지 및 아마도 더 많은 스크롤이 제공되는 경우가 많습니다. (내 구식 클라이언트 중 일부는 몸서리를 쳤다!)

제조, 법률 회사, 블루칼라 산업 등과 같은 보다 전통적인 비즈니스 시장에서는 텍스트 기반 콘텐츠가 더 많고 개방된 공간이 적으며 의심할 여지 없이 덜 매력적인 이미지와 디자인 요소가 있는 웹사이트를 찾을 수 있습니다. 그리고 이유가 무엇이든, 이 산업에 종사하는 대부분의 고객은 너무 많은 스크롤링에 대해 심각하게 반대합니다. 따라서 흐름이 좋은 레이아웃을 디자인하는 방법을 아는 것이 중요합니다! 나는 종종 내 창의적인 디자인 스타일과 내 클라이언트의 산업, 대상 인구 통계 및 클라이언트의 요구와 요구 사항 내에서 작동하는 것과 균형을 유지해야 한다는 것을 알게 되었습니다. 그렇긴 해도, 누구와 함께 일하거나 어떤 산업에 속해 있는지에 관계없이 적용할 수 있는 몇 가지 기본 레이아웃 및 흐름 원칙이 있습니다.

위에서 언급한 이전 포스트를 돌이켜보면, 따라야 할 매우 중요한 가이드라인은 디자인의 z-패턴입니다. 매주 제공되는 새로운 전문 Divi 레이아웃 키트에서 자주 발견할 수 있습니다.

무슨 말인지 살펴보겠습니다.

왼쪽의 첫 번째 예에서는 왼쪽에 이미지가 있고 오른쪽에 멋진 클릭 유도문안 버튼이 있는 텍스트가 있습니다. 그러면 눈이 아래로 읽히고 왼쪽으로 텍스트/CTA의 다른 섹션을 읽은 다음 오른쪽에 다른 이미지가 표시됩니다. 그리고 반복합니다. 그 반대로 오른쪽 이미지에는 반전 패턴이 있습니다. 텍스트에서 이미지로 이미지에서 텍스트로 등등. 이 z 스타일 패턴을 따르는 것은 독자의 관심을 유지하는 좋은 방법이며 텍스트와 이미지의 균형을 함께 유지하는 훌륭한 방법입니다.

이것은 좋은 페이지 디자인에서 레이아웃 인 플로우를 위한 유일한 옵션은 아니지만 왼쪽에서 오른쪽으로, 그리고 아래로 콘텐츠를 가져오는 것이 좋습니다. 그런 다음 왼쪽에서 오른쪽으로 그리고 아래로 등등. 따라서 확실하지 않은 경우 페이지 콘텐츠의 흐름을 구성하는 데 도움이 되는 방법으로 z 스타일 패턴을 따르십시오. 스크롤링에 대한 마지막 참고 사항 - 저는 제 사이트를 3-5 스크롤 이내로 유지하는 경향이 있습니다. 더 자주 스크롤해야 하는 경우 페이지가 커지고 로드 속도가 느려집니다. 다시 말하지만, 스크롤링과 관련하여 옳고 그름은 없지만 더 오래된 사고 방식을 가진 고객과 아직 작업하지 않은 경우 약간의 반대에 부딪히게 될 것입니다. 나는 스크롤링이 두렵지 않다는 것을 그 고객들에게 재확인하려고 노력합니다. 소셜 미디어는 우리가 끊임없이 스크롤하고 콘텐츠를 빠르게 받아들이도록 훈련했습니다.

3) 시각적 계층

여기서 지적하고 싶은 마지막 주요 원칙은 시각적 계층입니다. 요컨대, 계층 구조는 사용자가 가장 중요한 정보가 무엇인지 알도록 돕고 디자인에서 시선이 가야 할 방향에 대한 매우 명확한 방향을 제공합니다. 계층 구조는 종종 타이포그래피(세 번째 게시물에서 다룰 것입니다)와 함께 참조되지만 그래픽 요소, 이미지 및 사이트의 전체 디자인에서도 매우 중요할 수 있습니다.

"좋은 디자인" 부서가 부족하다고 느끼는 사이트를 의도적으로 지적하지는 않겠습니다. 하지만 명확하지 않은 텍스트와 이미지가 모두 같은 크기로 뒤섞여 있는 사이트를 많이 보셨을 것입니다. 행동 촉구, 그렇지? 그것이 우리가 피하고 싶은 것입니다. 좋은 계층 구조를 사용하는 것은 웹 사이트 사용자가 다음에 무엇을 클릭하거나 수행해야 하는지 알 수 있도록 안내하는 가장 좋은 방법입니다.

다음은 계층 구조를 염두에 두고 만든 최근 디자인의 예입니다.

오른쪽 상단의 로고와 전화번호는 크고 눈에 잘 띄지만, 스크롤 없이 볼 수 있는 부분에서 가장 큰 콘텐츠와 가장 생생한 색상은 버튼을 클릭하라는 클릭 유도문안입니다.

내 고객은 특히 사람들이 사이트에 도착했을 때 즉시 검사를 쉽게 요청할 수 있기를 원했기 때문에 이 시각적 계층 구조 아이디어를 사용하여 희망적으로 그것을 달성했습니다! 내가 최근에 어떻게 계층 구조를 사용했는지에 대한 또 다른 예는 이 사이트의 스크롤 없이 볼 수 있는 부분에 있는 디자인입니다.

이 경우 고객의 주요 행동 유도 문안은 온라인 쇼핑 또는 고객에게 직접 연락하는 것입니다. 로고, 간단한 설명 및 전화번호까지 널리 퍼져 있지만 Divi Double Button은 사용자가 더 이상 스크롤하지 않을 경우 원하는 것을 클릭할 수 있도록 하기 위해 처음에 가장 큰 요소입니다.

다시 말하지만, 이는 시각적 계층 구조의 몇 가지 예일 뿐이지만 웹 사이트 사용자가 원하는 작업을 수행하거나 원하는 곳으로 가도록 지시하는 매우 강력한 방법이 될 수 있습니다! 제쳐두고, 나는 피해야 할 일반적인 웹 디자인 오류에 대한 이전 게시물을 확인하는 것이 좋습니다.

마감 중

이 효과적인 디자인 원칙이 웹 디자인을 처음 접하거나 디자인을 더 잘하고자 하는 디자인 노력에 도움이 되었기를 바랍니다! 다시 말하지만, 우리가 검토할 수 있는 많은 원칙이 있지만 이것들은 내 모든 웹사이트 디자인에서 구현하려고 하는 상위 3가지 원칙입니다.

공유하고 싶은 다른 디자인 원칙이 있으면 아래 의견에 알려주십시오!

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

이제 사고 방식을 준비하고 디자인을 더 잘 보는 방법을 배우고 몇 가지 기본 디자인 원칙을 살펴보았으므로 마지막 게시물에서는 웹 디자인에서 집중해야 할 가장 중요한 몇 가지 측면을 살펴보겠습니다 모든 웹사이트 빌드. 다음까지!

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