Curso completo de Web Design para Devs do Codante.io
Nesse workshop vamos ver os temas mais relevantes de design que um desenvolvedor front-end deverá saber!
Acessibilidade, Cores, tipografia, imagens e Figma básico são alguns dos temas que serão abordados nesse vídeo.
⏱️ Capítulos
00:00:00 Apresentação
00:01:22 Sobre o workshop
00:05:10 Conteúdo do workshop
00:06:49 Web Designer e Web Developer
00:18:32 Evolução do Design da Web
00:34:45 Sistema de Cores
00:43:47 Relação entre cores
00:49:45 Criando Tints, Shades e Tones
00:54:09 Sombras e Color Context
00:57:33 Cores e CSS: 256 cores vs RGB
01:03:04 Named Colors
01:04:56 RGB e RGBA
01:07:50 Sintaxe Hexadecimal
01:11:26 Cores com HSL
01:16:41 Prática - Criando um arco-íris com HSL
01:29:20 Prática - Criando tonalidades com HSL
01:31:07 Problema do HSL - Contraste
01:36:33 Cores com LCH
01:43:31 Prática - Paleta com LCH
01:49:30 Outros tópicos de cores
01:52:36 Criando uma paleta de cores
01:55:21 Ferramentas de cores
01:58:01 Cores e acessibilidade
02:00:10 Introdução à Tipografia
02:03:05 Nomenclatura - Serifa e monospace
02:04:54 Nomenclatura - Leading, tracking e kerning
02:09:43 Escolhendo fontes
02:16:43 Tipografia - Extensões Existentes
02:19:53 Como identificar a fonte certa
02:21:53 Fontes Variáveis
02:29:05 Prática - Google Fonts com fonte não variável
02:38:07 Prática - Google Fonts com fonte variável
02:46:35 Imagens - Formatos existentes (incluindo AVIF e WEBP)
02:53:06 Diferentes tamanhos de imagens
02:57:03 Diferentes formas de utilizar imagens no html
02:58:52 Ferramentas para otimizar imagens
03:00:36 Onde encontrar boas imagens
03:01:34 Imagens como background
03:02:34 Figma básico
03:08:59 Finalização