Comparando os catadores de cores Divi 4 e Divi 5

As cores definem o tom antes que uma única palavra seja lida, mas os catadores tradicionais dificultam a obtenção de consistência da marca verdadeira. Em vez de precisão, você geralmente obtém adivinhação e aproximações próximas.

É por isso que o Divi 5 reimaginou completamente seu sistema de cores. Neste post, compararemos diretamente com o Picker de cores do Divi 4 e mostraremos o quanto mais poderoso e flexível se tornou.

Os catadores de cores comparados

Coloque -os lado a lado e você verá imediatamente o quão poderoso é a nova interface. O seletor de cores da Divi 4 nos serviu bem com seu familiar espectro de arco-íris e abordagem arrastada para seleção.

Você arrastaria esse círculo branco para escolher cores, trabalhar com códigos hexadecimianos e organizar as coisas através das guias salvas, globais e recentes. Esses pequenos triângulos brancos em amostras de cores disseram quais eram as cores globais.

Além da aparência, o seletor de cores do Divi 4 tinha uma ótima base. A ferramenta Magic Color era bastante inteligente, puxando as cores da sua página e escolhas recentes para sugerir paletas que realmente funcionaram juntas. Esta batida começa do zero toda vez.

Onde o divi 4 ficou limitado

No entanto, nem tudo era perfeito. Tudo usou apenas códigos hexadecimais ou rgba. Obter uma versão mais leve do seu azul significava adivinhar ou usar outro aplicativo para descobrir. Se sua marca geralmente precisar de 20% de cores mais escuras ou 40% mais claras que a cor principal da marca, o Divi 4 não poderá fazer isso por você.

Cada cor viveu por si só. Você não poderia criar sistemas de cores inteligentes, onde as cores estão relacionadas entre si no próprio Divi. A construção de taxas de contraste adequadas levaram o trabalho manual fora da Divi.

Quais são as 5 mudanças visuais do divi

O Divi 5 mantém o seletor de cores visuais, mas adiciona controles deslizantes precisos com muito mais opções (discutiremos isso mais). A guia global evoluiu para um ícone de variável dinâmica que se conecta diretamente ao sistema variável da Divi, que inclui cores.

As próprias amostras de cores se tornaram mais inteligentes; Na verdade, eles mostram com que tipo de cor você está trabalhando e como ela se conecta ao seu sistema.

O que você está vendo é o Divi se movendo da colheita individual de cores para um sistema de cores. O Divi 4 foi construído para "Eu preciso deste azul específico". O Divi 5 foi construído para “Eu preciso de um azul que seja 20% mais leve que minha cor principal e atualizações automaticamente quando eu mudo completamente as cores da minha marca”.

A interface teve que mudar porque o que mudou.

O novo seletor de cores do divi 5

Nossa equipe reconstruiu o sistema de cores porque a abordagem antiga não poderia lidar com os fluxos de trabalho de design modernos. Esse novo seletor se concentra em torno de matiz, saturação e leveza (HSL), relações de cores relativas e profunda integração com o sistema variável do Divi 5.

Em vez de trabalhar com códigos hexadecipais isolados, agora você pode criar famílias de cores conectadas, onde alterar uma cor atualiza automaticamente todas as variações relacionadas. Existem controles deslizantes separados para matiz, saturação, leveza e opacidade, que permitem fazer ajustes precisos. A interface mostra exatamente com que tipo de cor você está trabalhando através de indicadores visuais.

As amostras de cores agora exibem informações sobre si mesmas. Você pode ver se uma cor é um valor estático, uma variável ou uma cor relativa com modificações HSL aplicadas. O sistema mostra todos os detalhes de cores que você precisa conhecer.

Como o novo sistema realmente funciona

As cores relativas começam com uma variável de cor base e permitem aplicar variações. Escolha sua variável azul primária, reduza a leveza em 20%e salve -a como a variável “Royal Deep Blue”.

Picker de cor HSL do Divi 5 vs Picker de cores do Divi 4

Ambos os sistemas ajudam a gerenciar cores em seu site, mas funcionam de maneiras completamente diferentes. Compreender essa diferença explica por que a interface teve que mudar tão dramaticamente e por que a nova abordagem acelera a construção.

Como funcionam as cores globais do Divi 4

As cores globais da Divi 4 funcionaram como um sistema básico de paleta. Salve sua marca azul uma vez e clique nele sempre que precisar dessa tonalidade exata. Mais tarde, troque aquele azul para um diferente e assista a cada botão, cabeçalho e atualização de plano de fundo em todo o site.

A maioria das pessoas configura três ou quatro cores da marca principal dessa maneira. Ele supera a caça através de códigos hexadecimais ou tentando lembrar se você usou #2E86C1 ou #3498DB para seus links.

