Apresentação do curso
  • O que é o curso de prototipagem e como será o roteiro de aulas
A importância dos protótipos
  • Aceleração da programação, stakeholders, requisitos e regras de negócio
  • Protótipo estático, protótipo navegável e diagramas
Material Design
  • Anterior, origem e lançamento da nova linguagem de design do Google
  • Objetivos, mundo real e digital, regras e similaridades com outros design
  • Formas, cores, ícones, tipografia, imagens e animações
  • Profundidade, elementos comuns e conclusão
Apresentação dos softwares que serão utilizados
  • Software
Discussão da ideia de aplicativo em um app Web de brainstorm
  • Apresentação e tour pelo app de mapa mental e realização do cadastro
  • Segunda parte do tour pelo mindmeister
  • Início da apresentação da ideia de aplicativo do curso
  • Cadastro de usuário e telas de introdução
  • Cadastro de problema e monetização
  • Listagem de problemas, comentários e respostas
  • Atividade do problema
  • Login, cadastro e update de administrador e cadastro de prefeitura
  • Lista de prefeituras e página de detalhes de prefeitura
  • Lista de problemas e página de detalhe de problema
  • Lista de usuários e lista de comentários de usuário
Definição das cores primária e secundária do aplicativo
  • Utilizando o Material.IO Color Tool para escolha de cores
Apresentação do aplicativo MarvelApp
  • Apresentação e cadastro no Web app
  • Dashboard inicial e criação de projeto
  • Segunda parte dashboard, novo projeto e tour
Explicação, download e edição da logo do aplicativo
  • Explicação do porquê da mudança de logo do projeto
  • Apresentação do Canva Web app e download do novo logo
  • Apresentação e instalação do GIMP e edição da logo
Protótipo estático: Colocando o ícone de lançamento (produto)
  • Colocando o ícone / logo de protótipo de aplicativo Android
Protótipo estático: Tela de abertura do aplicativo
  • Explicando a tela de abertura de apps Android e a definição de cores via Marvel
  • Download e edição da imagem de background e colocando ela em tela
  • Colocando o logo, o título e o moti no centro da tela de abertura
Protótipo estático: Login
  • Explicando e iniciando a construção da tela de login
  • Ajustes finais na tela
Protótipo estático: Recuperação de acesso
  • Criando a tela de recuperação de senha
  • Criando tela de feedback de recuperação de acesso
Protótipo estático: Políticas de privacidade
  • Falando sobre a importância e criando as políticas de privacidade
Protótipo estático: Cadastro de usuário
  • Construção da tela de cadastro de usuário
  • Acrescentando informações a tela de cadastro
  • Dialog de permissão de obtenção de localização
  • Feedback de cadastro realizado
  • Explicação da permissão em tempo de execução e mais dicas
Protótipo estático: Telas de introdução
  • Primeira tela de introdução
  • Segunda tela de introdução
  • Terceira tela de introdução e algumas correções
Protótipo estático: Lista de problemas abertos e em votação
  • Definição das imagens do primeiro item
  • Colocando título e imagem, gradiente, no primeiro item
  • Criando mini relatório de porcentagem de votos
  • Colocando o tempo ainda restante para a votação e ajustando alguns componentes
  • Avatar de usuário e mini relatório de compartilhamento, comentários e votos
  • Criando o item dois e agrupando / desagrupando elementos
  • Criando grupo de itens, com shape, para facilitar trabalho com imagens
  • Finalizando o item dois: imagens no lugar dos shapes
  • Removendo imagens não necessárias e corrigindo o shape de avatar
  • Removendo imagens não necessárias abaixo do modelo de shapes
  • Criando o item três por completo
  • Criando o item quatro por completo
  • Colocando a barra de navegação e o anúncio em banner
Protótipo estático: Lista de problemas abertos e com votação finalizada
  • Definindo o primeiro item
  • Construindo o item dois por completo
  • Construindo por completo o item três
  • Construindo por completo o item quatro
Protótipo estático: Lista de problemas solucionados
  • Construindo o item um por completo e iniciando a lista
  • Construindo o item dois por completo e explicando o "não opaco"
  • Construindo o item três por completo e corrigindo o item dois
  • Construindo o item quatro por completo
Protótipo estático: Lista de problemas que reportei
  • Colocando textos e shapes no item um
  • Ajustes finais no item um
Protótipo estático: Lista de problemas que votei
  • Construção completa dos itens. Estratégia de copiar e colar elementos
Protótipo estático: Lista de problemas com solução em votação
  • Colocando o título de lista e criando o item um por completo
  • Construindo o item dois por completo
  • Construindo o item três por completo e corrigindo alguns componentes
  • Construindo o item quatro por completo
Protótipo estático: Colocando comentários, regras de negócio, nas telas
  • Colocando os comentários
Protótipo estático: Criando o Dialog de busca avançada
  • Explicando e criando a busca avançada. Iniciando pelo input field em texto
  • Colocando o rótulo e os selects de filtro de data
  • Comentário de regra de negócio em busca avançada e algumas correções
Protótipo estático: Menu gaveta, versão padrão
  • Explicando e iniciando com as configurações de cabeçalho de menu