Grupo C7 - Bruna, Clara, Felipe Netto e Victor Hugo

Informações Gerais

Trabalho em equipe

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

Membro\Encontro 09 10 11 12
Bruna Kimura (Computação)
Felipe Scandiuzzi (Mecânica)
M. Clara Luques (Mecatrônica)
Victor Hugo Leal (Mecatrônica)

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/BrunaKimura/Co-design_grupo7.git

Arquitetura de Informação

Primeira tarefa

Projetos que demonstram competências de Engenheiro Mecânico:

-Estação Meteorológica
-Sistema de aquecimento de um chuveiro elétrico
-Acionamento PWM com eletrônica analógica ou filtro
-Circuito eletrônico com amplificador operacional ou diodos e transistores
-Rede de Distribuição de Petróleo
-Farmacocinética ou Termodinâmica
-Projeto Único
-Sistemas Mecânicos
-Estudo Autônomo
-Barata Elétrica
-Brinquedo Infantil

Projetos que demonstram competências de Engenheiro Mecatrônico:

-Estação Meteorológica
-Rede de Distribuição de Petróleo
- Acionamento PWM com eletrônica analógica ou filtro
-Circuito eletrônico com amplificador operacional ou diodos e transistores
-Sistema de aquecimento de um chuveiro elétrico
-Barata Elétrica
-Brinquedo Infantil
-Estudo Autônomo
-Projeto Único

Projetos que demonstram competências de Engenheiro de Computação:

-Cálculo de Conceito
-CRUD
-Jogo da Velha
-Estação Meteorológica
-Farmacocinética ou Termodinâmica
-Dinâmica Populacional
-Analise exploratória
-Comparação de Interfaces
-Modelos de Regressão
-Ajuste de Modelo Teórico
-Teorema do Limite Central
-Estudo Autônomo
-Projeto Final
-Protótipo de Website
-Protótipo de App

Projetos que demonstram competências teóricas:

-Primeiro Artigo
-Segundo Artigo de GDE
-Farmacocinética ou Termodinâmica
-Dinâmica Populacional
-Analise exploratória
-Comparação de Interfaces
-Modelos de Regressão
-Ajuste de Modelo Teórico
-Teorema do Limite Central
-Sistema de aquecimento de um chuveiro elétrico
-Rede de Distribuição de Petróleo
-Estação Meteorológica
-Projeto Único
-Sistemas Mecânicos
-Estudo Autônomo
-CRUD
-Projeto Final
-Jogo da Velha

Projetos que demonstram competências práticas:

-Cálculo de Conceito
-CRUD
-Jogo da Velha
-Projeto Final
-Application Singularity
-Estação Meteorológica
-Acionamento PWM com eletrônica analógica ou filtro
-Sistema de aquecimento de um chuveiro elétrico
-Rede de Distribuição de Petróleo
-Circuito eletrônico com amplificador operacional ou diodos e transistores
-Barata Elétrica
-Brinquedo Infantil
-Protótipo de Website
-Protótipo de App
-Projeto Único

Feedback do ninja

Ficou muito completa a análise que vocês fizeram, decidi nem dividir o feedback entre as competências do curso e as competências práticas e teóricas. Vocês conseguiram distribuir de uma maneira bastante parecida com o que eu faria, parabéns.

Segunda tarefa

CATEGORIAS:

Eletrônica:

- Estação Meteorológica;
- Acionamento PWM com eletrônica analógica ou filtro;
- Circuito eletrônico com amplificador operacional ou diodos e transistores;
- Sistema de Aquecimento de um Chuveiro Elétrico;
- Rede de distribuição de Petróleo.

Análise de Dados:

- Sistema Mecânico;
- Dinâmica Populacional;
- Análise Exploratória;
- Ajuste do Modelo Teórico;
- Teorema de Limite Central;
- Modelos de Regressão;
- Farmacocinética ou Termodinâmica.

