디자인의 황금 비율을 마스터합니다

당신의 디자인은 거의 옳게 보이지만 무언가가 느껴집니다. 간격은 어색해 보입니다. 비율은 작동하지 않습니다. 마진과 패딩을 조정하지만 그 잔소리가 잔소리는 남아 있습니다. 누락 된 조각은 황금 비율 일 수 있습니다.

이 수학적 원칙은 수세기 동안 훌륭한 디자인을 이끌었습니다. 그리고 우리의 눈은 자연스럽게 이러한 특정 비율을 선호합니다. 대부분의 디자이너는 금이 얼마나 힘든지로 인해 황금 비율을 건너 뛰거나 잘못 적용합니다. 그러나 Divi 5와 같은 페이지 빌더를 사용하면 복잡한 계산없이 완벽한 비율을 적용 할 수 있습니다.

더 자세히 알아 보겠습니다.

황금 비율은 얼마입니까?

황금 비율은 대략 같습니다

1.618.

어디에서 왔습니까? 선을 두 부분으로 나눌 때이 숫자를 얻습니다. 여기서 더 긴 부분은 짧은 부분으로 나뉘어져 전체 선을 더 긴 부분으로 나눈 값과 같습니다.

Fibonacci 시퀀스를 사용하여 황금 비율을 계산할 수 있습니다. 0과 1으로 시작하십시오. 1과 1을 추가하십시오. 그런 다음 1과 1을 추가하여 2를 추가하십시오. 마지막 두 숫자를 계속 추가하십시오 : 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144. 더 큰 숫자를 이전 번호로 나누면 1.618로 가까워집니다.

이 비율은 본질적으로 어디서나 나타납니다. 해바라기 종자 나선은 그것을 따릅니다. 노틸러스 껍질은 이러한 비율을 사용하여 자랍니다. 얼굴조차도 기능 사이의 황금 비율 측정을 따를 것입니다. 무언가 가이 비율을 따를 때, 당신의 뇌는 그것을 자연스럽게 즐겁게 인식합니다.

이미지 제공 : Unsplash와 Milena Carolina Dos Santos Mangueira의 Lucas와 Dynamic Wang

기호 φ (Phi)는 고대 그리스인들이 기원전 300 년경에 발견 한 독특한 수학적 비율을 나타냅니다. 그들은 그것을“신성한 비율”이라고 불렀다.

중요한 이유 : 오래된 건물에서 웹 디자인에 이르기까지

그리스인들은 파르테논 신전 에이 비율을 사용했으며 이집트 피라미드는 이러한 측정을 따릅니다. Leonardo Da Vinci와 같은 예술가들은이 비율을 몇 년 동안 연구했습니다. Da Vinci는 유명한“Vitruvian Man”을 그렸습니다.

표현 이미지

잘 확립 된 디자이너는 여전히 이것을 사용합니다. Apple의 로고는 황금 비율을 사용합니다. 트위터 조류 로고는 이러한 측정을 따랐습니다. 잡지는 중앙에있는 오른쪽 대신 황금 비율 지점에 중요한 콘텐츠를 배치합니다.

이미지 제공 : Widewalls & Design Shack

과학자들은 사람들이 황금 비율 모양을 좋아하는 이유를 연구했습니다. 뇌 스캔은 사람들이 황금률 사각형을 볼 때 즐거움 영역에서 더 많은 활동을 보여줍니다. 이것은 모든 문화와 연령에서 발생하기 때문에 인간에게 내재되어 있습니다.

뇌는 이러한 비율을 다른 비율보다 빠르게 처리하므로 사용자 경험이 향상됩니다. 웹 사이트 비율이 1.618에서 너무 멀리 떨어지면 방문객들은 불편하고 더 빨리 떠납니다.

비율은 완벽하게 균일하지 않고 균형을 만듭니다. 완벽한 대칭은 웹 사이트에서 지루해 보일 수 있습니다. 황금 비율은 사용자가 기대하는 깨끗하고 전문적인 모습을 유지하면서 시각적 관심을 불러 일으키기에 충분한 비대칭을 제공합니다.

디자인이 "꺼짐"을 느끼는 이유 (그리고 비율 이이 문제를 해결하는 방법)

방금 레이아웃을 완성하는 데 몇 시간을 보냈습니다. 색상이 옳습니다. 글꼴이 함께 작동합니다. 그러나 여전히 무언가가 느껴집니다. 사이드 바가 너무 넓어 보입니다. 헤더가 약간 비좁아 보입니다. 내용 영역은 나머지와 함께 흐르지 않습니다.

이것은 일반적인 경험입니다. 많은 디자이너들은 순간에 옳은 느낌을 기준으로 크기를 조정합니다. 아마도 주요 컨텐츠를 70 %로, 사이드 바는 30 %로 설정했을 것입니다. 이 숫자는 합리적으로 들리지만 항상 자연스럽게 보이지는 않습니다.

우리의 눈은 균형과 친숙한 패턴을 찾습니다. 비율이 옳지 않을 때, 이유를 설명 할 수 없더라도 전체 디자인이 어색합니다. 큰 실수가 아니라 당신을 불안하게하는 작은 세부 사항 일 수도 있습니다.

