Divi 4와 Divi 5의 컬러 피커 비교

색상은 한 단어를 읽기 전에 톤을 설정하지만 전통적인 컬러 피커는 진정한 브랜드 일관성을 달성하기가 어렵습니다. 정밀한 대신에, 당신은 종종 추측과 근사치 근사치를 얻습니다.

이것이 Divi 5가 색상 시스템을 완전히 재구성 한 이유입니다. 이 게시물에서는 Divi 4의 컬러 피커와 직접 비교하여 얼마나 강력하고 유연한지를 보여줍니다.

컬러 피커가 비교되었습니다

그들을 나란히 놓으면 새로운 인터페이스가 얼마나 강력한지를 즉시 알 수 있습니다. Divi 4의 컬러 피커는 친숙한 무지개 스펙트럼과 드래그-선택 접근 방식으로 우리에게 도움이되었습니다.

당신은 그 흰색 원 주위를 드래그하여 색상을 선택하고, 16 진 코드로 작업하며, 저장된, 글로벌 및 최근 탭을 통해 물건을 정리할 수 있습니다. 컬러 견본의 작은 흰색 삼각형은 어떤 글로벌 색상인지를 알려주었습니다.

외모를 넘어 Divi 4의 컬러 피커는 훌륭한 기초를 가지고있었습니다. 매직 컬러 도구는 꽤 똑똑했으며, 페이지 색상과 최근 선택을 통해 실제로 함께 작동하는 팔레트를 제안했습니다. 이 비트는 매번 처음부터 시작합니다.

Divi 4가 제한된 곳

그러나 모든 것이 완벽한 것은 아닙니다. 모든 것은 16 진수 또는 RGBA 코드 만 사용했습니다. 파란색의 가벼운 버전을 얻는 것은 다른 앱을 추측하거나 사용하여 파악하는 것을 의미했습니다. 브랜딩이 기본 브랜드보다 20% 어두운 색 또는 40% 가벼운 색상이 필요한 경우 Divi 4는이 작업을 수행 할 수 없었습니다.

각 색상은 그 자체로 살았습니다. Divi 자체 내부에서 색상이 서로 관련되는 스마트 컬러 시스템을 구축 할 수 없었습니다. 적절한 대비 비율을 구축하면 Divi 이외의 수동 작업이 필요했습니다.

Divi의 5 가지 시각적 변화는 무엇입니까?

Divi 5는 비주얼 컬러 피커를 유지하지만 더 많은 옵션이있는 정확한 슬라이더를 추가합니다 (더 자세히 설명합니다). 글로벌 탭은 색상이 포함 된 Divi의 변수 시스템에 직접 연결되는 동적 변수 아이콘으로 발전했습니다.

컬러 견본 자체가 더 똑똑해졌습니다. 실제로 작업중인 색상과 시스템에 어떻게 연결되는지 보여줍니다.

당신이보고있는 것은 개별 색상 선택에서 색상 시스템으로 이동하는 것입니다. Divi 4는 "이 특정 파란색이 필요합니다." Divi 5는 "기본 색상보다 20% 가벼운 파란색이 필요하며 브랜드 색상을 모두 변경할 때 자동으로 업데이트됩니다."

인터페이스가 변경 되었기 때문에 인터페이스가 변경되어야했습니다.

Divi 5의 새로운 컬러 피커

오래된 접근 방식은 현대적인 디자인 워크 플로우를 처리 할 수 없었기 때문에 우리 팀은 색상 시스템을 재건했습니다. 이 새로운 피커는 색조, 채도 및 가벼움 (HSL), 상대 색상 관계 및 Divi 5의 가변 시스템과의 깊은 통합을 중심으로합니다.

격리 된 16 진 코드로 작업하는 대신 이제 하나의 색상을 변경하면 모든 관련 변형을 자동으로 업데이트하는 연결된 컬러 패밀리를 구축 할 수 있습니다. 색조, 채도, 가벼움 및 불투명도를위한 별도의 슬라이더가있어 정확한 조정을 할 수 있습니다. 인터페이스는 시각적 표시기를 통해 어떤 유형의 색상을 가지고 있는지 정확하게 보여줍니다.

컬러 견본은 이제 자신에 대한 정보를 표시합니다. 색상이 정적 값, 변수 또는 HSL 수정이 적용된 상대 색상인지 확인할 수 있습니다. 시스템은 알아야 할 모든 색상 세부 사항을 보여줍니다.

