|
|
|
| [Home](home) | [Escopo e Cronograma](escopo-e-cronograma) | [Processo](processo) | [Design/Mockups](design_mockups) | [**Configuração**](configuracao) | [Arquitetura](arquitetura) | [Código](codigo) | [BD](banco_dados) | [Qualidade](qualidade) | [Utilização](utilizacao) |
|
|
|
|
| :----------: | :---------------------------: | :------------------: | :--------------: | :------------------------------: | :------------------------: | :--------------: | :---------------: | :--------------------: | :----------------------: |
|
|
|
|
|
|
|
|
# Design do Sistema e Mockups
|
|
|
|
|
|
|
|
## Descrição
|
|
|
|
|
|
|
|
Esta seção detalhará todas as decisões de Design do Sistema, incluindo as escolhas da equipe e as solicitações dos Stakeholders. Uma das principais demandas dos clientes foi a implementação de uma funcionalidade que permita alternar entre os modos claro e escuro no design das telas. A seguir, apresentaremos o design desenvolvido com base nessa recomendação.
|
|
|
|
|
|
|
|
## Sumário
|
|
|
|
|
|
|
|
- [Descrição](#descrição)
|
|
|
|
- [Sumário](#sumário)
|
|
|
|
- [Protótipos de Alto Nível](#protótipos-de-alto-nível)
|
|
|
|
|
|
|
|
## Protótipos de Alto Nível
|
|
|
|
|
|
|
|
Os mockups foram feitos na ferramenta Figma e podem ser encontrados em [Figma - HoorTech](https://www.figma.com/design/c3wzpE9gPxspHP1vo7mTrG/HoorTech-Mockup?node-id=0-1&node-type=canvas&t=YZWl0egUQSYd3EgE-0).
|
|
|
|
|
|
|
|
### Modo Claro
|
|
|
|
|
|
|
|
#### Sem Vídeo do Usuário
|
|
|
|
|
|
|
|
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
|
|
|
|
<img src="uploads/images/tela1.png" width="30%" height="auto" >
|
|
|
|
</div>
|
|
|
|
|
|
|
|
#### Com Vídeo e Legendas
|
|
|
|
|
|
|
|
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
|
|
|
|
<img src="uploads/images/tela2.png" width="30%" height="auto" >
|
|
|
|
<img src="uploads/images/tela3.png" width="30%" height="auto" >
|
|
|
|
<img src="uploads/images/tela4.png" width="30%" height="auto" >
|
|
|
|
</div>
|
|
|
|
|
|
|
|
### Modo Escuro
|
|
|
|
|
|
|
|
#### Sem Vídeo do Usuário
|
|
|
|
|
|
|
|
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
|
|
|
|
<img src="uploads/images/tela5.png" width="30%" height="auto" >
|
|
|
|
</div>
|
|
|
|
|
|
|
|
#### Com Vídeo e Legendas
|
|
|
|
|
|
|
|
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
|
|
|
|
<img src="uploads/images/tela6.png" width="30%" height="auto" >
|
|
|
|
<img src="uploads/images/tela7.png" width="30%" height="auto" >
|
|
|
|
<img src="uploads/images/tela8.png" width="30%" height="auto" >
|
|
|
|
</div> |
