Grupo B7

Informações Gerais

Trabalho em equipe

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

Membro\Encontro 05 06 07 08 09 10 11
Bruno Landwehr (Mecânica)
Leonardo Grotti (Mecatrônica)
Otavio Cardoso (Mecânica)
Daniel Ruhman (Computação)

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
Versão Apresentável

ATENÇÃO: verde ou azul não significam que foi aprovado, apenas que foi entregue.

Endereço do repositório

github.com/ruhman/Co-Design

Arquitetura de Informação

Primeira tarefa

Projetos que demonstram competências de Engenheiro Mecânico

Termodinâmico ou farmacocinético
Sistema mecânico
Brinquedo infantil
Barata elétrica
Projeto final
Cálculo de conceito
CRUD
Jogo da velha
Sistema de aquecimento de um chuveiro
Rede de distribuição de petróleo

Projetos que demonstram competências de Engenheiro Mecatrônico

Sistema de aquecimento de um chuveiro
Rede de distribuição de petróleo
Barata elétrica
Circuito Eletrônico com Amplificador Operacional ou Diodos e Transístores Acionamento PWM com Eletrônica Analógica ou Filtro
Brinquedo infantil
Projeto único
Projeto final
Cálculo de conceito
CRUD
Jogo da velha

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

Protótipo de website
Protótipo de aplicativo
Cálculo de conceito
CRUD
Jogo da velha
Projeto final
Análise exploratória
Termodinâmico ou farmacocinético
Sistema mecânico
Circuito Eletrônico com Amplificador Operacional ou Diodos e Transístores Acionamento PWM com Eletrônica Analógica ou Filtro
Sistema de aquecimento de um chuveiro
Rede de distribuição de petróleo

Projetos que demonstram competências teóricas

Dinâmica populacional
Termodinâmico ou farmacocinético
Sistema mecânico
Primeiro artigo
Segundo artigo
Aplicação do singularity
Sistema de aquecimento de um chuveiro
Rede de distribuição de petróleo
Análise exploratória
Estudo autônomo
comparação de interfaces
Modelos de regressão
Ajuste de modelo teórico
Teorema do limite central
Circuito Eletrônico com Amplificador Operacional ou Diodos e Transístores Acionamento PWM com Eletrônica Analógica ou Filtro
Estação metereológica

Projetos que demonstram competências práticas

Protótipo de website
Protótipo de aplicativo
Cálculo de conceito
CRUD
Jogo da velha
Projeto final
Projeto único
Estação metereológica
Barata elétrica
Brinquedo infantil
Circuito Eletrônico com Amplificador Operacional ou Diodos e Transístores Acionamento PWM com Eletrônica Analógica ou Filtro
Sistema de aquecimento de um chuveiro
Rede de distribuição de petróleo
Aplicação do singularity

Feedback do ninja

Projetos que demonstram competências por curso
Concordo com os itens que colocaram! Contudo, fiquei pensando sobre o artigo que o Fabio Ayres mostrou durante as aulas de Design de Software, lembram? Aquele sobre as habilidades mais essênciais para um engenheiro mecânico e para um engenheiro mecatrônco… Ou seja, software de maneira geral não é exclusiva para alunos de computação, mas fundamental para todas as áreas
Bem como, para o engenheiro de computação conceitos e projetos de elétrica são funcamentais pois não se trata de um curso de ciência da computação mas engenharia da cmputação
Projetos que demonstram competências entre teóricas e práticas
Concordo com a divisão! faria algumas alterações para alguns projetos que contemplam ambas competências teoricas e práticas.

  • Circuito Eletrônico com Amplificador Operacional ou Diodos e Transístores Acionamento PWM com Eletrônica Analógica ou Filtro
  • Sistema de aquecimento de um chuveiro
  • Estação metereológica

são alguns exemplos

Segunda tarefa

Conhecimentos de programação/software

Protótipo de website
Protótipo de aplicativo
Cálculo de conceito
CRUD
Jogo da velha
Projeto final
Análise exploratória
Comparação de interfaces
Modelos de regressão
Ajuste de modelo teórico
Teorema do limite central

Conhecimentos de comunicação

1˚ artigo
2˚ artigo
Aplicação Singularity

Conhecimentos de empreendedorismo social

Aplicação Singularity
Brinquedo infantil
Projeto final