새로운 시스템이 실제로 작동하는 방식

상대 색상은 기본 색상 변수로 시작하여 변형을 적용 할 수 있습니다. 기본 파란색 변수를 골라 조명을 20%줄이고 "Royal Deep Blue"변수로 저장하십시오.

Divi 5의 HSL 컬러 피커 대 Divi 4의 컬러 피커

두 시스템 모두 사이트 전체의 색상을 관리하지만 완전히 다른 방식으로 작동합니다. 이 차이를 이해하면 인터페이스가 왜 그렇게 극적으로 변경되어야하는지와 새로운 접근 방식이 건물 속도를 높이는 이유를 설명합니다.

Divi 4의 글로벌 색상이 어떻게 작동하는지

Divi 4의 글로벌 색상은 기본 팔레트 시스템처럼 작동했습니다. 브랜드를 한 번 저장 한 다음 정확한 그늘이 필요할 때마다 클릭하십시오. 나중에 다른 파란색으로 파란색을 교체하고 전체 사이트에서 모든 버튼, 헤더 및 배경 업데이트를 시청하십시오.

대부분의 사람들은 이런 식으로 3-4 개의 주요 브랜드 색상을 설정했습니다. 링크에 #2E86C1 또는 #3498dB를 사용했는지 기억하려고 시도하거나 기억하려고합니다.

문제는 나중에 8 개의 글로벌 색상을 가졌을 때 나중에 왔으며 왜 그 회색 음영을 저장 한 이유를 기억하지 못했습니다. 텍스트에 대한 것이 었습니까? 국경? 배경 오버레이? 글로벌 색상에는 메모리를 조깅 할 레이블이나 설명이 없었습니다.

Divi 5가 디자인 변수로 이동 한 이유

디자인 변수는 이제 단순한 색상 이상의 것을 처리합니다. 글꼴, 간격 번호, 이미지 및 텍스트 문자열은 모두 동일한 처리를받습니다. 모든 것이 다른 패널 주위에 떠 다니는 대신 하나의 변수 관리자에 있습니다.

각 변수는 적절한 이름과 설명을 얻습니다. "Global Color 3"대신 "헤더 텍스트 그레이"또는 "미묘한 배경 오버레이"라고 부를 수 있습니다. 6 개월 후, 당신은 그것이 무엇인지 정확히 알 수 있습니다.

그러나 여기에 일이 흥미로워지는 곳이 있습니다. 변수는 서로를 참조하고 관계를 형성 할 수 있습니다. 기본 녹색을 기초로 설정하십시오. 그 녹색을 취하고 밝기를 줄이는“화상 이끼”를 만듭니다. 그런 다음이 번의 이끼 색상을 가져오고 불투명도를 15%로 떨어 뜨리는 "Shadow (Burnt Moss)"를 만듭니다.

물론 기본 녹색을 주황색으로 변경하면 세 가지 변형이 모두 자동으로 업데이트됩니다. 번트 버전은 선택한 색상보다 덜 밝게 유지되며 그림자는 그에 따라 적응합니다. 관계가 고집됩니다.

실제로 주요 차이

글로벌 색상은 여러 지점에서 동일한 색상을 갖는 것을 의미했습니다. 변수는 색상 관계가 함께 적응하는 것을 의미합니다. 호버 상태는 기본 색상과 연결되어 있습니다. 그림자 색상은 임의의 회색으로 생활하는 대신 브랜드 팔레트와 관련이 있습니다. 시스템은 추가 작업을 수행하지 않고도 이러한 연결을 유지합니다.

Divi 4 vs Divi 5에서 색상 시스템 설정

적절한 색상 시스템을 작성하면 귀하의 웹 사이트가 전문적으로 보이는지 또는 임의의 선택의 패치 워크를 좋아하는지 여부가 결정됩니다. 두 가지 버전 모두 색상을 구성하는 방법을 제공하지만 접근 방식은 더 다를 수 없었습니다. 각 버전에서 컬러 시스템을 구축하는 방법과 디자인 워크 플로우에 프로세스가 중요한 이유는 다음과 같습니다.

Divi 4에서 색상 설정

귀하의 색상 선택은 방문자가 귀하의 웹 사이트를 경험하는 방법을 형성합니다. Color Management Divi 4에 대한 접근 방식을 살펴보십시오.

