Divi 5로 컬러 시스템을 만드는 방법

임의의 색상 선택은 거의 응집력있는 디자인으로 이어지지 않습니다. 전문적으로 웹 사이트를 구축하는 경우 의도적 인 시스템이 필요합니다. 색상 관리 및 설계 변수를 사용하여 Divi 5 내부에서 실제 색상 시스템을 구축 할 수 있습니다. 이들은 시각적 편집기에서 직접 설정 한 색상이며 모든 색상 필드에서 액세스 할 수 있으며 다른 많은 편의 시설이 제공됩니다 (아래에서 보여 드리겠습니다).

이 게시물은 Divi 5에서 유연하고 확장 가능한 색상 시스템을 설정하는 방법을 보여줍니다.

색상 시스템이란 무엇입니까?

색상 시스템은 기본적으로 사이트에서 일관되게 사용되는 미리 계획된 색상 팔레트입니다. 그것은 모든 것이 무작위로 함께 던지지 않고 의도적으로 스타일링되는 것처럼 보이도록 도와줍니다. 좋은 시스템을 위해서는 일반적으로 필요합니다.

• 기본 색상 : 메인 브랜드 색상.
• 보조 색상 : 1 차를 지원하고 대조합니다.
• 텍스트 색상 : 제목 및 단락에 대해 명확하고 읽을 수 있습니다.
• 악센트 : 경고, 통지 및 기타 중요한 것들 (선택 사항)에 대한 기타 색상.
• 배경색 : 일반적으로 중립 또는 미묘한 색조.

60-30-10 규칙은 웹 디자인의 색상에 적용됩니다. 일반적으로 중립 색상 (섹션 배경 및 부정적인 공간)은 디자인의 60%, 30%의 기본 색상, 나머지 10%의 2 차/악센트 색상에 사용됩니다.

웹 사이트 색상을 선택하는 방법

웹 사이트에 사용 된 브랜드 색상과 색상은 가볍게 결정되지 않습니다. 의도적 인 컬러 팔레트를 만드는 것은 디자이너의 기술, 컬러 심리학, 산업 및 브랜드 차별화에 달려 있습니다. 그러나 로고 변형과 같은 기본 색상과 브랜드 자산이 있으면 설계 시스템을 만들 수 있습니다.

디자인 리소스가 제한된 경우 웹 사이트 빌드를 준비하기 위해 몇 가지 빠른 작업을 수행 할 수 있습니다. 먼저, 색상 심리학을 읽으십시오. 전달하려는 브랜드 가치 (신뢰, 젊음, 혁신 등)를 찾아 해당 가치를 기반으로 색상을 일치 시키려고 노력하십시오. 그런 다음 브랜드 가치에 적합하다고 생각되는 일부 가구 인식 가능한 브랜드를 살펴보십시오. 그들은 어떤 색상을 사용합니까? 웹 사이트, 광고 및 소셜 게시물에서 어떻게 사용합니까?

귀하의 회사 가치는 귀하가하는 작업 유형에 따라 결정될 수도 있습니다. 자물쇠 제조업 자와 배관공은 신뢰할 수 있어야하므로 Blue는이를 전달하는 좋은 방법입니다. 금융 기획자와 조경사는 성장과 지속 가능성 (각 분야에서)을 다루므로 녹색은 좋은 앵커입니다. 꽃 농민, 보육 센터 및 레스토랑은 에너지와 활력을 브랜드에 연결하기 위해 빨간색과 노란색에 기대어있을 수 있습니다. 일반적인 아이디어가 있으면 쿨러와 같은 것을 사용하여 간단한 팔레트를 만듭니다.

Divi 5에서 색상 시스템 구축

Divi 5는 Design Variable Manager와 함께 제공되며, 이는 전역 색상을 처리하는 가장 쉬운 방법입니다. 그것에, 당신은 당신이 당신이 상자 밖으로 작업 할 수 있도록 사전 할당 된 4 개의 글로벌 색상을 가지고 있습니다. 그들은 다음과 같습니다.

1. 원색
2. 보조 색상
3. 제목 텍스트 색상
4. 바디 텍스트 색상

1 단계 : 기본 색상을 변수로 정의하십시오

Divi의 왼쪽 사이드 바에서 디자인 변수 관리자를 엽니 다. 색상 섹션을 찾으면이 네 가지 다른 기본값이 표시됩니다.

