Grupo A6

Informações Gerais

Trabalho em equipe

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

Membro\Encontro 05 06 07 08 09 10 11
Gianluca Formicola (Mecânica)
Frederico Curti (Computação)
Guilherme Schoueri (Mecatrônica)
Giovanni Ranieri (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
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/guigs10mil/CoDesignProjeto1

Arquitetura de Informação

Primeira tarefa

Projetos que demonstram competências de Engenheiro Mecânico

- Primeiro Artigo
- Segundo Artigo
- Application do Singularity
- ModSim
- Brinquedo Infantil
- Física do Movimento
- Matemática da Variação

Projetos que demonstram competências de Engenheiro Mecatrônico

Projetos Mecatrônica
- Primeiro Artigo
- Segundo Artigo
- Application do Singularity
- Sist. Aquecimento de um Chuveiro Elétrico
- Rede de Distribuição de Petróleo
- Estação Metereológica
- ModSim
- Barata Elétrica
- Brinquedo Infantil
- Acionamentos
- Matemática da Variação

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

- Cálculo de Conceito
- CRUD
- Jogo da Velha
- Projeto Final
- Protótipo de Website
- Protótipo de Aplicativo
- Primeiro Artigo
- Segundo Artigo
- Application do Singularity
- Ciência dos dados
- Estação Metereológica
- Brinquedo Infantil
- Matemática da Variação

Projetos que demonstram competências teóricas

- Cálculo de Conceito
- CRUD
- Jogo da Velha
- Projeto Final
- Primeiro Artigo
- Segundo Artigo
- Application do Singularity
- Matemática da Variação
- ModSim
- Sist. Aquecimento de um Chuveiro Elétrico
- Rede de Distribuição de Petróleo
- Acionamentos

Projetos que demonstram competências práticas

- Jogo da Velha
- Projeto Final
- Protótipo de Website
- Protótipo de Aplicativo
- Ciência dos dados
- Estação Metereológica
- Brinquedo Infantil
- Barata Elétrica
- Brinquedo Infantil
- Estação Metereológica

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. Não entendi direito a existência de "Matemática da Variaçao" e "ModSim" como um tópico uma vez que é uma diciplina de utilidade comum para todas as engenharias. De resto, os projetos parecem válidos para o tópico.

Sobre habilidades do engenheiro mecatrônico: Novamente o caso dos dois artigos e o caso de matemática da variação e modsim. Tente deixar claro o que das diciplinas interessou para a sua construção como engenheiro mecatrônico, por exemplo. De resto achei as propostas condizentes.

Sobre habilidades do engenheiro de computação: O comentário sobre os artigos também é válido aqui. Sobre ModSim e matemática, poderiam pensar em escrever algo sobre as habilidades de tradução do conhecimento cientifico do mundo para código. 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: Evitem ter o mesmo projeto em competências teóricas, práticas e de uma engenharia, tradicionalmente um projeto de engenharia já se encaixa em ambas, colocá-lo como também de caráter teórico E prático fica bem redundate e pode reduzir o valor dado à separação feita por vocês.

Sobre habilidades que demonstram competências práticas: Basicamente o mesmo comentário da competência teórica. Tentem aproveitar de maneira mais rigorosa a divisão, isso pode facilitar a organização do site, refletindo na experiência do usuário.

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

  • Projetos
    • Software
    • Hardware
    • Conceituais
    • Simulações e Modelos
Feedback do ninja

Demorei um pouco para entender o que desejavam passar com este formato, imagino que "Software, Hardware, Conceituais e Simulações e Modelos" sejam todos sub-tópicos dentro do menu "Projetos". Entendi errado?

Além disso, alguns casos (como o do recrutador que procura saber sobre o projeto do animal de natureza do design) simplesmente não estão comtemplados no modelo. Gosto que ele seja simples, mas parece simples de mais.

Terceira tarefa

Nome do Projeto:
Tug War - O Melhor jogo do Brasil
Competências:
Python, Pygame, Software, Design Gráfico
Curso:
Engenharia (Ciclo Básico) - Design de Software
Data de Início/Fim/Semestre
27/04/2016 até 01/06/2016 - 1˚ Semestre
Descrição completa (com fotos no HTML)
Tug War é o jogo open-source que surgiu de um simples conceito: fazer um jogo simples, bonito e competitivo. Com personagens da cultura pop feitos à mão e um visual retrô, o jogo exalta a simples competição de quem consegue apertar certas teclas no teclado mais rapidamente, podendo ser jogado tanto online por LAN quanto no mesmo computador. O jogo foi desenvolvido para a matéria de Design de Software pelo trio Guilherme Schoueri, Frederico Curti e Lucas Fontenla

Feedback do ninja

"O melhor jogo do Brasil", um pouco exagerado não? Vocês já jogaram SuPy Insper Brothers, por exemplo?

Gostei que o jogo é open-source, já ganhou meu coração ai. Qual licença usaram? Seria bacana colocar.

A descrição do projeto está muito boa, parabéns!

Quarta tarefa

Home e sobre mim
A home vai conter uma bio curta com uma foto, thumbnails para os projetos mais marcantes,atalhos para o github e outras redes sociais(linkedin, facebook, google+) , e categorização taxonômica dos projetos
a página sobre mim será uma expansão da bio curta, mais detalhada.

Feedback do ninja

O modelo da home de vocês pareceu bem tradicioonal, o que não é ruim. Cuidado com a maneira que vão expor os projetos, se existirem links diretos na home para todos os projetos (além da thumbnail para os mais marcantes) a página pode ficar muito poluida.

Leis de Gestalt e Princípios CRAP

Sketch da página principal
Foto do sketch inicial(em aula):

nb957Wh.jpg

Fotos:

1a: Sketch realizado em sala de aula - Conceito de rolagem contínua e uma foto central foi consenso entre o grupo, além da escolha do Material Design como framework para a versão final do site.

Referências de posicionamento

Página de rolagem contínua com thumbnails e menu no topo
Referências que utilizam o mesmo padrão:
http://www.tecmundo.com.br/
http://www.theverge.com/
http://www.apple.com/mac/
http://dschool.stanford.edu/
https://twitter.com/
http://www.lifehack.org/

Referência que justifica o padrão:
http://thenextweb.com/dd/2015/08/19/why-long-scrolling-sites-have-become-awesome/#gref
Este é o link de um artigo que explica porque páginas de rolagem contínua são cada vez mais presentes nos sites de hoje. E dentre os vários motivos, o que mais nos chamou a atenção foi o de "guiar" o leitor pelo conteúdo do site.

Foto do indivíduo no centro com breve descrição
Referências que utilizam o mesmo padrão:
http://webonise.co.uk/
https://colemanrollins.io/

Redes sociais e contato no rodapé de todas as páginas
https://www.e-cadeiras.com.br/
http://materializecss.com/
http://www.kanui.com.br/
https://www.viget.com/

Referência de alinhamento:
https://www.twitch.tv/directory
http://g1.globo.com/
https://www.amazon.com.br
https://www.mozilla.org
Como podemos notar em sites como apple e mozilla, as principais informações estão alinhas ao centro da página. Utilizando as referências acimas colocamos a foto principal, os cards e "sobre mim" ao centro da página, enquanto subtítulos como o de categorização se encontram alinhados a direita da página.
Os subtítulos foram aplicados ao lado direito da página e não estão centralizados, pois causam ao leitor uma forma inconsciente de "prestar atenção" na informação que não está centralizada.
Por fim, alinhamos os cards unidos em si devido ao princípio da proximidade, ou seja, quando vários itens estão próximos entre si, formam uma unidade visual única, coesa, e não mais parecerão distintos, já que todos são projetos para serem vistos.

Referência que justifica o alinhamento:
http://desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-5-exemplos-web-do-principio-do-alinhamento/

Referência de repetição:
http://www.r7.com/
http://www.submarino.com.br/
https://www.youtube.com/

Referência que justifica o padrão:

https://www.orbitmedia.com/blog/website-footer-design-best-practices/
Este link se refere a um artigo que lista coisas importantes que são legais de colocar no footer de uma página, como por exemplo informações da página e dos criadores dela, que normalmente são informações de contato.

Referência que justifica outros padrões e melhorias futuras
No site http://www.goodui.org/, algumas dicas são valiosas e tentamos seguí-las, como uma que sugere a junção de funções similares ao invés de fragmentar a interface. No nosso conceito a página home deve ser um hub responsivo para as outras categorias do site, conseguindo expor de maneira sólida a mensagem a ser transmitida e o direcionamento de interesses dos usuários.
Outra dica que sugere o uso de transições para que o usuário sempre entenda a consequência de suas ações nos elementos do site.
http://www.thinkaroundcorners.com/2011/10/c-r-a-p-principles-design/

Feedback do ninja

Gostei muito como justificaram cada uma das decisões (principalmente as que definem as leis de Gestalt.

/Wiki bem detalhada, uma das melhores da semana, parabéns!

Teoria das Cores e Tipografia

Mockup das páginas

1a: Sketch do layout da home, com os projetos e a bio curta no formato de cartas expansíveis ( com destaque aos projetos centralizados na página )
2a: Sketch da home ao clicar em um dos projetos, expandindo-o com uma breve descrição e um link para mais detalhes em sua página própria
3a: Sketch da página específica sobre algum projeto, com um layout de carta grande, contendo a descrição adequada sobre o mesmo seguindo os parâmetros aqui definidos anteriormente e fotos
4a: Sketch da página Sobre mim, que dará mais detalhes em uma paragrafação simples, com outra foto (agora que a foto não está mais no cabeçalho)

Screenshot da página home

Referências de cor e fonte

Fonte Roboto
-> Em nosso projeto, os estilos derivados da fonte Roboto são predominantes ao longo de todo o projeto, primeiramente para obter uma tipografia consistente não só na própria página como com as guidelines do Material Design.
Referências que utilizam o mesmo padrão:
https://www.android.com/
https://play.google.com/store
https://www.youtube.com/
https://www.google.com/get/sunroof#p=0
http://m.jetradar.com/
https://fi.google.com/about/
https://en.wikipedia.org/wiki/Android_Ice_Cream_Sandwich
https://developer.android.com/about/versions/android-4.0-highlights.html
http://www.moresleep.net/
http://www.dasselundwagner.com/en/

Referência que justifica o padrão:
https://fonts.google.com/specimen/Roboto
Segunda a página, a fonte Roboto possui uma natureza dupla. Ela possui um esqueleto mecânico e as formas são predominantemente geométricas. A referida fonte permite que as letras estejam com sua largura natural, criando um ritmo de leitura mais natural. Por esses motivos, pareceu - nos uma fonte relativamente simples em seu design, um exemplo claro disso é a ausência de serifas em seus caracteres. Essas características são condizentes com o formato que queremos expôr: com uma aparência descontraída, simples e moderna, de fácil leitura e absorção, podendo inclusive apresentar conteúdos que podem ser de difícil compreensão. Por fim, a referida fonte é utilizada na nova versão do software do android, o "Ice-Cream-Sandwich", ou, versão 4.0. Nela, a Google enfatiza as mencionadas simplicidade e modernidade, e dentre os aspectos utilizados no desenvolvimento da referida atualização, encontra - se a utilização da fonte Roboto. Os ideais perseguidos pela renomada empresa são amplamente admiradas pelo grupo, vide as fontes e as descrições fornecidas, e para espelha- los, a fonte Roboto pareceu - nos ideal.

Cores
As guidelines do Material Design sugerem que seja utilizada uma paleta de cores com vários tons de uma mesma cor primária. Desta forma, é possível destacar com cores escuras elementos mais importantes (os projetos, por exemplo). No nosso modelo, é possível usar cores de acentuação diversas para chamar atenção, como o alaranjado, que acrescenta um tom um tanto quanto mais vibrante à página. A cor mais escura, como a Blue - Grey utilizada no site, remete não apenas à simplicidade do portfólio, mas a um tom ligeiramente mais serio, além de remeter à um tema tecnológico.

Essa filosofia é mais facilmente encontrada em aplicativos de Android que seguem as guidelines do Material Design. O gif abaixo demonstra bem esse conceito:

Referências que utilizam o mesmo padrão:
http://materialwp.com/
http://nimbus9.co/
http://androidto.com/

Referência que justifica o padrão:
https://material.google.com/style/color.html#
As cores do Material Design seguem a mesma filosofia das fontes: são confortáveis, e simples. O usuário se sente familiarizado com com o padrão escolhido por estar acostumado com a disposição deste pelos produtos da google. Além disso, as cores escolhidas, quando associadas às sombras, profundidades e opacidade presente nos elementos do site, criam uma aparência de "objeto" muito natural, como cartas coloridas dispostas sobre uma mesa. Por conseguinte, pareceu - nos razoável que o mencionado conforto com o padrão do site aliado à sua modernidade melhorem a experiência do usuário. Por fim, julgamos que a aderência de uma coloração mais escura em nosso portfolio possibilita uma ligeira distinção quanto ao padrão da google, deixando - o um tanto quanto elegante.

O background segue a tendência global da web: fundo branco ou de tonalidades de cinza leves. Uma das críticas quanto à backgrounds escuros é a difícil legibilidade e uma tendência a parecerem ''pesados'':
http://www.webdesignerdepot.com/2009/08/the-dos-and-donts-of-dark-web-design/

Não há uma guia definitiva de qual cor principal escolher: pode ser a cor preferida do dono do portfólio ou uma associada á uma temática específica.

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