실제 문제는 종종 비율입니다. 레이아웃이 균형을 잡는 느낌을 무시할 때 뇌는 눈에 띄게됩니다. 손가락을 넣을 수 없더라도 무언가가 느껴집니다.

사용자 경험을 방해하는 비율

나쁜 비율은 일을 이상하게 보이게 만듭니다. 당신의 두뇌는 특정 모양과 크기가 잘 어울릴 것으로 기대합니다. 화면의 절반을 정확히 차지하는 영웅 섹션을 상상해보십시오. 뻣뻣하고 어색해 보입니다.

이제 공간의 43 % 또는 67 %를 사용하는 것을 고려하십시오. 불균형하고 지저분 해 보입니다.

웹 사이트를 해칠 수 있습니다. 사람들은 자신이 보는 것을 신뢰하면 매우 빨리 결정합니다. 페이지가 꺼져 있으면 비즈니스가 신뢰할 수 없다고 생각할 수 있습니다. 지저분한 디자인은 사람들이 당신의 일이 좋지 않다고 믿게 만듭니다.

황금 비율은 이것을 해결하는 데 도움이 될 수 있습니다. 영웅 섹션 70 %를 만드는 대신 61.8 %를 시도하여 다음 섹션 38.2 %가 보입니다.

이 숫자는 무작위가 아닙니다. 그들은 꽃과 껍질처럼 자연에서 볼 수있는 1.618이라는 특별한 패턴을 따릅니다. 당신의 눈은이 패턴을 알고 그들이 그것을 볼 때 침착하게 느낍니다.

속임수는 부품이 서로 관련되는 방법입니다. 헤더 크기가 황금 비율을 사용하여 콘텐츠 영역과 일치하면 모든 것이 옳습니다. 바닥 글, 메뉴 및 콘텐츠는 공간을 위해 싸우는 것처럼 보이지 않고 함께 맞기 시작합니다.

황금 비율을 계산하는 방법

멋진 수학이 필요하지 않습니다. 62와 38을 기억하십시오.이 숫자는 최대 100 개가 추가되므로 백분율로 작동합니다.

더 큰 부분에 62%, 작은 부분에 38%를 주어 공간을 분할하십시오. 귀하의 웹 사이트의 너비는 1000 픽셀입니다. 주요 콘텐츠 620 픽셀을 만드십시오. 사이드 바를 380 픽셀로 넣으십시오. 완벽한 황금 비율.

500 픽셀 높이의 섹션이 있습니다. 주요 영역에는 310 픽셀이 있습니다. 나머지는 190 픽셀을받습니다.

웹 사이트 부분에 대한 빠른 규칙

영웅 섹션은 사람들이 먼저 보는 것의 약 60%를 차지해야합니다. 나머지는 주요 콘텐츠 미리보기로 이동합니다. 넓은 정도의 카드를 60%로 만드십시오. 300 픽셀 넓은 카드의 높이는 180 픽셀이됩니다.

버튼은 같은 방식으로 작동합니다. 100 픽셀의 너비는 높이가 60 픽셀을 의미합니다. 텍스트 열은 폭이 600 픽셀입니다. 370 픽셀 주위의 콘텐츠 추가를 중지하십시오. 그런 다음 다음 섹션을 추가하십시오.

제대로 보이나요?

화면에서 물러납니다. 부품은 이제 균형을 잡아야합니다. 당신의 눈은 단면에서 섹션으로 부드럽게 흐릅니다. 한 지점을 계속 쳐다 보면 비율이 꺼져있을 수 있습니다.

인기있는 웹 사이트는이 같은 62/38 스플릿을 어디에서나 사용합니다. 무엇을 찾아야하는지 알면 패턴을보기 시작할 것입니다. 수학은 숨겨져 있지만 시각적 조화는 즉시 두드러집니다.

일반적인 황금 비율 실수 디자이너가 만드는 실수

대부분의 디자이너는 황금 비율이 존재한다는 것을 알고 사용하고 싶어합니다. 그들이 일반적으로 어려움을 겪는 곳이 있습니다.

가장 큰 실수는 시스템없이 무작위로 비율을 적용하는 것입니다. 헤더에는 황금 비율, 콘텐츠 그리드의 3 분의 1 및 바닥 글에 대한 임의 백분율을 사용합니다. 하나의 접근 방식을 선택하여 디자인에서 일관되게 사용하십시오.

많은 디자이너는 1.618을 1.5 또는 1.7과 같은 쉬운 숫자로 향합니다. 당신의 두뇌는 62%와 60%의 차이를 발견하고 작은 갭이 당신이 만들고있는 시각적 조화에 영향을 미칩니다.

또 다른 일반적인 문제는 비율 요소를 일치하지 않습니다. 예를 들어, 완벽하게 비례하는 영웅 섹션을 만들 수 있지만 완전히 다른 간격 비율을 사용하는 이미지 갤러리를 추가 할 수 있습니다. 시각적 분리는 당신이 설정 한 흐름을 깨뜨립니다.

