Grupo A5

Informações Gerais

Trabalho em equipe

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

Membro\Encontro 05 06 07 08 09 10 11
Raphael Costa (Computação)
Lucas Fontenla (Mecatrônica)
Cauê Ferreira (Mecânica)
Martim José (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

https://github.com/lucasfontenla/CoDesign_ArqInfo

Arquitetura de Informação

Primeira tarefa

Projetos que demonstram competências de Engenheiro Mecânico

- Primeiro artigo
- Segundo artigo
- Application do Singularity
- Dinâmica Populacional
- Farmacocinética ou Termodinâmica
- Sistema Mecânico
- Barata Elétrica
- Brinquedo Infantil
- Projeto único
- Estudo Autônomo

Projetos que demonstram competências de Engenheiro Mecatrônico

- Primeiro artigo
- Segundo artigo
- Application do Singularity
- Sistema de Aquecimento de um Chuveiro Elétrico
- Rede de Distribuição de Petróleo
- Estação Meteorológica
- Dinâmica Populacional
- Farmacocinética ou Termodinâmica
- Sistema Mecânico
- 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
- Estudo Autônomo

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

- Primeiro artigo
- Segundo artigo
- Application do Singularity
- Estação Meteorológica
- Cálculo de conceito
- CRUD
- Jogo da Velha
- Projeto final
- Brinquedo Infantil
- Estudo Autônomo
- Protótipo de Website
- Protótipo de Aplicativo
- Análise Exploratória
- Comparação de Interfaces
- Modelos de Regressão
- Ajuste de Modelo Teórico
- Teorema do Limite Central
- Dinâmica Populacional
- Farmacocinética ou Termodinâmica

Projetos que demonstram competências teóricas

- Primeiro artigo
- Segundo artigo
- Dinâmica Populacional
- Farmacocinética ou Termodinâmica
- Sistema Mecânico
- Projeto único
- Estudo autônomo
- Sistema de Aquecimento de um Chuveiro Elétrico
- Rede de Distribuição de Petróleo
- Circuito Eletrônico com Amplificador Operacional ou Diodos e Transístores
- Acionamento PWM com Eletrônica Analógica ou Filtro
- Cálculo de conceito
- CRUD
- Protótipo de Website
- Protótipo de Aplicativo
- Análise Exploratória
- Comparação de Interfaces
- Modelos de Regressão
- Ajuste de Modelo Teórico
- Teorema do Limite Central

Projetos que demonstram competências práticas

- Application do Singularity
- Brinquedo
- Estação Meteorológica
- Barata Elétrica
- Brinquedo Infantil
- Jogo da Velha
- Projeto final

Feedback do ninja

Sobre habilidades do engenheiro mecânico: Não entendi como os artigos de GDE sejam algo que demonstre típicas competências de engenheiros mecânicos. Ao meu ver, os artigos são parte do diferencial do engenheiros Insper, que são fortemente atrelados à competências teóricas e de conciência de contexto. O mesmo vale para o projeto da dinâmica populacional, assim como o sistema farmacocinético/termodinâmico. De resto, os projetos parecem válidos para o tópico.

Sobre habilidades do engenheiro mecatrônico: Novamente o caso dos dois artigos. Acho o projeto da dinâmica populacional não muito condizente com o esperado de um engenheiro mecatrônico, nem o de farmacocinética/termodinâmica. De resto achei as propostas condizentes.

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). Além disso, o comentário sobre os artigos também é válido aqui. De resto concordo com os projetos levantados.

Sobre habilidades que demonstram competências teóricas: Gostei da maneira como vocês dividiram os projetos anteriormente citados em teóricos ou práticos. Desta maneira a reincidência dos projetos não ficara redundante, tal como as informações adicionadas parecem uteis.

Sobre habilidades que demonstram competências práticas: Basicamente o mesmo comentário da competência teórica. Parabéns pela divisão.

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). Além disso, gostaria que tivessem deixado nem que fosse um indicador de qual matéria cada projeto corresponde


Segunda tarefa

Programação

— Front-end

  • Javascript
  • HTML
  • CSS