이 네 가지 레이블은 삭제할 수 없지만 각각을 설정할 색상을 선택할 수 있습니다. 이 네 가지 외에도 전역 색상 추가 버튼을 클릭하여 원하는만큼 색상을 추가 할 수 있습니다. 계속해서 색상 생성기에서 색상의 16 진수 값을 입력하십시오.

이러한 변수는 Divi의 Visual Builder의 모든 곳에서 즉시 사용할 수있게되며, 이는 매우 편리합니다. 그러나 저장하십시오!

2 단계 : HSL 색상으로 음영 및 색조를 만듭니다

Divi의 HSL 필터를 사용하여 색조 (색상의 가벼운 버전)와 색조 (어두운 버전의 색상)를 만들 수 있습니다. 이 프로젝트의 경우 기본 및 보조 색상에만 변형됩니다. 색상 팔레트 생성기를 사용하여 이러한 색상 변형을 만들 수 있습니다.

첫 번째 단계는 또 다른 글로벌 색상을 만드는 것입니다. 그러나 16 진수를 붙여 넣는 대신 기존 색상을 선택하여 변형 (음영 및 색조)을 만듭니다.

이제 변형을 만들기 위해 해당베이스 색상에 필터를 적용해야합니다. 컬러 칩을 클릭 한 다음 "필터 색상"을 선택하거나 새로운 상대 색상 변수의 색상 견본을 클릭하십시오.

각 색상 변형에 대해이 작업을 수행하십시오. 색상 변형에 인식 가능한 이름을 제공하고 저장하십시오.

예를 들어, 기본 색상은 상당히 어둡기 때문에 약간의 가벼운 색조와 몇 개의 어두운 색조를 추가 할 수 있습니다. 색상 시스템을 페이지 디자인에 적용 할 때 많은 옵션을 제공해야합니다.

보조 및/또는 악센트 색상에 대한 위의 단계를 반복하십시오. 이러한 변형을 만들 때 항상 기본 색상을 선택한 다음 필터를 적용하십시오. 그렇게하면 기본 색상을 바꾸면 이러한 변형이 적합합니다.

Divi로 디자인에 색상을 적용합니다

당신의 변수는 지금 존재합니다. 그것들을 사용할 시간. 우리는 빈 Divi 페이지로 시작하여 멋지게 설계된 레이아웃을 향해 순차적으로 작동합니다.

1 단계. 페이지의 와이어 프레임을 만듭니다

빈 페이지 대신 와이어 프레임에서 시작하여 색상 시스템을 더 잘 이해하는 데 도움이됩니다. 페이지의 일반적인 구조와 흐름을 이해하면 디자인을 선택할 수 있습니다. Divi의 많은 미세한 레이아웃 팩 또는 스타터 사이트 중 하나를 사용할 수도 있습니다. 이미 정의 된 색상이 있는지는 중요하지 않습니다. 우리는 이것을 쉽게 변경할 수 있습니다.

이 예에서는 컨설팅 레이아웃 팩을 수정하고 홈페이지 레이아웃을 사용하기로 결정했습니다. 비슷한 일을하면 사전 설정을 가져올 수 있습니다. 그러나 사전 설정에서 색상을 편집하려고합니다. 단순성을 위해 모듈/요소 레벨에서 스타일을 직접 수정합니다.

2 단계. 타이포그래피 및 색상

기본적으로 Divi는 전역 제목 및 신체 텍스트 색상을 사용하여 텍스트를 깨끗하고 읽을 수 있도록합니다. 모듈이나 사전 설정에서 텍스트 색상을 변경하여 항상 이러한 미리 정해진 색상 선택을 무시할 수 있지만 너무 자주 수행 할 필요는 없습니다.

모듈에서 제목 색상이 어떻게 설정되지 않은지 주목하십시오. Divi는 전역 색상을 제목 및 신체 텍스트에 자동으로 할당합니다. 물론 다른 색상을 선택하여이를 무시할 수 있습니다.

링크가 더 눈에 띄게 만들고 클릭을 끌어들이는 색상을 사용자 정의 할 수 있습니다.

스타일링하려는 텍스트가 포함 된 다른 모듈 (제목 및 텍스트 모듈 외에)이있을 수 있습니다. 연락처 양식, 카운트 다운 타이머 및 블로그 모듈과 같은 모듈은 모두 색상을 고유하게 적용해야 할 수 있습니다.