일부 디자이너는 독서 편의를 고려하지 않고 황금 비율을 텍스트에 적용합니다. 완벽한 수학적 비율을 따르는 선 길이는 편안한 독서 너비를 초과 할 수 있습니다. 가독성은 수학적 정밀도보다 우선합니다.

웹 디자이너는 종종 응답 성을 간과합니다. 균형을 잡는 데스크탑 비율은 작은 화면에서 비좁은 느낌이들 수 있습니다. 골든 비율은 장치 크기에 따라 다른 응용 프로그램이 필요합니다.

많은 페이지 빌더는 비례 적 조화를 무시하는 임의의 레이아웃으로 기본적으로 기본적입니다. 표준 3 열 그리드는보다 자연스러운 비율 대신 33/33/33 스플릿을 사용합니다.

가장 제한적인 실수는 초기 시도 후 접근 방식을 포기하는 것입니다. 골든 비율은 분리 된 조정이 아니라 레이아웃 구조에 체계적으로 적용될 때 가장 잘 작동합니다.

많은 페이지 빌더가 황금 비율을 무시하는 이유는 무엇입니까?

Page Builders는 프로그래머 사고를 중심으로 자랐습니다. 개발자는 깨끗하게 나누는 숫자를 좋아합니다. 12 개의 열, 4 개의 섹션, 55 개의 분할.

많은 건축업자 회사는 사용자가 자신의 설계 선택을 제어해야한다고 생각합니다. 그들은 다른 접근법을 선호하는 사람들에게 특정한 미학적 이론을 밀고 싶지 않습니다. 일부 디자이너는 황금 비율을 싫어하고 다른 비율 시스템을 선호합니다. 창의성이 옵션에서 번성 할 때 하나의 수학적 원칙을 강요하는 이유는 무엇입니까?

실제 기술 문제는 디자인 철학보다 지저분합니다. 황금 비율은 이전 장치에서 깨지는 이상한 소수성을 만듭니다. 하나의 열이 61.8% 인 반응 형 그리드를 구축해보십시오. 25% 또는 33%와 같은 깨끗한 비율은 모든 장치에서 예측 가능하게 행동합니다.

대부분의 페이지 빌더 회사는 설계 도구가 아닌 기술 솔루션으로 시작했습니다. 그들은 안정적으로 작동하는 체계적이고 논리적 인 레이아웃을 중심으로 제작되었습니다.

사용자는 비율에 대해 거의 불평하지 않습니다. 그들은 파손 된 모바일 레이아웃과 느린 로딩 시간에 대해 불평합니다. 회사 우선 순위는 디자인 이론이 아닌 실제 사용자 피드백을 따릅니다.

일부 건축업자들은 압도적 인 초보자에 대해 걱정합니다. 새로운 사용자는 이미 수십 개의 레이아웃 선택에 직면하고 있으며 수학적 고려 사항을 추가하면 깨끗하고 전문적인 것을 원하는 사람들을 놀라게 할 수 있습니다.

Divi 5로 완벽한 비율을 구축합니다

우리가 Divi 5가 수학적 두통에서 포인트 앤 클릭 단순성으로 황금 비율 디자인을 어떻게 바꾸는 지에 대한 Nitty-Gritties로 뛰어 들기 전에, 짧은 우회를하고 Divi가 코딩 악몽없이 전문적인 결과를 원하는 WordPress 디자이너들에게 선택하는 이유를 이해해 봅시다.

Divi는 무엇입니까?

Divi는 기능을 손상시키지 않고 시각적 디자인에 관심이있는 사람들을 위해 설계된 WordPress 페이지 빌더입니다.

200 개가 넘는 모듈을 드래그 앤 드로우고 텍스트를 변경하고 새로운 색상을 선택할 수 있습니다. 모든 것이 귀하의 페이지에서 바로 발생하므로 방문자가 무엇을 볼 수 있는지 정확히 알 수 있습니다.

테마는 2000 개 이상의 사전 제작 레이아웃으로 가득합니다. 이들은 기본 템플릿이 아니라 식당, 사진 작가, 컨설턴트 및 수십 명의 다른 비즈니스를위한 풀 디자인입니다. 스타일에 맞는 것을 선택하고 거기에서 사용자 정의하십시오.

온라인으로 제품을 판매하는 경우 Divi에는 상점을 위해 특별히 제작 된 20 개 이상의 모듈이 포함되어 있습니다. 제품 페이지는 전문적으로 보이며 실제로 브라우저를 구매자로 변환하는 데 도움이됩니다.

두통없이 웹 사이트를 구축하십시오

테마 빌더를 사용하면 사이트의 모든 부분을 디자인 할 수 있습니다. 브랜드와 일치하는 사용자 정의 헤더를 만들고, 고유 한 블로그 레이아웃을 구축하고, 404 페이지를 놀라게 만들 수 있습니다.

Divi AI는 AI의 편의성을 디자인 캔버스에 바로 제공합니다. 텍스트를 생성 할 수 있습니다.

이미지,

암호,

Divi AI를 사용한 전체 페이지 섹션.

필요한 것을 설명하여 기존 사진을 편집 할 수도 있습니다.

