Visão geral sobre a área de trabalho
- Introdução
- Um passeio pela primeira tela
- Detalhes sobre a barra superior principal e as barras laterais
- Fazendo nosso primeiro shape
- Fim da visão geral e considerações iniciais
Layers (Camadas)
- Introdução
- Criando um shape “oval” (círculo) e sobre teclas de atalho
- Aumentando uma layer com proporção exata usando teclas de atalho
- Combinando teclas de atalho na criação de uma layer
- Movendo uma layer dentro dos trilhos e evitando desalinhar suas layers
Shapes (Formas)
- Introdução
- Manipulando uma seta de collapse (Youtube app como exemplo)
- Tudo sobre Boolean Operations
- Fazendo nosso primeiro ícone (Um simples campo de busca)
- Cards empilhados usando o Transform
- Usando Masking para ajustar a forma de um bitmap (Cabeçalho de perfil)
- Criando um ícone de carregando usando o Rotate Copies
Desafio 01: Criando uma tela básica de cadastro/login
- Introdução
- Resultado do Desafio
Text
- Introdução
- Um passeio pelo Text Inspector (Inspetor de texto)
- Aprendendo com o portal The New York Times
- Shared style: estilo compartilhado para qualquer elemento tipográfico
Bitmap
- Introdução
- Edição de um bitmap e ajuste de cores sem interferir na imagem original
Symbols: Sua vida mais organizada
- Introdução
- Aprendendo a trabalhar com Symbols (E uma dica sobre textos)
Pages e Artboard: mais interação sobre organização
- Introdução
- Usando Pages para separar as plataformas
- Usando Artboard para criar um produto em um único arquivo
Grids e measuring: tudo dentro dos trilhos
- Introdução
- Configurando nosso documento para tudo ficar dentro do grid system
- Measuring: calcule a distância de forma rápida
Plugins: produtividade a mil por hora
- Introdução
- Como instalar um plugin no Sketch
- Usando o plugin Content Generator
Desafio 02: Criando uma lista de notícias do The New York Times
- Introdução
- Resultado do Desafio
Na prática: Wireframe do nosso aplicativo
- Introdução
- Tela de Introdução: mostrando para os usuários o que vem pela frente
- Telas do onboarding
- Tela “Cadastro” & “Login”: Usuário passando pela porta da frente sem burocracia
- Tela “Empty state”: Explorando uma tela sem dados ao nosso favor
- Tela “Cadastrando uma viagem”: formulário básico com dados da viagem
- Tela “Visualização da viagem”: mostrando todos os dados que o usuário cadastrou
- Tela “Já pagou”: todos sabem quem já pagou, inclusive a pessoa responsável
- Tela “Lista de viagens”: lista com todas as viagens
Na prática: Interface visual do aplicativo
- Introdução
- Tela de Introdução: mostrando para os usuários o que vem pela frente
- Telas do onboarding
- Tela “Cadastro” & “Login”: Usuário passando pela porta da frente sem burocracia
- Tela “Empty state”: Explorando uma tela sem dados ao nosso favor
- Tela “Cadastrando uma viagem”: formulário básico com dados da viagem
- Tela “Visualização da viagem”: mostrando todos os dados que o usuário cadastrou
- Tela “Já pagou”: todos sabem quem já pagou, principalmente a pessoa responsável
- Tela “Lista de viagens”: lista com todas as viagens
Exportando os elementos da tela inicial
- Introdução
- Exportando assets de forma ágil
- Bônus: fazendo o front-end da tela inicial usando exporting e copiando CSS
Fechamento do curso e conclusões finais
- Vamos juntos evoluir! ;)
