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 <a href="https://www.figma.com/file/karoCnQtvMXWHEwdMuhQs0/Prototipo?node-id=0%3A1">Protótipo </a>
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 |