Conhecimentos de eletrônica

Estudos teóricos

Sistema de aquecimento de um chuveiro elétrico
Rede de distribuição de petróleo

Colocando em prática

Estação metereológica
Circuito Eletrônico com Amplificador Operacional ou Diodos e Transístores Acionamento PWM com Eletrônica Analógica ou Filtro
Projeto único

Conhecimentos de matemática

Estudo autônomo
Termodinâmico ou farmacocinético
Sistema mecânico

Design Thinking – Método de abordagem de problemas

Projeto final
Protótipo de website
Protótipo de aplicativo
Barata eletrônica
Brinquedo infantil

Trabalhando com o mundo real

Estatísticas

Análise exploratória
Comparação de interfaces
Modelos de regressão
Ajuste de modelo teórico
Teorema do limite central

Criando modelos

Dinâmica populacional
Termodinâmico ou farmacocinético
Sistema mecânico

Propondo soluções

Aplicação Singularity

Feedback do ninja

Gostei bastante das divisões, bem abrangentes. Contudo, me parecem conjuntos com intersecções entre eles, o que não é uma falha, mas pode tornar a navegação mais confusa. Além disso, não entendi o que quiseram dizer com "Noções" no começo de diversas categorias, significa que o que fizeram até agora não realmente contempla a grandeza daquele assunto? e quando contemplar terão uma nova categoria com o sufixo "Pra valer"? Talvez isso gere um ar de baixa profissionalidade já que são somente noções

Terceira tarefa

Nome: Projeto final
Curso: Engenharia da computação
Período: 1˚ semestre
Data de início: 15 de abril
Duração: 2 meses
Envolveu fabricação: Não
Envolveu conhecimentos sobre circuitos elétricos ou eletrônica: Não
Descrição: O aluno deveria desenvolver um programa em grupos de 3 e em python para criação de um software simulando a apresentação a um cliente em 2 meses. Dentre os sofwares poderiam ser jogos, simulações de aplicativos ou de sites. Embora os alunos não tenham que procurar usuários para testar o software eles recebiam um constante feedback do professor que fazia o papel do cliente e portanto o usuário foi considerado no desenvolvimento do projeto.

Nome: Aplicação do Singularity
Curso:
Período: 1˚ semestre
Data de início: 25 de maio
Duração: 2 semanas
Envolveu escrita técnica e científica: Não
Descrição: O aluno foi desafiado a propor uma solução individual ou em dupla a um problema qualquer que impactasse 10 milhões de pessoas em 10 anos. Como produto do projeto, deveria ser feito um video de no máximo 5 minutos que mostrasse sua proposta. Era essencial levar em conta o usuário enquanto elaborasse a solução do problema e embora a fabricação da ideia não fosse obrigatória alguns alunos desenvolveram protótipos do que seriam suas ideias. Além disso um formulário de aplicação deveria ser preenchido sobre si mesmo, contando a ideia do projeto, seus interesses nela e o porque de tentar resolver aquele problema específico. Não envolveu nenhuma pratica de programação ou conhecimento de circuitos elétricos.

Nome: Estação Metereológica
Curso: Engenharia mecatrônica
Período: 1˚semestre
Data de início: 10 de maio
Duração: 1 mês e 2 semanas
O usuário foi considerado no desenvolvimento do projeto: Não
Descrição: O aluno deveria calibrar certos sensores a partir de uma série de medições montando-os na protoboard enquanto não estavam devidamente prontos e, por fim, passar para PCB a fim de obter-se uma estação metereológica programada por Arduino. Além disso foi feito um relatório usando escrita técnica no qual foram descritos todos os passos do projeto. Tal projeto foi feito em grupos de 3.

Nome: Sistema mecânico
Curso: Engenharia mecânica
Período: 1˚ semestre
Data de início: 15 de maio
Duração:1 mês
O usuário foi considerado no desenvolvimento do projeto: Não
Envolveu conhecimentos sobre circuitos elétricos ou eletrônica: Não
Descrição: O papel do aluno foi escolher, em duplas, um sistema mecânico que o interessasse e a partir de leis físicas fazer uma representação de seu movimento através de programação em python. O projeto foi apresentado em powerpoint mas além dos slides não foi necessário escrever mais nada para explica-lo, ele não precisou ser fabricado, pois o objetivo era estudar um movimento e chegar a uma conclusão.

