Como aproveitar o máximo desse curso
  • Seja bem-vindo
  • O que você vai aprender
  • Curso presencial
  • 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 o Figma
  • Crie seu Protótipo Netflix no Figma
Overview da ferramenta
  • Interface do Figma
  • 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
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
  • (New out/18) Reorganização fácil na ordem de elementos
  • Acabamento do aplicativo
Bônus - Recursos extras
  • UI Kits e Recursos grátis
  • Leis da Psicologia do UX Design
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
Prototipação Instagram
  • Instagram Scroll Horizontal e Vertical
  • Scroll Horizontal no Instagram
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
  • Estilos locais (equivalente a layer styles)
  • Estilos locais de cores, sombras e bordas
  • Componentes (equivalente dos 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
  • Estilos de Textos
  • Checando o contraste
  • Variações de formatação
  • Guia de botões para o styleguide
  • Criando o primeiro botão
  • Heranças de propriedades (override)
  • Organizando a biblioteca em hierarquia
  • Mobile botões primários, secundários, mobile e desktop
  • Desktop botões primários, secundários, mobile e desktop
  • Guia tipográfico 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
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
  • O tempo do usuário
  • Microinterações
  • Personalidade, Microtextos e Linguagem