Workshop
Design para Devs
Todos
Workshops
Workshop
Design para Devs
Login
Introdução
Apresentação
Sobre o workshop
Conteúdo do workshop
Web Designer e Web Developer
Cores
Evolução do Design da Web
Sistema de Cores
Relação entre cores
Criando Tints, Shades e Tones
Sombras e Color Context
Cores e CSS: 256 cores vs RGB
Named Colors
RGB e RGBA
Sintaxe Hexadecimal
HSL
Prática - Criando um arco-íris com HSL
Prática - Criando tonalidades com HSL
Problema do HSL - Contraste
LCH
Prática - Paleta com LCH
Outros tópicos de cores
Criando uma paleta de cores
Ferramentas de cores
Cores e acessibilidade
Tipografia
Introdução à Tipografia
Nomenclatura - Serifa e monospace
Nomenclatura - Leading, tracking e kerning
Escolhendo fontes
Tipografia - Extensões Existentes
Como identificar a fonte certa
Fontes Variáveis
Prática - Google Fonts com fonte não variável
Prática - Google Fonts com fonte variável
Imagens
Imagens - Formatos existentes
Diferentes tamanhos de imagens
Diferentes formas de utilizar imagens no html
Ferramentas para otimizar imagens
Onde encontrar boas imagens
Imagens como background
Outros Tópicos
Figma básico
Finalização
Introdução
Apresentação
Sobre o workshop
Conteúdo do workshop
Web Designer e Web Developer
Cores
Evolução do Design da Web
Sistema de Cores
Relação entre cores
Criando Tints, Shades e Tones
Sombras e Color Context
Cores e CSS: 256 cores vs RGB
Named Colors
RGB e RGBA
Sintaxe Hexadecimal
HSL
Prática - Criando um arco-íris com HSL
Prática - Criando tonalidades com HSL
Problema do HSL - Contraste
LCH
Prática - Paleta com LCH
Outros tópicos de cores
Criando uma paleta de cores
Ferramentas de cores
Cores e acessibilidade
Tipografia
Introdução à Tipografia
Nomenclatura - Serifa e monospace
Nomenclatura - Leading, tracking e kerning
Escolhendo fontes
Tipografia - Extensões Existentes
Como identificar a fonte certa
Fontes Variáveis
Prática - Google Fonts com fonte não variável
Prática - Google Fonts com fonte variável
Imagens
Imagens - Formatos existentes
Diferentes tamanhos de imagens
Diferentes formas de utilizar imagens no html
Ferramentas para otimizar imagens
Onde encontrar boas imagens
Imagens como background
Outros Tópicos
Figma básico
Finalização
Conteúdo do workshop
Todos os temas que serão vistos nesse workshop
Comentários
(0)
Faça login para comentar