Nome: Brinquedo infantil
Curso: Engenharia mecânica ou mecatrônica
Período: 1˚ semestre
Data de início: 25 de abril
Duração: 1 mês e 3 semanas
Envolveu escrita técnica e científica: Nãp
Descrição: O aluno foi desafiado a pensar em um brinquedo infantil para crianças de 7 anos a partir de determinado animal e através do design thinking desenvolvê-lo do zero, checando com diversos usuários as varias etapas do projeto para garantir um feedback positivo. Este projeto foi feito em grupos de 5/6 pessoas e não tinha nenhum quesito obrigatório quanto a envolver programação ou conhecimentos elétricos mas dependendo da escolha de brinquedo do grupo isso poderia se tornar necessário

Feedback do ninja

Parabéns por terem feito vários exemplos! Algumas sugestões:

  • Categorias baseadas em Yes/No questions são boas para organização do site de maneira a buscar itens que possuam aquela característica. Contudo, são péssimas para quem não sabe do se trata o projeto, "Envolveu fabricação: Sim" me diz muito pouco sobre o conteúdo e que tipo de fabricação foi utilizada.
  • Tentem não começar todas as descrições com "O papel do aluno" caso contrário podem criar uma categoria "O papel do aluno" e colocar dois ponto do lado.
  • Tentem inserir os dados de Y/N questions na descrição tornando mais completa e descritiva.
  • "O papel do aluno foi escolher, em duplas, um sistema mecânico que o interessasse e a partir de leis físicas e fazer uma representação de seu movimento através de programação em python" diz muito pouco sobre o que foi realmente feito no projeto; entender, modelar, implementar, iterar, validar, por exemplo.

Quarta tarefa

A primeira página do portfólio deve conter 3 opções quanto a divisão para a busca dos projetos: tipos de engenharia, prático ou teórico ou por conhecimentos desenvolvidos. Além disso, haverá uma outra opção: sobre mim. Nesta, o usuário tem acesso ao nome, idade, curso, período que está cursando, projetos preferidos e uma breve biografia da pessoa que está cursando engenharia no Insper.

Feedback do ninja

Legal! Acredito que a idade do aluno é pouco relevante para o contexto, talvez seja legal adicionar além do período, o ano de conclusão do curso.
Achei a estrutura da pagina interessante. Mas não sei se "tipo de engenharia" seja o melhor termo, não sei se passa o efeito correto, se o aluno cursa Mecânica, porque ele estaria fazendo projetos de tipos diferentes? mas acho que é legal fazer a divisão por "conhecimentos desenvolvidos" isso ficou muito bom!


Leis de Gestalt e Princípios CRAP

sketches.png

Referências de posicionamento

Referências de posicionamento

Para todas as páginas:
• Acesso ao perfil no canto superior direito:
https://www.outlook.com
https://www.github.com
https://www.youtube.com
https://www.facebook.com
-> referência que justifica o acesso ao perfil do lado superior esquerdo:
https://medium.com/user-experience-3/the-gutenberg-diagram-in-web-design-e5347c172627#.pvnb6ao10
Com base no diagrama de Gutenberg, o usuário lê o site em forma de um Z, portanto, após ver o logo do Insper e a foto principal, o usuário verá que há a opção "sobre mim".

• Logo no canto superior esquerdo
http://www.insper.edu.br
https://www.github.com
https://www.youtube.com
https://www.facebook.com
-> referência que justifica por que o logo deve ficar no canto superior esquerdo:
https://www.quora.com/Why-do-most-websites-have-their-logo-in-the-top-left-corner
Por que posicionar o logo no canto superior esquerdo no portfólio: como o site anterior explicita, além do fato das pessoas lerem de cima para baixo e da esquerda para a direita, por maior que seja grande a página do site, o canto superior esquerdo sempre será o primeiro lugar a ser olhado pelo usuário. Ao ler primeiro o logo, o usuário atribui todas as informações do site que serão lidas posteriormente, à instituição que o portfólio se refere.

Página principal:
• Quadrados das categorias espalhados pela página:
https://www.youtube.com
https://www.amazon.com
http://www.post-it.com.br/3M/pt_BR/post-it-br/?WT.mc_id=www.post-it.com.br
http://www.insper.edu.br
-> referência que justifica os quadrados das categorias:
https://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/
Por que separar as categorias por meio de quadrados com fotos: O portfólio tem como principal objetivo, ser breve e objetivo. A separação das categorias foi inspirada no sucesso do layout do youtube. Assim como ele o nosso site utiliza o layout five boxes. Além de ser flexível, ele é objetivo

