Como aproveitar o máximo desse curso
  • Seja bem-vindo
  • O que você vai aprender
  • Muito mais conteúdo além desse curso...
  • Downloads
Aquecimento com Netflix
  • Primeiro exercício
  • Começando pelo papel
  • Preparando teste com usuário
  • Agora é a sua vez: Protótipo Netflix
  • Primeiro contato em Figma (Invision Studio vem logo em seguida)
  • Primeiro contato com Ferramenta de UI
  • Crie seu Protótipo Netflix no Figma
Overview da ferramenta
  • Interface do Invision Studio
  • Canvas, Artboards e Dispositivos
  • Barra de Ferramentas
  • Crie o wireframe de baixa fidelidade
  • Grid em Colunas
  • Grid de 8 pontos
  • Alinhamento com Option/Alt e Box Model
Bônus - Recursos extras
  • Leis da Psicologia do UX Design
Manipulando elementos
  • Alinhamento
  • Alinhando os elementos nos grids
  • Largura, Altura, Rotação
  • Responsividade
  • Cor de preenchimento
  • Bordas, Transparência, Sombras e Blur
  • Tipografia Typeface, Peso, Tamanho e Cor
  • Alinhamento, Espaçamento e outras opções
  • Acabamento do aplicativo
Organização do trabalho
  • Organização do trabalho
  • Operações entre elementos e máscaras
  • Ajustes de Responsividade
  • Organização e responsividade
Prototipação Netflix
  • Prototipação de interações
  • Compartilhando e testando o protótipo
  • Compartilhe seu protótipo
Styleguides
  • Introdução aos Guias de Estilo
  • Introdução ao exemplo para Guia de Estilos
  • Escolhendo as cores
  • Variações de cores primárias e secundárias
  • Cores do Documento
  • Cores em Símbolos
  • Guia de Cores para o Styleguide
  • Escolhendo e instalando a font
  • Criando cabeçalhos e parágrafos principais
  • Variações de texto dark, light, action
  • Checando o contraste
  • Estilos de Textos
  • Guia tipográfico para o Styleguide
  • Criando o primeiro botão
  • Heranças de propriedades (override)
  • Customizando botões primários, secundários, mobile
  • Customizando botões primários, secundários, desktop
  • Comparação de simbolos e componentes entre ferramentas
  • Guia de botões para o styleguide
Landing page - Booking.com
  • Mobile First (importando dependências)
  • Ajustando Grids
  • Mobile - Textos e Botões
  • Desktop - Textos e Botões
  • Contraste Texto vs Imagem
  • Alterando o Botão master para replicar em todos elementos
  • Mobile First - Landing page móvel e desktop
Animações
  • Indicação de telas animáveis
  • Indicação de elementos animáveis
  • Controle de tempo de animação
  • Exemplo de animação 1
  • Exemplo de animação 2
  • Hora de animar, tá animado?
Rabiscoframes (Bônus UX&DT)
  • UX&DT - Rabiscos - Impressão para desenhar
  • UX&DT - Rabiscos Texto e conteúdo
  • UX&DT - Rabiscos - Elementos de tela
  • UX&DT - Rabiscos - Outros componentes
  • UX&DT - Rabiscos - Fluxo de Usuário
  • UX&DT - Rabiscos - Anotações
  • UX&DT - Rabiscos - Ícones
Grids (Bônus DI Completo)
  • Introdução
  • Grid Bootstrap
  • Grid 8 pontos
  • Grids no Frontend
Usabilidade (Bônus UX&DT)
  • Noção geral
  • Informações em pouca quantidade
  • Hierarquia funcional
  • Simplificação de Formulários
  • Advinhar intenções, Estados, Prevenção de Erros
  • O tempo do usuário
  • Microinterações
  • Personalidade, Microtextos e Linguagem
Checklist de UX (Bônus UX&DT)