Grupo B5

Informações Gerais

Trabalho em equipe

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

Membro\Encontro 05 06 07 08 09 10 11
Bruno Dratcu (Mecatrônica)
Lucas Silva (Mecânica)
Matheus Silva (Mecânica)
Pedro Fonseca (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/lemelusca/Co_Design.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

Chuveiro Elétrico
Rede de Distribuição de Petróleo
Estação Meteorologica

Projeto Único
Estudo Autônomo

Projetos que demonstram competências de Engenheiro Mecatrônico

Dinâmica Populacional
Farmacocinética ou Termodinâmica
Sistema Mecânico

Chuveiro Elétrico
Rede de Distribuição de Petróleo
Estação Meteorologica

Projeto Único

Circuito Eletrônico com Amplificador Operacional ou Diodos e Transístores
Acionamento PWM com Eletrônica Analógica ou Filtro

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

Cálculo de Conceito
CRDU
Jogo da Velha
Projeto Final

Dinâmica Populacional
Farmacocinética ou Termodinâmica
Sistema Mecânico

Estação Meteorológica

Estudo Autônomo

Análise Exploratória
Comparação de Interfaces
Modelos de Regressão
Ajuste de Modelo Teórico
Teorema do Limite Central

Portfólio de Projetos
Protótipo de Aplicativo

Projetos que demonstram competências teóricas

Primeiro artigo
Segundo Artigo
Application do Singularity

Dinâmica Populacional
Farmacocinética ou Termodinâmica
Sistema Mecânico

Estudo Autônomo

Chuveiro Elétrico
Rede de Distribuição de Petróleo

Análise Exploratória
Modelos de Regressão
Ajuste de Modelo Teórico
Teorema do Limite Central

Projetos que demonstram competências práticas

Application do Singularity

Dinâmica Populacional
Farmacocinética ou Termodinâmica
Sistema Mecânico

Barata Elétrica
Brinquedo Infantil

Estação Meteorologica

Projeto Único

Circuito Eletrônico com Amplificador Operacional ou Diodos e Transístores
Acionamento PWM com Eletrônica Analógica ou Filtro

Jogo da Velha
Projeto Final

Análise Exploratória
Modelos de Regressão
Ajuste de Modelo Teórico
Teorema do Limite Central
Comparação de Interfaces

Portfólio de Projetos
Protótipo de Aplicativo

Feedback do ninja

Projetos que demonstram competências por Curso
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… De resto concordo!
Gostei que fizeram uma subcategorização com espaçamento, deixou bastante organizado

Projetos que demonstram competências entre Teórico e Prático
Talvez colocasse os itens de ModSim como teóricos também.

  • Dinâmica Populacional
  • Farmacocinética ou Termodinâmica
  • Sistema Mecânico

Segunda tarefa

Projetos de Programação Computacional

- Jogo da Velha
- Projeto Final
- Cálculo de Conceito
- CRDU
- Portfólio de Projetos
- Protótipo de Aplicativo

Projetos Eletrônicos e Mecânicos

- Circuito Eletrônico com Amplificador Operacional ou Diodos e Transístores
- Acionamento PWM com Eletrônica Analógica ou Filtro
- Chuveiro Elétrico
- Rede de Distribuição de Petróleo
- Estação Meteorologica
- Barata Elétrica
- Brinquedo Infantil

Modelagem de Sistemas Físicos e Estatísticos

- Dinâmica Populacional
- Farmacocinética ou Termodinâmica
- Sistema Mecânico
- Análise Exploratória
- Modelos de Regressão
- Ajuste de Modelo Teórico
- Teorema do Limite Central
- Projeto Único

Projetos com Escrita Científica

- Primeiro artigo
- Segundo Artigo
- Application do Singularity
- Estudo Autônomo

Feedback do ninja

Achei interessante que optaram por categorias mais genéricas, bem legal! só talvez o nome dos projetos "Teóricos" possa ter uma denominação melhor que esclareça do que se trata. "Escrita científica"? não sei, acho que teórico, não é a melhor difinição

Terceira tarefa

Nome: Estação Meteorológica
Curso: Engenharia Mecânica, Mecatrônica e Computação
Semestre: Primeiro
Data de início: xx/xx/xxxx
Tempo de Duração do Projeto: Um mês
Design com foco no usuário: Não

Descrição: O projeto consiste na construção de uma estação meteorológica utilizando cinco sensores baratos que são encontrados facilmente no mercado. Ele foi realizado como parte da disciplina Instrumentação e medição. Nesse projeto, o aluno teve que trabalhar com programação de arduíno, realizar a calibragem dos sensores para melhorar sua precisão, além de relatar todas as partes do projeto em um relatório com linguagem técnica e científica.

Feedback do ninja

Gostei da divisão. Talvez fosse interessante explicar a perspectiva de Design na descrição; Acho que "Design: Não" não diz muito sobre o que o projeto é, assim como, "Design: Sim".
Talvez a data, colocado agora no meio da descrição pudesse ser mais valorizada com um campo próprio.

Quarta tarefa

  • A página do aluno apresentará o seu nome, ano de conclusão, curso, semestre em que está cursando, uma foto, uma breve biografia além das experiencias já obtidas com a faculdade e suas pretensões futuras.
  • A página inicial direcionará o usuário para os quatro grupos divididos na tarefa acima além de direcioná-lo para a página do aluno. Conterá também uma frase de um grande pensador que motivou o aluno durante a faculdade, além do logo da engenharia centralizado seguindo padrões adotados por vários sites referenciados.
Feedback do ninja

Pessoal, o texto está um pouco confuso. Principalmente o segundo tópico, falta pontuação e está um pouco desorganizado. Acredito que entendi, achei a frase do "grande pensador" bastante criativa.
Queria apontar, talvez a idade seja pouco relevante para o site em si, algo como ano de conclusão do curso pode ser mais interessante. Mas Legal! Façam as alterações que acharem pertinente! depois me avisem!

Leis de Gestalt e Princípios CRAP

Sketh da página principal

P5.jpg

Sketh da página sobre mim

P6.jpg

Sketh da página de projeto

P7.jpg

Referências de posicionamento

  • Ideia da página inicial de menu alinhado e conteúdo centralizado vem de sites de empresas de renome como: Apple, Samsung, Asus e Lenovo, a estabilização de uma faixa, coloca uma compreensão e uma aceitação muito mais facilitada ao site.

*Segmento de leitura em "F" segundo estudos e dos principios CRAP.
A equipe usou como referência habitual os princípios de design CRAP que referencia contraste, alinhamento, repetição e proximidade, dessa form criando uma leitura mais fluido, evitando dúvidas ao leitor. Outra linha de pesquisa muito usada nesse projeto, foi a tecnica conhecida por "F" Pattern, por meio da conclusão em que chegaram os pesquisadores, é provado a tendência pelo olhar inicial do leitor formar um F imaginário nas informação, começando sempre da parte esquerda superior.
Seguem os sites usados para embasamento.
https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
http://www.webmaster.pt/crap-principios-web-design-1912.html
http://www.dailyblogtips.com/crapthe-four-principles-of-sound-design/
http://thenextweb.com/dd/2015/04/10/how-to-design-websites-that-mirror-how-our-eyes-work/#gref

  • Site que validam o uso de imagens descritivas ao lado esquerdo:

Seguindo a linha do "F" Pattern seguem links de sites que utilizam imagens do lado esquerdo
https://www.facebook.com
http://www.insper.edu.br/presidente/short-bio/
http://scholar.harvard.edu/jfrieden/biocv
http://economics.mit.edu/faculty/angrist/shortbio

  • Outra referência de posicionamento foi a centralização das informações criando uma "caixa" central que restringia o espaço possível para o conteúdo, clareando assim a situação para o leitor.

Teoria das Cores e Tipografia

Mockup da página principal

P1.jpg

Mockup da página sobre mim

P2.jpg

Mockup da página que contem os projetos

P3.jpg

Mockup da página de projeto

P4(1).png

Referências de cor e fonte

Inicialmente, pensamos em usar azul e cinza azulado, pois o azul representa segurança para o cliente, uma cor na qual dá confiança, no entendo as combinações ficaram desastrosas. Como a ideia do site era de fazer algo simples e facil de navegar, decidimos usar as cores branco e preto, branco para o fundo e preto para o header e footer, pois o branco representa paz, pureza, limpeza, além de ter uma visibilidade melhor para o leitor (como diz este site https://minilua.com/porque-maior-parte-dos-sites-fundo-branco/ o fundo branco lembra a evolução natural, deixando a tela mais "amigavel"). E o preto representa respeito, elegância e deixa um tom neutro para o leitor, uma combinação simples porém estratégica. Lendo este site -http://www.portaldomarketing.net.br/o-significado-das-cores-o-preto-em-propaganda-publicidade-e-marketing/- conseguimos perceber a harmonia entre o preto e branco voltado para o marketing, assim como varias marcas, "atraindo" o leitor. Como fonte, usamos a fonte Verdana, pois não tem serifa, na qual deixa o texto mais denso com uma "poluição visual", dificultando a leitura. Essa fonte é uma fonte mais simples, com um aspecto mais limpo, sem poluição visual.

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