Comunicação:

- Application Singularity NASA;
- Primeiro Artigo;
- Segundo Artigo;
- Estudo Autônomo.

Prototipagem:

- Brinquedo para Crianças;
- Barata Elétrica;
- Projeto Único.

Software:

- Projeto Final;
- Cálculo de Conceito;
- CRUD;
- Jogo da Velha;
- Comparação de Interfaces;
- Protótipo de Website;
- Protótipo de Aplicativo.

Feedback do ninja

Galera, muito boa a taxonomia usada, a página está bem limpa e fácil de compreender. A única coisa que eu sugeriria é que vocês adicionem uma descrição sobre o que o usuário vai encontrar neste portfólio, logo na página inicial, assim ele tem uma introdução e acho que contribuiria bastante.

Terceira tarefa

Nome: Projeto Final
Categoria: Software
Período: Primeiro
Design: Sim
Escrita: Não
Descrição: Este "Projeto Final" foi pedido para o curso de Design de Software, dado no primeiro semestre das Engenharias no Insper.
Seu objetivo consistia em criar um código, usando python obrigatoriamente, com alguma biblioteca diferente das trabalhadas em sala de aula, a qual o grupo deveria escolher e aprender por conta própria. Este código deveria ser usado para criar, por exemplo, jogos e aplicativos desktop. Ele teve duração de aproximadamente um mês e meio, começando em Maio e indo até o meio de Junho, envolvendo processos de brainstorm, idealização, preparação e de fato o desenvolvimento do código.
Nas primeiras etapas, brainstorm e idealização, o aluno teve que usar o conceito de Design Thinking, pois o projeto deveria ser "útil" e com interface amigável ao usuário. Já a preparação e a escrita do código ficaram por conta do aluno, durante as aulas estúdio ou fora da aula.
Concluindo: o projeto foi o desenvolvimento de um software, para o qual o aluno teve que empatizar com um possivel usuário, cujo código deveria conter algo de aprendizado autonomo do grupo.

Nome: Application Singuarity NASA
Categoria: Comunicação
Período: Primeiro
Design: Não
Escrita: Sim
Descrição: O curso de Grandes Desafios da Engenharia tem foco em entender tecnologia na sociedade. Assim, é um curso de sociologia com enfoque nas áreas tecnológicas.
As aulas foram embasadas em discussão de ‘cases’. Toda semana cada grupo faz um estudo do ‘case’ e apresenta para a sala e assim se desenvolve a aula. No último trabalho, feito no dia 3 de junho, do Application Singuarity NASA, precisávamos simular uma aplicação neste projeto, com algumas mudanças que estimulassem as competências adquiridas nesta matéria. Além de responder o questionário com os motivos pelos quais seria interessante sua entrada no projeto, era necessário fazer um vídeo de 3 minutos com uma ideia que impactaria um bilhão de pessoas.
Nesta matéria não temos contato com software ou programação. Não houve a necessidade de fabricação de nenhum produto nem o uso de eletrônica. As aulas eram pensadas para esclarecer os motivos que levam uma tecnologia vingar na sociedade ou não, além dos impactos que esta pode causa na população, portanto, pensar em um futuro usuário de seu produto era de extrema importância.
O projeto levou todo o semestre para ser pensado, as aulas auxiliavam no entendimento sobre a filosofia da tecnologia que ajudou na construção do projeto.

