Grupo A1

Informações Gerais

Trabalho em equipe

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

Membro\Encontro 05 06 07 08 09 10 11
Sabrina Simão (Computação)
Isabella Oliveira (Computação)
Pedro Garcia (Mecatrônica)
Patrick Câmara (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

Nosso grupo trabalhou em conjunto para criar um código genérico que pudesse ser usado por todos para fazer seu portfolio.
O github desse codigo contém todos os commits feitos pelo grupo na programação de tal, e seu diretório é:
https://github.com/SabrinaSimao/codesign

Github da Sabrina (os dados genéricos do codigo acima foram substituídos por conteúdos pessoais dela):
https://github.com/SabrinaSimao/codesign (Começar pela paginainicial.html)
ps: fotos de patinhos são fotos de projetos que ainda não substitui

Github do Pedro (os dados genéricos do codigo acima foram substituídos por conteúdos pessoais dele):
https://github.com/mafe2233/Co-design

ps: todos os alunos usaram e trabalharam no código em conjunto, variando apenas o conteúdo das informações e os projetos escolhidos para apresentar

Github da Isabella (os dados genéricos do codigo acima foram substituídos por conteúdos pessoais dela):
https://github.com/IsabellaOInsper/CoDesignP1 (Começar pela paginainicial.html)

Arquitetura de Informação

NatDes = Natureza do Design
ModSim = Modelagem e Simulação do Mundo Físico
DeSoft = Design de Software
InstruMed = Instrumentação e Medição
GDE = Grandes Desafios da Engenharia
AE = Acionamentos Elétricos
MV = Matemática da Variação
FM = Física do Movimento
CDA = Co-Design de Aplicativos
CD = Ciência dos Dados

Primeira tarefa

Projetos que demonstram competências de Engenheiro Mecânico

Acionamento PWM (AE)
Sistema Mecânico (ModSim)
Barata Elétrica (NatDes)
Brinquedo Infantil (NatDes)

Projetos que demonstram competências de Engenheiro Mecatrônico

Sistema de aquecimento de um chuveiro elétrico (InstruMed)
Estação Meteorológica (InstruMed)
Sistema Mecânico (ModSim)
Acionamento PWM (AE)
Circuito Eletônico Com AmpOp ou Diodo e Transistor (AE)

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

Cálculo de Conceito (DeSoft)
CRUD (DeSoft)
Jogo da Velha (DeSoft)
Projeto Final (DeSoft)
Análise Exploratória (CD)
Protótipo de Website (CDA)
Protótipo de Aplicativo (CDA)

Projetos que demonstram competências teóricas

Dinâmica Populacional (ModSim)
Farmacocinética ou Termodinâmica (ModSim)
Sistema Mecânico (ModSim)
Primeiro Artigo (GDE)
Segundo Artigo (GDE)
Application do Singularity (GDE)
Modelos de Regressão (CD)
Ajuste de Modelo Teórico (CD)
Teorema do Limite Central (CD)
Projeto Único (FM)
Estudo Autônomo (MV)

Projetos que demonstram competências práticas

Application do Singularity (GDE)
Acionamento PWM (AE)
Circuito Eletônico Com AmpOp ou Diodo e Transistor (AE)
Protótipo de Website (CDA)
Protótipo de Aplicativo (CDA)
Barata Elétrica (NatDes)
Brinquedo Infantil (NatDes)
Estação Meteorológica (InstruMed)

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. Concordo com o resto.

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).

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 o publicado.

Sobre habilidades que demonstram competências teóricas: Não sei exatamente o que esperar do "Projeto Único (FM)", mas gostaria de imaginar que seria algo mais técnico (obviamente posso estar errado, mas tenho minhas esperanças).

Sobre habilidades que demonstram competências práticas: Justo, concordo plenamente.

Segunda tarefa

Habilidades Computacionais

Cálculo de Conceito
CRUD
Jogo da Velha
Projeto Final
Estação Meteorológica
Farmacocinética ou Termodinâmica
Sistema Mecânico
Análise Exploratória
Comparação de Interfaces

Programação
*Python e bibliotecas
*Top-Down Design
*Linguagem C

Softwares
Online
*Git Hub
*Trello
*Firebase
*Wikispace
*Fritzing
*Circuit Lab
*Recursos de Pesquisa

Offline
*CooperCAM
*Autodesk / Fusion
*Cura
*Geogebra
*Tracker
*Fritzing
*Interação Humano-Computador

