Grupo C3 - Felipe Silva, Felipe Viacava, João e Lucas

Informações Gerais

Trabalho em equipe

Verde: PRESENÇA
Azul: FALTA ABONADA
Vermelho: FALTA

Membro\Encontro 09 10 11 12
Felipe Silva
Felipe Viacava
João Rezende
Lucas Alba

Situação do projeto

Verde: ENTREGUE
Azul: ENTREGUE ATRASADO
Vermelho: PENDENTE

Fase\Entrega Wikidot GitHub
Arquitetura de Informação
Leis de Gestalt e Princípios CRAP
Teoria das Cores e Tipografia

GitHub

https://github.com/chends888/Projeto-1-Co-design-de-apps.git

Arquitetura de Informação

Primeira tarefa

Experimentação e testes em laboratório

Acionamento PWM com eletrônica analógica ou filtro
Estação meterorológica

Projetos envolvendo softwares

Protótipo de website
Protótipo de aplicativo
Jogo da velha
Comparação de interfaces
CRUD
Projeto final

Prototipagem

Estação metrorológica
Sistema de aquecimento de chuveiro elétrico
Barata elétrica
Brinquedo infantil
Rede de distribuição de petróleo
Circuito eletrônico com amplificados operacional ou diodos e transistores

Produções textuais

Primeiro artigo
Segundo artigo
Aplication Singularity

Apresentações

Aplication Singularity
Dinâmica populacional
Farmacocinética ou Termodinâmica
Sistema mecânico

Projetos teóricos

Sistema mecânico
Farmacocinética ou Termodinâmica
Cálculo de conceito
Teorema do limite central
Modelos de regressão
Dinâmica populacional
Estudo autônomo
Ajuste de modelo teórico
Análise exploratória
Projeto único

Feedback do ninja

Divisão de competências por curso: Mecânica e Mecatrônica estão exatamente iguais, seguindo esse raciocínio parece que não é necessário ter dois cursos diferentes. Também não há nada de programação em ambos, algo a ser considerado, já que programar se tornou um requisito mínimo para engenheiros.

Divisão de competências práticas e teóricas: O projeto único de Física do Movimento também poderia ser uma opção para competência prática.
PS: cuidado com os erros de português

Segunda tarefa

Feedback do ninja

Entrega não relacionada ao que a tarefa pedia.

Terceira tarefa

-Projeto: Estação meteorológica
-Categoria: Prototipagem e experimentação
-Semestre: 1º
-Disciplina: Instrumentação e medição
-Descrição: A estação meteorológica desenvolvida para a disciplina Instrumentação e Medição consistia num circuito elétrico montado numa placa de circuito impresso de cobre, contendo sensores de umidade, temperatura, pressão e algum outro sensor escolhido pelo grupo. Todo este circuito era ligado a um micro-controlador (neste caso o Arduino), que recebia as leituras dos sensores e, através de um código criado pelo grupo contendo a calibração deles, transformava-os em um sinal digital exposto numa tela LCD. Para as desenvolver os códigos de calibração dos sensores, os alunos utilizaram os laboratórios e fizeram diversas medições, comparando-as posteriormente com os valores reais medidos por sensores já calibrados.

-Projeto: Farmacocinética ou termodinâmica
-Categoria: Prototipagem
-Semestre: 1º
-Disciplina: Natureza do design
-Descrição: A barata elétrica foi o produto do primeiro projeto de Natureza do Design, uma das disciplinas do primeiro semestre de engenharia. Os alunos foram encarregados, em duplas, de remover o motor elétrico de uma barata de brinquedo, projetar uma plataforma para acoplar este motor e imprimir esta plataforma numa impressora 3D. Ao final do projeto, era esperado que a “baratinha” de cada grupo fosse capaz de se locomover quando estivesse com o motor ligado. A apresentação foi uma corrida em raias entre os projetos dos diferentes grupos.

-Projeto: Barata elétrica
-Categoria: Apresentações e projetos teóricos
-Semestre: 1º
-Disciplina: Modelagem e simulação do mundo físico
-Descrição: O segundo projeto do curso de Modelagem e Simulação do Mundo Físico foi analisar um sistema físico real – sendo este sistema um sistema termodinâmico ou farmacocinético – e, a partir desta análise, desenvolver um código em Python que simulasse este modelo e fizesse previsões do comportamento do mesmo para diversas situações. Os projetos foram expostos em banners numa apresentação em sala de aula, tendo como avaliadores o professor, alunos e monitores designados pelo professor.