Divi Quick Sites는 웹 사이트 Builders가 직면 한 가장 큰 문제를 해결합니다. 어디서부터 시작 해야할지 모르면 빈 페이지를 응시합니다. 전문 웹 사이트 템플릿, 디자인 팀에서 만든 전문적인 스타터 사이트 중에서 선택할 수 있으며 다른 곳에서는 찾을 수없는 독특한 이미지와 아트 워크가 있습니다.

또는 Divi AI가 귀하의 비즈니스 설명에 따라 사용자 정의 레이아웃을 구축하도록하십시오.

이 AI 생성 웹 사이트는 단순한 와이어 프레임이 아닙니다. 설명에 따라 관련 제목, 사본 및 이미지가 포함됩니다. Divi AI에게 모든 이미지를 생성하거나, Unsplash에서 하나를 사용하거나, 자리 표시자를 사용하여 직접 교체 할 수 있도록 요청할 수 있습니다.

글꼴과 색상을 미리 선택하고 AI를 실행하게 할 수도 있습니다. 물론 웹 사이트는 일반 웹 사이트와 마찬가지로 편집 가능성을 유지하므로 취향에 따라 필요한 모든 것을 조정할 수 있습니다.

divi를 얻으십시오

Divi 5 : 다음 단계

웹 사이트 구축은 종이에 아이디어를 스케치하는 것처럼 자연스럽게 느껴야합니다. 당신은 비전을 가지고 있으며, 당신의 도구는 길을 잃지 않고 그것을 생생하게 가져올 수 있도록 도와야합니다. 그것이 바로 우리가 처음부터 Divi를 완전히 재건하도록 이끌었던 것입니다.

오늘날 알파로 제공되며 새로운 웹 사이트 에서 사용할 준비가 된 Divi 5는 웹 사이트를 만들 때 필요한 것을 듣고 있습니다. 그것은 종과 휘파람이 아니거나 실제로 사용하지 않는 특징이 아니라 , 작업을 더 빠르고 즐겁게 만드는 실제 개선 사항입니다. 우리는 Divi에 대해 당신이 좋아하는 모든 것을 유지하고 다음 단계로 끌어 올렸습니다.

새로운 웹 도구를 사용하여 처음부터 모든 것을 재건했습니다. 페이지가 더 빨리로드되고 컨트롤이 더 잘 작동합니다. 추가 작업없이 디자인을 전체 사이트에서 동일하게 유지할 수 있습니다.

무엇이 향상 되었습니까? 새로운 것은 무엇입니까?

• 완전한 프레임 워크 재건은 오래된 단축 코드를 제거합니다. 모든 것은 새로운 블록 기반 코드에서 더 빠르게로드하고 더 잘 작동합니다.
• 원 클릭 편집을 사용하면 페이지의 모든 부분을 클릭하여 즉시 편집 할 수 있습니다. 더 이상 작은 아이콘을 사냥하거나 메뉴를 파는 것이 더 이상 없습니다.
• 사용자 정의 가능한 브레이크 포인트는 3 개 대신 7 개의 화면 크기를 제공합니다. 정확한 요구에 맞게 각각을 변경할 수 있습니다.
• Advanced Units Support를 사용하면 Calc (), Clamp (), Min (), Max () 및 모든 새로운 CSS 장치를 빌더에 사용할 수 있습니다.
• 디자인 변수를 사용하면 색상, 글꼴, 크기, 이미지, 텍스트 및 링크를 한 곳에 저장할 수 있습니다. 한 번 변경하면 사이트의 모든 곳에서 업데이트됩니다.
• 옵션 그룹 사전 설정을 사용 하면 테두리, 글꼴, 그림자 및 간격을위한 스타일을 저장하고 재사용 할 수 있습니다. 이들은 사이트의 다른 부분에서 작동합니다.
• 중첩 행을 사용하면 다른 행에 줄을 넣을 수 있습니다. 특수 섹션없이 복잡한 레이아웃을 구축 할 수 있습니다.
• 모듈 그룹은 여러 모듈을 하나의 단위로 결합합니다. 이로 인해 복잡한 레이아웃을 쉽게 관리 할 수 ​​있습니다. 사용자 정의 모듈을 만들 수도 있습니다.
• 멀티 패널 작업 공간을 사용하면 원하는 위치에 패널을 배치 할 수 있습니다. 여러 설정을 동시에 열 수 있습니다.
• 속성 관리는 스타일, 내용 및 다른 부품 간의 사전 설정을 복사, 붙여 넣기 및 재설정 할 때 정확한 제어를 제공합니다.
• Light/Dark Mode를 사용하면 일하는 동안 눈에 더 쉬운 테마를 선택할 수 있습니다.
• 캔버스 스케일링을 사용하면 작업 영역 크기를 조정하여 사이트가 다른 화면에서 어떻게 보이는지 확인할 수 있습니다. 미리보기 모드를 전환 할 필요가 없습니다.
• 성능 개선으로 인해 페이지가 더 빠르게로드되고, 더 빠르게 표시되며, 구축 할 때 더 부드럽게 느껴집니다.