Nome: Estação Meteorológica
Categoria: Eletrônica
Período: Primeiro
Design: Sim
Escrita: Sim
Descrição: O trabalho final da matéria de Instrumentação e Medição foi a fabricação de uma estação meteorológica.
Este projeto reuniu todas as habilidades adquiridas na matéria, como: a prototipação na protoboard, a montagem da ponte de Wheatstone, calibração de sensores entre outras. A programação também foi um item aprendido na matéria, já que foi necessário utilizar um arduino e consequentemente programa-lo em linguagem C.
A eletrônica foi o foco principal desta disciplina. Para a fabricação da estação foi necessário também aprender a construir uma placa de cobre e a soldar os equipamentos elétricos.
Foi muito importante pensar em um futuro usuário, colocando diferenciais no seu projeto, como por exemplo, sensores extras, diminuir o tamanho da placa e soldar os sensores estrategicamente para que um não interferisse o outro. Outra habilidade muito importante deste projeto foi os relatórios finais, exigindo uma escrita científica, teórica e extremamente detalhada dos procedimentos feitos. Além de demonstrar todos os cálculos e tabelas dos resultados obtidos.
O projeto iniciou na aula 7 e durou 9 aulas, a apresentação final foi feita no dia 17 de junho.

Nome: Brinquedo
Categoria: Prototipagem
Período: Primeiro
Design: Sim
Escrita: Não
Descrição: O projeto final denominado Brinquedo Infantil, pertencente a matéria Natureza do Design do primeiro semestre do curso de engenharia, teve como principal objetivo a fabricação de um objeto com a finalidade de entreter crianças de 7 a 9 anos de idade. Tal projeto que teve início no começo do mês de maio e se estendeu até a semana do dia 10 de junho envolveu estudos específicos dos usuários com quem estávamos trabalhando, que nos caso eram as crianças, justamente para chegarmos a um resultado satisfatório tanto no design funcional como estético do brinquedo. O que evidencia a proximidade do projeto com trabalhos de um engenheiro mecânico, principalmente, onde a programação de softwares, a eletrônica e a escrita técnica e científica foram deixadas um pouco de lado devido aos intensos períodos de fabricação ao longo das cinco semanas pelas quais se estendeu o projeto.

Nome: Sistema Mecânico
Categoria: Análise de Dados
Período: Primeiro
Design: Não
Escrita: Sim
Descrição:Esse projeto (“Sistemas Mecânicos”) foi tema da matéria Modelagem e Simulação do Mundo Físico, dada às três engenharias: Mecatrônica, Mecânica e Computação. O projeto iniciou no dia 12 de maio e se finalizou no dia 10 de julho, sendo, portanto, a duração de 28 dias.
A abordagem do projeto foi acerca de Sistemas Mecânicos, bem como seu nome indica. Portanto, nosso trabalho foi modelar e simular de acordo com os cálculos e leis físicas determinados sistemas mecânico. São alguns deles: trajetória de uma bola de baseball, lançamento de arco e flecha, lançamentos aeroespaciais, entre outros.
Para a realização, simulação e validação do nosso modelo criado, referente ao sistema escolhido, foi utilizado um software criado por intermédio da linguagem python para que os resultados fossem obtidos com mais facilidade e flexibilidade.
Por ser um projeto de modelagem física, que teve como foco softwares, não houve processos de fabricação e nem a utilização de equipamentos eletrônicos, sendo esses resistores, transistores, sensores entre outros. Também por esse motivo, o projeto não teve como foco o design centrado ao usuário, em oposição, o papel do aluno foi fundamental para a elaboração do sistema físico (mecânico) a fim de elaborar modelos físicos, e para analisas os resultados obtidos.
A apresentação do projeto foi realizada por intermédio de um cartaz, feito também pelos alunos, que procurou ressaltar dados e etapas importantes, e somente esses, para o entendimento e replicação do mesmo trabalho.

Feedback do ninja

O grupo conseguiu responder a todas as perguntas e, mesmo não sendo obrigatório, deu mais de um exemplo. O resultado foi bastante positivo e bem completo, mesmo para quem nunca tinha ouvido falar sobre a matéria ou sobre os projetos, todos teriam facilidade de entender.

Quarta tarefa

O grupo entrou em consenso de que a página inicial deveria conter título, o link para a página 'sobre mim', e as categorias com seus devidos links.
Para o 'sobre mim', escolhemos apresentar o grupo por inteiro, fazendo então um 'sobre nós'.