-Projeto: Jogo da velha
-Categoria: Software
-Semestre: 1º
-Disciplina: Design de software
-Descrição: O jogo da velha, um exercício-programa da disciplina Design de Software, foi um código em Python criado pelos grupos de alunos. O resultado foi simples: um jogo da velha designado para 2 jogadores na mesma tela, capaz de interpretar as jogadas e anunciar o vencedor. Ao final, o tabuleiro deveria se limpar sozinho. O principal recurso utilizado foi a biblioteca Tkinter, responsável por gerar interfaces gráficas.

-Projeto: Primeiro artigo
-Categoria: Produções textuais
-Semestre: 1º
-Disciplina: Grandes desafios da engenharia
-Descrição: Para a tutoria da disciplina Grandes Desafios da Engenharia, foi requisitado que os alunos escrevessem um pequeno ensaio acadêmico com introdução, resumo, metodologia e conclusão. O tema discutido neste ensaio deveria ser pertinente ao curso.

-Projeto: Dinâmica populacional
-Categoria: Apressentações e projetos teóricos
-Semestre: 1º
-Disciplina: Modelagem e simulação do mundo físico
-Descrição: O primeiro projeto para Modelagem e Simulação do Mundo físico foi o estudo e a modelagem da dinâmica populacional de tubarões, raias e vieiras. Foi criado um código em Python considerando diversos parâmetros e variáveis – como caça, predação e reprodução – que fazia simulações neste sistema, buscando estabelecer relações entre as variáveis e parâmetros de uma população (como a de tubarões) com a projeção final de outra população envolvida no sistema.

Feedback do ninja

Incompleto

Quarta tarefa

Analisando diversos sites, que consideramos bons e ruins, chegamos à conclusão de que nosso site irá ter um visual mais limpo, contendo apenas o necessário (que seriam as categorias, algum tipo de slide de imagens e o setor de contato [sobre nós]), como mostra a imagem abaixo.
Ele teria uma certa proximidade entre os objetos, mas não exagerada, teria um alinhamento geral mais centralizado (retirado bastante do site da Apple, o qual achamos bem organizado). A simetria se daria bastante por causa da simetria nos elementos do site. A repetição se daria nas várias páginas do nosso site, que seriam todas feitas a partir de um modelo comum. Não existiria um contraste muito grande, as cores seriam todas parecidas, apenas com mudanças nas tonalidades.
Haverá proximidade entre os itens comuns, por exemplo os link para a página individual de cada aluno, facilitando assim a divisão entre os temas dentro de uma mesma página.

14238302_1360831783934873_1197075488463344618_n.jpg?oh=bf6906896afe8c4ccabc731ed34f3672&oe=584A7396&__gda__=1481407009_c8d09619bab8b3964c3a32ad628e29df

Atualização:
Resolvemos não usar mais este modelo. Principalmente porque descobrimos que cada aluno tem que ter suas próprias páginas do portifólio. Então achamos mais sensato colocar a seleção de alunos logo na página principal do site.

Feedback do ninja

Incompleto

Teoria das Cores e Tipografia

Mockup da página principal

14448987_1379060785445306_2919743339235915798_n.jpg?oh=ba2a35b2b148b728e4709f09f274ec95&oe=587F8C09
Aqui optamos por uma página inicial que já desse a opção de escolha do aluno, afinal o objetivo do portifólio é acessar o portifólio de um aluno específico.

C: Pode-se perceber o contraste dos botões e do texto do título com o fundo branco da página, gerando assim um texto bastante legível e botões chamativos.
R: A repetição da página incial se dará mais pelo estilo em geral, como as cores e tipografia do site.
A: O alinhamento percebe-se nos botões, que estão todos alinhados na horizontal, junto com o título.
P: Sobre a proximidade não há muito o que falar, os objetos estão todos próximos, facilitando a leitura.

Mockup da página sobre mim