Habilidades Manuais/Técnicas

Estação Meteorológica
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

Máquinas
*Impressões 3D
*Cortadora à Laser
*Fresadora
*Ferramentas de marcenaria
*Soldagem

Eletrônica
*Desenvolvimento de Circuitos Elétricos
*Arduino
*Dispositivos Eletrônicos
*PCB
*ProtoBoard
*Calibração de Sensores
*Modelar Circuitos Elétricos

Habilidades de Abstração/Design

Barata Elétrica
Brinquedo Infantil
Portfólio de Projetos
Protótipo de Aplicativo

*Sketch
*Minimalização dos traços
*Validação e contato direto com o consumidor
*Prototipação e iteração

Habilidades Escritas

Primeiro Artigo
Segundo Artigo
Application do Singularity

*Argumentação
*Desenvolvimento de artigo cietífico
*Normas da ABNT

Habilidades Teóricas

Sistema de Aquecimento de um Chuveiro Elétrico
Rede de Distribuição de Petróleo
Farmacocinética/Termodinâmica
Sistema Mecânico
Modelos de Regressão
Ajuste de Modelo Teórico
Teorema do Limite Central
Projeto Único
Estudo Autônomo

*Física*
*elétrica, cinemática, dinâmica, estática

*Matemática*
*Derivada
*Integral
*Cálculo de Incertezas, Variâncias e Desvio Padrão
*Estatística Básica e Probabilidade
*Explorar Dados
*Tomar medições
(Trabalho em Equipe, Autonomia e Aprender a aprender: Todos)

Feedback do ninja

Meu deus… Tá bem completo esse aqui…

O primeiro bloco dentro de "Habilidades Computacionais" pareceu um bloco de projetos jogados, eu colocaria eles dentro de uma aba "projetos" a qual estaria dentro da "habilidades computacionais".

Dento de linguagens de programação, acredito que vocês quiseram dizer "Arduino" ao invés de "C", não? São coisas bastante diferentes.

Dos softwares online, imagino que git (não só github) seja uma qualificação que vocẽs tem. Não se limitem a github (o github é uma plataforma pra git, mas não a única, não confundam uma coisa com a outra, pode pegar mal). Ainda no online, vocês quiseram dizer Wikidot ao invés de WikiSpace? Sobre as offlines, não sei o que esperar de "interação humano-computador", mas beleza, bola pra frente, a vida continua.

Novamente, dentro de "Habilidades Manuais/Técnicas" e nos outros tópicos, acredito que os projetos deveriam estar em uma aba exclusiva, da forma que está fica bagunçado.

De maneira geral, eu sugiro redefinir a organização da parte de computação, pois parece ter um nível muito profundo de "divisões dentro de divisões", o que se torna confuso muito rápido.

Terceira tarefa

Nome: Projeto Final de Desing de Software
Curso: Engenharia Mecatrônica,Engenharia Mecânica e Engenharia de Computação
Período: Primeiro
Design: Sim
Escrita: Não
Descrição: Grupos de 3 ou 4 pessoas tinham que criar algum programa em python, ao longo de um periodo de dois meses,
que fosse um jogo ou um aplicativo, ele precisava ser criativo e ter um bom grau de díficuldade de programação.

Feedback do ninja

Vocês poderiam ter se vangloriado mais na descrição do projeto, parece que foram obrigados a fazer uma coisa e só fizeram pra passar mesmo. Nem parece que tem orgulho do resultado (espero que tenham).

Quarta tarefa

O portfólio começará em uma página geral com informações sobre o Aluno e o Insper. Terá uma foto, idade, curso. Terá também o motivo das divisões que fizemos para os projetos e a lista com os links em baixo. Fora os links descritos acima, terá também o de projeto pessoal e da biografia.
Cada link redirecionará para uma categoria, onde o leitor poderá interagir com as descrições e procurar o projeto/qualidade que mais preza naquele profissional.

Todas as páginas terão um link no final redirecionando para a página inicial, para a biografia (com exceção dela mesma) e para o site do Insper.

Feedback do ninja

A página inicial parece sobrecarregada, talvez fosse uma melhor ideia somente uma breve biografia, uma foto e links bem organizados para partes do site (que pode incluir o motivo da organização do mesmo).

Leis de Gestalt e Princípios CRAP

ADENDO: Nossa página sketch é apenas a Index_css.html, pois ela será semelhante para todas as páginas, mudando apenas o conteúdo!

