design_mockups.md

 | [Home](home) | [**Escopo**](escopo) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Gerência](gerencia) | [BD](Banco de Dados) | [Qualidade](qualidade) | [Frontend](frontend) | [Backend](backend) | [Analytics](Analytics) |
 | :----------: | :------------------: | :------------------: | :------------------------------: | :--------------------------: | :------------------------: | :------------------: | :------------------: | :--------------------: | :------------------: | :----------------: | :----------------: |
 
-## Figma
-O Figma é uma ferramenta de design de interface do usuário (UI) e experiência do usuário (UX) baseada na web. Ela é utilizada para criar protótipos, designs de aplicativos, sites e outros projetos digitais. O Figma é conhecido por ser colaborativo, permitindo que várias pessoas trabalhem simultaneamente no mesmo projeto, visualizando as alterações em tempo real. Isso o torna especialmente útil para equipes de design distribuídas geograficamente. Além disso, o Figma oferece recursos para criar designs responsivos, protótipos interativos e facilita o compartilhamento e a revisão de projetos.
+<img src="./resources/images/navegar.gif" width="300">
 
+## Design/Mockups
+Depois de definidos os assets e padrões a serem utilizados, o time seguiu com o desenvolvimento dos protótipos de alta fidelidade, os quais como apresentado nos protótipos de baixa fidelidade terão três fluxos diferentes, um de professor, um de especialista e um de coordenador sendo que todos partem da tela de login comum entre eles. A seguir são apresentadas imagens contendo as telas desenvolvidas do protótipo de alta fidelidade para o login e segue juntamente o fluxo demonstrado nos protótipos de baixa fidelidade para cada um dos usuários.
+<br><br>
+Figma: [Clique Aqui](https://www.figma.com/proto/wbOIcXYzOJeOKm6VUa7VSV/Sem-Barreiras?type=design&node-id=204-3366&t=XTBbuaZRicRzGNUg-1&scaling=min-zoom&page-id=1%3A2&starting-point-node-id=204%3A3366&mode=design)
 
-## Design - Sem Barreiras
-Link do Figma: https://www.figma.com/file/wbOIcXYzOJeOKm6VUa7VSV/Sem-Barreiras?type=design&node-id=1%3A2&mode=design&t=RgwrNpBbPu0QlMEQ-1
+## Sumário
+
\ No newline at end of file
+- [Design](#design)
+- [Identidade Visual](#identidade-visual)
+  - [Logo](#logo)
+  - [Tipografia](#tipografia)
+  - [Contrastes](#contrastes)
+  - [Paleta De Cores](#paleta-de-cores)
+  - [Protótipo Alto Nível](#protótipo-alto-nível)
+
+## Identidade Visual
+
+Antes de iniciar o desenvolvimento dos protótipos de tela, o primeiro passo foi estabelecer uma identidade visual para o projeto. Essa identidade serviria como um guia para as cores, fontes e logotipo que seriam usados posteriormente. Abaixo, está a definição da identidade visual do projeto
+
+### Logo
+<img src="./resources/images/SemBarreiras-Logo.png" alt="Logo SemBarreiras" width="250">
+
+### Tipografia
+<img src="./resources/images/tipografia.png" alt="Tipografia" width="250">
+
+### Contrastes
+<img src="./resources/images/contrastes.png" alt="contrastes"  width="250">
+
+### Paleta de Cores
+<img src="./resources/images/paletaCores.png" alt="paleta de cores" width="250">
+
+## Protótipo Alto Nível
+
+<img src="./resources/images/Mockups.png" alt="Protótipo de Alta Fidelidade">