design_mockups.md

@@ -6,33 +6,139 @@
 ## Descrição
 
 Esta seção apresentará todos os dados do Design do Sistema, sejam eles escolhas do time ou solicitações dos Stakeholders.
+Foram feitos 2 layouts para a plataforma da praxi, ambos podem ser encontrados no seguinte `Figma`:
+- [Layout 1](https://www.figma.com/file/U3YnuqVhx8SNZgxfyYtwje/Praxi?node-id=0%3A1)
+- [Layout 2](https://www.figma.com/file/U3YnuqVhx8SNZgxfyYtwje/Praxi?node-id=61%3A36)
+- [Layout final (1 + 2)](https://www.figma.com/file/U3YnuqVhx8SNZgxfyYtwje/Praxi?node-id=39%3A2)
 
 ## Sumário
 
 - [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)
 
-## Protótipos de Baixo Nível
-
-TBD
 
 ## Protótipos de Alto Nível
 
-TBD
+## **`Layout Final`**
+
+### Admin:
+
+Criação de atividade (passo 1)
+
+<img width="700" src="resources/images/mockups/layout-final/admin-create-activity-1.png"></img>
+
+Criação de atividade (passo 2)
+
+<img width="700" src="resources/images/mockups/layout-final/admin-create-activity-2.png"></img>
+
+Criação de atividade (passo 3)
+
+<img width="700" src="resources/images/mockups/layout-final/admin-create-activity-3.png"></img>
+
+Criação de atividade (passo 4)
+
+<img width="700" src="resources/images/mockups/layout-final/admin-create-activity-4.png"></img>
+
+Criação de habilidade
+
+<img width="700" src="resources/images/mockups/layout-final/admin-create-skill.png"></img>
+
+Criação de trilha
+
+<img width="700" src="resources/images/mockups/layout-final/admin-create-track.png"></img>
+
+Dashboard
+
+<img width="700" src="resources/images/mockups/layout-final/admin-dashboard.png"></img>
+
+Aprovação de evento
+
+<img width="700" src="resources/images/mockups/layout-final/admin-event-approve.png"></img>
+
+Rejeição de evento
+
+<img width="700" src="resources/images/mockups/layout-final/admin-event-reject.png"></img>
+
+Eventos para aprovação
+
+<img width="700" src="resources/images/mockups/layout-final/admin-events.png"></img>
+
+Seleção de atividades para habilidade
+
+<img width="700" src="resources/images/mockups/layout-final/admin-select-activities.png"></img>
+
+Seleção de habilidades para trilha
+
+<img width="700" src="resources/images/mockups/layout-final/admin-select-skills.png"></img>
+
+Lista de trilhas e habilidades
+
+<img width="700" src="resources/images/mockups/layout-final/admin-tracks.png"></img>
+
+### User:
+
+Atividade (1-video)
+
+<img width="700" src="resources/images/mockups/layout-final/user-activity-1.png"></img>
+
+Atividade (2-pdf)
+
+<img width="700" src="resources/images/mockups/layout-final/user-activity-2.png"></img>
+
+Atividade (3-quiz)
+
+<img width="700" src="resources/images/mockups/layout-final/user-activity-3.png"></img>
+
+Criação de evento (passo 1)
+
+<img width="700" src="resources/images/mockups/layout-final/user-create-event-1.png"></img>
+
+Criação de evento (passo 2)
+
+<img width="700" src="resources/images/mockups/layout-final/user-create-event-2.png"></img>
+
+Home (Logado)
+
+<img width="700" src="resources/images/mockups/layout-final/user-home-logged.png"></img>
+
+Home (Deslogado)
+
+<img width="700" src="resources/images/mockups/layout-final/user-home-unlogged.png"></img>
+
+Login
+
+<img width="700" src="resources/images/mockups/layout-final/user-login.png"></img>
+
+Cadastro (passo 1)
+
+<img width="700" src="resources/images/mockups/layout-final/user-register-1.png"></img>
+
+Cadastro (passo 2)
+
+<img width="700" src="resources/images/mockups/layout-final/user-register-2.png"></img>
 
 ## Cores
 
-TBD
+Foi usada a mesma paleta que a equipe da praxi já estava utilizando no seu site.
+
+- Azul escuro: `#20273F`;
+- Azul: `#4D6899`;
+- Cinza: `#CCCCCC`;
+- Salmão: `#F36653`;
+- Pêssego: `#F57969`;
+- Quase branco(offwhite): `#F8F8F8`;
+- Preto: `#0D0D0D`;
+
+<img width="700" src="resources/images/mockups/palette.png"></img>
 
 ## Tipografia
 
-TBD
+Nos mockups foi usada apenas a fonte `Open Sans`.
 
 ## Elementos Visuais