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 teóricas
- 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 teóricas
- 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
- Projetos que demonstram competências teóricas
- 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 alunoSketch da página de projeto:
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
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/
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/