• Foto no centro superior:
https://insper.blackboard.com/webapps/portal/execute/tabs/tabAction?tab_tab_group_id=_226_1
https://www.twitter.com
https://br.yahoo.com
http://www.post-it.com.br/3M/pt_BR/post-it-br/?WT.mc_id=www.post-it.com.br
-> referência que justifica a foto estar no centro superior:
http://www.smallbusinessnewz.com/study-how-our-eyes-look-at-facebooks-timeline-vs-the-old-layout-2012-01
No artigo, está explicado que, com uma foto grande e simples no centro da página, é possível fazer com que a atenção do leitor seja atraída e o mesmo se interesse sobre o conteúdo do site.

Página sobre mim:
• Foto no canto superior esquerdo:
https://www.facebook.com/profile.php?id=100004005068023
https://www.instagram.com/neymarjr/
https://github.com/brunolleite
https://www.youtube.com/user/neymarjr
->referência que justifica por que colocar a foto de perfil no canto superior esquerdo:
http://thenextweb.com/dd/2015/04/10/how-to-design-websites-that-mirror-how-our-eyes-work/#gref
Por que posicionar a foto de perfil no canto superior esquerdo na página sobre mim do portfólio: como o site anterior explicita, o padrão de leitura se baseia na letra F. Segundo está teoria, após passar os olhos pela barra superior, o usuário olharia para a foto do dono do portifólio. A primeira impressão de uma pessoal com base na aparência é essencial para alguém que está procurando pessoas para contratar, logo uma foto do criador do portifólio logo no início é trivial.

• Nome no centro superior:
https://www.facebook.com/profile.php?id=100004005068023
https://www.instagram.com/neymarjr/
https://pt.wikipedia.org/wiki/Neymar
http://ego.globo.com/famosos/tudo-sobre/neymar.html
->referência que justifica por que colocar o nome no centro superior:
http://br.ccm.net/contents/774-webmastering-conceito-do-sistema-de-navegacao
De acordo com essa referência o olho das pessoas está acostumado a iniciar a leitura de uma página pelo canto superior esquerdo e ir fazendo um "ziguezague" até o canto inferior direito, além disso o link cita a importância de mencionar ao que se refere a página antes de trazer diversas informações sobre ela, e é por isso que o nome da pessoa está no centro superior como uma das primeiras coisas a ser lida pelo leitor. Dessa forma ele saberá a quem se refere todas as informações da página antes de lê-las, não causando confusão.

• Visão geral e informações no centro:
https://www.facebook.com/neymarcorinthians/about
http://paolacristinaw.blogspot.com.br/2010/10/curriculum-ficticio.html
https://plus.google.com/u/0/112167556653531665089/about
http://www.catho.com.br/email/elaboracao_curriculo/1403_ex1.html
-> referência que justifica as informações são no centro:
https://medium.com/user-experience-3/the-gutenberg-diagram-in-web-design-e5347c172627#.pvnb6ao10
Com base ,mais uma vez, no diagrama de Gutenberg, como o usuário lê o site em forma de um Z, ele irá ver a foto e o nome do integrante primeiro. Desta maneira, seguirá vendo o perfil do estudante caso lhe seja interessante.

Página de projetos:
• Nome(título) sobre a foto ocupando grande parte da tela:
http://www.nycgo.com/attractions/empire-state-building-experience
http://pt.citypass.com/new-york/empire-state-building?cp_overref=https%3A%2F%2Fwww.google.com.br%2F
http://www.toureiffel.paris/en.html
-> referência que justifica a foto estar no centro superior junto com o título:
http://www.smallbusinessnewz.com/study-how-our-eyes-look-at-facebooks-timeline-vs-the-old-layout-2012-01
http://blog.teamtreehouse.com/gestalt-principles-designers-applying-visual-psychology-modern-day-design
O primeiro artigo explica o porquê da foto estar centralizada na parte superior da página. Tal site é o mesmo que justifica o padrão da foto na página principal. Tal foto chamará a atenção do leitor e fará com que ele se interesse pelo conteúdo do site.
No segundo artigo, é explicado que uma caixa de texto perto de outro elemento mostra que eles estão correlacionados e se referem a mesma coisa (no caso, um projeto feito).