Bruna:
Meu nome é Bruna, tenho 19 anos. Estudo Engenharia da Computação no Insper, faço um strognoff muito bom, falo japonês, sou meio desastrada, sou de Virgem e gosto de hambúrguer.
Clara:
Olá. Meu nome é Maria Clara, tenho 18 anos, e estou no segundo semestre de Engenharia Mecatrônica no Insper. Eu gosto de cozinhar, ler livros, assistir series e animes e Harry Potter.
Felipe:
Meu nome é Felipe Scandiuzzi, tenho 18 anos e estou estudando Engenharia Mecânica no Insper, em São Paulo.
Há alguns anos comecei a me interessar e estudar sobre a indústria automobilística (principalmente a alemã)e, juntando isso como minha vontade de trabalhar com a mão na massa e com tecnologias inovadoras, decidi seguir essa carreira.
Victor:
Meu nome é Victor Hugo, tenho 18 anos e sou brasileiro. Desde jovem aprendi a gostar de tecnologia e eletrônicos, mas foi somente na faculdade que meu gosto foi instigado e aguçado. Para continuar nesse espirito explorador de novas tecnologia, elaboro e realizo projetos estudantis.

Feedback do ninja

A entrega da quarta tarefa reflete bem o empenho que o grupo teve para essa primeira etapa da matéria, fazendo muito mais do que o esperado. As entregas, como um todo, estão muito boas, continuem com o bom trabalho :)

Sketches iniciais

1 - A tela inicial da página do nosso projeto (Imagem 1) foi pensada para que o usuário/visitante tivesse um acesso visual direto e rápido a todos os itens nela presente. Para isso, escolher colocar o título do projeto centralizado no superior da tela, recebendo edições de destaque (letras maiores e/ou coloridas). Abaixo do título, terá uma rápida descrição (também centralizada) da página em geral. Tal descrição será o mais direta possível para não prender o visitante na leitura por muito tempo. Logo abaixo da descrição haverão, também centralizadas, quatro quadros representando, cada um, um integrante do grupo. O integrante seria identificado inicialmente por uma foto sua mas, ao posicionar o mouse sobre um dos quadros, este fornecerá o nome do aluno, o curso e o semestre que está cursando. Escolhemos fazer dessa maneira pois, além de ficar um pouco mais interativo, o visitante poderia facilmente escolher em qual portfólio entrar. No canto inferior direito da tela será posicionado o logo do Insper, para que não chame muita atenção mas fique, ao mesmo tempo, visível.

2 - A segunda tela (Imagem 2), que é acessada após o usuário clicar em um dos quadros da página inicial, mostrará as informações sobre o aluno escolhido e as categorias nas quais os projetos que ele realizou estão inseridos. As informações sobre o aluno estão na parte superior da tela e estão seguindo a ordem: Nome, Idade, Curso e Sobre mim, sendo que essa posição foi escolhida para que o visitantes vejam de forma rápida os dados do aluno ao qual pertence o portfólio. Além disso, tanto as informações do aluno quanto as categorias estão centralizadas para seguir o layout da primeira tela e o Insper no canto inferior direito também segue a mesma linha. A única diferença é que no canto inferior esquerdo terá um seta que ao ser clicada volta para a tela inicial. Lembrando que os cinco quadros das categoria seguem a mesma animação dos quadros presentes na tela inicial.

3 - Nesta terceira tela (Imagem 3)pensamos em listar todos projetos referentes à categoria selecionada pelo usuário na página anterior. Assim, conseguimos ser bastante objetivos no que queremos mostrar na página. O título estará escrito em fonte maior e centralizado. Em seguida teremos a lista dos trabalhos, com uma foto na lateral e os textos alinhados com a imagem. Outro ponto, seria inverte a posição entre os textos e as fotos para a visualização ficar mais dinâmica sem deixar cansativo. A seta na parte inferior esquerda e o logo do Insper na inferior direita seguiriam a mesma lógica que as telas anteriores.