3 단계. 스타일링 버튼

Divi의 버튼은 기본적으로 간단하며 기본 색상을 취합니다. 그러나 당신이 다른 것을 원한다면 당신은이 결정에 강요되지 않습니다. 모듈의 설정 패널을 열고 디자인 탭으로 이동하고 버튼을 선택하십시오. 버튼 설정 아래에서 "버튼에 맞춤형 스타일을 사용하십시오"를 활성화하십시오. 배경을 전 세계 색상 색상으로 설정하고 버튼 텍스트를 흰색과 같은 읽기 쉬운 색상으로 설정하십시오.

페이지에 두 개의 버튼이 나란히 있거나 여러 버튼이있는 경우 2 차 색상이나 다른 악센트를 사용하여 보조 버튼 스타일에 대한 별도의 버튼 사전 설정을 만들 수 있습니다.

색조 및/또는 음영으로 호버 상태를 만듭니다

호버 상태는 상호 작용과 목적 감각을 더합니다. 호버 스타일과 함께 이전 색조와 색조를 사용하십시오. 버튼에서 구현하는 것은 명백하지만 다른 곳에서도 미묘하게 사용할 수 있습니다.

호버 상태를 활성화하려면 배경색 옵션 옆의 커서 아이콘을 클릭하십시오. 호버 배경색을 설정하십시오. 사용자가 버튼 위로 가리면 시각적으로 응답하여 상호 작용을 자연스럽게 안내합니다.

4 단계. 컬러 사전 설정 및 그라디언트가있는 섹션 작성

Divi의 섹션에는 기본적으로 투명한 배경이 있습니다. 이것은 UNSET가 남아 있으면 일반적으로 흰색으로 표시 될 것임을 의미합니다. 주요 색상 중 하나의 색조를 기반으로 중립 색상 변형을 만들어 음모를 더할 수 있습니다.

이 배경색은 검은 색에 가깝지만 주제 '응집력에 미묘한' '을주는 기본 색상과 동일한 기본 색조를 공유합니다.

색상 변형을 사용하여 기울기를 실험 할 수도 있습니다. 여기서 속임수는 너무 많은 색상 조합을 사용하지 않는 것입니다. 컬러 페어링과 계층 구조를 기반으로 한 징계, 응집력있는 디자인을 원합니다.

이 시점에서 알림은 순서대로 진행됩니다. 이러한 컬러 페어링 및 결정의 대부분을 사전 설정 (옵션 그룹 또는 요소 사전 설정)에 저장하려고합니다. 사전 설정을 통해 디자인에서 디자인 변수를 만들고 구현 한 후에는 설계 시스템을 사용하여 후속 페이지를 훨씬 더 빨리 만들 수 있습니다. 또한 사이트 전체에서 일관된 설계 패턴으로 작업 할 수 있습니다.

나중에 색상이 약간 꺼져 있다고 판단하면 기본 색상의 HSL 값을 조정할 수 있으며 해당 색상의 모든 인스턴스 (및 해당 색상을 기반으로 비교적 생성)가 변경됩니다.

Divi 5 색상 시스템을 마무리합니다

사려 깊은 컬러 시스템은 웹 디자인에서 가장 쉬운 승리 중 하나이며 Divi 5는 귀하에게 도움이되는 도구를 제공합니다. 몇 단계 만 있으면 다음과 같이 할 수 있습니다.

• 핵심 브랜드 색상을 재사용 가능한 설계 변수로 정의하십시오
• HSL 필터로 유용한 색조와 색조로 확장하십시오.
• 텍스트, 버튼, 양식 및 섹션에 지속적으로 적용하십시오
• 모든 새 페이지가 동일한 규칙을 따를 수 있도록 선택을 사전 설정으로 저장하십시오.

보상은 미학보다 큽니다. 단색 시스템은 명확성을 만들고 방문자를 행동으로 안내하며 브랜드가 사이트의 모든 구석에서 응집력을 느끼게합니다. Divi의 모든 것이 가변 중심이기 때문에 기본 색상으로의 하나의 조정은 전체 사이트를 통해 즉시 파열 될 수 있습니다. 그것은 당신이 확장 할 때 당신의 디자인이 함께 유지 될 것이라는 점점 덜 어리 석고 자신감을 줄임을 의미합니다.