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 da página sobre mim
Sketch da página de categorias dos projetos
Sketch da página de projeto
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§ion=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§ion=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
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/