design_mockups.md

@@ -5,54 +5,65 @@
 
 ## Descrição
 
-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 desse 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 com a definição de User Stories. Dessa forma, eles nos disponibilizaram o projeto base abaixo que já tinham desenvolvido anteriormente 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-projeto-base.png" width="400">
+<img src="./resources/images/mockups/mockups-projeto-base.png" width="400">
 
 ## Protótipos 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 em aula no quadro, porém acabamos passando isso 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 as fotos que foram tiradas diretamente do quadro. Assim, facilitando a legibilidade desses protótipos de baixa fidelidade nesta Wiki para quem for acessá-la. Abaixo está disponibilizada a imagem desse fluxo desse protótipo de baixa fidelidade que se baseou no que foi feito em aula presencialmente no quadro:
+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:
 
-<img src="./resources/images/mockups-baixa-fidelidade.png" width="400">
+<img src="./resources/images/mockups/mockups-baixa-fidelidade.png" width="400">
 
 ## Assets e padrões
 
-Após a primeira semana desenvolvendo os protótipos de baixa fidelidade, inicialmente, se optou por definir todos os assets e padronizações que seriam utilizadas para o desenvolvimento do protótipo de alta fidelidade. Com isso, abaixo estão disponíveis as imagens dos assets que utilizamos para desenvolver as telas do protótipo do projeto tais como padronização de cores, fundos, componentes (nisso incluindo popup, cards, campos de texto, botões e header), tamanhos e fontes de letra (sendo elas de título ou de cards).
+Após a primeira semana desenvolvendo os protótipos de baixa fidelidade, inicialmente, se optou por definir todos os assets e padronizações que seriam utilizadas para o desenvolvimento do protótipo de alta fidelidade. Com isso, abaixo estão disponíveis as imagens dos assets que utilizamos para desenvolver as telas do protótipo do projeto, tais como padronização de cores, fundos, componentes (nisso incluindo popup, cards, campos de texto, botões e header), tamanhos e fontes de letra (sendo elas de título ou de cards).
 
 ### Logo
 Foi criado um novo logo para o projeto já que o logo anteriormente criado na ideia do projeto não encaixaria no design dos outros assets e padrões que projetamos, por isso decidimos fazer um novo.
 
 <img src="./resources/images/autis-logo.png" width="400">
 
+### Padrões de cores
+Uma das primeiras definições de padrões feitas foram determinar quais cores seriam utilizadas no projeto e determinar em quais componentes ou casos elas seriam aplicadas. Os mockups iniciais realizados pelo Stakeholder utilizava diversas cores vibrantes nas telas, sendo estas cores que lembravam a fita quebra-cabeças que é símbolo do Dia Mundial da Conscientização do Autismo, mas o grupo optou por não utilizar tantas cores contrastantes para permitir o destaque de componentes específicos em cada tela.
+
+Assim, o grupo optou por utilizar cores azuladas junto a cores mais neutras, para reduzir este contraste mas ao mesmo tempo manter o uso de uma das cores presentes na fita quebra-cabeças do autismo. O código hexadecimal destas cores, bem como seu uso nos mockups, pode ser visto abaixo:
+
+<img src="./resources/images/mockups/padroes-cores.png" width="400">
+
+### Padrões de fontes
+
+A fazer
+
 ### Header e Background
 O header acompanha o usuário durante toda navegação para saber sempre em que área ele se situa seja de professor, aluno, especialista, coordenador etc. O mesmo acontece com o background, mas ele é apenas visual.
 
-<img src="./resources/images/mockups-header-background.png" width="400">
+<img src="./resources/images/mockups/mockups-header-background.png" width="400">
 
 ### Icones utilizados
 Foram utilizados os icones da biblioteca Font Awesome e na imagem abaixo estão disponíveis as imagens, nomes e onde foram utilizados na prototipação em diversos componentes.
 
-<img src="./resources/images/mockups-componentes-icons.png" width="400">
+<img src="./resources/images/mockups/mockups-componentes-icons.png" width="400">
 
 ### Botões
 Campos clicáveis ao usuário para efetuar das mais diversas ações tais como submeter, deletar ou editar alguma informação ou navegar para alguma tela.
 
-<img src="./resources/images/mockups-componentes-botao.png" width="400">
+<img src="./resources/images/mockups/mockups-componentes-botao.png" width="400">
 
 ### Inputs
 Campos em que o usuário insere informações sejam dele mesmo ou de busca.
 
-<img src="./resources/images/mockups-componentes-input.png" width="400">
+<img src="./resources/images/mockups/mockups-componentes-input.png" width="400">
 
 ### Cards
 Cards que são utilizados na listagem de alunos, materiais, relatórios e características de alunos.
 
-<img src="./resources/images/mockups-componentes-cards.png" width="400">
+<img src="./resources/images/mockups/mockups-componentes-cards.png" width="400">
 
 ### Popups e Tags
 Os popups foram usados principalmente para indicar algum erro ou sucesso ao usuário, já as tags foram utilizadas para categorizar os materiais que são postados.
 
-<img src="./resources/images/mockups-componentes-popup-tag.png" width="400">
+<img src="./resources/images/mockups/mockups-componentes-popup-tag.png" width="400">
 
 ## Protótipos de alta fidelidade
 
@@ -61,7 +72,7 @@ Depois de definidos os assets e padrões a serem utilizados, o time seguiu com o
 ### Login
 Tela inicial de login comum a todos usuários onde para logar é necessário fornecer o email e senha.
 
-<img src="./resources/images/mockups-screens-login.png" width="400">
+<img src="./resources/images/mockups/mockups-screens-login.png" width="400">
 
 ## Sumário