design_mockups

Home	Escopo	Processo	Design/Mockups	Configuração	Arquitetura	Gerência	Código	BD	Qualidade	Analytics

Sumário

Descrição
Identidade Visual
Mockups
Fluxo de Tela Alunos
Fluxo de Tela Professores
Fluxo de Tela Admin
Versão Final das Telas

Descrição

Durante o perido da Sprint 0, foram desenvolvidas pelos AGES III de Frontend as telas da aplicação, feitas na ferramenta Figma, em um trabalho colaborativo com os demais colegas.

Identidade Visual

O primeiro passso antes de dar inicio no desenvolvimento dos protótipos de tela, foi definir uma identidade visual atrelada ao projeto, algo que serviria como guia para as cores, fontes e logotipo que seriam utilizados futuramente. Abaixo, a definição de identidade visual do projeto feita:

É possivel ver algumas das opções consideradas para logotipos e paleta de cores, mas, de acordo com a equipe, foram escolhidos os seguintes elementos visuais para o projeto:

Mockups

Os Mockups da aplicação pode ser vistos em sua integridade na página do Figma feita pelo time. Neste espaço será apresentado somente a tela e uma descrição rápida de sua função. Vale lembrar que as telas foram feitas seguindo as derfinições passadas ao time pelo cliente e com base nas US's do projeto. Link para o Figma

Login

Cadastro

Na tela de cadastro, alem dos campos esperados de cadastro, é possivel ver um botão de Dropdown associaddo as turmas já pré cadastradas na aplicação pelo admin da aplicação, que o aluno pode selecionar.

Fluxo Aluno

Lista Autoavalições

Na tela de Autoavaliações, é possivel ver as autoavaliações feitas pelo aluno até o momento, uma opção de filtragem das mesmas, e a opção de visualizar ou editar uma autoavaliação já feita. Alem disso, a opção de cadastrar uma nova Autoavaliação.

Visualiza Autoavaliação

Edita Autoavaliação

Unica diferença existente entre a tela de Visualização e Edição de Autoavaliações é a prensença de campos editáveis e de um botão de Salvar/Finalizar.

Fluxo Professor

Listagem de Turmas

Após fazer Login na aplicação, usuários do tipo Professor vão poder ter uma visualização das turmas das quais ele tem dominio sobre. Além disso, ele tambem pode visualizar turmas de semestres passados ao selcionar um semestre especifico na aba superior. Ao clicar em uma turma, o professor é levado até a tela que lista os alunos que fazem parte daquela turma.

Listagem Alunos

Na tela de Visualização de Alunos, é possivel ver, alem dos alunos em seus respectivos cards, um filtro que o professor pode utilizar para ajustar sua visualização.

Filtro de Listagem de Alunos

As opções de filtragem definidas variam entre: Todos os Alunos, Todos os Alunos que fizeram a ultima Autoavaliação realizada, e Todos os alunos que não fizeram a ultima Autoavaliação realizada.

Visualização de Avaliações do Aluno

O Professor pode ver as suas Avaliações do Aluno selecionado na tela anterior, bem como as Autoavalições do mesmo. Ele pode editar sua Avalição, como Visualiza-la, e adicionar uma nova Avaliação. Tambem existe a oportunidade de utilização de um filtro por Data ou por Disciplina.

Visualização/Edição Avaliações do Aluno

A Avaliação do professor é baseada em um questionário de 10 perguntas. Cada uma dessas perguntas recebe um ponto. Cada campo oferece a oportunidade do professor de deixar um comentário. Ao final, é oferecido ao professor um campo de observações, onde ele pode adicionar as anotações que achar necessárias. A unica diferença entre a tela de visualização e edição, é novamente a presença do campo editável e o botão de Salvar/Finalizar.

Fluxo Admin

O Usuário Admin da aplicação é definido como um professor com nivel de acesso superior, logo, muitas de suas telas são similares as telas de professor, somente com opções extras que englobam seu nivel.

Visualiza Todas as Turmas

Como Admin, é possivel ver todas as turmas cadastradas no Banco de Dados do projeto, separadas por semestre. Na aba superior tambem é possivel ver o botão de +, que indica que uma nova turma pode ser adicionada. No card de turma, é possivel ver tambem as opções de Deletar ou Editar uma turma em especifico.

Cadastro de Turma

Edição de Turma

Deletar Turma

Menu Lateral de Admin

O Usuário Admin, diferente dos demais, possui uma tela de navegação lateral, que facilita movimentação entre as funções do App, e tambem permite acesso as unicas telas exclusivas dele, que são relacionadas aos demais professores.

Listar Professores

A Tela de listagem de Professores trás elementos presentes nas telas anteriores, como o botão + na aba superior, indicando a possibilidade de adição de um novo professor, como tambem os icones de edição e deletar no card do professor em si.

Cadastro/Edição Professores

Alem dos componenetes necessários para o cadastro de um professor, podemos ver tambem um botão de dropdown que apresenta as turmas existentes na aplicação, para a associão daquele professor a uma turma especifica.

Deletar Professor

Modal de confirmação para a remoção de um professor.

Visualização Alunos

O Usuário Admin pode tambem visualizar todos os alunos da aplicação.

Visualização Auto-Avaliação dos Alunos

O Usuário Admin pode clicar no card de um aluno e ser levado para a tela das avaliações de um aluno, tanto Autoavaliação como Avaliação feita pelo professor. Ele pode somente visualizar a Autoavalição de um aluno.

Observações gerais

Os Mockups apresentados acima são meramente uma base para o que as telas da aplicação irão se assemelhar em sua versão final. É bom ressaltar que são sujeitas a mudanças durante o desenvolvimento da aplicação para entrar em conformidade com futuras adições/edições/exclusões que vierem a ser feitas.