Sketch da Página Principal

VAxJjmI.jpg

Sketch da Página Sobre Mim

5xQqwAW.jpg

Sketch da Página de Projeto

U4niCUT.jpg

Sketch da Página de Habilidades

CnkwzaF.jpg

Referências de posicionamento

Contemos no total de 7 tipos de objetos posicionado em nosso Portfólio, são eles: o logotipo do nosso portfólio que está em todas nossas páginas no canto superior esquerdo; os links de diferentes páginas que temos em nosso portfólio (Habilidades, Projetos, Bibliografia) que estão em todas as páginas no canto superior central; os logotipos das redes sociais que estão em todas as páginas no canto superior direito; foto(s) em todas as páginas ocupando o terço esquerdo da página; Título e subtítulo que remete a cada tipo de página do nosso portfólio ocupando a parte superior dos dois terços restantes; texto sobre a página, abaixo de seu título e subtítulo mas agrupado de outra maneira; e o itens presentes na página de habilidades abaixo do texto.

Para explicar o posicionamento de cada objeto será explicado primeiramente os seguintes conceitos:
- Teoria de Gestalt
- Psicologia dos Logotipos
- Regra dos Terços
- Padrão F

Teoria de Gestalt: A teoria de Gestalt é um conjunto de princípios que auxiliam na construção de um design mais coerente, unificado e conectado, ou seja, são diferentes maneiras que auxiliam para um design melhor. Esses princípios estão associados a cognitiva humana em relação a junção e separação de grupos de informação em diferentes maneiras. Esses princípios são:
-Similaridade
-Continuação
-Proximidade
-Encerramento
-Figura
-Simetria e Ordem
Os links utilizados para nosso design soram:
-http://www.creativebloq.com/graphic-design/gestalt-theory-10134960
-https://www.usertesting.com/blog/2016/02/24/gestalt-principles/
Exemplos:
-https://www.netflix.com/
-https://www.youtube.com/
-http://www.americanas.com.br/
-http://www.globo.com/

Psicologia dos Logotipos: A psicologia dos Logotipos é simples, logotipos atraem a atenção e alguns deles contém uma mensagem por traz, seja pela forma do desenho, pelas cores utilizadas ou pelas palavras utilizadas. Ou seja, os logotipos serão utilizadas para atrair a atenção para o logotipo de nosso portfólio e para os logotipos das redes sociais, levando as pessoas a acessa-los e conhecer mais sobre o nosso portfólio. Essa psicologia dos logotipos se associa com a Teoria de Gestalt, principalmente com o princípio sobre a Figura. O link utilizado para esse nosso design foi:
- http://www.creativebloq.com/logo-design/psychology-logo-shapes-8133918
Exemplos:
-https://www.facebook.com/
-http://www.apple.com/
-https://twitter.com/
-https://www.mercedes-benz.com/
-http://vaio.com/

Regra dos Terços: A regra dos Terços é uma regra em que explica onde a nossa atenção está sendo direcionada a alguma imagem, pintura, video, website, etc. Ele divide a tela em três colunas e três linhas, e atrai a atenção da imagem em alguns pontos, deixando mais informação em uma das linhas e colunas e deixando o resto com pouca informação. Essa regra deixa o design mais confortável ao usuário, sem deixar ele perdido com tanta informação. Os links usados para nosso design foram:
-https://www.youtube.com/watch?v=LJJLWe9anzY
-http://tympanus.net/codrops/2012/05/23/understanding-the-rule-of-thirds-in-web-design/
Exemplos:
-http://www.spotify.com.br/
-http://web.telegram.org/
-https://web.whatsapp.com/
-http://rollingstone.uol.com.br/

Padrão F: O Padrão F é o padrão de como as pessoas geralmente leem uma página da internet, as pessoas começam visualizando o canto superior esquerdo, depois percorre até o superior direito, finalizam observando o canto esquerdo percorrendo até o centro da página. Formando um "F" na página. Isso é provado cientificamente, monitorando onde as pessoas geralmente observam a página.
Utilizamos os seguintes links:
-http://www.creativebloq.com/ux/how-human-eye-reads-website-111413463
-http://thenextweb.com/dd/2015/04/10/how-to-design-websites-that-mirror-how-our-eyes-work/#gref
-https://www.youtube.com/watch?v=yk4OBZR_dk8
Exemplos:
-https://pt.wikipedia.org/
http://www.dafiti.com.br/
-https://catracalivre.com.br/
-https://pt.aliexpress.com/
-https://www.amazon.com.br/
-https://www.facebook.com/