— Back-end

  • C++ (Arduino)
  • Python

— Ferramentas

  • Git

Eletrônica
— Digitais
— Analógicos

Simulações
— Dinâmica Populacional
— Farmacocinética ou Termodinâmica
— Sistemas Mecânicos

Empreendedorismo
— Social
— Tecnológico

Design
—Design Thinking

Artigos Científicos

Feedback do ninja

O termos back e front-end costumam ser usados para o desenvolvimento de aplicações web. No caso, somente os dados em front-end correspondem ao esperado. Talvez algo como Programação -> Web -> Front-End fosse uma melhor saída. Supondo que os conhecimentos associados à "Back-end" sejam na verdade conhecimentos de programação em geral, tenho uma dúvida, vocês sabem C ou Arduino (são coisas [bem] diferentes)? Não consideraria também "git" uma linguagem de programação e sim uma ferrmenta, a qual classificaria à parte, em algo como Programação -> Ferramentas -> git.

Também tive dificuldades de entender onde os projetos como o final de natureza do design se encaixariam, seria em empreendedorismo social?


Terceira tarefa

• Nome do projeto
• Data:
• Curso - Semestre:
• Duração:
• Categoria:
• Documentação / Escrito Técnico / Escrita Científica:
• Conteúdo Acadêmico presente:
• Palavras-chave:
• Descrição:
• Relacionados:

Feedback do ninja

Faltou o exemplo, uma melhor explicação do que esperar desta região do site. Não entendi muito bem o que gostariam de transmitir da maneira que expuseram.


Quarta tarefa

- A página inicial deve conter um texto explicativo, sobre o que o usuário pode encontrar no portfólio.
Ex: Nesta página você encontrará os projetos que eu desenvolvi até agora, estudando Engenharia da Computação no Insper.

- Na página Sobre Mim, deve haver uma bio breve, objetiva e que aborde todos os pontos importantes.
Ex: Apaixonado por hardware, tecnologia e games. Estudante do segundo semestre de Engenharia da Computação no Insper. Gosto de fuçar nas coisas, porque aprender sozinho é a melhor maneira.

Feedback do ninja

Ok, achei válido, não tenho muito a adicionar, tomem um biscoito.

Leis de Gestalt e Princípios CRAP

2LcnRu3%20-%20Imgur.jpg
.
wAr9W6s%20-%20Imgur.jpg
.
074WXLx%20-%20Imgur.jpg
.
qQFEHYZ%20-%20Imgur.jpg
.
RVEnXhC%20-%20Imgur.jpg

Explicação por imagem

Imagem 1: O alinhamento é centralizado na tela, pois chama mais atenção ao usuário, além de deixar a leitura mais fluida. Cada "bloco" (Título, menu e redes sociais) da página seguem uma ordem de importância na leitura do usuário, exemplo: o menu está logo acima dos atalhos das redes sociais, pois o acesso as redes sociais é secundário frente ao conteúdo do site, porém ambos estão próximos, pois ambos compartilham a informação do dono do site.
Imagem 2: O alinhamento a esquerda é para facilitar a leitura, pois segue o padrão ocidental de escrita. O distanciamento entre os textos de diferentes assuntos ajudam na separação dos temas, assim como distanciamento entre dois sub-títulos. A proximidade da imagem e seu texto descritivo ajudam na melhor associação do conteúdo.
Imagem 3: O alinhamento dos títulos das categorias a esquerda justifica-se pela maior facilidade de achar a categoria desejada. A direita as subcategorias encontram-se nos blocos de suas respectivas categorias. Além disso, a proximidade entre projetos de mesma categoria facilita na visualização de projetos de categorias iguais.
Imagem 4: A esquerda, imagens que ilustram o projeto tendo a direita as descrições que de algum modo referenciam-se a ela, facilitando a assimilação de conteúdo. Alinhamento entre textos para diferenciação entre categorias de descrição.
Imagem 5: Esta página segue o padrão das páginas de projetos e descrição dos projetos, pois assim o usuário encontra um padrão de leitura em todo o website. Cada tipo de contato está referenciado em seu próprio bloco.

Referências de posicionamento