1. 글로벌 색상을 추가하십시오

Divi 4의 컬러 설정은 글로벌 컬러 시스템 및 수동 조직에 의존했습니다. 요소의 색상 옵션을 탐색하는 것으로 시작한 다음 "글로벌"탭으로 탐색하거나 색상 선택기 옆에 플러스 아이콘을 클릭하거나 클릭하여 기존 글로벌 색상을 편집하여 전역 색상을 만듭니다. 인터페이스를 사용하면 16 진 코드를 직접 입력하거나 비주얼 피커를 사용하여 색상을 선택할 수 있습니다.

이미 변환하려는 색상을 적용하고 있습니까? 마우스 오른쪽 버튼을 클릭하고 "글로벌로 변환"을 선택하십시오. 이렇게하면 글로벌 팔레트에 정확한 색상을 추가하고 모듈을 전환하여 전역 버전을 사용합니다. 처음부터 글로벌 무언가를 만들어야한다는 것을 알게되면 매우 도움이됩니다.

마법 색상 제안

Divi 4의 Magic Color 기능은 기존 디자인 선택에서 조정 된 팔레트를 구축합니다. 이 도구는 어떤 색상이 함께 작동하는지 추측하는 대신 이미 사용한 내용을 기반으로 제안을 만듭니다.

활성 색상의 아이 드로퍼 아래에서 세 개의 점 (엘립스)을 찾으십시오. 그 점들을 클릭하여 많은 색상 팔레트 제안을 받으십시오. Divi는 이미 페이지와 최근 프로젝트에서 어떤 색상을 사용했는지 살펴보고 함께 작동 해야하는 조합을 보여줍니다.

2. 글로벌 색상 적용

글로벌 색상을 설정하면 그것들을 사용하는 것이 매우 간단합니다. 색상을 적용하려는 모듈을 클릭하십시오. 그런 다음 디자인 탭으로 이동하여 변경하려는 색상 설정을 찾으십시오.

글로벌 색상 팔레트를 보려면 글로벌을 클릭하십시오. 글로벌 컬러 견본을 클릭하면 즉시 모듈에 적용됩니다.

3. 글로벌 색상 수정

여기가 흥미로워지는 곳이 있습니다. 글로벌 색상을 변경하려면 사용하는 모든 모듈을 찾을 필요가 없습니다. 색상 설정으로 이동하여 전역 탭을 클릭하고 편집하려는 색상을 찾으십시오.

Divi 5에서 색상 설정

Divi 5에서 적절한 색상 시스템을 구축하려면 4 단계가 걸립니다. 이 접근법에 따라 약간 다른 그늘이 필요할 때마다 색 코드를 추측하는 오래된 방법을 능가합니다.

1. 기본 색상 변수를 만듭니다

Design Variable Manager를 열고 기본 브랜드 색상을 기존 1 차 및 보조 색상 변수로 추가하십시오. 또한 3 차 색상이나 악센트 색상과 같은 더 많은 색상을 추가 할 수도 있습니다. 이것들은 당신의 기초 색상이됩니다. 기본 색상은 시각적 정체성을 정의하는 주요 브랜드 팔레트를 나타내야합니다.

2.베이스에서 상대 색상을 구축하십시오

이제 기본 색상에 링크 된 색상 변형을 만들 수 있습니다. 디자인 변수 관리자에 새 색상을 추가하고 기본 색상을 선택하십시오.

HSL 슬라이더를 사용하여 조정하십시오. 제목 텍스트의 경우 25%, 신체 텍스트의 경우 20%를 낮추십시오. 호버 상태의 경우 가벼움을 20% 증가 시키거나 음소거 된 배경의 채도를 변경하십시오. 이러한 변형은 "Deep Orange"및 "Bright Crimson"또는 "Hover State (1 차 색상)", "Muted Background (Secondary Color)"와 같은 명확한 이름을 부여합니다.

모든 설계 변수를 쌓을 수 있으므로 생성 된 변수로부터 더 많은 색상을 구축 할 수 있습니다. 그들은 모두 시스템에 연결되어 있습니다.

나중에 기본 색상을 변경하면 이러한 관련 색상이 자동으로 업데이트되어 관계가 그대로 유지됩니다.

3. 요소에 변수를 적용하십시오

