Grupo B3

Informações Gerais

Trabalho em equipe

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

Membro\Encontro 05 06 07 08 09 10 11
Andre Ejzenmesser (Mecatrônica)
Leonardo Andrade (Mecânica)
Henrique Guazzelli (Computação)
Elisa Malzoni (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/decoejz/Co-design_projeto1.git

Arquitetura de Informação

Primeira tarefa

Projetos que demonstram competências de Engenheiro Mecânico
  • Dinâmica Populacional
  • Farmacocinética ou Termodinâmica
  • Sistema mecânico
  • Barata Elétrica
  • Brinquedo Infantil
  • Projeto Único (Física do Movimento)
Projetos que demonstram competências de Engenheiro Mecatrônico
  • CRUD
  • Jogo da Velha
  • Sistema de Aquecimento de um Chuveiro Elétrico
  • Estação Meteorológica
  • 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
  • Projeto Único (Física do Movimento)
Projetos que demonstram competências de Engenheiro de Computação
  • Jogo da Velha
  • Projeto Final (Design de Software)
  • Estação Meteorológica
  • Farmacocinética ou Termodinâmica
  • Brinquedo Infantil
  • Portfólio de Projetos
  • Protótipo de Aplicativo
  • Análise Exploratória
Projetos que demonstram competências teóricas
  • Cálculo de Conceito
  • CRUD
  • Primeiro Artigo
  • Segundo Artigo
  • Sistema de Aquecimento de um Chuveiro Elétrico
  • Rede de Distribuição de Petróleo
  • Dinâmica Populacional
  • Portfólio de Projetos
  • Protótipo de Aplicativo
  • Análise Exploratória
  • Estudo Autônomo
  • Projeto Único (Física do Movimento)
Projetos que demonstram competências práticas
  • Projeto Final (Design de Software)
  • Application do Singularity
  • 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
  • Projeto Único (Física do Movimento)
Feedback do ninja

Projetos que demonstram competências por Disciplinas
Concordo com os itens que colocaram! Contudo, fiquei pensando sobre o artigo que o Fabio Ayres mostrou durante as aulas de Design de Software, lembram? Aquele sobre as habilidades mais essênciais para um engenheiro mecânico… //
Gostei de que fizeram pontos ao invés de só digitar, ficou bom
Projetos que demonstram competências Práticas ou Teóricas
Concordo com os pontos levantados. Com a única ressalva apontada no item anterior. //

Gostei que indicaram algumas disciplinas, nos projetos que ficariam vagos sem descrição.

Segunda tarefa

  • Software
    • Cálculo de Conceito
    • CRUD
    • Jogo da Velha
    • Projeto Final (Design de Software)
  • Propostas inovadoras
    • Application do Singularity
  • Eletrônica
    • Sistema de Aquecimento de um Chuveiro Elétrico
    • Rede de Distribuição de Petróleo
    • Estação Meteorológica
  • Modelagens do Mundo
    • Dinâmica Populacional
    • Farmacocinética ou Termodinâmica
    • Sistema Mecânico
  • Ideação e Prototipagem
    • Barata Elétrica
    • Brinquedo Infantil
  • Formação Acadêmica
    • Primeiro artigo
    • Segundo artigo
Feedback do ninja

Legal! Adorei a forma com que distribuíram. A única coisa, é o "outros" talvez pudessem criar uma categpria um pouco mais específica.

Terceira tarefa

  • Nome: Estação Meteorológica
  • Curso: Instrumentação e Medição
  • Período: 1° (ciclo básico)
  • Data: 9/Maio/2016 - 14/Junho/2016
  • Duração: 1 mês
  • Descrição: nesse projeto, utilizando-se sensores eletrônicos, um arduíno, um display lcd e alguns componentes eletrônicos, como resistores, construiu-se uma estação meteorológica. O trabalho exigiu a calibração dos sensores lm35(temperatura), dht22(umidade e temperatura), bmp180 (pressão e altitude) e LDR (luminosidade). Todo o processo de calibração e o memorial de cálculo foram registrados em uma relatório. Além disso, foi necessária a modelagem de um circuito eletrônico para a estação meteorológica em softwares. Por último, realizou-se a confecção de uma PCB utilizando-se uma fresadora na qual todos os componentes do circuito foram soldados.
  • Conhecimentos exigidos: programação em arduino; conhecimentos de eletrônica e circuitos elétricos; produção de PCBs por CAD e CAM.
Feedback do ninja

Gostei das categorias, mas tem algumas coisas que poderiam ficar melhor:

  • Colocar o ano na "Data"
  • Uma descrição ligeiramente mais específica, contando mais sobre o projeto em si; dizendo o que foi feito efetivamente, "Contruímos uma estação meteriológica que continha tais tais tais sensores."

Quarta tarefa

  • Página Inicial
    • A primeira página conterá uma breve explicação sobre o que é o site. Isto no inicio da página
    • Então terá um espaço com as diferentes classificações para que o usuário possa escolher qual mais lhe agrada.
    • Por fim, haverá um espaço com o link para a página "Sobre o aluno" e logo em seguida, um espaço com os membros do grupo e o link do github.
  • Página "Sobre o aluno"
    • Uma foto do aluno
    • Terá o nome do aluno
    • Ano de nascimento do aluno
    • Ano de ingresso e de termino do curso
    • Curso que entrou
    • Uma breve explicação sobre quem é o aluno
Feedback do ninja
  • Talvez fosse pouco relevante a idade do aluno, não vejo como isso pode ser util pra alguem acessando o site/portifolio de outra pessoa.
  • Trocaria o ano de ingresso pelo ano de conclusão de curso, mais relevante para quem costuma checar esse tipo de informação sobre outras pessoas.
  • Colocaria links relevantes, github, linkedIn, facebook, endereço de email, contato.

Leis de Gestalt e Princípios CRAP

Sketch da página principal

Sketch_Menu_Inicial.JPG

Sketch da página sobre mim

Sketch_Sobre_Mim.JPG

Sketch da página de categorias dos projetos

Sketch_Categorias.JPG

Sketch da página de projeto

Sketch_Projeto.JPG

Referências de posicionamento

Menu principal na lateral esquerda e conteúdo no centro da página.

Referências de sites que utilizam da mesma forma:
https://www.youtube.com/
https://www.facebook.com/
http://codesign2016.wikidot.com/
http://cursosextensao.usp.br/course/view.php?id=131&section=0

Referências que tratam do assunto:
https://www.nngroup.com/articles/horizontal-attention-leans-left/
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Common_web_layouts
https://journals.tdl.org/jodi/index.php/jodi/article/view/94/93
Justificativa: Após pesquisar, achamos estudos que justificam menus do lado esquerdo e menus do lado direito. Entretanto, decidimos adotar o menu no canto superior esquerdo, apoiando-se em estudos que afirmam que os usuários tendem a passar mais tempo olhando o conteúdo sperior de uma página e no canto esquerdo.

Redes sociais no rodapé no canto direito da página.

Referências de sites que utilizam da mesma forma:
http://www.insper.edu.br/
http://singularityhub.com/
http://www.kurzweilai.net/
http://www.buscape.com.br/

Referências que tratam do assunto:
https://www.nngroup.com/articles/horizontal-attention-leans-left/
Justificativa: Como a atenção dos usúário está quase sempre voltada para o canto superior esquerdo da página, decidimos posicionar os links de redes sociais no oposto a isso, ou seja, no canto inferior à direita. Isso porque achamos que esses links não devem receber muito destaque e nem devem chamar muito a atenção do usuário, mas, ainda assim, são fácilmente achados por aqueles que se interessarem.

Titulo no canto superior esquerdo

Referências de sites que utilizam da mesma forma:
https://www.youtube.com/
http://cursosextensao.usp.br/course/view.php?id=131&section=0
http://eaulas.usp.br/portal/profession.action?profession=Letras
http://singularityhub.com/

Referências que tratam do assunto:
https://www.nngroup.com/articles/horizontal-attention-leans-left/
Justificativa: O título do site é sua identidade e, por isso, merece bastante destaque de modo a fixá-lo na memória do usuário. Por esse motivo, posicionamos ele da mesma forma que posicionamos o menu: no canto superior esquerdo, onde os usuários tendem a dar mais enfoque.

Teoria das Cores e Tipografia

mockup.png

Referências de cor e fonte

Fonte Francois One para títulos e subtítulos e font Open Sans para o conteúdo do body

Referências que utilizam fontes parecidas:
http://g1.globo.com/
http://www.bbc.com/portuguese
http://www.insper.edu.br/
https://www.technologyreview.com/

Justificativa para o uso de fontes sem serifa: nos baseamos em sites de comunicação (como sites de notícias) para a escolha das fontes. A grande maioria deles utiliza fontes sem serifas e nenhum site que misturasse fontes serifadas com asserifadas foi achado. Além disso, achamos neste link http://www.ferramentasdecriacao.com.br/blog/171-aprenda-como-escolher-a-fonte-certa.html que fontes sem serifas expressam um visual mais limpo, mais suavidade e leveza, características que foram adotadas, desde o início, para a construção do site.

Referência que justifica a fonte dos títulos mais chamativa do que a do resto, o tamanho das fontes e dos espaçamentos :
https://www.interaction-design.org/literature/article/web-fonts-are-critical-to-the-online-user-experience-don-t-hurt-your-reader-s-eyes

Referências que utilizam cores parecidas (cinza, vermelho e branco):
http://g1.globo.com/
http://www.bbc.com/portuguese
http://www.insper.edu.br/
https://www.youtube.com/

Justificativa do uso das cores vermelha, cinza e branca: escolhemos essas cores inspirados no Insper e em sua identidade. Para isso, selecionamos cores que ou fazem parte do logo da instituição ou se comunicam bem com ele.

Cores de fundo: Vermelho (#f20700), Cinza(#b2aaa4) e Branco (#f2f2f2).
Cor preta (#000000) das fontes.

Site utilizado para verificar se os contrastes entre as cores das fontes e dos fundos estão dentro dos padrões de acessibilidade:
http://webaim.org/resources/contrastchecker/

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