Grupo A2

Informações Gerais

Trabalho em equipe

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

Membro\Encontro 05 06 07 08 09 10 11
Marcelo Prado (Computação)
Wesley Bauerle (Mecatrônica)
Rene Martinez (Mecânica)
Thiago Fantin (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.

Endereço do repositório

https://github.com/MarceloPrado/CoDesignCurriculo/

Arquitetura de Informação

Primeira tarefa

Projetos de computação:
• Calculo de conceito (Design de software)
• CRUD (Design de software)
• Jogo da velha (Design de software)
• Projeto final (Design de software)
• Protótipo de website (Co-design de apps)
• Protótipo de aplicatico (Co-design de apps)
• Analise exploratória (Ciência dos dados)
• Comparação de interfaces (Ciência dos dados)

Projetos de mecânica:
• Circuito eletrônico com amplificador operacional ou diodos transístores (Acionamentos elétricos)
• Sistema mecânico (Modelagem e simulação)

Projetos de mecatrônica:
• Estação meteorológica (Instrumentação e medição)
• Acionamento PWM com eletrônica analógica ou filtro (Acionamentos elétricos)

Projetos práticos:
• 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)
• Barata elétrica (Natureza do design)
• Brinquedo infantil (Natureza do design)
• Artigo 1 (Grandes desafios da engenharia)
• Artigo 2 (Grandes desafios da engenharia)
• Application do Singularity (Grandes desafios da engenharia)

Projetos com matemática:
• Projeto único (Física do movimento)
• Dinâmica populacional (Modelagem e simulação)
• Farmacocinética ou termodinâmica (Modelagem e simulação)
• Modelos de regressão (Ciência dos dados)
• Ajuste de modelo teórico (Ciência dos dados)
• Teorema do limite central (Ciência dos dados)

Feedback do ninja

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 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, muito menos o "Circuito eletrônico com amplificador operacional ou diodos transístores".

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), o "Circuito eletrônico com amplificador operacional ou diodos transístores" então, nem se fala. Acho a classificação da estação justa.

Sobre habilidades que demonstram competências práticas: Acho os artigos de GDE algo mais teórico do que prático. Sei que "habilidades teóricas" não era um tópico, mas acho que da forma que está ficou estranho.

Sobre habilidades que demonstram competências matemáticas: De maneira geral concordo com o citado, achei o tópico um pouco estranho pelo caráter mais prático do curso do Insper em geral, mas se "normalizarmos" o nosso curso, de fato os projetos mais "matemáticos" (ou teóricos) são estes.

Comentários adicionais: 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

Abaixo está três grandes grupos que podem ser utilizados para classificar os projetos acima.
(falta acrescentar os projetos nessa classificação, não sabíamos se era necessário)

  • Modelagens e simulações
  • Tecnologias
    • Hardware
    • Software
  • Reais
Feedback do ninja

O que seriam projetos reais? Qualquer coisa que não se encaixasse nas categorias anteriores? Pensem um pouco nisso, acho que poderiam expandir o número de grupos existentes buscando maior clareza na divisão e categorização dos projetos.

Terceira tarefa

Para a página do projeto, o grupo optou por utilizar os seguintes elementos, descritos abaixo: foto do projeto, nome, duração, disciplina, descrição e maior dificuldade. Colocamos o item maior dificuldade para explicar quais foram os ponto chave que precisaram ser superados para alcançar alguma etapa do projeto. Acreditamos que ao superar dificuldades, aprende-se de uma forma muito mais densa. Assim, faz sentido explicitar esses pontos para informar aos interessados os conceitos chave.

Perguntas como "O projeto envolveu Software?", "Envolveu fabricação?", "Foi centrado no usuário?" são respondidas no item de descrição.