Menu principal centralizado horizontalmente
• Referências que utilizam o mesmo padrão:
http://www.uol.com.br/
http://www.apple.com/
https://thepiratebay.org/
http://www.hostinger.com.br/
http://www.insper.edu.br/
http://www.hypeness.com.br/

• Referência que justifica o padrão:
http://blog.teamtreehouse.com/gestalt-principles-designers-applying-visual-psychology-modern-day-designsimili
Esta página, no item 2 cita que quando objetos estão em um invólucro (enclosure), é como houvesse uma barreira invisível que mostrasse que esses objetos tem a mesma funcionalidade. A centralização do menu se deu pela similaridade, toda a página está centralizada, o que cria uma área de leitura, o usuário não precisa "deslocar" seu olhar pela tela inteira a fim de ler o conteúdo. Isso pode ser explicado pelo item 4 dessa mesma página (Continuation), o usuário cria um momento (assim como na física) e o seu olhar flui de objeto a objeto dependendo da relação, semelhança e distância entre eles.

Redes sociais no fim da página
• Referências que utilizam o mesmo padrão:
http://www.insper.edu.br/
http://www.ahnegao.com.br/
http://www.itaucinemas.com.br/home/alerta-cidade
https://kickback.com/
http://seanhalpin.io/

• Referência que justifica o padrão:
http://blog.teamtreehouse.com/gestalt-principles-designers-applying-visual-psychology-modern-day-designsimili
Esta página, no item 2 cita que quando objetos estão em um invólucro (enclosure), é como houvesse uma barreira invisível que mostrasse que esses objetos tem a mesma funcionalidade.

Título centralizado horizontalmente
• Referências que utilizam o mesmo padrão:
http://www.ahnegao.com.br/
http://www.folha.uol.com.br/
https://pt.khanacademy.org/
http://g1.globo.com/
http://melaniedaveid.com/

• Referência que justifica o padrão:
http://blog.teamtreehouse.com/gestalt-principles-designers-applying-visual-psychology-modern-day-design
Isso pode ser explicado pelo item 4 dessa página (Continuation), o usuário cria um momento (assim como na física) e o seu olhar flui de objeto a objeto dependendo da relação, semelhança e distância entre eles.

Projeto ilustrado com imagem ao lado esquerdo e próximo
• Referências que utilizam o mesmo padrão:
http://www.itaucinemas.com.br/filmes/
http://www.zocprint.com.br/produto/cadernos-personalizados
https://www.amazon.com/dp/B00OQVZDJM/ref=fs_ods_fs_eink_mt
http://www.torrentdosfilmes.com/
http://www.filmetorrent.net/

• Referência que justifica o padrão:
http://blog.teamtreehouse.com/gestalt-principles-designers-applying-visual-psychology-modern-day-design
De acordo com o site, as leis de Gestalt falam sobre como elementos que estão próximos são relacionados pelos usuários. De mesmo modo que se um título/texto estiver próximo o suficiente de uma foto, ele está relacionado com ela.


Teoria das Cores e Tipografia

Mockup da página principal

Capa2.jpeg

Mockup da página sobre mim

SobreMim.jpeg

Mockup da pagina de categorias de projetos

Projetos.jpeg

Mockup da página de projeto

Projeto.jpeg

Referências de cor e fonte

Fonte PT Serif do cabeçalho e rodapé

Referências que utilizam o mesmo padrão:
http://www.blastprocessor.co.uk/
http://purplerockscissors.com/
https://www.theguardian.com/international
https://www.wired.com/2015/01/omniprocessor/
(não é a fonte, mas todas as fontes tem serifa)

Referência que justifica o padrão:
https://www.fonts.com/font/paratype/pt-serif-pro
Pelo fato da fonte ter um alto contraste e letras muito bem distinguíveis, ela pode ser usada em tópicos modernos sobre design e tem alta legibilidade. É muito convencional usá-la no âmbito de negócios e material impresso, tornando a fonte muito usada para propaganda.

Fonte Oswald do corpo