오늘 Divi 5를 사용해보십시오

Divi 5는 이제 새로운 웹 사이트 프로젝트에서 사용할 수 있습니다. 우리는 당신의 워크 플로를 더 빠르고 쉽게 만들기 위해 그것을 처음부터 재건했습니다. 공개 알파를 다운로드하여 다음 새 사이트에서 시도하여 개선 사항을 확인하십시오. 새롭고 오래된 모든 Divi 회원에게 무료입니다.

기존 Divi 4 사이트의 마이그레이션 시스템을 개선하는 동안 새로운 사이트에만 사용하는 것이 좋습니다. 신선하게 시작하는 경우 업데이트 된 인터페이스와 더 나은 성능을 시도하기에 좋은시기입니다.

Divi 5를 사용하여 황금 비율을 사용하는 방법

충분히 말했다. Divi 5를 사용하여 웹 사이트에서 황금 비율을 구현할 수있는 방법과 표준화 할 수있는 방법을 자세히 살펴보고 새 섹션이나 페이지를 만들 때마다 수학으로 스크램블 할 필요가 없습니다.

디자인 변수를 사용하면 사이트에서 값을 저장하고 재사용 할 수 있습니다. 그들은 귀하의 사이트의 시각적 정체성 DNA를 형성합니다. Divi 5에는 색상, 글꼴, 이미지, 텍스트 문자열, 링크 및 숫자의 6 가지 유형이 있습니다. 각각은 특정 역할을합니다.

• 색상 변수는 브랜드 색상, 배경, 텍스트 색상 및 사이트 전체에서 사용되는 기타 색조를 보유합니다.
• 글꼴 변수는 제목, 신체 텍스트 및 특수 요소에 대해 글꼴을 일관되게 유지합니다.
• 이미지 변수는 쉽게 사용할 수 있도록 로고 또는 배경 패턴과 같은 일반적인 그래픽을 저장합니다.
• 텍스트 문자열 변수는 슬로건, 연락처 및 법적 메모와 같은 재사용 가능한 컨텐츠를 저장합니다.
• 링크 변수는 소셜 미디어 나 주요 페이지와 같이 자주 사용하는 URL을 유지합니다.
• 숫자 변수는 픽셀, 백분율, EMS, REM 및 뷰포트 장치의 측정을 처리하고 calc ()과 같은 CSS 기능을 사용하여 모든 화면에서 비율을 유지합니다.

황금률 변수 설정

Divi 5 대시 보드를 열고 왼쪽 사이드 바에서 변수 관리자 아이콘을 찾으십시오.

변수 패널을 열려면 클릭하십시오. 색상, 글꼴, 이미지, 텍스트 및 링크 변수를 추가하십시오.

그런 다음 숫자 탭으로 이동하여 황금 비율 변수를 만듭니다. 이 숫자 변수를 추가하여 시작하십시오.

타이포그래피 변수

• H1 크기 : 클램프 (47px, 4.7VW, 76px)
  • 최소 47px : 가장 작은 전화 (320px)에서도 H1은 계층 구조를 설정할 수있을 정도로 크게 유지됩니다. 더 작은 것은 메인 제목으로 영향을 잃습니다.
  • 4.7VW 중간 값 :이 뷰포트 너비 장치는 텍스트 스케일을 원활하게 만듭니다. 1000px 화면 너비, 4.7VW = 47px. 1600px에서 75px로 자랍니다
  • 76px 최대 : 18px × 1.618을 세 번 곱하여이 점을 얻습니다 (18 × 1.618 × 1.618 × 1.618 = 76.244px)
• H2 크기 : 클램프 (29px, 3.5VW, 47px)
  • 최소 29px : 읽을 수있는 상태를 유지하는 동안 모바일에서 H2보다 H2가 H2보다 눈에 띄게 작게 유지됩니다.
  • 3.5VW 스케일링 : 계층을 유지하기 위해 H1보다 비례 적으로 작은 스케일링
  • 최대 47px : 정확히 76px ÷ 1.618 = 47.122px
• H3 크기 : 클램프 (18px, 2.9VW, 29px)
  • 최소 18px : 수직 공간을 절약하기 위해 모바일의 바디 텍스트 크기와 일치
  • 2.9VW 스케일링 : 더 큰 제목보다 부드럽게 자랍니다
  • 최대 29px : 정확히 47px ÷ 1.618 = 29.124px
• H4 크기 : 클램프 (14px, 2.2VW, 22.4px) : ~ 29px ÷ 1.618 = 17.994px를 계속 나누지만 가독성을 위해 최소 22.4px로 설정
• H5 크기 : 클램프 (13px, 1.8VW, 18px) : 기본 글꼴 크기 18px는 여기에서 스케일에 완벽하게 맞습니다.
• 바디 텍스트 크기 : 클램프 (16px, 1.6VW, 18px) : 모든 계산이 발생하는 표준 18px베이스