Exemplo:

  • Foto: uma foto demonstrativa do resultado final do projeto
  • Nome do Projeto: Avisa.Online - Web App
  • Duração: 1 mês
  • Disciplina: Design de Software - 1º Semestre
  • Descrição: A ideia era desenvolver um mapa colaborativo no qual qualquer pessoa pudesse adicionar pontos de interesse através do Twitter. O grupo utilizou Angular JS, HTML e CSS para o Front, Node JS e Python para o Back. Uma vez que a única maneira de acionar pontos era através do Twitter, o foco da usabilidade foi estritamente no web app.
  • Maior Dificuldade: Configurar a AWS para hostear o back foi uma dificuldade encontrada devido a quantidade de passos necessários para concluir a etapa. Além disso, implementar o design no HTML e CSS foi algo que levou um tempo considerável.
Feedback do ninja

Gostei da organização, o projeto pareceu interessante. Seria legal um link para o código (imagino que vocês tenham colocado ele em um repositório aberto, já que ninguém do grupo parece ser babaca o suficiente pra não fazer um bom projeto um bom projeto open-source).

Gostei da ideia da foto do projeto, é bastante relevante.

Quarta tarefa

Para a página inicial, o grupo decidiu separar a pagina em 4 títulos, Sobre mim, Engenharia Mecânica, Engenharia Mecatrônica e Engenharia de Computação. Em cada parte, há uma breve explicação acerca do curso e seus objetivos. Para cada parte, há novas páginas que colocaríamos os projetos que combinariam com o curso escolhido, assim as pessoas que veriam essa página entenderiam o que o curso traz e mostra para o aluno.

Feedback do ninja

Sobre mim*

Mas achei a classificação boa, não mudaria nada, talvez apenas uma breve biografia ou uma foto do aluno na pagina inicial?

Leis de Gestalt e Princípios CRAP

Sketch da Página Principal - Esqueleto

index.png

Sketch da Página do Projeto - Esqueleto

projeto.png

Sketch da Página Sobre Mim - Esqueleto

sobre.png

Referências de posicionamento

Para as nossas páginas, tivemos algumas ideias que podem ser tiradas de vários outros sites. A seguir vai uma lista com essas ideias e o link desses sites:

NavBar : A ideia do NavBar é resumir todos os conteúdos para facilitar a busca do nosso público, para tornar o uso mais prático. Isso é visto em diversos sites, como esses abaixo.
http://www.apple.com/br // http://www.saraiva.com.br/ // https://www.netflix.com // https://www.itau.com.br/

Nome com fundo : Essa ideia tirada dos sites listados abaixo mostram que muitas vezes, para chamar a atenção do público que verá esta página, um jeito que se pode fazer isso é deixar a ideia principal do conteúdo ou do que se quer chamar a atenção com letras grandes, acima de uma imagem simples que destaque o texto.
http://www.apple.com/br // https://www.netflix.com // https://twitter.com/ // https://www.ingresse.com/

Descrição : Essa ideia pode ser vista nos nossos sketches da pagina sobre mim e a página do projeto na qual tem um espaço apos os títulos para uma breve descrição sobre como foi ou o que foi o projeto e uma breve explicação sobre sí mesmo.
http://www.apple.com/br // https://www.netflix.com // https://www.youtube.com/?hl=pt&gl=BR // http://www.looqbox.com/

Foto + pequena descrição : Essa foto com pequena descrição está ilustrada no sketch da página principal para mostrar as principais qualidades do aluno e assim, uma foto consegue ilustrar bem qual é essa qualidade e a descrição é para explicar qual é essa qualidade de uma forma simples e rápida. Assim como mostra esses sites.
http://www.apple.com/br // https://www.netflix.com // http://www.youtube.com/?hl=pt&gl=BR // http://www.looqbox.com/

2 fotos + descrição : Essa característica pode ser mostrada para especificar um pouco mais algum conteúdo que se deseja, nesse caso é algum projeto selecionado, na qual pode ser ilustrado por fotos e explicado com mais detalhes na descrição. Isso pode também ser visto no Netflix quando se clica em um filme, na qual passa fotos de partes do filme com sua sinopse.
http://www.apple.com/br // https://www.netflix.com // http://www.gamestop.com/ // http://converse.com.br/

