Pular para conteúdo

Protótipo

Introdução

A construção do protótipo de alta fidelidade auxilia a equipe de desenvolvimento a encontrar um nível de detalhes abrangentes, extrair funcionalidades, testar usabilidade, e também fornece uma base para o gerenciamento do projeto pois com o protótipo é possível realizar estimativas de quanto tempo será necessário desempenhar em cada funcionalidade.

Metodologia

Iniciamos o projeto através dos levantamentos iniciais da equipe, após discussões a ferramenta Figma foi selecionada para produzir o protótipo de alta fidelidade com auxílio do Material Design Color Tool.

Protótipo de alta fidelidade

Versão 1.0

Tela Login

Prototipo 1

Tela Cadastro 1

Prototipo 2

Tela Cadastro 2

Prototipo 3

Tela Esqueceu Senha

Prototipo 4

Tela do Feed

Prototipo 5

Tela Feed com configurações

Prototipo 6

Tela Perfil

Prototipo 7

Tela Cadastrar torneio 1

Prototipo 8

Tela Cadastrar torneio 2

Prototipo 9

Tela Cadastrar torneio 3

Prototipo 10

Tela Cadastrar torneio 4

Prototipo 11

Tela com meus torneios

Prototipo 12

Tela de inscrição em torneio

Prototipo 13

Na primeira versão do protótipo utilizamos a ferramenta Material Design Color Tool para auxiliar na criação da paleta de cores do aplicativo, definimos as cores base do aplicativo mas as cores definidas para as telas 12 e 13 ainda não foram decididas.

Versão 2.0

Tela Login

Prototipo 1

Tela Cadastro

Prototipo 2

Tela Esqueceu Senha

Prototipo 3

Tela Perfil

Prototipo 4

Tela do Feed

Prototipo 5

Tela Cadastrar em um torneio

Prototipo 6

Tela Cadastrar torneio

Prototipo 7

Tela Cadastrar torneio 2

Prototipo 8

Tela dos meus torneios

Prototipo 9

Tela das chaves do torneio

Prototipo 10

Tela das estatíscicas

Prototipo 11

Tela de adicionar resultado das partidas

Prototipo 12

link para o Protótipo

Conclusão

A partir da elaboração do protótipo foi possível ter uma noção inicial da interface do usuário, definindo fluxo, paleta de cores, botões, app bars e diversas outras funcionalidades

Referências

Material Design Color Tool. Disponível em: https://material.io/resources/color/#!/?view.left=0&view.right=0

PMI. Um guia do conhecimento em gerenciamento de projetos. Guia PMBOK® 5a. ed. EUA: Project Management Institute, 2013.

Ferramenta Figma. Disponível em https://www.figma.com

Autor(es)

Data Versão Descrição Autor(es)
07/09/20 1.0 Criação do documento Lucas Alexandre e Matheus Estanislau
07/09/20 1.1 Adicionado as imagens do protótipo Lucas Alexandre e Matheus Estanislau
07/09/20 1.2 Adicionado conclusão e referências Lucas Alexandre e Matheus Estanislau
26/10/20 2.0 Adicionada a versão 2.0 do protótipo João Pedro, Lucas Alexandre, Matheus Estanislau, Moacir Mascarenha e Renan Cristyan