Programação do Curso
Entenda a estrutura do curso
Disponível em
dias
dias
após se matricular
Overview da Ferramenta
Disponível em
dias
dias
após se matricular
- Interface (8:52)
- [Sketch] Nova versão do Sketch 52
- [Sketch] Versão 52 na prática (6:59)
- Canvas, Artboards e Dispositivos (17:40)
- Barra de Ferramentas (download) (34:21)
- Crie o wireframe de baixa fidelidade
- Grid em Colunas (40:29)
- Box Model e Grid de 8 pontos (40:04)
- Alinhamento com Option/Alt (20:42)
- Bônus Freebies
Manipulando elementos
Disponível em
dias
dias
após se matricular
- Alinhamento / Repeat Grid (XD) (18:37)
- Alinhando os elementos no grid
- Largura, Altura, Rotação (24:32)
- Responsividade (exceto XD) (31:30)
- Cor de preenchimento (71:06)
- Bordas, Transparência, Sombras e Blur (64:46)
- Tipografia Typeface, Peso, Tamanho e Cor (29:05)
- Alinhamento, Espaçamento e outras opções (37:34)
- (New out/18) Reorganização fácil na ordem de elementos (só Figma) (1:03)
- Acabamento do aplicativo
Organização do Trabalho
Disponível em
dias
dias
após se matricular
Prototipação Netflix
Disponível em
dias
dias
após se matricular
Prototipação Instagram (somente Figma)
Disponível em
dias
dias
após se matricular
Animações (somente Invision Studio)
Disponível em
dias
dias
após se matricular
As maiores diferenças
Disponível em
dias
dias
após se matricular
[Figma] Styleguides
Disponível em
dias
dias
após se matricular
- Introdução aos Guias de Estilo (2:10)
- Introdução ao exemplo para Guia de Estilos (6:09)
- Escolhendo as cores (4:03)
- Variações de cores primárias e secundárias (4:11)
- Cores do Documento (1:06)
- Estilos locais (equivalente a layer styles) (2:58)
- Estilos locais de cores, sombras e bordas (5:03)
- Componentes (equivalente dos símbolos) (4:07)
- Figma >> Guia de Cores para o Styleguide
- Escolhendo e instalando a font (2:39)
- Criando cabeçalhos e parágrafos principais (7:55)
- Variações de texto dark, light, action (4:33)
- Estilos de Textos (3:30)
- Checando o contraste (2:25)
- Figma >> Guia tipográfico para o Styleguide
- Criando o primeiro botão (5:10)
- Heranças de propriedades (override) (3:50)
- Organizando a biblioteca em hierarquia (3:02)
- Mobile botões primários, secundários, mobile e desktop (6:45)
- Desktop botões primários, secundários, mobile e desktop (4:03)
- Figma >> Guia de botões para o styleguide
[Adobe XD] Styleguides
Disponível em
dias
dias
após se matricular
- Introdução aos Guias de Estilo (2:07)
- Introdução ao exemplo para Guia de Estilos (5:39)
- Escolhendo as cores (3:43)
- Variações de cores primárias e secundárias (2:27)
- Cores do Documento (1:07)
- Assets e Estilo de Cores (3:09)
- Cores dos Assets do XD não herdam sombras e bordas (1:18)
- Símbolos (1:14)
- Adobe XD >> Guia de Cores para o Styleguide
- Escolhendo e instalando a font (1:37)
- Criando cabeçalhos e parágrafos principais (6:56)
- Variações de texto dark, light, action (3:10)
- Checando o contraste (2:27)
- Estilos de Textos (4:54)
- Variações de formatação (0:26)
- Adobe XD >> Guia tipográfico para o Styleguide
- Criando o primeiro botão (4:23)
- Heranças de propriedades (override) (1:35)
- Símbolos para textos em botões (override) (0:56)
- Customizando botões primários, secundários, mobile e desktop (0:45)
- Documentando o Guia de Estilos para Botões (4:56)
- Adobe XD >> Guia de botões para o styleguide
[Sketch] Styleguides
Disponível em
dias
dias
após se matricular
- Introdução aos Guias de Estilo (1:51)
- Introdução ao exemplo para Guia de Estilos (3:10)
- Escolhendo as cores (4:05)
- Variações de cores primárias e secundárias (1:13)
- Cores do Documento (1:14)
- Estilo de camada (5:08)
- Estilo de camada não é só para cores (2:33)
- Símbolos (3:41)
- Sketch >> Guia de Cores para o Styleguide
- Escolhendo e instalando a font (3:07)
- Criando cabeçalhos e parágrafos principais (7:08)
- Variações de texto dark, light, action (1:15)
- Checando o contraste (2:39)
- Estilos de Textos (4:21)
- Variações de formatação (2:15)
- Sketch >> Guia tipográfico para o Styleguide
- Criando o primeiro botão (3:49)
- Heranças de propriedades (override) (3:00)
- Símbolos para textos em botões (override) (2:48)
- Recriando um único botão totalmente customizavel (1:51)
- Documentando o Guia de Estilos para Botões (4:24)
- Sketch >> Guia de botões para o styleguide
[Invision] Styleguides
Disponível em
dias
dias
após se matricular
- Introdução aos Guias de Estilo (3:41)
- Introdução ao exemplo para Guia de Estilos (8:01)
- Escolhendo as cores (4:33)
- Variações de cores primárias e secundárias (6:40)
- Cores do Documento (1:38)
- Cores em Símbolos (3:54)
- Invision >> Guia de Cores para o Styleguide
- Escolhendo e instalando a font (2:05)
- Criando cabeçalhos e parágrafos principais (10:42)
- Variações de texto dark, light, action (2:23)
- Checando o contraste (2:17)
- Estilos de Textos (1:18)
- Invision >> Guia tipográfico para o Styleguide
- Criando o primeiro botão (5:01)
- Heranças de propriedades (override) (8:11)
- Customizando botões primários, secundários, mobile (11:56)
- Customizando botões primários, secundários, desktop (6:13)
- Comparação de simbolos e componentes entre ferramentas (1:32)
- Invision >> Guia de botões para o styleguide
[Invision e Figma] Landing page Booking.com
Disponível em
dias
dias
após se matricular
[Sketch] Landing Page Booking.com
Disponível em
dias
dias
após se matricular
- Mobile First (ajustando mockup) (2:37)
- Desktop - Importanto logo, imagens e ajustando grids (5:00)
- Desktop - Incluindo textos e botões (4:05)
- Desktop - Contraste Texto vs Imagem (2:18)
- Mobile - Incluindo textos e botões (2:06)
- Mobile - Criando um botão otimizando mobile (4:43)
- Mobile - Incluindo as imagens e ajustando contraste (2:35)
- Organizando o documento (0:45)
- Alterando o styleguide (3:53)
- Sketch >> Mobile First - Landing page móvel e desktop
[Adobe XD] Landing Page Booking.com
Disponível em
dias
dias
após se matricular
- Mobile First (importando dependências) (0:49)
- Ajustando Máscaras e Grids (2:36)
- Incluindo textos e botões (6:18)
- Organizando o documento (1:11)
- Desktop - Contraste Texto vs Imagem (7:30)
- Alterando o Styleguide (1:41)
- Criando novos componentes (atomic design like) (1:31)
- Adobe XD >> Mobile First - Landing page móvel e desktop
- Encerramento (0:29)