• Descrição no centro, embaixo no nome/foto:
http://pt.citypass.com/new-york/empire-state-building?cp_overref=https%3A%2F%2Fwww.google.com.br%2F
https://en.cristoredentoroficial.com.br/ingressos
https://www.statuecruises.com/#/
http://www.libertyellisfoundation.org/statue-facts
->Referência que justifica o padrão:
http://www.smallbusinessnewz.com/study-how-our-eyes-look-at-facebooks-timeline-vs-the-old-layout-2012-01
Nós tentamos, em nossa página, fazer uma analogia ao que foi feito no facebook posicionando os itens de maneira que o usuário primeiro olhasse para a foto do projeto (o que despertaria um interesse no mesmo) e só depois para sua descrição, fazendo com que o usuário ,já interessado, seja levado a ler sua descrição. Caso o contrário ocorresse seria mais provável do usuário olhar pro texto, se desinteressar e não seguir a leitura da página, possivelmente nem chegando até a foto. O mesmo foi feito pelo facebook e isso é explicado na referência

Teoria das Cores e Tipografia

Mockup da página principal
pagina%20inicial.pdf
Mockup da página sobre mim
sobre%20mim.pdf
Mockup da página de projeto
pagina%20projetos.pdf
Referências de cor e fonte
Fonte Helvetica Nue de todas as descrições
Referências que utilizam o mesmo padrão:
- https://www.tumblr.com/
- https://br.pinterest.com/
- https://www.buzzfeed.com/
- https://www.facebook.com/
Referência que justifica o padrão:
http://www.eyemagazine.com/feature/article/why-helvetica
Explicação da referência : Mesmo com as mudanças na revolução digital, criar uma fonte séria e fácil de ler contínua uma tarefa difícil, a fonte helvética criada em 1957 é criada inteiramente focada na seriedade, os caracteres são próximos , não são inclinados focando sempre na lógica e na racionalidade. Devido a esses motivos decidimos usa-la em nosso site, para facilitar a leitura e não roubar a atenção das imagens e do site com a fonte, usando-as somente para transmitir a informação necessária.

Cor vinho (#660000) do cabeçalho e rodapé
Referências que utilizam o mesmo padrão:
http://www.jonwallacedesign.com/index.html
https://www.behance.net/gallery/686993/Sonze-Design-Studio
http://www.insper.edu.br/?gclid=Cj0KEQjw9b6-BRCq7YP34tvW_uUBEiQAkK3svY-fdB0XOValQrAoPS-nsuznK5S99SsAkQ032DM4__waAqBb8P8HAQ
http://www.nicolafioretti.it
Referência que explica o uso da cor vinho:
https://color.adobe.com/pt/create/image/
http://cwbdeluxe.blogspot.com.br/2008/07/o-significado-das-cores-por-las-salomo.html
A ideia da cor vinho veio do uso do color whell com a nossa foto de entrada da onde selecionamos algumas cores entre elas a cor vinho. Além disso a cor vinho representa a cor da sensualidade e do amor que atrai as pessoas a gostarem do portfólio, mas importante que isso ela representa a coragem para mudar o que lé algo muito interessante em portfólio dado que uma pessoa que está vendo o mesmo está a procura de contratar alguém o que representa uma grande mudança.

Cor vermelha (#cc4125) do fundo
Referências que utilizam o mesmo padrão:
http://www.ligaretro.com.br
http://reeoo.com/avalon-business-advice
http://canastasvirtuales.com
http://www.warchild.org.uk
Referência que explica o que a cor vermelha provoca:
https://www.significados.com.br/cor-vermelha/
Por que utilizar a cor vermelha no portfólio: O vermelho, como o link anterior descreve," estimula o sistema nervoso, a circulação sanguínea, dá energia ao corpo e eleva a autoestima ". Logo, quando o usuário se depara com o site, será estimulado a procurar e achar os projetos que está procurando, já que será estimulado e energizado pela cor de fundo.

Observação: A cor bege usada no mock up da página sobre mim foi retirada pois ficava destoante das outras páginas, ao invés dela colocamos o mesmo vermelho que estávamos usando no fundo de todas as outras páginas.

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