|
|
| [Home](home) | [Escopo e Cronograma](escopo) | [Processo](processo) | [**Design/Mockups**](design_mockups) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Código](codigo) | [BD](banco_dados) | [Qualidade](qualidade) | [Utilização](utilizacao) |
|
|
| [Home](home) | [Escopo e Cronograma](escopo) | [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
|
|
## Sumário
|
|
|
|
|
|
|
|
- [Ferramenta](#ferramenta)
|
|
|
|
- [Arquivos](#arquivos)
|
|
|
|
- [Design do Sistema](#design-e-mockups-do-sistema)
|
|
|
|
- [Protótipo base](#mockups-base-do-projeto)
|
|
|
|
- [Protótipo de baixa fidelidade](#protótipo-de-baixa-fidelidade)
|
|
|
|
- [Assets e padrões de telas](#assets-e-padrões)
|
|
|
|
- [Protótipo de alta fidelidade](#protótipo-de-alta-fidelidade)
|
|
|
|
|
|
|
|
### Ferramenta
|
|
|
|
|
|
|
|
|
|
|
|
[Figma](https://www.figma.com/)
|
|
|
|
|
|
|
|
### Arquivos
|
|
|
|
|
|
|
|
Link para o protótipo [navegável](https://www.figma.com/proto/T6q6QPQLKETd1bLvDlX3Rq/AGES---Autis?page-id=701%3A594&node-id=894%3A5053&viewport=241%2C48%2C0.02&scaling=min-zoom&starting-point-node-id=894%3A5053&show-proto-sidebar=1)
|
|
|
|
|
|
|
|
Link para os [mockups](https://www.figma.com/file/T6q6QPQLKETd1bLvDlX3Rq/AGES---Autis?node-id=701%3A594)
|
|
|
|
|
|
|
|
# Design e Mockups do Sistema
|
|
|
|
|
|
|
|
## Descrição
|
|
## Mockups base do projeto
|
|
|
|
|
|
|
|
No começo do projeto, os stakeholders nos apresentaram mockups iniciais que haviam preparado no contexto de primeiras idealizações do que seriam as telas deste projeto. Entretanto, o time achou melhor começar o design da prototipação do zero, visto que durante os primeiros encontros se viu que os stakeholders estavam um pouco indecisos sobre quais artefatos e funcionalidades o projeto contemplaria. Tal problema foi sendo resolvido tirando dúvidas durante os encontros e definindo as User Stories. Dessa forma, eles nos disponibilizaram o projeto base abaixo que já tinham desenvolvido anteriormente para a Maratona de Inovação da PUCRS e, com isso, conseguimos ter uma ideia mais sólida do que seria a aplicação em si.
|
|
No começo do projeto, os stakeholders nos apresentaram mockups iniciais que haviam preparado no contexto de primeiras idealizações do que seriam as telas deste projeto. Entretanto, o time achou melhor começar o design da prototipação do zero, visto que durante os primeiros encontros se viu que os stakeholders estavam um pouco indecisos sobre quais artefatos e funcionalidades o projeto contemplaria. Tal problema foi sendo resolvido tirando dúvidas durante os encontros e definindo as User Stories. Dessa forma, eles nos disponibilizaram o projeto base abaixo que já tinham desenvolvido anteriormente para a Maratona de Inovação da PUCRS e, com isso, conseguimos ter uma ideia mais sólida do que seria a aplicação em si.
|
|
|
|
|
|
|
|
<img src="./resources/images/mockups/mockups-projeto-base.png" width="400">
|
|
<img src="./resources/images/mockups/mockups-projeto-base.png" width="400">
|
|
|
|
|
|
|
|
## Protótipos de baixa fidelidade
|
|
## Protótipo de baixa fidelidade
|
|
|
|
|
|
|
|
O time desenvolveu inicialmente protótipos de baixa fidelidade utilizando muito o projeto base demonstrado anteriomente, para que pudéssemos visualizar melhor o funcionamento do fluxo das telas da aplicação. Os protótipos foram feitos presencialmente no quadro da sala de aula, porém isso foi passado para um diagrama mais formal. O motivo da escolha é porque, dessa forma, fica melhor visualizar o fluxo pensado, visto que se mantêm um padrão mais legível do que no caso das fotos que foram tiradas diretamente do quadro. Assim, este retrabalho facilita a legibilidade desses protótipos de baixa fidelidade nesta Wiki para quem for acessá-la. Abaixo está disponibilizada a imagem do fluxo de telas desta segunda versão do protótipo de baixa fidelidade:
|
|
O time desenvolveu inicialmente protótipos de baixa fidelidade utilizando muito o projeto base demonstrado anteriomente, para que pudéssemos visualizar melhor o funcionamento do fluxo das telas da aplicação. Os protótipos foram feitos presencialmente no quadro da sala de aula, porém isso foi passado para um diagrama mais formal. O motivo da escolha é porque, dessa forma, fica melhor visualizar o fluxo pensado, visto que se mantêm um padrão mais legível do que no caso das fotos que foram tiradas diretamente do quadro. Assim, este retrabalho facilita a legibilidade desses protótipos de baixa fidelidade nesta Wiki para quem for acessá-la. Abaixo está disponibilizada a imagem do fluxo de telas desta segunda versão do protótipo de baixa fidelidade:
|
|
|
|
|
|
| ... | @@ -69,7 +90,7 @@ Os popups foram usados principalmente para indicar algum erro ou sucesso ao usu |
... | @@ -69,7 +90,7 @@ Os popups foram usados principalmente para indicar algum erro ou sucesso ao usu |
|
|
|
|
|
|
|
<img src="./resources/images/mockups/mockups-componentes-popup-tag.png" width="400">
|
|
<img src="./resources/images/mockups/mockups-componentes-popup-tag.png" width="400">
|
|
|
|
|
|
|
|
## Protótipos de alta fidelidade
|
|
## Protótipo de alta fidelidade
|
|
|
|
|
|
|
|
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.
|
|
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.
|
|
|
|
|
|
| ... | @@ -112,26 +133,14 @@ Com relação às telas de fórum, estas também são semelhantes às telas do p |
... | @@ -112,26 +133,14 @@ Com relação às telas de fórum, estas também são semelhantes às telas do p |
|
|
|
|
|
|
|
<img src="./resources/images/mockups/mockups-especialista-forum.png" width="100">
|
|
<img src="./resources/images/mockups/mockups-especialista-forum.png" width="100">
|
|
|
|
|
|
|
|
### Fluxo do especialista
|
|
### Fluxo do coordenador
|
|
|
|
|
|
|
|
TO DO
|
|
|
|
|
|
|
|
|
|
|
Para o fluxo do coordenador, a *homepage* direciona o usuário para as telas de gerenciamento de alunos ou de gerenciamento de usuários (professor, especialista ou responsável). Nestas telas, além de realizar cadastros, deve ser possível realizar edições e deleções.
|
|
|
|
|
|
|
|
## Sumário
|
|
Abaixo, estão presentes as telas de gerenciamento de alunos, sendo que a a primeira linha de telas representa o cadastro e a edição de alunos, enquanto a segunda linha de telas representa a seleção de responsáveis para vincular com o aluno (podendo ser um ou mais responsáveis) ou o cancelamento do cadastro do aluno.
|
|
|
|
|
|
|
|
- [Design do Sistema](#design-do-sistema)
|
|
|
|
|
- [Ferramenta](#ferramenta)
|
|
|
|
|
- [Arquivos](#arquivos)
|
|
|
|
|
|
|
|
|
|
## Página de Mockups
|
|
<img src="./resources/images/mockups/mockups-coordenador-gerencia-aluno.png" width="400">
|
|
|
|
|
|
|
|
### Ferramenta
|
|
Nesta outra figura abaixo, podem ser vistas as telas de gerenciamento de usuário. Já foram desenvolvidos dois formatos de tela para seleção do tipo de usuário que será cadastrado: a primeira sendo a tela com o popup de escolha do usuário, que encaminhava para diferentes telas de cadastro com diferentes formulários; e a segunda sendo as telas onde o formulário é mostrado dinamicamente de acordo com a seleção do usuário no *radio button*. Já na última linha desta figura, é possível ver a tela de edição de um usuário e as mensagens do popup apropriadas para cada decisão tomada pelo usuário nesta edição.
|
|
|
|
|
|
|
|
|
|
<img src="./resources/images/mockups/mockups-coordenador-gerencia-usuario.png" width="400"> |
|
|
[Figma](https://www.figma.com/)
|
|
|
|
|
|
|
|
|
|
### Arquivos
|
|
|
|
|
|
|
|
|
|
Link para o protótipo [navegável](https://www.figma.com/proto/T6q6QPQLKETd1bLvDlX3Rq/AGES---Autis?page-id=701%3A594&node-id=894%3A5053&viewport=241%2C48%2C0.02&scaling=min-zoom&starting-point-node-id=894%3A5053&show-proto-sidebar=1)
|
|
|
|
|
|
|
|
|
|
Link para os [mockups](https://www.figma.com/file/T6q6QPQLKETd1bLvDlX3Rq/AGES---Autis?node-id=701%3A594) |
|
|
|
\ No newline at end of file |
|
|