4- A quarta tela (Imagem 4) é a especificação do projeto escolhido pelo usuário na página anterior. O título da página que é o nome do trabalho estará escrito em fontes grandes e centralizado. Abaixo terá uma foto no lado esquerdo alinhado com as informações gerais. Estas são: ‘Matéria’ (matéria em que pertence o projeto), ‘Categoria’ (categoria em que ele está inserido), ‘Data de início’ (data referente ao dia/mês que começou a ser feito o trabalho) e ‘Duração’(tempo em que demorou para ser feito o projeto). Abaixo dessa parte terá uma descrição detalhada sobre o projeto, como foi feito, qual foi o objetivo entre outras coisas que for conveniente falar. A seta na parte inferior esquerda e o logo na inferior direita segue a mesma lógica das telas anteriores.

Pagina1.1%20projeto.jpe Imagem 1
.
Pagina2.1%20projeto.jpe Imagem 2
.
Pagina3.1%20projeto.jpe Imagem 3
.
Pagina4.1%20projeto.jpe Imagem 4

Referências

https://www.netflix.com/browse
Essa referência foi utilizada tanto para a centralização do conteúdo como para a utilização dos quadros para os alunos e para as categorias

http://g1.globo.com/
Referência utilizada para centralização do título

Mockup da página inicial

esse.png

Mockup da página sobre mim / categorias

entrega%204.2.png

Mockup da página de projetos

entrega%204.3.png

Mockup da página de um projeto

entrega%204.4.png

Na primeira página das quatro acima, testamos novas cores de fundo e letras e novas fontes de escrita. Essas cores serão, posteriormente, transferidas para as outras três páginas para seguirem o mesmo padrão. Lembrando que ainda não são as cores finais e que ainda haverão mais testes.

___

Mockup - Páginal Inicial - Segunda Versão:

pag%20inicial.png

Como pode-se perceber, mudamos bastante o layout da página inicial do projeto. Buscamos algo que fosse mais diferente, que chamasse mais atenção e que fosse mais moderno para torná-la melhor. A imagem que passamos a utilizar como plano de fundo é uma foto tirada por nós com alguns utensílios do FabLab. Além disso, trocamos as cores do título centralizado e das margens das figuras , uma vez que as cores utilizadas anteriormente não se encaixariam no novo layout.

Mockup - Página sobre mim / Categorias - Segunda Versão:

sobre%20mim.png

Mockup - Página de Projetos - Segunda Versão:

pagina333.png

Mockup - Página de um Projeto - Segunda Versão:

pagina444.png

Novas referências:

https://www.glutenfreebox.com.br/
http://www.nowecreative.com/nowezone/wp-content/uploads/2014/06/fresh-design.jpg
Link do site utilizado como referência para colocarmos a imagem escurecida no fundo na Página Inicial.

.
print%20fontes.png
Teste feito para a escolha da fonte que será utilizada para os escritos em todas as páginas do projeto.

.

Cor1.png
Cor2.png
Cor3.png
Acima foram colocados alguns testes de cores para o título que fizemos e que nos levou a usar a cor Gold(#FFD700) como está na imagem da segunda versão do Mockup da Página Inicial.

.
https://s-media-cache-ak0.pinimg.com/736x/7b/04/c8/7b04c8374c743f26cc788943f741d8be.jpg
http://designmodo.com/wp-content/uploads/2011/03/Clean-Portfolio-Web-Designs-2.jpg
Referências da Página Sobre Mim

.
http://tympanus.net/Development/HoverEffectIdeas/index2.html
Referência para a Página dos Projetos

.
paleta%201.jpeg
paleta%202.jpeg
Paletas de cores utilizadas no website
Salvo indicação em contrário, o conteúdo desta página é licenciado sob Creative Commons Attribution-ShareAlike 3.0 License