Regra 60-30-10 & Como Harmonizar as cores no seu design?

Acesso Restrito!

Para acessar o conteúdo, você precisa de uma assinatura ativa!

Acesso Restrito!

Para acessar o conteúdo, você precisa de uma assinatura ativa!

Acesso Restrito!

Para acessar o conteúdo, você precisa de uma assinatura ativa!

Arquitetura do Design System

0
0

Regra 60-30-10 & Como Harmonizar as cores no seu design?

Regra 60-30-10 & Como Harmonizar as cores no seu design?

Nessa aula, aprendemos sobre a regra 60-30-10, uma fórmula simples para criar um esquema de cores equilibrado e harmonioso no design. A regra é amplamente utilizada por designers de interiores, moda e gráficos para estabelecer proporções de cores em um projeto: - 60% da cor dominante - 30% da cor secundária - 10% da cor de destaque Pontos importantes que destacamos: - Escolha da Cor Neutra ou Dominante:A cor dominante define o tom do seu design e deve ser a mais prevalente. Ao escolhê-la, considere as cores da marca, o público-alvo e os objetivos do design. Essa cor deve estar presente nas áreas mais proeminentes do design como fundos e superfícies. - Escolha da Cor Secundária/Neutras:A cor secundária deve complementar a dominante e adicionar interesse visual. Ao selecioná-la, considere a teoria das cores, o contraste e o humor que deseja evocar. Use-a para destacar elementos importantes como títulos, texto de corpo e botões de ação (CTA). - Escolha da Cor de Destaque:A cor de destaque adiciona excitação e contraste. Escolha uma cor que se destaque das cores dominante e secundária, considerando a teoria das cores, o contraste e o humor. Use-a com moderação para chamar atenção para elementos específicos. Dicas para aplicar a regra efetivamente: - Experimente diferentes combinações de cores e ajuste as proporções conforme necessário. - Utilize tons e matizes para adicionar profundidade e complexidade ao esquema de cores. - Teste o design em diferentes dispositivos e condições de iluminação para garantir legibilidade e acessibilidade. Ao entender o papel das cores no seu design, podemos criar um esquema que melhore a experiência do usuário e atinja os objetivos de design. A regra 60-30-10 nos ajuda a tomar decisões informadas sobre a seleção de cores e a criar um design funcional e visualmente atraente. É essencial experimentar, adicionar profundidade e testar o design para garantir que ele seja acessível e legível para todos os usuários. Com essas práticas, podemos elevar o design de UI a um novo patamar e causar uma impressão duradoura no público.​

Introdução ao cfPRO
0 de 5 aulas concluidas
Introdução ao Design System
0 de 10 aulas concluidas
Governança & Documentação
0 de 11 aulas concluidas
Os fundamentos de um Design System
0 de 13 aulas concluidas
Arquitetura do Design System
0 de 31 aulas concluidas

Introdução ao Módulo

02:28

Variáveis vs. Estilos

25:30

O que é um design system White Label?

04:44

Exemplos de design systems White Label

08:15

[Unstyled] Design System white label no Figma

13:41

Conhecendo o Projeto [Hive]

35:17

Funcionalidades & Atalhos do Figma [Resources]

10:18

Auditoria do Design

34:15

Criando a Escala de Cores [Variáveis]

34:47

Criando os Tokens Primitivos de Cores [Supa Palette]

33:00

Criando o Dark Mode [Variáveis Semânticas]

26:22

Regra 60-30-10 & Como Harmonizar as cores no seu design?

05:52

Como escolher uma tipografia

07:44

Como escalar uma tipografia?

19:10

Testando o Ritmo Vertical

13:22

Testando o Peso da Fonte

10:49

Variáveis Tipográficas & Estilos

09:53

Criando os Estilos Tipográficos [Styles]

15:03

Estilos Tipográficos no Dev Mode

04:43

Definindo o Layout Grid para Desktop & Mobile [Variáveis]

15:16

Definindo o Espaçamento

05:22

Criando a escala do espaçamento

08:18

Nomenclatura do espaçamento

03:56

Criando as Variáveis de Espaçamento

13:37

Anatomia do Token de Design [W3C]

07:38

Design Tokens vs. Variáveis no Figma

Extra

10:03

Template de Taxonomia - Introdução

Extra

09:53

Template de Taxonomia - Criando os Tokens Primitivos

Extra

12:06

Template de Taxonomia - Criando os Tokens Semânticos

Extra

26:54

Template de Taxonomia - Como importar no Figma?

Extra

09:35

Estrutura da Biblioteca de Variáveis e Componentes

Extra

08:08
Criando os Componentes & Documentação
0 de 34 aulas concluidas
Publicando o Piloto & Certificado
Extra
0 de 3 aulas concluidas

Data de lançamento

21/04/2025

Duração

05:52

Legendas

Português [PT-BR]

Tags

design, cores, harmonia, proporções, UI

Introdução ao cfPRO
0 de 5 aulas concluidas
Introdução ao Design System
0 de 10 aulas concluidas
Governança & Documentação
0 de 11 aulas concluidas
Os fundamentos de um Design System
0 de 13 aulas concluidas
Arquitetura do Design System
0 de 31 aulas concluidas

Introdução ao Módulo

02:28

Variáveis vs. Estilos

25:30

O que é um design system White Label?

04:44

Exemplos de design systems White Label

08:15

[Unstyled] Design System white label no Figma

13:41

Conhecendo o Projeto [Hive]

35:17

Funcionalidades & Atalhos do Figma [Resources]

10:18

Auditoria do Design

34:15

Criando a Escala de Cores [Variáveis]

34:47

Criando os Tokens Primitivos de Cores [Supa Palette]

33:00

Criando o Dark Mode [Variáveis Semânticas]

26:22

Regra 60-30-10 & Como Harmonizar as cores no seu design?

05:52

Como escolher uma tipografia

07:44

Como escalar uma tipografia?

19:10

Testando o Ritmo Vertical

13:22

Testando o Peso da Fonte

10:49

Variáveis Tipográficas & Estilos

09:53

Criando os Estilos Tipográficos [Styles]

15:03

Estilos Tipográficos no Dev Mode

04:43

Definindo o Layout Grid para Desktop & Mobile [Variáveis]

15:16

Definindo o Espaçamento

05:22

Criando a escala do espaçamento

08:18

Nomenclatura do espaçamento

03:56

Criando as Variáveis de Espaçamento

13:37

Anatomia do Token de Design [W3C]

07:38

Design Tokens vs. Variáveis no Figma

Extra

10:03

Template de Taxonomia - Introdução

Extra

09:53

Template de Taxonomia - Criando os Tokens Primitivos

Extra

12:06

Template de Taxonomia - Criando os Tokens Semânticos

Extra

26:54

Template de Taxonomia - Como importar no Figma?

Extra

09:35

Estrutura da Biblioteca de Variáveis e Componentes

Extra

08:08
Criando os Componentes & Documentação
0 de 34 aulas concluidas
Publicando o Piloto & Certificado
Extra
0 de 3 aulas concluidas

Title Example

Message Example