design_mockups.md

@@ -21,34 +21,177 @@
 
 ## 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)
-  - [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)
+<br>
 
 ## 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
 
 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
 
-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