Clamp () 함수를 사용하면 텍스트가 화면간에 부드럽게 크게 조정할 수 있습니다. 전화의 가장 작은 크기, 스케일링의 중간 값, 데스크탑의 가장 큰 값은 세 가지 값을 차지합니다. 화면이 커짐에 따라 텍스트가 점차 커지기 때문에 중간에 뷰포트 너비 (VW)를 사용합니다. 크기 사이에 갑자기 점프하지 않습니다.

데스크탑에서 우리는 완벽한 황금 비율을 고수합니다. 모바일 화면은 텍스트를 읽을 수 있도록 약간의 조정이 필요합니다. 순수한 계산은 일부 제목에 대해 11px를 제안 할 수 있지만 방문자의 눈을 긴장시킵니다. 14px와 같은 실제 최소값을 설정하면 모든 사람이 컨텐츠를 편안하게 읽을 수 있도록 황금 비율의 시각적 조화를 보존합니다. 비례 관계는 손상되지 않습니다. 그들은 가독성을 위해 약간 바뀌 었습니다.

간격 변수

각 값은 이전에 정확히 1.618을 곱합니다.

• 우주 XS : 클램프 (8px, 1VW, 10px)
  • 왜 10px베이스 : 이것은 모바일에서 가장 작은 편안한 터치 대상 패딩입니다. Industry Wisdom은 44px 최소 터치 대상과 모든면에서 10px 패딩을 권장하며 콘텐츠가 제공됩니다. 10px보다 작 으면 요소가 비좁아집니다.
  • 최소 8px : 360px 미만의 전화에서 10px조차도 너무 넓게 느껴질 수 있습니다. 컨텐츠 공간을 최대화하면서 요소를 구별 할 수있는 상태로 유지하기 위해 8px로 떨어집니다.
  • 1VW : 간격을 비례 적으로 늘리고 1000px 화면 너비에서 정확히 10px를 제공합니다.
• 공간 소규모 : 클램프 (13px, 1.6VW, 16.18px) : 버튼 패딩 및 폼 필드 간격에 이상적입니다.
• 공간 매체 : 클램프 (21px, 2.6VW, 26.18px) : 관련 컨텐츠 블록 사이의 간격에 적합합니다.
• 큰 공간 : 클램프 (34px, 4.2VW, 42.36px) : 스크린 크기로 스케일링하는 동안 주요 섹션 사이에 호흡 공간을 만듭니다.
• 공간 XL : 클램프 (55px, 6.8VW, 68.54PX) : 영웅 섹션 및 주요 기능 블록의 상단/하단 패딩에 적합합니다. 영웅 섹션은 모바일에서도 상당한 패딩이 필요합니다. 50px 미만의 영웅 콘텐츠는 가장자리에 비좁은 느낌입니다.
• 공간 XXL : 클램프 (89px, 11VW, 110.89px) : 드물게 사용하십시오. 극적인 호흡 공간이 필요한 특수 섹션의 경우.

레이아웃 변수

• 기본 열 너비 : 61.803%
  • 우리가 얻는 방법 : 1을 1.618 = 0.61803으로 나눕니다 (또는 61.803%)
  • 2 열 레이아웃에서 주요 콘텐츠 영역에 이것을 사용하십시오.
• 보조 열 너비 : 38.197%
  • 같은 행에서 사이드 바 열에 사용하십시오
  • 100% - 61.803% = 38.197%에서 유래
• 컨테이너 최대 너비 : 1165px
  • 선이 72 자 이상으로 늘어날 때 텍스트를 읽기가 어려워지고
    • 최소 텍스트 크기로 10px를 가정하면 최적의 읽기 너비 (720px) × 황금 비율 (1.618) = 1165px
  • 콘텐츠를 보유하는 기본 섹션 또는 행에 신청
• 황금 높이 비율 : calc (100% / 1.618)
  • 이는 이미지, 호출 항목 상자, 영웅 섹션, 팀 멤버 카드 등과 같은 모듈/모듈 그룹의 높이에서 값으로 사용할 수 있습니다.
  • 이것은 사각형이나 임의의 모양 대신 사각형을 생성합니다. 당신의 두뇌는 완벽하게 액자 사진처럼 이러한 비율이 자연스럽게 매력적입니다.
  • 우리는 이것을 어떻게 얻습니까? 황금 비율은 너비 = 1.618이면 높이 = 1이라고 말합니다. 따라서 너비 = 100%인 경우 높이 = 100%÷ 1.618 = 61.8%. 이 공식은 수학을 자동으로 수행합니다.

이 변수를 Divi 5의 변수 관리자에 저장하십시오. 그런 다음 너비, 높이 또는 최대 세기 필드 옆의 변수 아이콘을 클릭하여 어디서나 사용하십시오. 초기 설정 후 수학이 필요하지 않습니다. 또한 이러한 변수 레이블 중 어느 것도 고정되지 않았습니다. 라벨을 의미있는 것으로 바꿀 수 있습니다.

황금 비율로 영웅 섹션을 만듭니다

우리가 방금 만든 황금 비율 변수를 사용하여 스타터 사이트 컬렉션의 디자인 중 하나에서 영감을 얻은 책의 방문 페이지에 대한 영웅 섹션을 만들어 봅시다. 그리고 그것은 재미있는 부분입니다. 신중하게 계산 된 변수를 사용하여 실제 영웅 섹션에 어떤 영향을 미치는지 볼 수 있습니다.

