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 com Ferramenta de UI
  • Primeiro contato em Figma (Sketch vem logo em seguida)
  • Crie seu Protótipo Netflix Figma
Overview da ferramenta
  • Interface do Sketch
  • (new nov/18) Nova versão do Sketch 52
  • (new nov/18) Versão 52 na prática - veja as novidades
  • Canvas, Artboards e Dispositivos
  • Barra de Ferramentas
  • Crie o wireframe de baixa fidelidade
  • Grid em Colunas
  • Box Model e Grid de 8 pontos
  • Alinhamento com Option/Alt
Bônus - Recursos extras
  • UI Kits e Recursos grátis
  • 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
  • Estilo de camada
  • Estilo de camada não é só para cores
  • 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
  • Variações de formatação
  • Guia tipográfico para o Styleguide
  • Criando o primeiro botão
  • Heranças de propriedades (override)
  • Símbolos para textos em botões (override)
  • Recriando um único botão totalmente customizavel
  • Documentando o Guia de Estilos para Botões
  • Guia de botões para o styleguide
Landing page - Booking.com
  • Mobile First (ajustando mockup)
  • Desktop - Importanto logo, imagens e ajustando grids
  • Desktop - Incluindo textos e botões
  • Desktop - Contraste Texto vs Imagem
  • Mobile - Incluindo textos e botões
  • Mobile - Criando um botão otimizando mobile
  • Mobile - Incluindo as imagens e ajustando contraste
  • Organizando o documento
  • Alterando o styleguide
  • Mobile First - Landing page móvel e desktop
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