Pequeno filtro por conteúdos : Para conseguir organizar a busca num conteúdo dentro do NavBar, nós utilizamos um pequeno menu que tem todas as opções de buscas possíveis.
WhatsApp // http://www.apple.com/br // http://portaldoaluno.insper.edu.br/ // http://www.clickjogos.com.br/ // http://instagram.com

Foto com título : Para mostrar de uma forma abrangente os projetos propostos e mesmo assim chamar a atenção, colocar fotos que acompanham o titulo desses projetos foi uma saída que achamos e que muitos outros sites também usam.
http://www.clickjogos.com.br/ // http://www.gamestop.com/ // http://www.looqbox.com/ // http://converse.com.br/

Uma referencia de design em geral:
http://conversionxl.com/10-useful-findings-about-how-people-view-websites/

Mockups

Sketch da Página Principal - Desenhado

home1.png

Sketch da Página Sobre Mim - Desenhado

sobre1.png

Sketch da Página do Projeto - Desenhado

projeto1.png
Feedback do ninja

Vocês poderiam ter explicado um pouco os objetivos com caa tipo de layout ou inspiração. Da maneira que está, tenho somente uma pilha de exemplos de inspirações e o resultado, mas com pouquíssima documentação.

De qualquer forma, gostei da maneira com que fizeram os sketchs e lidaram com o tamanho das imagens, esta parte da wiki ficou bem clara. No entanto, a listagem de referências ficou muito confusa, tenho certeza que existe uma maneira melhor de apresentá-la.

Lembrem-se, sem documentação um projeto não escala e só lendo a wiki de vocês não consigo saber o que esperar do layout da página.

Teoria das Cores e Tipografia

Com a ajuda do adobe color CC, nós conseguimos achar uma sequencia de cores que se assemelham ao que estávamos procurando para o design do site e ao mesmo tempo não permite que elas incomodem quando se esta olhando para a página.
As cores base para o site que usamos são roxo e preto, a cor roxa por sua natureza leva ao leitor da página a ter uma curiosidade e sentir um mistério sobre o que esta sendo visto. Já a cor preta é uma cor básica, que dá ao trabalho uma seriedade que ele merece, contrastando bem com o roxo escolhido. Mas acima disso tudo, essas cores ao todo foram escolhidas para dar ao site uma visão confortável uma vez que nosso site é bem carregado de informação e com um design bem diferente do resto. Feito isso, fomos no adobe color CC e pegamos as outras cores que se assimilam bem as cores bases, o que nos deu um leque importante para o visual, como ficou com o amarelo e branco em preto e roxo.

tabelacor.png

Para a tipografia do site escolhemos uma fonte chamada Titillium Web pois acreditamos que seja uma fonte que contrasta bem com as cores do site, deixando-o assim legível. Além disso ela é uma tipografia com toques bem curvos, grandes e espaçados que permitem uma melhor compreensão do que se está lendo e tenta levar novamente um ar mais confortável ao conteúdo, já que em sua forma ela passa a ideia de firmeza e organização e também ela não é nada difícil de ler e é uma tipografia simples.

Titillium-Web.png

Referências de cor e fonte

Significado das cores: https://www.significados.com.br/cores-2/
Cores que assimilam: https://color.adobe.com/

Sites que usam Titillium Web:

https://pagar.me - usa em todos os elementos, fica com uma aparência moderna, de startup de tecnologia - abra o site para entender melhor o termo

Sites que usam semelhantes (Open Sans):

http://www.berlintype.com/ - usaram em cima de fotos de uma maneira curiosa, fazendo uma sobreposição interessante com uma foto
http://mailchimp.com/pro/ - note como usaram nos headers para garantir boa legibilidade e chamar atenção do usuário
https://www.goldbely.com/about - todos os elementos de texto
Significado fontes: http://www.inovasinalizacao.com.br/as-fontes-tipograficas-e-seu-uso-na-construcao-de-logotipos/

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