Divi 5의 Visual Builder에서 새 섹션을 작성하여 시작하십시오. 황금 높이 비율 변수를 사용하여 높이를 설정하십시오. 이것은 당신의 두뇌가 유쾌한 것으로 인식하는 것을 자연스럽게 만듭니다.

공간 XL 변수를 상단 및 하단 패딩에 추가하십시오. 이것은 데스크탑에서 적절하게 확장하면서 모바일에서 충분한 호흡 공간을 제공합니다.

섹션 배경에는 설계 변수를 사용하는 두 가지 주요 옵션이 있습니다.

옵션 1 : 단색 배경

• 배경색 필드를 클릭하고 드롭 다운에서 기본 색상 변수를 선택하십시오. 이것은 당신의 영웅 섹션을 브랜드 아이덴티티와 일치하게 유지합니다. 1 차 색상이 텍스트 대비에 너무 가벼운 경우 대신 2 차 색상 변수를 사용하십시오. 선택한 색상이 텍스트를 읽을 수 있도록 충분한 대비를 제공하는지 확인하십시오. 영감을 유지하면 배경과 1 차 색상의 기울기가 72% 정지 및 90 °로 추가됩니다.

옵션 2 : 이미지 배경

• 배경 이미지 필드를 통해 영웅 이미지 변수 (생성 된 경우)를 적용하십시오. 배경 이미지 설정 옆에 변수 아이콘을 클릭하고 저장된 이미지 변수를 선택하십시오. 배경 이미지를 사용할 때 텍스트 가독성을 위해 오버레이를 추가하십시오. 오버레이 색상을 기본 색상 변수로 설정하고 불투명도를 40-60%로 조정하십시오. 이것은 흰색 텍스트를 선명하고 읽을 수 있도록 이미지를 어둡게합니다.
• 선택한 배경 이미지와 더 잘 대조되면 오버레이에 보조 색상 변수를 사용할 수도 있습니다.

2 열 레이아웃 생성

두 열이있는 행을 추가하십시오.

왼쪽 열 너비를 기본 열 너비 변수로 설정하고 오른쪽 열을 보조 열 너비 변수로 설정하십시오. 또한 "균형 높이"옵션도 켜집니다. 그런 다음 컨테이너 최대 너비 변수가 적용되어 컨텐츠를 더 큰 화면에서 읽을 수 있도록합니다. 이렇게하면 텍스트 라인이 너무 넓어 지거나 특히 더 넓은 화면에서 넓게 늘어납니다.

또한 "사용자 정의 거터 너비 사용"을 활성화하고 1으로 설정합니다. 이는 모듈간에 황금 비율 간격을 사용하는 데 도움이됩니다.

공간 매체 변수를 첫 번째 열 오른쪽과 두 번째 열의 왼쪽 패딩에 적용하여 열 사이에 호흡 공간을 추가하십시오. 이것은 단절된 느낌을주지 않고 열 사이를 충분히 분리합니다.

더 큰 열에는 기본 메시지와 호출 문안을 보유합니다. 작은 열에는 간단한 영웅 이미지가 포함되어 있거나 깨끗하고 텍스트 중심의 디자인을 위해 비어있을 수 있습니다.

흐르는 타이포그래피 설정

기본 열에 두 개의 제목 모듈을 추가하십시오.

첫 번째를 H5로 설정하고 H5 크기 변수를 적용하십시오. 이 예 에서이 텍스트 모듈에는 "베스트셀러 저자"컨텐츠가 제공됩니다. 또한이 텍스트의 보조 색상을 사용하고 대문자 글꼴 스타일을 적용합니다. 우리는 또한 본문 글꼴을 텍스트에 적용하여 독특하게 만들고 체중을 굵게 증가시킵니다.

두 번째를 H1로 설정하고 H1 크기 변수를 적용하십시오. 이것은 당신의 주요 헤드 라인이됩니다. 이 예에서는 저자의 이름을 디자인 변수로 이전에 추가했습니다. 아이디어가 부족한 경우 Divi AI를 사용하여 훌륭한 제목 텍스트를 도울 수 있습니다.

그 아래에 지원 단락에 대한 텍스트 모듈을 추가하십시오. 신체 텍스트 크기 변수 및 색상 변수를 적용하십시오. 핵심 가치 제안을 설명하는 2-3 문장으로 보관하십시오. 이 예에서는 저자에게 간단한 소개를 추가 할 것입니다. Divi AI를 사용하여 여기에서 사본을 도와 줄 수도 있습니다.

우주 공간 매체를 헤드 라인과 단락 사이의 마진으로 사용하여 이러한 요소를 사용하십시오.

그런 다음 텍스트 아래에 버튼 모듈을 추가하십시오. 색상을 적용하십시오. 기본 색상 디자인 변수 및 버튼 텍스트를 사용하고 있습니다.