모든 색상 필드에서 동적 컨텐츠 아이콘을 사용하여 변수에 액세스하십시오. 인터페이스는 각 색상이 정적인지, 변수 또는 HSL 수정을 가진 상대 색상인지를 보여줍니다.

일관성을 깨뜨리는 임의의 일회성 색상을 만드는 대신 조직화 된 색상 시스템에서 선택하십시오.

기본 또는 구성된 색상의 속성을 변경하면 이들로부터 상속 된 모든 것이 새로운 변경 사항에 자동으로 적응됩니다. 브랜드 새로 고침을 결정할 때 수동으로 문지르고 색상을 교체 할 필요가 없습니다.

4. HSL 색상 변수를 참조하는 사전 설정

특정 설계 부품에 대한 옵션 그룹 사전 설정을 사용하여 전략을 구축하십시오. 이 사전 설정은 요소 사전 설정과 다릅니다. 옵션 그룹 사전 설정 변수를 사용하여 배경, 테두리 또는 텍스트 색상과 같은 스타일 그룹을 대상으로합니다.

기본 색상을 기반으로 섀도우 색상 변수를 사용하여 그림자를 옵션 그룹 사전 설정으로 저장하십시오.

열, 섹션, 행 및 모듈 에서이 사전 설정을 사용하십시오.

다른 색상에 대한 별도의 옵션 그룹 사전 설정을 만듭니다. 하나는 악센트 색상을 가진 경계, 다른 하나는 보조 색상의 텍스트 등을 위해 다른 스타일을 변경하지 않고 요소에 사전 설정을 혼합하십시오.

요소 사전 설정 컨텐츠 및 모든 스타일을 포함한 전체 모듈 설정을 저장합니다. 옵션 그룹 사전 설정 및 사용 된 색상 변수의 스타일 버튼 잠금에 대한 요소 사전 설정. 즉시 적용하면 정확히 동일한 버튼이 제공됩니다.

5. 사이트에서 색상을 롤아웃합니다

확장 속성 기능은 요소간에 설계 속성을 복사 할 수 있도록하여이를 더욱 발전시킵니다. 변수를 사용하여 아이콘의 색 구성표를 완성한 경우 해당 속성을 행, 페이지 또는 전체 사이트의 다른 아이콘으로 확장 할 수 있습니다.

이것은 수동 작업없이 일관된 스타일을 퍼 뜨리면서 색상 관계를 유지합니다.

Divi 5의 기능 찾기 및 교체 기능은 기존 사이트의 전환 프로세스 속도가 흩어져있는 정적 색상으로 속도를 높입니다. 색상 필드를 마우스 오른쪽 버튼으로 클릭하고 "찾기 및 교체"를 선택하십시오.

특정 요소, 전체 섹션 또는 전체 페이지를 대상으로 범위를 설정하십시오. "REPLEC"에서 글로벌 탭에서 새 변수를 선택하십시오. "발견 된 모든 값을 교체"하여 해당 색상의 모든 인스턴스를 변수로 바꾸십시오.

이것은 이전 설계를 새로운 색상 시스템으로 마이그레이션 할 때 완벽하게 작동합니다. 몇 초 만에 수십 개의 유사하지만 동일한 오렌지를 하나의 일관된 변수로 교체 할 수 있습니다.

모든 측면은 함께 작동합니다. 색상 변수를 설정하고, 찾기 및 교체를 사용하여 기존 불일치를 정리 한 다음, 확장 속성을 사용하여 새 섹션을 구축 할 때 설계 표준을 유지합니다. 그런 다음 옵션 그룹 및 요소 사전 설정을 사용하여 스타일을 쉽게 적용 할 수 있으므로 정상적으로 페이지를 작성하십시오.

새로운 컬러 피커는 워크 플로에 맞습니다

Divi 5의 컬러 시스템은 몇 년 동안 프로젝트를 둔화시킨 워크 플로 문제를 해결합니다. 더 이상 올바른 그늘을 찾기 위해 외부 도구를 사용할 필요가 없습니다. HSL 슬라이더는 빌더를 떠나지 않고 정확한 제어를 제공합니다.

색상 결정은 설계 변수를 통해 연결되어 있습니다. 기본 브랜드 색상을 변경하면 관계를 유지하면서 관련 색상이 자동으로 업데이트됩니다. 이것은 눈으로 만든 모든 파란색 변형을 수동으로 사냥합니다.

오늘 Divi 5의 새로운 색상 시스템을 사용해보십시오!