O problema veio mais tarde, quando você tinha oito cores globais e não conseguia se lembrar por que você salvou aquele tom de cinza em particular. Foi para texto? Fronteiras? Sobreposições de fundo? As cores globais não tinham rótulos ou descrições para mover sua memória.

Por que o Divi 5 mudou para o design variáveis

As variáveis de design agora lidam com mais do que apenas cores. Fontes, números de espaçamento, imagens e seqüências de texto recebem o mesmo tratamento. Tudo vive em um gerente de variável em vez de flutuar em torno de diferentes painéis.

Cada variável recebe um nome e descrição adequados. Em vez de "Global Color 3", você pode chamá -lo de "texto de cabeçalho cinza" ou "sobreposição de fundo sutil". Seis meses depois, você saberá exatamente para que serve.

Mas é aqui que as coisas ficam interessantes. As variáveis podem se referir e formar relacionamentos. Defina seu verde primário como a base. Crie um "musgo queimado" que pega esse verde e reduz seu brilho. Em seguida, construa uma “sombra (musgo queimada)” que traz essa cor de musgo queimada e reduz a opacidade para 15%.

E, é claro, todas as três variações atualizam automaticamente se você alterar seu verde primário para laranja. A versão queimada permanece menos brilhante do que qualquer cor que você escolher, e a sombra se adapta de acordo. Os relacionamentos permanecem.

A principal diferença na prática

Cores globais significavam ter a mesma cor em vários pontos. Variáveis significam ter relacionamentos de cores que se adaptam. Os estados em queda permanecem conectados às cores da base. As cores das sombras estão relacionadas à sua paleta de marca em vez de viver como cinza aleatórias. O sistema mantém essas conexões sem que você faça um trabalho extra.

Configurando seu sistema de cores no divi 4 vs divi 5

Criar um sistema de cores adequado determina se o seu site parece profissional ou como uma retalhos de opções aleatórias. Ambas as versões do Divi oferecem maneiras de organizar suas cores, mas suas abordagens não poderiam ser mais diferentes. Veja como criar sistemas de cores em cada versão e por que o processo é importante para o seu fluxo de trabalho de design:

Configurando cores no divi 4

Suas opções de cores moldam como os visitantes experimentam seu site. Dê uma olhada na abordagem do gerenciamento de cores Divi 4 toma:

1. Adicione suas cores globais

A configuração de cores da Divi 4 se baseou no sistema de cores globais e na organização manual. Você começaria navegando para as opções de cores de qualquer elemento e, em seguida, criaria cores globais navegando para a guia "Global", clicando no ícone Plus ao lado do seletor de cores ou editando uma cor global existente clicando nele. A interface permite inserir códigos Hex diretamente ou usar o seletor visual para selecionar cores.

Você já tem uma cor aplicada que deseja converter? Clique com o botão direito do mouse e escolha "converter para global". Isso adiciona essa cor exata à sua paleta global e troca o módulo para usar a versão global. É super útil quando você percebe que deveria ter tornado algo global desde o início.

Sugestões de cores mágicas

O recurso Magic Color da Divi 4 cria paletas coordenadas de suas opções de design existentes. Em vez de adivinhar quais cores funcionam juntas, essa ferramenta cria sugestões com base no que você já usou.

Procure os três pontos (elipses) sob a resistência dos olhos da sua cor ativa. Clique nesses pontos para obter várias sugestões de paleta de cores. Divi analisa quais cores você já usou em sua página e em projetos recentes e mostra combinações que devem funcionar juntas.

2. Aplicando suas cores globais

Usá -los é bem direto depois de configurar algumas cores globais. Clique em qualquer módulo em que você deseja aplicar uma cor. Em seguida, vá para a guia Design e encontre a configuração de cores que você deseja alterar.

Clique no Global para ver sua paleta de cores global. Clique em qualquer amostra global de cores e ela se aplica ao seu módulo imediatamente.

3. Modificando suas cores globais

Aqui é onde as coisas ficam interessantes. Quando você deseja alterar uma cor global, não precisa caçar em todos os módulos que o usem. Basta ir para qualquer configuração de cores, clique na guia Global e encontre a cor que você deseja editar.

Configurando suas cores no divi 5

Construir um sistema de cores adequado no Divi 5 dá quatro etapas. Seguindo essa abordagem supera o método antigo de adivinhar códigos de cores sempre que você precisar de uma tonalidade ligeiramente diferente:

1. Crie sua variável de cor base