스페이스 매체 변수를 왼쪽 및 오른쪽 패딩에 추가하고 버튼 크기의 상단과 하단에 작은 공간을 추가하십시오. 이렇게하면 크기가 크지 않고 텍스트에 비례하는 버튼이 생성됩니다. 공간 큰 변수를 상단 마진으로 사용하여 단락과 분리하십시오.

버튼 텍스트는 신체 텍스트 크기 변수를 사용하여 단락 텍스트와 일관성을 유지해야합니다. 또한 이전에 추가 한 버튼 링크 설계 변수도 적용 할 것입니다.

오른쪽 열 스타일링

오른쪽 열은 이미지에서 온 보딩 양식까지 모든 것을 보유 할 수 있습니다. 작은 열에서 이미지를 사용하는 경우 간단하게 유지하십시오. 팀, 사무실 또는 깨끗한 일러스트레이션의 사진이 잘 작동합니다. 이미지 배치를 지나치게 생각하지 마십시오. 일반적으로 열 내에서 중앙을 중앙으로 생각하지 마십시오. 이 예에서는 최근 책의 이미지 디자인 변수를 포함합니다. 또한 상자 그림자를 추가하여 눈에 띄게하십시오.

또한 이미지의 너비를 약 90%로 조정하여 더 정렬 된 것처럼 보일 것입니다.

웹 사이트 컨설팅의 경우 때때로 오른쪽 열을 비워두면 메시지에 전적으로 초점을 맞추는 더 깨끗하고 전문적인 모습을 만듭니다.

결과

다음은 결과입니다.

Divi 5의 캔버스 스케일링을 사용하여 다양한 화면 크기에 걸쳐 영웅의 외관을 테스트하십시오. 변수의 클램프 () 함수는 응답 성을 자동으로 처리해야합니다.

황금 비율 변수는 탁월한 비례 적 조화를 제공하지만 특정 콘텐츠를 기반으로 약간의 조정이 필요할 수 있습니다. 긴 헤드 라인에는 약간 작은 텍스트가 필요할 수 있습니다. 짧고 펀치가 많은 태그 라인은 더 큰 크기를 처리 할 수 ​​있습니다. 일부 브랜드 스타일은 더 단단하거나 느슨한 간격을 요구합니다.

디자인 변수의 아름다움은 이러한 변경 사항이 단 2 번의 클릭 만 소요된다는 것입니다. 가변 관리자를 열고 H1 크기 또는 공간 큰 변수를 조정 한 다음 전체 사이트에서 시프트가 즉시 적용되는 것을 확인하십시오.

H1은 두드러 지지만 모바일 (47px 최소)에서 읽을 수 있어야합니다. 간격은 화면 크기에서는 관대하지만 과도하지 않아야합니다. 2 열 분할은 신뢰와 선명도가 화려한 디자인 요소보다 중요한 서비스 비즈니스에 적합한 고전적이고 전문적인 레이아웃을 제공합니다.

옵션 그룹 사전 설정으로 현장 전체의 황금 비율 유지

설계 변수는 숫자를 처리하지만 옵션 그룹 사전 설정은 전체 사이트에서 일관되게 사용되도록합니다.

우리가 만든 변수를 사용하여 첫 번째 섹션을 구축하십시오. 타이포그래피, 간격 및 레이아웃을 정확하게 가져옵니다. 그런 다음 각 스타일 그룹 (타이포그래피, 간격, 테두리 등) 옆에 사전 설정 아이콘을 클릭하고 옵션 그룹 사전 설정으로 저장하십시오.

이것은 이미 황금 비율을 포함하는 재사용 가능한 설계 블록을 만듭니다. 처음부터 시작하는 대신 새 섹션이나 모듈을 추가 할 때 마다이 사전 설정을 적용하십시오.

사이트 전체에서 비율을 조정 해야하는 경우 변수를 한 번 변경하십시오. 모든 사전 설정을 사용하여 전체 사이트 전체에서 업데이트됩니다. 변경을 위해 개별 페이지를 통해 사냥이 없습니다.

황금 비율은 수동 작업없이 일관성을 유지합니다.

아름다운 디자인에 대한 수학, Divi 5는 쉽게 만듭니다

레이아웃이 "거의 옳은"것처럼 보일 때 잔소리감이 마침내 의미가 있습니다. 당신은 까다 롭지 않았습니다 : 당신의 두뇌는 느끼는 비례 관계를 쫓고있었습니다.

황금 비율은 신뢰할 수있는 출발점을 제공하지만 대부분의 빌더는 매번 수학을합니다. Divi 5의 설계 변수 시스템은 완전히 변경됩니다. 1.618 비율을 한 번 계산하고 변수로 저장 한 다음 사이트의 어느 곳에서나 적용하려면 클릭하십시오.

50 페이지에서 간격을 조정해야합니까? 각 페이지를 개별적으로 편집하는 대신 하나의 변수를 변경하십시오. 황금 비율을 따르는 일관된 타이포그래피를 원하십니까? 클램프 () 값을 한 번 설정하고 모든 장치에서 완벽하게 스케일을보십시오.

수학은 어디에서나 작동하지만 Divi 5는 실제로 지속적으로 사용하는 것이 실용적입니다.