Grupo B6

Informações Gerais

Trabalho em equipe

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

Membro\Encontro 05 06 07 08 09 10 11
Bruno Gomes (Mecatrônica)
Eduardo Magalhães (Mecânica)
Gabriel Moreira (Computação)
Lucas Sousa (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/edufm/TrabTaxonomia/

Arquitetura de Informação

Primeira tarefa

Projetos que demonstram competências de Engenheiro Mecânico

Barata Elétrica
Desenvolvimento de Brinquedo
Sistema mecanico
Famacocinetica/Termodinamica

Projetos que demonstram competências de Engenheiro Mecatrônico

Estação Metereologica
Analogia Eletro-hidraulica
Sistema de chuveiro eletrico
Barata Elétrica
Circuito com AP

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

Famacocinetica/Termodinamica
Dinamica Populacional
Comparação de interfaces
Jogo da Velha
Desenvolimento de Jogo
Lista de compras
Protótiopo de APP
Protótio de Website

Projetos que demonstram competências teóricas

Estação Metereologica
Analogia Eletro-hidraulica
Sistema de chuveiro eletrico
Barata Elétrica
Circuito com AP
Famacocinetica/Termodinamica
Dinamica Populacional
Artigo Cientifico 1
Artigo Cientifico 2
Aplication Singularity
Pesquisa sobre Matematica
Projeto de Fisica
Modelos de regreção
Modelos Teorico
Teorema de limite central
Análise Explorativa

Projetos que demonstram competências práticas

Estação Metereologica
Analogia Eletro-hidraulica
Sistema de chuveiro eletrico
Barata Elétrica
Circuito com AP
Desenvolvimento de Brinquedo
Sistema mecanico
Jogo da Velha
Desenvolimento de Jogo
Lista de compras
Protótiopo de APP
Protótio de Website

Feedback do ninja

Projetos que demonstram competências por Cursos
Concordo com os pontos que levantaram, colocaria da mesma forma, mas achei a divisão pouco abrangente, talvez adicionar mais competências as diferentes áreas. 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.. Assim como para o engenheiro mecatrônico.
Projetos que demonstram competências entre Teórico e Prático
Concordo com a divisão, gostei da repetição de alguns tópicos entre ambas as categorias

Segunda tarefa

  • Projetos que demonstram competências de Engenheiro Mecânico
    • Projetos que demonstram competências teóricas
      • Sistema mecanico
      • Famacocinetica/Termodinamica
    • Projetos que demonstram competências práticas
      • Barata Elétrica
      • Desenvolvimento de Brinquedo
  • Projetos que demonstram competências de Engenheiro Mecatrônico
    • Projetos que demonstram competências teóricas
      • Sistema de chuveiro eletrico
      • Analogia Eletro-hidraulica
      • Circuito com AP
    • Projetos que demonstram competências práticas
      • Estação Metereologica
      • Barata Elétrica
  • Projetos que demonstram competências de Engenheiro de Computação:
    • Projetos que demonstram competências teóricas
      • Famacocinetica/Termodinamica
      • Dinamica Populacional
      • Comparação de interfaces
    • Projetos que demonstram competências práticas
      • Jogo da Velha
      • Desenvolimento de Jogo
      • Lista de compras
      • Protótiopo de APP
      • Protótio de Website
  • Pensamento Critico/Projetos Sociais
    • Artigo 1
    • Artigo 2
    • Projeto Singularity
    • Projeto Final de Modelgem e Simulação
Feedback do ninja

Gostei da organização em tópicos e sub-tópicos ficou muito boa, mas acredito que a proposta era uma proposta era um pouco diferente de mesclar ambas as categorias anteriores. Criar novas categorias de organização.

Terceira tarefa

A página do projeto sempre deve apresentar os campos "nome", "curso", "período", "contato com usuário", "entrega", "duração" e "descrição".

EX:
Nome: Aplicação Singularity
Participantes: Eduardo Magalhães
Curso: Grandes Desafios da Engenharia
Período: 1° semestre
Contato com o usuário: Não
Formato: Vídeo com ideia inovadora
Duração: 3 semanas
Descrição: video de 2 minutos explicando uma ideia para impactar 1 bilhão de pessoas em 10 anos

Feedback do ninja

Concordo com a organização, acredito que uma descrição mas extensa seja mais legal para o site oficial, "Contato com o usuário" me parece uma categoria que não diz muito, evitem usar categorias "yes or no" e mais descritivas para maior entendimento do que significam para o projeto.

Quarta tarefa

A pagina Main ou link "home" contem toda a taxonomia do site para o usuário conseguir acessar todos os projetos, ao mesmo tempo contem subcategorias com cada item da taxonomia acima para mais fácil localização de projetos
Além disso todas as paginas possuem um menu superior com links para todas as engenharias e a pagina Main ("home")
O menu também possibilita acesso a pagina "Aluno" com as informações básicas do aluno alvo do site (no caso Eduardo Ferrari Magalhães)

EX:
Main —> Alunos —> Game (Projetos em destaque) —> Main
Main —> Engenharia Mecânica —> Brinquedo
Main —> Engenharia Mecatrônica —> Main —> Pensamento Critico —> Singularity
Main —> Engenharia da computação —> Engenharia mecatrônica —> Estação Metateológica

Feedback do ninja

Gostei novamente orgnizaçao, ficou bastante clara a movimentação entre as diferentes páginas e como elas se relacionam. Muito bom, após as alterações anteriores me avisem pra eu ajudar, vocês podem reentregar quantas vezes quiserem!

Leis de Gestalt e Princípios CRAP

Sketch da página do aluno
WhatsApp%20Image%202016-08-31%20at%2015.28.15.jpeg

Sketch da página de projeto:

Sketch.jpg

Referências de posicionamento

Logo no canto superior esquerdo e itens de busca no canto superior direito: https://medium.com/user-experience-3/the-gutenberg-diagram-in-web-design-e5347c172627#.hhkkbcemx
O Gutenberg Diagram mostra que a pessoa, ao acessar a página, começa olhando para o canto superior esquerdo, depois para o direito e segue para baixo. Isso é importante, pois ao abrir o nosso site, o usuário irá focar primeiramente no logotipo/aluno e em seguida nas opções de busca, que são partes fundamentais, a primeira, pois é a marca e/ou pessoa responsável pelo site e a segunda porque é o principal meio de locomoção do usuário pelo website, vendo por último o conteúdo apresentado.
Exemplos de sites que utilizam essa técnica: https://www.rottentomatoes.com/ e http://loja.multcomercial.com.br/

A simetria da página: https://www.sitepoint.com/a-study-of-symmetry-when-where-and-why-to-use-it/
Esse estudo mostra que é mais adequado o uso de simetria na página quando ela é mais tradicional ou quando quer passar confiança para o usuário. Como o assunto discutido são trabalhos de faculdade foi decidido que era mais apropriado fazer uma página simétrica.
Exemplo de site que utiliza essa técnica: https://support.apple.com/pt-br

Conteúdo espalhado pela página: https://www.clicktale.com/academy/blog/unfolding-the-fold-insights-into-webpage-scroll/
Esse estudo mostra que usuários geralmente veem a página inteira, mesmo que isso não necessariamente signifique que leiam tudo. Tendo em vista esse estudo, o conteúdo do site não foi “espremido” no inicio, mas mesmo assim continua curto para facilitar a leitura.
Exemplo de site que utiliza essa técnica: https://www.youtube.com/

Outra referência de C.R.A.P: http://2012books.lardbucket.org/books/designing-business-information-systems-apps-websites-and-more/s07-01-c-r-a-p-principles-of-graphic-.html

(preencha seguindo o modelo da entrega fictícia)

Mockup das cores e fontes

Mockup.png

A partir do layout original do site decidimos que era importante ter uma página que passasse segurança e confiança ao leitor, dessa forma optamos por um tom de azul escuro no Header e Footer para que eles ainda estivessem em destaque, mas não tivessem cores angustiantes ou alarmantes como amarelo e vermelho.
Para o fundo da página optamos por uma imagem relacionada a engenharia que tivesse contraste com a cor de cada item.
Além disso os links "saiba mais" dos projetos deveriam novamente passar uma ideia de segurança ao leitor do site e ao mesmo tempo estar destacados para deixar claro que são links, para isso utilizamos um tom de azul claro (em contraste com a imagem do fundo) que cumpria as duas funções e ainda combinava com o azul do título.

Referências de cor e fonte

Cor azul: http://www.empower-yourself-with-color-psychology.com/color-blue.html e http://www.tuned-in.com/ColorSpeaks/Blue.aspx
Como a intenção do site é criar um canal entre o portfólio do aluno e um possível empregador é importante que a cor também criasse uma espécie de confiança entre o leitor e o estudante, no caso como a fonte afirma, o azul tem como principal característica mostrar tranquilidade e indicar segurança, ajudando a criar esse vínculo de confiança esperado.
Exemplos de sites que usam essa técnica: https://www.facebook.com/ e http://www.voeazul.com.br/

Fontes.png

Fonte do título (Museo Sans): https://www.pallasweb.com/fonts.html
Após observar o site decidimos que para o titulo seria interessante ter uma aparência mais técnica e moderna e, portanto escolhemos uma fonte sem serif.
Exemplo de site que usa uma fonte parecida: https://www.roadie.com/

Fonte do corpo (Oxygen): https://designshack.net/articles/typography/7-tips-for-choosing-the-best-web-font-for-your-design/
A Oxigen foi escolhida, pois é uma fonte que mostra calma, ao mesmo tempo em que é bem moderna e fácil de ser lida, não sendo muito densa em grandes parágrafos, além disso, a fonte possuí suporte para acentos e sinais gráficos, recurso essencial para o portfólio.
Exemplo de site que usa uma fonte parecida para o corpo: http://www.apple.com/br/

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