Grupo A4

Informações Gerais

Trabalho em equipe

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

Membro\Encontro 05 06 07 08 09 10 11
Filipe Borba (Computação)
Francisco Aveiro (Computação)
Thiago Carletti (Mecatrônica)
William Palmieri (Mecâ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
Versão Apresentável

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

GitHub

https://github.com/filipefborba/P1_Codesign

Arquitetura de Informação

Primeira tarefa
Projetos que demonstram competências de Engenheiro Mecânico

Sistema Mecânico - Modelagem e Simulação
Barata Elétrica - Natureza do Design
Brinquedo Infantil - Natureza do Design
Acionamento PWM - Acionamentos Elétricos

Projetos que demonstram competências de Engenheiro Mecatrônico

Sistema de aquecimento de um chuveiro elétrico - Instrumentação e Medição
Estação Meteorológica - Instrumentação e Medição
Brinquedo Infantil - Natureza de Design
Acionamento PWM - Acionamentos Elétricos

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

Cálculo de conceito - Design de Software
CRUD - Design de Software
Jogo da Velha - Design de Software
Projeto Final de Design de Software - Design de Software
Protótipo de Website - Co-Design de App
Prototipo de Aplicativo - Co-Design de App
Comparação de Interfaces - Ciência dos Dados

Projetos que demonstram competências teóricas

Projeto Final de Design de Software - Design de Software
1° Artigo - Grande Desafios da Engenharia
2° Artigo - Grande Desafios da Engenharia
Sistema de aquecimento de um chuveiro elétrico - Instrumentação e Medição
Rede de distribuição de Petróleo - Instrumentação e Medição
Estação Meteorológica - Instrumentação e Medição
Sistema Populacional - Modelagem e Simulação
Sistema Farmacocinético ou Termodinâmico - Modelagem e Simulação
Sistema Mecânico - Modelagem e Simulação
Brinquedo Infantil - Natureza do Design
Circuito com AmpOp - Acionamentos Elétricos
Acionamento PWM - Acionamentos Elétricos
Projeto único - Física do Movimento
Estudo Autônomo - Matemática da Variação
Tratamento de dados - Ciência dos Dados
Modelo de regressão - Ciência dos Dados
Ajuste de Modelos teóricos - Ciência dos Dados
Teoria do Limite central - Ciência dos Dados

Projetos que demonstram competências práticas

Projeto Final - Design de Software
Application NASA - Grandes Desafios da Engenharia
Estação Meteorológica - Instrumentação e Medição
Barata Elétrica - Natureza do Design
Brinquedo Infantil - Natureza do Design
Circuito com AmpOp - Acionamentos Elétricos
Acionamento PWM - Acionamentos Elétricos
Projeto único - Física do Movimento

Feedback do ninja

Sobre habilidades do engenheiro mecânico: Não entendi como o "Acionamento PWM" se encaixa em uma habilidade do engenheiro mecânico uma vez que o projeto é
quase que exclusivament eletrônico. De resto, achei as classificações razoáveis.

Sobre habilidades do engenheiro mecatrônico: Aqui sim o "Acionamento PWM" faz sentido, acho que ele é um dos melhores representativos do esperado da formação de um engenheiro mecatrônico (pelo menos da maneira que o Insper vem construindo o seu curriculum). De resto, achei as classificações válidas.

Sobre habilidades do engenheiro de computação: Nada de ModSim? As habilidade de tradução do conhecimento cientifico do mundo para código é algo muito bem explorado na matéria e acho que ela mereceria entrar na lista. Além disso, imagino que a parte sobre os projetos de codesign incluídas sejam exclusivamente relacionadas à parte de codagem. As habilidades desenvolvidas na matéria vão muito além do conteúdo exclusivamente de computação (é importante para todo engenheiro). De resto concordo com os projetos levantados.

Sobre habilidades que demonstram competências teóricas: Acredito que esta área esteja "super-populada". O fato do projeto final de design de software, assim como outros estarem tanto como teóricos como práticos torna as áreas maiores do que elas deveriam de fato ser. É evidente que um projeto de computação (por exemplo) involve tanto teoria quanto prática, portanto acredito que colocá-lo nos campos de competência téorica e prática é reduntante. Acho que os bons projetos que melhor se encaixaram nesta classificação foram os artigos de GDE.

Sobre habilidades que demonstram competências práticas: Além do caso de redundância em projetos de engenharia (que já citei nos projetos teóricos), achei as competências atreladas aos projetos de natureza do design muito válidas.

Comentários adicionais: Como já venho escrevendo nos ouros grupos, espero que não tenham ficado com uma ideia do curso de codesign como algo exclusio de computação, pois não é. Os projetos tem um caráter mais voltado pra web-design pelo fato de que pareceu ser a forma de solução mais genérica e simples para que vocês conseguissem implementar algo real e realmente utilizável, mas isso não significa que os maiores aprendizados da matéria serão de computação (já dou um spoiler, não serão).

Segunda tarefa

Projetos de Programação

Cálculo de conceito - Design de Software
CRUD - Design de Software
Jogo da Velha - Design de Software
Projeto Final de Design de Software - Design de Software
Protótipo de Website - Co-Design
Protótipo de Aplicativo - Co-Design

Projetos Eletromecânicos

Estação Meteorológica - Instrumentação e Medição
Chuveiro - Instrumentação e Medição
Acionamento PWM (Pulse Width Modulation) - Acionamentos Elétricos
Circuito com AmpOp - Acionamentos Elétricos

Projetos Teóricos

Application NASA - Grandes Desafios da Engenharia
1° Artigo - Grandes Desafios da Engenharia
2° Artigo - Grandes Desafios da Engenharia
Rede de Distribuição de Petróleo - Instrumentação e Medição
Estudo Autônomo - Matemática da Variação
Ajuste de Modelos Teóricos - Ciência dos Dados

Projetos de Teoria Aplicada

Estudo de População - Modelagem e Simulação
Sistema Farmacocinético ou Termodinâmico - Modelagem e Simulação
Sistema Mecânico - Modelagem e Simulação
Barata Elétrica - Natureza do Design
Projeto único - Física do Movimento

Projetos Inovadores

Brinquedo Infantil - Natureza do Design
Application NASA - Grandes Desafios da Engenharia
Protótipo de Aplicativo - Co-Design de Aplicativos

Feedback do ninja

A parte de "teoria aplicada" ficou um pouco confusa, não entendi o que o tópico significaria logo de cara.

A aba de projetos inovadores ficou um pouco estranha também, o que deveria esperar dela? Pelo conteúdo me pareceu que eram os projetos que não sabiam como classificar e acabaram criando uma aba genérica, o que não é uma boa ideia dada a possível escalabilidade do site (pense que se o seu curriculum já é um site razoavelmente grande hoje, imagine daqui há 3 ou 4 anos). A principio não teria problemas com abas com somente um ou dois projetos (como uma aba de design para contemplar o "protótipo de aplicativo" assim como o "brinquedo infantil", por exemplo).

Terceira tarefa

Todas as páginas apresentarão o menu principal em cima, com os itens "menu Principal(nome do dono do porrifólio)", "Sobre Mim" , "Habilidades" , "Projetos".
Ao lado sera possível acessar as redes sociais através dos ícones.

Feedback do ninja

Atrasado

Ficou um pouco vago, deram referências de onde se inspiraram, mas não explicaram o porquê. É bom evitar achismos

Quarta tarefa

Na pagina de projetos, os links direcionam para os temas que separamos. Em cada pagina de tema temos um texto explicando mais sobre o projeto principal e uma lista dos outros projetos do tema.
A pagina sobre mim tem um fundo que é uma foto da pessoa e um texto explicando um pouco de que é a pessoa

Feedback do ninja

Não foi feito

Leis de Gestalt e Princípios CRAP

Em seguida, mostraremos os sketches do Portfólio, feito à mão.

A primeira imagem é referente à página Inicial e à página com as informações do profissional.

pag.%20-%20home%20e%20sobre%20001.jpg

O primeiro quadro da segunda imagem é referente às categorias que foram usadas para dividir os projetos anteriormente. Ao clicar em uma categoria, o usuário será levado à segunda figura dessa imagem, que seria uma página dividida. De um lado, uma lista com todos os projetos, do outro, a descrição do projeto escolhido. Essa representação foi escolhida pois permite uma troca rápida entre os projetos de mesma categoria.

pag.%20-%20projetos%20001.jpg

A terceira imagem, representa a página de habilidades. A ideia é representar de maneira mais objetiva as habilidades do dono do Portfólio.

pag.%20skills%20001.jpg

Referências de Posicionamento

Referências para a o Menu Transparente:

No site todo foi preferido manter uma ideia de clareza, expondo apenas as informações mais importantes e dando um destaque para o profissional. Para isso, nos baseamos em uma mesma imagem de fundo que não tenha muita informação e um menu transparente, para que não tirasse a atenção do resto da página. Abaixo temos referências de sites que também tenham menus transparentes e imagens de fundo que não tragam informações adicionais à página.

https://dribbble.com/shots/2177816-Roney-Gibson - Mike - Creative Mints

https://dribbble.com/shots/1284801-Syke-Personal-Website-Final-Concept - Jamie Syke

https://www.ebanx.com/br

https://dribbble.com/shots/2042501-Potato-landing-page - Eldin Heric

https://www.nubank.com.br/

Formato e posicionamento da Imagem na Página Inicial:

A página inicial acaba sendo um resumo muito rápido e minimalista do perfil, sendo interessante para um primeiro momento, demonstrando objetividade e clareza. A foto seguida de algumas informações trazem esse resumo de forma eficiente.

http://matheusdmd.github.io/

Referências de foto grande no "Sobre mim"

A ideia por trás de usar uma página diferente no "Sobre mim" foi deixar mais próxima do profissional. Há uma quebra de padrão que deixa a página com um ar de "especial" e causa um interesse. Além disso, apesar de se quebrar o princípio CRAP da repetição, fazemos isso com o intuito de chamar a atenção, logo, temos um destaque para essa página. Ainda, alinhamos o rosto do dono do Portfólio com o texto, assim dando o aspecto de alinhamento e o sentido confortável de leitura da esquerda para a direita ocidental, o usuário verá o rosto e depois lerá sobre aquele rosto.

http://sebastianjt.com/ - sebastianjt

http://www.typedna.com/web-fonts/preview/site/589/ - fradtags design

http://www.markmcgall.com/me.shtml - Mark Mcgall

http://www.madebywater.com/

Página de Habilidades:

Na referência a seguir, conseguimos encontrar uma forma dinâmica de demonstrar as habilidades do dono do Portfólio.

http://www.rleonardi.com/interactive-resume/

Página de Projetos:

Na página de projetos, seguimos os princípios da Repetição, Alinhamento e Proximidade para manter a unidade, limpeza e organização da página, pois deixamos as imagens próximas de imagens e textos próximos de textos, alinhando cada um deles e repetindo isso para todas as listagens.

Referências objetivas:
http://www.dailyblogtips.com/crapthe-four-principles-of-sound-design/

http://2012books.lardbucket.org/books/designing-business-information-systems-apps-websites-and-more/s07-01-c-r-a-p-principles-of-graphic-.html

https://blog.kissmetrics.com/common-website-navigation-mistakes/

Feedback do ninja

Não foi feito.

Teoria das Cores e Tipografia

Partindo dos desenhos feitos no papel, iniciamos a construção do esqueleto do site utilizando o HTML e CSS.

Mockup Página Inicial do Site:

Imagempaginainicial.png-

Mockup Página Sobre Mim do Site:

borbafundo.png-

Mockup página de Skills

skills.png

Mockup página de Projetos

projetos.png

Referências de cor e fonte

Fonte Insconsolata utilizada em todos os textos

Segundo as referências que justificam a utilização da fonte, ela é bem-recebida por programadores, criada para terminais e editores de texto, o que é interessante para o nosso site, já que se trata de um Engenheiro de Computação que trabalha exatamente com essas ferramentas, dando ideia de familiaridade com elas.

Referências de utilização e recomendações por programadores:
https://www.typewolf.com/google-fonts

http://hivelogic.com/articles/top-10-programming-fonts/

https://blog.codinghorror.com/revisiting-programming-fonts/

https://www.typewolf.com/top-10-monospaced-fonts

Justificativa da fonte:
https://en.wikipedia.org/wiki/Inconsolata

http://levien.com/type/myfonts/inconsolata.html

Referências sobre as cores utilizadas:

A escolha das cores visava manter a ideia de simplicidade e neutralidade que o site seguiu desde o planejamento e disposição dos elementos.
Desde a teoria das cores de Goethe o Azul já era ligado com simplicidade. O Branco é considerados cores neutras. Misturamos essas duas ideias e chegamos à disposição das cores no site.
Podemos encontrar referências mais diretas sobre as cores nos links abaixo. A matéria diz que a cor azul transmite paz, confiança, segurança e experiência, enquanto o branco, integridade, clareza, simplicidade e minimalismo.
Ou seja a ideia de usar a combinação Branco-Azul foi trazer confiança e experiência para "vender" o dono do portfólio e simplicidade e minimalismo para passar leveza ao site.
Existem também alguns exeplos de sites que usam o azul-branco.

https://en.wikipedia.org/wiki/Theory_of_Colours

https://blog.kissmetrics.com/psychology-of-color-and-conversions/

http://pt.wix.com/blog/2012/12/usando-as-cores-certas-para-o-seu-site/

http://1stwebdesigner.com/best-colors-for-websites/

https://denver2012.drupal.org/

http://facebook.com

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