... | @@ -21,34 +21,177 @@ |
... | @@ -21,34 +21,177 @@ |
|
|
|
|
|
## Descrição
|
|
## Descrição
|
|
|
|
|
|
Esta seção apresentará todos os dados do Design do Sistema, sejam eles escolhas do time ou solicitações dos Stakeholders.
|
|
Ao longo da _Sprint_ 0, o time desenvolveu as telas de baixa fidelidade com o objetivo de alinhar as expectativas de design com os _stalkeholders_. As telas foram pensadas buscando performar um fluxo intuitivo e de fácil entendimento para o futuro uso da aplicação.
|
|
|
|
|
|
## Sumário
|
|
Os protótipos de tela foram realizados através da ferramenta Figma, contando com a colaboração da equipe simultaneamente na edição das telas. O resultado total pode ser visualizado através do _link_ [Joinfut](https://www.figma.com/file/2Eqdteoq094EfowEjQz83E/JoinFut?node-id=0%3A1).
|
|
|
|
|
|
- [Design do Sistema](#design-do-sistema)
|
|
<br>
|
|
- [Descrição](#descrição)
|
|
|
|
- [Sumário](#sumário)
|
|
|
|
- [Protótipos de Baixo Nível](#protótipos-de-baixo-nível)
|
|
|
|
- [Protótipos de Alto Nível](#protótipos-de-alto-nível)
|
|
|
|
- [Cores](#cores)
|
|
|
|
- [Tipografia](#tipografia)
|
|
|
|
- [Elementos Visuais](#elementos-visuais)
|
|
|
|
|
|
|
|
## Protótipos de Baixo Nível
|
|
## Protótipos de Baixo Nível
|
|
|
|
|
|
TBD
|
|
Seguindo a ideia apresentada pelos _stakeholders_, foram primeiro criados modelos alguns modelos simples feitos a mão sobre as telas base, sendo elas as telas _login_ e cadastro.
|
|
|
|
|
|
|
|
<img src="resources/images/mockups/Screenshot 2022-09-06 230529.png">
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
Após este primeiro exemplo, a equipe deu andamento para a modelagem na ferramenta Figma, utilizando-se das cores pré apresentadas pelos stakeholders.
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Login
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<img src="resources/images/mockups/join1.png">
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
### Descrição:
|
|
|
|
Tela de _login_ da aplicação, onde o usuário pode fazer _login_ utilizando os dados cadastrados no sistema da Joinfut, ou realizar o cadastro no sistema da Joinfut.
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Escolha do usuário(fluxo)
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<img src="resources/images/mockups/join2.png">
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
### Descrição:
|
|
|
|
Tela inicial de cadastro, onde é possível escolher o tipo de usuário que fará o cadastro.
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Cadastro Atletas/Clube
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<img src="resources/images/mockups/join3.png">
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
### Descrição:
|
|
|
|
Telas de cadastro apresentadas para o usuário Atleta e usuário Clube, respectivamente. São requisitadas as informações necessárias para a inserção dos dados no banco do sistema. Próximo ao fim da página, há um botão para a validação dos dados.
|
|
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Termos de uso
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<img src="resources/images/mockups/join4.png">
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
### Descrição:
|
|
|
|
Tela de termos de uso. Cada usuário (atleta e clube), após realizar o cadastro no aplicativo, serão redirecionados para a tela onde constam os termos de uso do mesmo (cada termo é específico para o usuário em questão).
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Home calendário(atleta) & Menu lateral
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<img src="resources/images/mockups/join5.png">
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
### Descrição:
|
|
|
|
Foi definido pela equipe que no fluxo do usuário, sua _homepage_ seria o calendário. Essa tela representa as datas que ocorrerão as peneiras, juntamente com os times que as estão oferecendo. Há também um _widget_ no canto superior direito que leva para um menu lateral. Neste menu existem as opções:
|
|
|
|
* Perfil: leva o atleta para a tela de seu perfil.
|
|
|
|
* Norificações: ---------
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Home filtro(clube) & Menu lateral
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<img src="resources/images/mockups/join6.png">
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
### Descrição:
|
|
|
|
Foi definido pela equipe que o fluxo do usuário clube, sua _homepage_ seria a tela de filtragem de atletas da aplicação. Nesta tela, o clube poderia selecionar atributos desejados em um atleta e o sistema da aplicação deveria devolver os atletas que mais se encaixam nas categorias. Há também um _widget_ no canto superior direito que leva para um menu lateral. Neste menu existem as opções:
|
|
|
|
* Subgrupos: leva o clube para a tela de subgrupos.
|
|
|
|
* Créditos: ------------
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Subgrupos
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<img src="resources/images/mockups/join7.png">
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
### Descrição:
|
|
|
|
Tela de subgrupos da aplicação. Nesta tela o clube pode visualizar sua lista de atletas de acordo com a grupagem que deseja fazer.
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Perfil do atleta
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<img src="resources/images/mockups/join8.png">
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
### Descrição:
|
|
|
|
A tela do perfil do atleta compõem as características do atleta em questão: estilo de jogo, posição, times que já passou e um botão que leva para uma tela que contém os vídeos do atleta. Essa tela pode ser acessada em ambos fluxos (atleta e clube).
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Tela dos vídeos do atleta
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
|
|
|
|
<img src="resources/images/mockups/join9.png">
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
### Descrição:
|
|
|
|
A última tela pensada que compõe o fluxo foi a tela que constam os _links_ com os vídeos respectivos de cada categoria. Essa tela também é acessada por ambos fluxos (atleta e clube).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
## Protótipos de Alto Nível
|
|
## Protótipos de Alto Nível
|
|
|
|
|
|
TBD
|
|
TBD
|
|
|
|
|
|
## Cores
|
|
<br>
|
|
|
|
|
|
TBD
|
|
## Paleta de Cores
|
|
|
|
<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_.
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<img src="resources/images/mockups/Screenshot 2022-09-06 221446.png">
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
## Tipografia
|
|
## Tipografia
|
|
|
|
|
|
TBD
|
|
<br>
|
|
|
|
|
|
|
|
Além da paleta de cores e do logotipo citados anteriormente, os _stakeholders_ também já possuíam uma fonte definida.
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<img src="resources/images/mockups/Screenshot 2022-09-06 221523.png">
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
## Elementos Visuais
|
|
## Elementos Visuais
|
|
|
|
|
... | | ... | |