Agora com esses conceitos definidos de maneira simples (acessar os links para mais detalhes e informações), podemos explicar o nosso design.
Para o caso do logotipo ser colocado no canto superior podemos explicar com a Psicologia dos logotipos e o Padrão F. As pessoas vão ver primeiramente o nosso logotipo ao entrar na página e ela chamará mais atenção, assim atrará o foco do nosso usuário a nossa página, fazendo-o continuar na página para conhece-la mais.

Para o caso dos links das nossas outras páginas do portfólio estarem no meio do canto superior pode ser explicado com o padrão F e pela teoria de Gestalt. O nosso usuário, após a visualização do nosso logotipo, ir´direcionar sua atenção para os links que estão associadas em conjunto, demonstrando que aquilo é o conjunto das informações de nosso portfólio.

Para o caso dos links das redes sociais estarem no canto superior direito pode ser explicado da mesma maneira do logotipo do nosso portfólio, pois o nosso usuário irá observar elas e verá que elas tem um propósito do nosso portfólio, que é a mídia social, para que não ocorra problema de conflito de informação, ela estará seguindo os princípios da lei de Gestalt.

No caso da foto(s) ocupando um terço de nosso portfólio é explicado com a Regra dos Terços e padrão F. Após a leitura do menu de nosso portfólio (Logotipo, Links e Logotipo de redes sociais), o usuário já estará carregando muito informação, assim a regra dos terços auxiliará para que ele se sente mais confortável com o design, isso auxiliará para que ele continue na página. E além do conforto que o usuário receber, ele também receberá as informações da imagem, mostrando o conteúdo da página de forma simples. Isso também auxilia no embelezamento da página, não deixando monótoma com texto e links.

Para o título e subtítulo, e o texto com informações da páginas serão usados o design do padrão F e da teoria de Gestalt, nesse caso será para a organização do texto para melhor entendimento e conforto para o usuário, e quando ele vai ler o texto que é após receber todas as informações de acordo com o padrão F. Essa parte é o que usará mais tempo do usuário, assim o seu fundo vai ser simples que com letras de mesma fonte, contendo algumas imagens e diferenciações durante o texto, que restaurará a exaustão do usuário após um grande período de leitura.

Para os itens da página das habilidades será explicado com a teoria de Gestalt, ela será construida de uma forma que possa chamar a atenção do usuário para cada item e carregar informação que o usuário procura.

Feedback do ninja

As explicações ficaram bem claras e completas. Gostei como vocês explicaram os conceitos antes de dar os exemplos e justificar o porquê se inspiraram em cada um dos sites apontados.

No entanto, eu teria me dedicado um pouco mais a justificar o porquê escolheram os exemplos (pelo menos um de cada). Além disso, As imagens não estão funcionando! Faça o upload delas em um domínio público (como imgur) e tente novamente, não posso avaliar esta etapa do projeto sem elas.

Teoria das Cores e Tipografia

Mockup da página principal
(deixarei só o link para não extender e poluir muito a wiki, visto que já temos uma imagem representativa do mockup abaixo)
http://imgur.com/a/VaqQo

Mockup da página principal(com os subitens visiveis)

mockup%281%29.PNG

Referências de cor e fonte

Por que o verde?
O uso de verde pode ser explicado por vários motivos;
Esta é a cor mais associada à natureza e ao sentimento de esperança, mas também está relacionada com conceitos como saúde, dinheiro, vitalidade e juventude.
Está associada ao crescimento, à renovação e à plenitude.
É uma cor que harmoniza qualquer ambiente, traz boas energias e tem efeito calmante.
Pode representar novos começos, crescimento e abundância.
É apropriado para designs relativos à riqueza, estabilidade, renovação e natureza. Em tonalidades mais claras é mais energizante e vibrante, os verdes-oliva são mais representativos do mundo natural. Verdes escuros são os mais estáveis e remetem à fortuna. É a cor mais fácil de processamento visual.
Quando o verde é contrastado com o preto, traz uma ideia de computação e do "terminal", o que é interessante no nosso caso, pois é um portfólio de engenharia, e mesmo metade do grupo não sendo de computação especificamente, cursam engenharias que também usam da programação. Ao todo, é um conceito legal de aparecer no portfólio.

Fonte que explica mais sobre o verde:
https://blog.kissmetrics.com/psychology-of-color-and-conversions/
Está entre as cores favoritas de ambos os gêneros!

