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

Testando o Ritmo Vertical

Testando o Ritmo Vertical

​Nessa aula, abordamos o conceito de ritmo vertical, que é essencial para a legibilidade e estética do texto dentro de um design. O ritmo vertical refere-se ao espaçamento entre linhas de texto, garantindo que o conteúdo não fique muito concentrado e difícil de ler. Pontos importantes destacados na aula: - Análise do Ritmo Vertical: É importante analisar o ritmo vertical para cada tamanho de texto, aplicando boas práticas de mercado e acessibilidade. - Tamanho de Texto:Utilizamos uma escala flexível que varia de um valor mínimo (12pt) a um valor máximo (92pt), e definimos a altura da linha com base em uma porcentagem desse valor. - Ajuste de Altura da Linha:Para títulos e textos maiores, reduzimos a altura da linha, enquanto para textos menores, aumentamos a altura para melhorar a harmonia visual e facilitar a leitura. - Espaçamento Horizontal (Kerning/Letter Spacing):Além do ritmo vertical, é importante ajustar o espaçamento entre caracteres para garantir uma leitura confortável. Isso pode ser feito visualmente, ajustando o valor até encontrar o espaçamento ideal. - Uso de Multiplicadores (Ratio):Apresentei como usar multiplicadores para definir a altura da linha de forma prática e eficiente. - Aplicação Prática no Figma:Demonstrei como aplicar esses conceitos no Figma, ajustando a tipografia e a altura da linha em exemplos práticos. - Importância da Acessibilidade:Enfatizei a importância de considerar a acessibilidade ao definir o ritmo vertical e o espaçamento entre letras. - Grids e Alinhamento:Expliquei como usar grids para alinhar o texto à baseline ou ao bounding box, garantindo consistência no design. - Testes e Ajustes:Ressaltei a importância de testar a tipografia no design e fazer ajustes conforme necessário, sempre visando a melhor legibilidade e estética. - Próximos Passos:Adiantei que na próxima aula, exploraremos a aplicação do estilo tipográfico no design, definindo pesos de fonte e estilos para diferentes elementos, como títulos, corpo de texto e elementos de UI. Essa aula foi fundamental para entender como o ritmo vertical e o espaçamento entre letras impactam a legibilidade e a estética de um design, e como aplicar esses conceitos de forma prática em ferramentas de design como o Figma.

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

13:22

Legendas

Português [PT-BR]

Tags

ritmo vertical, legibilidade, tipografia, acessibilidade, design

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