Referências que utilizam o mesmo padrão:
http://www.blastprocessor.co.uk/
https://pocotorobie.pl/
http://www.wisecreative.co/
https://www.typewolf.com/site-of-the-day/studio-lovelock
https://www.typewolf.com/site-of-the-day/move
(fontes Sans Serif -> sem serifa)

Referência que justifica o padrão:
http://www.blastprocessor.co.uk/
O site apresenta o contraste esperado entre as fontes do título e do texto. Para uma aparência mais moderna foi escolhida uma fonte mais "clean" e sem serifa, para que assim, conseguimos o efeito contratante esperado. A fonte Oswald foi remodelada justamente para ser melhor usada nas telas de aparelhos digitais. "Oswald is featured in more than 5,100,393 websites."

Cor vermelha (#ff1212) do cabeçalho e rodapé

Foi uma cor harmonizada entre os tons de ambos os sites:
http://www.blastprocessor.co.uk/
http://www.cheesesurvivalkit.com/

A escolha foi feita para que o vermelho tivesse um tom mais aparente e com maior destaque onde fosse aplicado, ressaltando para importância da visão impactante na capa inicial. A cor vermelha é uma cor muito poderosa para expressar humor e sentimentos, é também uma dar cores que mais chamam atenção, invocando fortes emoções e incentivando o apetite. De acordo com o site: http://www.onextrapixel.com/2013/08/05/anatomy-of-colors-in-web-design-attention-grabbing-red/

As previously mentioned, red can convey many moods, feelings and emotions. This is also true in web design, and the flexibility of red in its various shades gives it a lot to recommend it. Red is not commonly used as a main color in web design, but often serves as a complementary color in specific areas and many designers steer clear of red as a main color because of its diverse associations.

Referências que utilizam o mesmo padrão:
http://www.blastprocessor.co.uk/
http://www.playtika.com/#
http://www.vintageproductions.eu/grid/all/
http://us.cnn.com/?hpt=header_edition-picker
http://www.cheesesurvivalkit.com/
https://fonts.google.com/
https://dolox.com/

Referência que justifica o padrão:
http://www.blastprocessor.co.uk/
http://us.cnn.com/?hpt=header_edition-picker
http://www.cheesesurvivalkit.com/
http://www.onextrapixel.com/2013/08/05/anatomy-of-colors-in-web-design-attention-grabbing-red/

O design da página foi inspirado nesse website, pois o impacto que esperávamos obter com as cores e tipografia, foi conquistado quando visitamos o site pela primeira vez. É nítido que o site consegue ser impactante com cores fortes, mas harmonioso e não cansativo. O vermelho é usado para alguns detalhes e a capa.

Cor branca (#f6f6f6) do fundo

Referências que utilizam o mesmo padrão:
http://www.cheesesurvivalkit.com/
https://fonts.google.com/
http://joshuaraichur.com/
http://gallery.onextrapixel.com/2013/11/06/dolox-inc/
http://deerdesign.net/

Referência que justifica o padrão:
https://blog.crazyegg.com/2012/07/11/website-color-palettes/
https://blastprocessors.co.uk
http://www.onextrapixel.com/2013/09/09/anatomy-of-colors-in-web-design-pure-as-snow-white/

O blog crazzy egg cita que a combinação de cores resulta em uma aparênca profissional e impactante na primeira vista, sendo que a leitura de todo o site é confortável. A combinação entre tons de branco e cinza escuro mais detalhes em vermelho, tornam chamativos os pontos de interesse mas também deixam a leitura confortável.
A página inicial segue o padrão da página blastprocessors.co.uk, pois logo na capa, há o título do site bem grande com um fundo que ressalta o nome da nossa "marca".

White is the opposite of black, and as such it represents lightness in contrast with darkness. It is the color most associated with innocence, perfection, honesty, cleanliness, newness and new beginnings and neutrality.

Feedback do ninja

Wiki confusa, basicamente só considerei o bloco anterior á este como a entrega, já que este é aparentemente o exemplo fornecido.

Acredito que poderiam ter explorado melhor os conceitos formais dados em sala, mas de qualquer forma, a explicação está boa e condizente com o esperado (até um pouco além na verdade).

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