14457279_1379060778778640_5681554352366887910_n.jpg?oh=2123d941dd8c4695dcd2530b5e942cc7&oe=586A55CA
Em nosso caso a página 'sobre mim' é a própria página de projetos do aluno, contendo uma breve descrição sobre o mesmo, seu contato e seus projetos categorizados.

C: Observa aqui assim como na página principal, um contraste no texto com o fundo, porém agora existe uma área para a descrição do aluno (um fundo bem escuro), em contraste com o texto nele contido (cor branca), facilitando novamente a leitura.
R: A repetição como citada anteriormente se da bastante no estilo da página, mas aqui é introduzida ao leitor o menu (espaço para navegação entre os alunos do grupo), e a área para descrições, objetos que se repetirão na página dos projetos, criando um costume ao leitor.
A: O alinhamento se dá bastante nos botões dos projetos, os quais estão todos alinhados e organizados conforme o tamanho da janela do navegador.
P: A proximidade é observada tanto nos botões das categorias como no texto da descrição, ambos não se estendem do começo ao final da página, facilitando e não cansando a leitura.

Mockup da página de projeto

14502687_1379060782111973_4316750798371477960_n.jpg?oh=3c59dbcb70195dd8f464c6bac968cc27&oe=587C6F23
A página dos projetos é bastante similar com a página do aluno, mantendo o menu e a área de descrição (agora destinada aos projetos). Tínhamos a intenção de colocar imagens individuais para cada projeto, mas no fim acabamos não organizando nosso tempo e os projetos ficaram apenas com a descrição textual.

C: O contraste aqui seria praticamente igual à página do aluno, e da página principal por causa das imagens, análoga aos botões da página principal.
R: A repetição como citada, se daria no menu e na área de descrições. Também vale falar que todas as páginas de projetos seguiram o mesmo modelo
A: O alinhamento também se daria nas imagens dos projetos.
P: A proximidade seria observada na descrição do projeto, que segue o mesmo modelo da descrição do aluno e nas imagens, que não estariam longe da descrição, seguindo a linha de leitura do leitor.

A principal cor utilizada em nosso website é um azul claro, ele que é considerado uma cor 'segura' de ser utilizada, principalmente pois traz uma sensação de calma, e azul é a cor mais favorita entre homens e mulheres no mundo, informação encontrada no link a seguir: https://blog.kissmetrics.com/psychology-of-color-and-conversions/. Os títulos de nosso site usam esse azul (pode ser observado na tabela abaixo), assim como alguns fundos, no caso, quando o fundo é azul, o texto contido nesse fundo torna-se branco, criando uma harmonia de cores claras, entre o azul claro e o branco tanto do texto quanto do fundo geral do site, bem como um contraste, facilitando a leitura.

(preencha seguindo o modelo da entrega fictícia)

Referências de cor e fonte

Cor dos títulos e fundos de botões: #2BCDC1
Cor do fundo da descrição na página de cada aluno: #777777
Textos dos botões: #777777

Cores Títulos e botões Fundo descrição Botões quando o fundo é azul
Cores

Fontes utilizadas:

Corpo de texto: utilizamos a Open sans, sans serif. Uma fonte bastante simples, enxuta, fácil e organizada de se ler em telas.
Títulos: Utilizamos a Lato, bem parecida com a Open sans, também sans serif.

Feedback dos avaliadores

Tivemos um feedback bastante crítico (com bastante conteúdo), de Rafael (PandoraLab).

Sobre a usabilidade: Ele achou bem ruim, pois para a busca de um projeto específico, o leitor precisa passar o cursor encima de todos os botões até achar o projeto desejado. A sugestão dele foi: Já que não pode se identificar (ou é bem difícil) um projeto apenas pela sua imagem, poderíamos modificar os botões para mostrarem um texto fixo em cima da imagem que poderia estar escurecida, e quando passássemos o cursor encima do botão, o texto sumisse e a imagem se tornasse totalmente visível.

Sobre o footer ou rodapé: Disse que sentiu falta de um footer com algumas informações que não são tão 'importantes' para estarem no menu do topo, só que também não podem estar ausentes, como criação do site, mais informações (sobre a faculdade por exemplo), co-criadores (professores por exemplo)

Salvo indicação em contrário, o conteúdo desta página é licenciado sob Creative Commons Attribution-ShareAlike 3.0 License