|
|
|
| [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) |
|
|
|
|
| :----------: | :------------------: | :------------------: | :------------------------------: | :--------------------------: | :------------------------: | :------------------: | :------------------: | :--------------------: | :------------------: | :----------------: | :----------------: |
|
|
|
|
|
|
|
|
<div align="center">
|
|
|
|
<img src="./resources/images/navegar.gif" width="300">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
## 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.
|
| ... | ... | @@ -23,17 +25,26 @@ Figma: [Clique Aqui](https://www.figma.com/proto/wbOIcXYzOJeOKm6VUa7VSV/Sem-Barr |
|
|
|
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
|
|
|
|
<div align="center">
|
|
|
|
<img src="./resources/images/SemBarreiras-Logo.png" alt="Logo SemBarreiras" width="250">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
### Tipografia
|
|
|
|
<div align="center">
|
|
|
|
<img src="./resources/images/tipografia.png" alt="Tipografia" width="250">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
### Contrastes
|
|
|
|
<div align="center">
|
|
|
|
<img src="./resources/images/contrastes.png" alt="contrastes" width="250">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
### Paleta de Cores
|
|
|
|
<div align="center">
|
|
|
|
<img src="./resources/images/paletaCores.png" alt="paleta de cores" width="250">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
## Protótipo Alto Nível
|
|
|
|
|
|
|
|
<div align="center">
|
|
|
|
<img src="./resources/images/Mockups.png" alt="Protótipo de Alta Fidelidade">
|
|
|
|
</div> |
|
|
\ No newline at end of file |
