Marina Geller YamagutiDescriçã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
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)
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.
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.
Dashboard de Projetos:
Popup de Criação de Projeto:
Telas do Admin
As telas a seguir demonstram a visão que o Gerente tem sobre um projeto criado.
DashBoard:
Informações Gerais:
Riscos:
Entregas:
Gantt:
Controle de Usuários:
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.