|
|
|
<table>
|
|
|
|
<tr>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Home](home)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[**Escopo**](escopo)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Processo](processo)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Design/Mockups](design_mockups)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Configuração](configuracao)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Arquitetura](arquitetura)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Gerência](gerencia)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Código](codigo)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[BD](Banco%20de%20Dados)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Qualidade](qualidade)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Frontend](frontend)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Backend](backend)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Analytics](analytics)
|
|
|
|
</th>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
## Descrição
|
|
|
|
Esta seção apresentará todos os dados do Design do Sistema (Telas em Alta Fidelidade e Design System), sejam eles escolhas do time ou solicitações dos Stakeholders.
|
|
|
|
|
|
|
|
A prototipação das telas e a definição do fluxo foram desenvolvidas no Figma, organizando os elementos em pastas visando tornar o processo mais intuitivo. O projeto foi desenvolvido em duas resoluções: wireframes e alta fidelidade.
|
|
|
|
|
|
|
|
Link Figma: https://www.figma.com/design/o0BkRWwZ7qbbybGmvbsnwn/AGES?node-id=1-3&t=eu54bQD2AyjkJdrP-1
|
|
|
|
|
|
|
|
## Sumário
|
|
|
|
|
|
|
|
- [Design System](#design-system)
|
|
|
|
- [Tela de Login](#tela-de-login)
|
|
|
|
- [Tela dos Projetos](#tela-dos-projetos)
|
|
|
|
- [Telas do Admin](#telas-do-admin)
|
|
|
|
- [Telas do Membro](#telas-do-membro)
|
|
|
|
|
|
|
|
<br>
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Design System
|
|
|
|
|
|
|
|
O Style Guide definido conta com uma paleta de cores (com cores da marca, de estado, texto e fundo), tipografia (fonte com alta legibilidade e tamanhos padronizados) e padronização do tamanho de arredondamento (_corner radius_) e dos campos de texto (_textfields_)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Tela de Login:
|
|
|
|
|
|
|
|
A tela de Login definida também conta com o tratamento de erro caso a senha esteja incorreta. O usuário pode também optar por logar sem login, conforme o requisitado pela Stakeholder.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Tela dos Projetos
|
|
|
|
|
|
|
|
A tela de Projetos mostra os diferentes status de projetos (separados por cor), assim como o _Empty State _ caso não hajam projetos.
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Dashboard de Projetos:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Popup de Criação de Projeto:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Telas do Admin
|
|
|
|
As telas a seguir demonstram a visão que o Gerente tem sobre um projeto criado.
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## DashBoard:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Informações Gerais:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Riscos:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Entregas:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Gantt:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Controle de Usuários:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
<br>
|
|
|
|
|
|
|
|
## Telas do Membro
|
|
|
|
O membro de um projeto vê as mesmas telas que o Admin, mas de uma maneira mais restrita. Ele não pode editar nada, apenas suas tarefas.
|
|
|
|
|
|
|
|
<br> |