Por que o laranja?
Laranja é uma cor divertida que pode criar uma sensação de pressa ou impulso.
"Amazon.com uses orange in their “limited time offer” banner. The color suggests urgency, which makes the message more noticeable and actionable"
https://blog.kissmetrics.com/psychology-of-color-and-conversions/
No caso do nosso portfólio, o laranja é um detalhe minucioso que contrasta o verde toda vez que o mouse passa por cima de um link, e por mais delicado que isto seja, o impulso do laranja faz o leitor querer clicar mais no link do que se a cor permanecesse verde. Por ser uma cor que vai ficar em pontos mais dinâmicos do site, escolhemos uma cor que remete impulso e dinamismo.

Por que o preto?
O preto tem um toque de sofisticação, luxo e valor, além de ser uma cor neutra.
"The darker the tone, the more lux it is, says our internal color psychology. An article from Lifescript describes black as “elegance, sophistication, power,” which is exactly what luxury designers and high-end e-commerce sites want you to feel. "
https://blog.kissmetrics.com/psychology-of-color-and-conversions/

Fora o tema "computação", que o preto e o verde formam juntos, a aba preta tem esse toque elegante. De fato, o css poderia fazer as imagens de ícones encaixarem melhores nela, para ficar mais suave e sofisticado, mas fora os obstáculos de programação, o design está lá. Além disso, o fundo preto no cabeçalho é neutro e não distrai o leitor do que realmente importa, o conteúdo da página.

Exemplos de sites com cabeçalhos pretos e fundo mais claros:
Spotify: https://www.spotify.com/br/
yoyogames: http://www.yoyogames.com/gamemaker
greenmangaming: https://www.greenmangaming.com/?gclid=CM_o8-LhsM8CFUSAkQodtyEP9Q
Mocapoke: http://mocapoke.com/

Background verde
#3ff457

Verde dos links
#41FF1F

Destaques em laranja (Seleção atual da página)
#EA8C00

Preto do menu e das outras ocorrências
#000000

Fontes:

As fontes usadas foram muito estudadas, e as escolhidas são as seguintes:

Amatica SC (do google fonts) para Head
"Tomando-se como base (para padronizarmos) algumas fontes sem serifa e com o mesmo "tamanho" de corpo, percebemos que cada fonte se encaixa melhor em determinada forma geométrica.
No retângulo de pé a fonte passa a sensação de crescimento, ascensão. "
Cada fonte tem um padrão geométrico no qual cada caractere se encaixa. O da fonte escolhida é "retângulo em pé".

"Elas costumam ser usadas em títulos e chamadas, pois valorizam cada palavra individualmente e tendem a ter maior peso, chamando a atenção, já que parecem mais limpas. Elas são perfeitas para exibição de textos digitais pois transmitem sensação de limpeza, clareza, organização, fatores primordiais para atrair o visitante à leitura."
Escolhemos uma fonte sem serifa por passar as impressões acima citadas, por ser uma fonte que chame a atenção, não seja completamente estilizada mas se destaque do corpo da página e que transmita uma aparência mais "clean", leve.

Raleway (também do google fonts) para Body
A escolha da fonte do corpo foi pensando em uma fonte que passaria a mensagem do texto de forma clara e eficaz para qualquer pessoa. Para isso, optamos por uma fonte bem simples e limpa, sem detalhes muito chamativos, uma fonte que seria facilmente confundida com outras que nos deparamos no nosso cotidiano, para que ela seja clara e não roube a atenção do título.

Referência sobre fontes:
http://entreclics.blogspot.com.br/2013/06/fontes-design-x-aplicacao.html

O motivo é que as duas são amplamente usadas para pareamento, pelo o que a plataforma do google indica. Um bom pareamento entre head e body fazem o texto fluir muito mais e ficar agradável aos olhos. A fonte para o título da página é mais estilizada e detalhada, enquanto a fonte do corpo da página é mais padrão e simplista.

Referências de sites com fontes similares (o banner dos sites como referência tem fontes mais detalhadas e estilizadas, já a fonte do corpo é mais comum): https://fonts.google.com/specimen/Amatica+SC?selection.family=Amatica+SC|Raleway:500
http://www.2beauty.com.br/
http://www.fabisantina.com.br/
http://www.borboletasnacarteira.com.br/
http://www.pausaparafeminices.com/
http://niinasecrets.com.br/

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License