Como aproveitar o máximo desse curso
  • Seja bem-vindo
  • (novo nov/19) Chance de fazer um curso presencial!
  • 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 (Adobe XD vem logo em seguida)
  • Primeiro contato com Ferramenta de UI
  • Crie seu Protótipo Netflix no Figma
Overview da ferramenta
  • Interface do Adobe XD
  • 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 e Repeat Grid
  • Alinhando os elementos nos grids
  • Largura, Altura, Rotação
  • 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
  • Responsividade automática
  • Responsividade manual
  • Organização
Prototipação Netflix
  • Prototipação de interações
  • (new out/18) Prototipação - Animações complexas
  • (new out/18) Prototipação - Comando de voz
  • (new out/18) Prototipação - Arrastar (Drag)
  • (new jun/18) Prototipação - Overlay
  • 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
  • Assets e Estilo de Cores
  • Cores dos Assets do XD não herdam sombras e bordas
  • 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)
  • Customizando botões primários, secundários, mobile e desktop
  • Documentando o Guia de Estilos para Botões
  • Guia de botões para o styleguide
Landing page - Booking.com
  • Mobile First (importando dependências)
  • Ajustando Máscaras e Grids
  • Incluindo textos e botões
  • Organizando o documento
  • Desktop - Contraste Texto vs Imagem
  • Alterando o styleguide
  • Criando novos componentes (atomic design like)
  • Mobile First - Landing page móvel e desktop
  • Encerramento
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
  • Adivinhar intenções, Estados, Prevenção de Erros