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.
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.
A terceira imagem, representa a página de habilidades. A ideia é representar de maneira mais objetiva as habilidades do dono do Portfólio.
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://dribbble.com/shots/2042501-Potato-landing-page - Eldin Heric
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.
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
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/
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:
-Mockup Página Sobre Mim do Site:
-Mockup página de Skills
Mockup página de Projetos
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/