Abra o gerenciador de variáveis de design e adicione as cores da sua marca principal como variáveis de cores primárias e secundárias existentes. Você também pode adicionar mais cores, como cores terciárias ou sotaques. Estas se tornam as cores da sua fundação. Suas cores base devem representar sua paleta principal de marca, que define sua identidade visual.

2. Construa cores relativas a partir da sua base

Agora você pode criar variações de cores ligadas às suas cores base. Adicione uma nova cor no gerenciador de variáveis de design e escolha sua cor base.

Use os controles deslizantes HSL para ajustá -lo: menor leveza em 25% para o título de texto, 20% para o texto do corpo; Aumente a leveza em 20% para os estados pairar ou altere a saturação para os fundos suaves. Dê a essas variações nomes claros como "laranja profunda" e "Crimson Bright", ou "State Hover (cor primária)", "Antecedentes suaves (cor secundária)".

Todas as variáveis de design podem ser empilhadas, para que você possa criar mais cores a partir de suas criadas. Todos eles permanecem conectados ao sistema.

Se você alterar sua cor base mais tarde, essas cores relacionadas atualizam automaticamente, mantendo os relacionamentos intactos.

3. Aplique variáveis aos seus elementos

Use o ícone de conteúdo dinâmico em qualquer campo de cores para acessar suas variáveis. A interface mostra se cada cor é estática, uma variável ou uma cor relativa com modificações HSL.

Escolha do seu sistema de cores organizado em vez de criar cores pontuais aleatórias que quebrem a consistência.

Quando você altera as propriedades de qualquer uma das cores base ou construídas, tudo herdado daquelas se adaptará automaticamente às novas alterações. Não há necessidade de esfregar manualmente e substituir as cores quando você decidir uma atualização da marca.

4. Predefinições de construção que referem variáveis de cor HSL

Crie sua estratégia usando predefinições de grupo de opções para peças de design específicas. Essas predefinições diferem das predefinições de elementos. Opção Grupo Predefinem grupos de estilo de destino como cores de fundo, borda ou texto usando suas variáveis.

Salve uma sombra como um grupo de opções predefinido usando uma variável de cor de sombra com base na sua cor primária.

Use esta predefinição em colunas, seções, linhas e módulos.

Crie predefinições de grupo de opções separadas para cores diferentes: uma para fronteiras com a cor do destaque, outra para texto com sua cor secundária, etc. Misture essas predefinições entre os elementos sem alterar outros estilos.

As predefinições de elementos salvam configurações completas do módulo, incluindo conteúdo e todos os estilos. Fazendo um elemento predefinido para trava de botão com estilo nas predefinições do grupo de opções e variáveis de cores usadas. A aplicação instantaneamente fornece exatamente o mesmo botão.

5. Rolando as cores em seu site

O recurso de atributos de extensão leva isso além, permitindo que você copie as propriedades de design entre elementos. Quando você aperfeiçoou o esquema de cores de um ícone usando suas variáveis, pode estender esses atributos para outros ícones em sua linha, página ou site inteiro.

Isso mantém seus relacionamentos de cores enquanto espalham um estilo consistente sem trabalho manual.

O Divi 5 de localização e substituição de recursos acelera o processo de conversão para sites existentes com cores estáticas dispersas. Clique com o botão direito do mouse em qualquer campo de cores e selecione "Encontre e substitua".

Defina seu escopo para direcionar elementos específicos, seções inteiras ou a página inteira. Em "Substituir", escolha sua nova variável na guia Global. Verifique “Substitua todos os valores encontrados” para trocar todas as instâncias dessa cor com sua variável.

Isso funciona perfeitamente ao migrar projetos mais antigos para o novo sistema de cores. Você pode substituir dezenas de laranjas semelhantes, mas não idênticas, em segundos por uma variável consistente.

Todos os aspectos funcionam juntos: Estabeleça suas variáveis de cores, use encontre e substitua para limpar as inconsistências existentes e, em seguida, use atributos estendidos para manter os padrões de design à medida que você constrói novas seções. Em seguida, construa páginas normalmente, pois os estilos podem ser facilmente aplicados usando o grupo de opções e as predefinições de elementos.

O novo seletor de cores vai se encaixar no seu fluxo de trabalho

O sistema de cores do Divi 5 corrige os problemas de fluxo de trabalho que diminuem os projetos há anos. Você não precisa mais usar ferramentas externas para encontrar a tonalidade certa. Os controles deslizantes de HSL oferecem controle preciso sem deixar o construtor.

Suas decisões de cores permanecem conectadas através de variáveis de design. Quando você muda a cor da sua marca principal, as cores relacionadas atualizam automaticamente, mantendo seus relacionamentos. Isso bate manualmente caçando todas as variações azuis que você criou por olho.

Experimente o novo sistema de cores no Divi 5 hoje!