Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • Joinfut Wiki Joinfut Wiki
  • Project information
    • Project information
    • Activity
    • Labels
    • Planning hierarchy
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 6
    • Issues 6
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Joinfut
  • Joinfut WikiJoinfut Wiki
  • Wiki
  • design_mockups

design_mockups · Changes

Page history
Update design_mockups.md, resources/images/altonivel/MenuClube.png,... authored Nov 20, 2022 by Vittoria C Presa's avatar Vittoria C Presa
Update design_mockups.md, resources/images/altonivel/MenuClube.png, resources/images/altonivel/MenuDoAtleta.png, resources/images/altonivel/Peneiras.png, resources/images/altonivel/PerfilAtleta.png, resources/images/altonivel/TelaDeSubgrupos.png, resources/images/altonivel/Termos.png, resources/images/altonivel/VideosDoAleta.png, resources/images/altonivel/AtualizacaoDeDadosAtleta.png, resources/images/altonivel/AtualizacaoDeDadosClube.png, resources/images/altonivel/BuscaDeAtletas.png, resources/images/altonivel/CadastroDeUsuario.png, resources/images/altonivel/ClubeOuJogador.png, resources/images/altonivel/CalendarioDoAtleta.png, resources/images/altonivel/HomePage.png, resources/images/elementosvisuais/AdicionarElemento.png, resources/images/elementosvisuais/AgendaElementos.png, resources/images/elementosvisuais/BolaLogoElemento.png, resources/images/elementosvisuais/BuscarJogadorElemento.png, resources/images/elementosvisuais/PeneirasElemento.png, resources/images/elementosvisuais/PerfilElemento.png, resources/images/elementosvisuais/SubgruposElemento.png, resources/images/elementosvisuais/VideosElemento.png, resources/images/elementosvisuais/YoutubeElemento.png, image.png, resources/images/logos/LogoAtualizado.png, resources/images/logos/LogoOriginal.png, resources/images/altonivel/Modal.png
Deleted resources/images/mockups/Logotipo.png
Hide whitespace changes
Inline Side-by-side
design_mockups.md
View page @ 9837433a
...@@ -67,7 +67,7 @@ Tela inicial de cadastro, onde é possível escolher o tipo de usuário que far ...@@ -67,7 +67,7 @@ Tela inicial de cadastro, onde é possível escolher o tipo de usuário que far
## Pré Cadastro ## Pré Cadastro
<br> <br>
<img src="resources/images/mockups/PreCadastro.png"> <img src="resources/images/mockups/PreCadastro.png">
...@@ -78,7 +78,7 @@ Tela de _login_ 2 da aplicação onde, após o usuário se identificar como club ...@@ -78,7 +78,7 @@ Tela de _login_ 2 da aplicação onde, após o usuário se identificar como club
<br> <br>
## Cadastro Atletas/Clube ## Cadastro Atletas/Clubes
<br> <br>
...@@ -149,7 +149,7 @@ Tela de subgrupos da aplicação. Nesta tela o clube pode visualizar as listas d ...@@ -149,7 +149,7 @@ Tela de subgrupos da aplicação. Nesta tela o clube pode visualizar as listas d
<br> <br>
##Modal para criar uma pré-seleção ## Modal para criar uma pré-seleção
<br> <br>
...@@ -202,22 +202,137 @@ A última tela pensada para completar o fluxo foi a tela de pré-seleção. Ness ...@@ -202,22 +202,137 @@ A última tela pensada para completar o fluxo foi a tela de pré-seleção. Ness
## Protótipos de Alto Nível ## Protótipos de Alto Nível
TBD <br>
Seguindo a mesma ordem dos protótipos de baixo nível, foram desenvolvidas as seguintes telas:
<br> <br>
## Paleta de Cores ## Login
<br> <br>
Os _stakeholders_ tinham posse de um logotipo pronto, juntamente com a sua paleta de cores, que foram mantidos pelo time na execução dos _mockups_. <img src="resources/images/altonivel/HomePage.png">
<br> <br>
<img src="resources/images/mockups/PaletaCores.png"> ## Escolha do usuário(fluxo)
<br>
<img src="resources/images/altonivel/ClubeOuJogador.png">
<br>
## Pré Cadastro
<br>
<img src="resources/images/altonivel/CadastroDeUsuario.png">
<br>
## Cadastro Atletas/Clubes
<br>
<img src="resources/images/altonivel/AtualizacaoDeDadosAtleta.png">
<img src="resources/images/altonivel/AtualizacaoDeDadosClube.png">
<br>
## Termos de uso
<br>
<img src="resources/images/altonivel/Termos.png">
<br>
## Home Calendário(Atleta) & Menu Lateral
<br>
<img src="resources/images/altonivel/CalendarioDeUsuario.png">
<img src="resources/images/altonivel/MenuDoAtleta.png">
<br>
## Home Filtro(Clube) & Menu Lateral
<br>
<img src="resources/images/altonivel/BuscaDeAtletas.png">
<img src="resources/images/altonivel/MenuClube.png">
<br>
## Subgrupos
<br>
<img src="resources/images/altonivel/TelaDeSubgrupos.png">
<br>
## Modal para criar uma Pré-seleção
<br>
<img src="resources/images/altonivel/Modal.png">
<br>
## Perfil do Atleta
<br>
<img src="resources/images/altonivel/PerfilAtleta.png">
<br> <br>
<img src="resources/images/mockups/Logotipo.png"> ## Telas dos vídeos do Atleta
<br>
<img src="resources/images/altonivel/VideosDoAtleta.png">
<br>
## Pré-seleção
<br>
<img src="resources/images/altonivel/Peneiras.png">
<br>
Importante ressaltar que até o momento desta edição, a tela de pré-seleção se encontra como débito técnico para a entrega final (25/11) e portanto, haverá uma alteração na wiki após os integrantes realizarem a entrega do relatório final.
<br>
## Logotipo
<br>
Os _stakeholders_ possuíam um logotipo original porém, ao decorrer do projeto foram realizadas algumas mudanças sugeridas pelo time. A seguir o logitipo original e o atualizado nessa mesma orgem:
<br>
<img src="resources/images/logos/LogoOriginal.png">
<img src="resources/images/logos/LogoAtualizado.png">
<br>
## Paleta de Cores
<br>
A paleta de cores original foi mantida pelo time na execução dos _mockups_ e nas telas desenvolvidas.
<br>
<img src="resources/images/mockups/PaletaCores.png">
<br> <br>
...@@ -235,4 +350,131 @@ Além da paleta de cores e do logotipo citados anteriormente, os _stakeholders_ ...@@ -235,4 +350,131 @@ Além da paleta de cores e do logotipo citados anteriormente, os _stakeholders_
## Elementos Visuais ## Elementos Visuais
TBD <br>
Como elementos visuais, foi possível utilizar os seguintes nas telas já desenvolvidas dentro do aplicativo mobile:
<br>
## Subgrupos
<br>
<img src="resources/images/elementosvisuais/SubgruposElemento.png">
<br>
### Descrição:
Foi definido esse elemento para representar o botão de Subgrupos existente no menu lateral do fluxo do Clube, que possibilita o mesmo a acessar a tela que contém seus subgrupos criados.
<br>
## Busca de Jogadores
<br>
<img src="resources/images/elementosvisuais/BuscarJogadorElemento.png">
<br>
### Descrição:
Também no menu lateral do fluxo do Clube, é possível acessar a tela de busca de atletas através do botão representado por esse elemento.
<br>
## Peneiras
<br>
<img src="resources/images/elementosvisuais/PeneirasElemento.png">
<br>
### Descrição:
Como terceira e última opção do menu lateral do fluxo do Clube, pode-se acessar a tela das pré-seleções através do botão representado por esse elemento.
<br>
## Perfil
<br>
<img src="resources/images/elementosvisuais/PerfilElemento.png">
<br>
### Descrição:
Entrando no menu lateral do fluxo do Atleta, a primeira opção disponível permite que o atleta acesse seu perfil através do botão representado por esse elemento.
<br>
## Vídeos
<br>
<img src="resources/images/elementosvisuais/VideosElemento.png">
<br>
### Descrição:
O atleta pode também acessar seus vídeos através do botão representado por esse elemento, sugestivo ao ícone do youtube por conta de ser a plataforma onde os vídeos se encontram.
<br>
## Minha Agenda
<br>
<img src="resources/images/elementosvisuais/AgendaElemento.png">
<br>
### Descrição:
Como última opção no menu lateral do atleta, existe o botão que leva para o seu calendário, ou seja, sua tela home dentro do aplicativo.
<br>
## Símbolo de +
<br>
<img src="resources/images/elementosvisuais/AdicionarElemento.png">
<br>
### Descrição:
Em várias telas foram utilizadas o elemento de adicção, afim de representar a ação que o usuário pode ter que adicionar/criar algum elemento de acordo com cada feature existente.
<br>
## Youtube símbolo
<br>
<img src="resources/images/elementosvisuais/YoutubeElemento.png">
<br>
### Descrição:
Na tela que consta os vídeos do atleta, também foi utilizado um elemento visual que fizesse analogia a plataforma do Youtube, porém dessa vez com as cores características vermelho e branco.
<br>
## Bola Logotipo
<br>
<img src="resources/images/elementosvisuais/BolaLogoElemento.png">
<br>
### Descrição:
Ao decorrer do projeto, foi sugerido pelo time aos stekeholders uma pequena mudança no logo e, para isso, foi utilizado o elemento visual de uma bola de futebol diferente do logo original.
<br>
Clone repository

Principal


  • {\color{red}Área \space Inicial}
  • {\color{darkorange}Instalação \space de \space Programas}
  • {\color{lime}Design \space dos \space Mockups}
  • {\color{darkgreen}Gerenciamento \space da \space Equipe}
  • {\color{darkblue}Processo \space de \space Desenvolvimento}
  • {\color{indigo}Organização \space das \space Squads}
  • {\color{violet}Arquitetura \space dos \space Projetos}
  • {\color{purple}Banco \space de \space dados \space - \space Infos}
  • {\color{darkcyan}Retrospectivas}

Áreas das Squads

{\color{black}\boxed{\color{darkgreen}\mathbb{Página \space Inicial \space do \space BACKEND}}}

{\color{black}\boxed{\color{darkblue}\mathbb{Página \space Inicial \space do \space FRONTEND}}}

{\color{black}\boxed{\color{darkorange}\mathbb{Página \space Inicial \space do \space DATABASE}}}