Grupo B1

Informações Gerais

Trabalho em equipe

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

Membro\Encontro 05 06 07 08 09 10 11
Hugo Mendes (Computação)
Jean Walper (Computação)
Matheus Campbell (Mecatrônica)
Vinicius Falco (Mecânica)
Michel Haikewitsch (Mecatrô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/hugoeflavia/Co-Design]

Arquitetura de Informação

Primeira tarefa

Projetos que demonstram competências de Engenheiro Mecânico

Primeiro artigo
Segundo artigo
Application
Dinâmica Populacional
Farmacocinética ou Termodinâmica
Sistema Mecânico
Barata
Brinquedo
Projeto único
Estudo Autônomo

Projetos que demonstram competências de Engenheiro Mecatrônico

Primeiro artigo
Segundo artigo
Application
Sistema de Chuveiro
Rede de Petróleo
Estação
Dinâmica Populacional
Farmacocinética ou Termodinâmica
Sistema Mecânico
Barata
Brinquedo
Circuito Eletrônico
Acionamento PWM
Estudo Autônomo

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

Primeiro artigo
Segundo artigo
Application
Estação
Cálculo de conceito
CRUD
Jogo da Velha
Projeto final
Brinquedo
Estudo Autônomo
Protótipo de Website
Protótipo de Aplicativo
Análise Exploratória
Comparação de Interfaces
Modelos de Regressão
Ajuste de Modelo Teórico
Teorema do Limite Central

Projetos que demonstram competências teóricas

Primeiro artigo
Segundo artigo
Dinâmica Populacional
Farmacocinética ou Termodinâmica
Sistema Mecânico
Projeto único
Estudo autônomo
Análise Exploratória
Comparação de Interfaces
Modelos de Regressão
Ajuste de Modelo Teórico
Teorema do Limite Central

Projetos que demonstram competências práticas

Application
Brinquedo
Sistema Chuveiro
Rede de Petróleo
Estação Meteorológica
Circuito Eletrônico
Acionamento PWM
Barata
Brinquedo
Cálculo de conceito
CRUD
Jogo da Velha
Projeto final
Protótipo de Website
Protótipo de Aplicativo

Feedback do ninja

Projetos que demonstram competências de Engenheiro Mecânico
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…

Projetos que demonstram competências de Engenheiro Mecatrônico
Novamente, concordo com os itens apontados, mas volto ao tema da programação como fundamental para qualquer engenheiro, independentemente da área

Projetos que demonstram competências de Engenheiro Computação
Mais uma vez, concordo com os itens apontados, dessa vez frizo conceitos relacionados à elétrica e eletrônica, por exemplo Acionamentos PWM, que se relacionam fortemente com a área de Computação

Projetos que demonstram competências Teóricas
Concordo com os itens citados, todos estão condizentes com atividades teóricas. Porém, senti falra de alguns itens que estavam presentes apenas nas atividades práticas e me parecem envolver bastantes conceitos teóricos:

  • Sistema Chuveiro
  • Rede de Petróleo
  • Estação Meteorológica
  • Circuito Eletrônico
  • Acionamento PWM

Por exemplo, são ricos em conteúdo teórico, e não são factíveis somente com habilidades práticas

Projetos que demonstram competências Práticas
Concordo com os pontos levantados. Com a única ressalva apontada no item anterior. (Brinquedo está escrito duas vezes)

Segunda tarefa

Analise e Estatística:

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

Artigos e Teses:

Primeiro Artigo
Segundo Artigo
Estudo Autônomo

Eletrônico:

Rede de Petróleo
Sistema Chuveiro
Barata
Circuito Eletrônico
Acionamento PWM

Arduíno:

Estação
Projeto Único

Programação:

Cálculo de Conceito
CRUD
Jogo da Velha
Projeto Final
Protótipo Website
Protótipo Aplicativo

Inovação e Desenvolvimento:

Brinquedo
Application

Feedback do ninja

Gostei da forma como dividiram a taxonomia, bem legal! O único ponto seria a "Eletrônica" alguns questionariam se Arduíno não é Eletrônica + Programação, talvez alguma coisa como "Microcontroladores" ou "IoT" pudesse soar mais profissional e deixar mais claro porque não é a mesma coisa

Terceira tarefa

Nome: Estação Meteorológica
Curso: Engenharia Mecatrônica, Engenharia Mecânica, Engenharia da Computação
Período: Primeiro
Design: Sim, centrado no usuário
Escrita: Sim, técnica e científica
Descrição: Confecção de uma estação meteorológica - envolvendo software, fabricação e elétrica - a partir da calibração de sensores de umidade, temperatura, pressão e mais um que o grupo poderia escolher. Além disso, os alunos têm que programar o Arduino para que os sensores funcionem de acordo com as calibrações. Como parte final da confecção, ainda era necessário o processo de planejamento, corte e solda de uma placa de cobre para a alocação dos sensores. Com o intuito de documentar todo o processo, também foi realizado um relatório indicando todos as etapas da confecção de placa.
Duração: O projeto foi realizado durante 3 semanas, desde o dia 27 de Maio até o dia 17 de Junho.

Feedback do ninja

Então, legal! Queria levantar alguns questionamentos, a data de realização e a duração do projeto que estão localizadas no final da descrição não ficariam mais claras como uma categoria, em que pudessem categorizar a partir deste parâmetro, como: projetos de longa duração (Projeto que durou o semestre todo), média (mês ou algumas semanas) e curta (projeto de uma semana) para assim alinhar as expectativas de o quão complexo deve ser um projeto, já que cada dependendo do tempo, é possível realizar coisas mais interessantes!

Além disso, pensaria tmabém em como "Sim, centrado no usuário" é vago, bem como "Sim, técnica e científica" não fica claro como isso foi aplicado e vejo que entendem o que quer dizer, mas pra quem não está inserido no contexto do Insper é dificil compreender exatamente o que isso significa na prática, talvez inseri-los na descrição como no trecho:

  • "Com o intuito de documentar todo o processo, também foi realizado um relatório indicando todos as etapas da confecção de placa."

Que ilustra muito bem o conceito de escrita, sem ter que categoriza-lo. Bom trabalho!

Quarta tarefa

O grupo chegou ao consenso de que queremos deixar explícito no portfólio, quem está por trás de todos os projetos presentes na página. Logo, já na página inicial (home), deixamos evidente o nome do dono daqueles projetos, e logo abaixo um link para o Sobre Mim” que se encontra na mesma página. O intuito é exatamente esse, a primeira página basicamente destinada a você conhecer um pouco mais sobre o autor do que você nas páginas seguintes. Entretanto, caso o usuário deseje ir rapidamente para a página dos projetos, também é possível, já que tanto no menu quanto no texto do sobre mim, existem há um hyperlink para lá.

Feedback do ninja

Não apresentado na data - Façam mesmo assim! Sei que querem que fiquei multo legal no final! :D

Leis de Gestalt e Princípios CRAP

14489019_1130065493736270_859267963_o.jpg

A ideia é como dito na quarta tarefa, concentrar informações pessoais do autor do portfólio na pagina inicial. E o acesso ao sobre mim ser com base em um scroll down. Esse recurso é moderno e bem utilizado nos templates dos sites da wix.com, por exemplo. O nome grande e centralizado logo na home page foi baseado em um site ganhador de um prêmio em Web Design : [http://bjoernmeier.com/].

14489573_1130065517069601_1374402441_o.jpg

Aqui na pagina dos projetos tudo deveria ficar fácil de ser visualizado, logo o posicionamento dos elementos do nosso site é um detalhe importante. Decidimos por localizar as divisões/classificações que demos aos nossos projetos em uma aba fixa e roxa à esquerda. O roxo é uma cor que chama a atenção do usuário, e o posicionamento á esquerda foi baseado em sites como a Saraiva e o Submarino, em que eles também tem diversas categorias e nós usuários navegamos por elas por essas abas laterais.

Após o término do html e css, nosso site ( portfólio) ficou com essa cara:

14488886_1130065473736272_470865174_o.jpg
14513690_1130065460402940_682064601_o.jpg
14522513_1130065397069613_2109633418_o.jpg

Ficamos em contentes pois atingiu nossas expectativas iniciais e houve uma boa reação por parte dos nossos usuários testes.

Referências de posicionamento

Para fazer nosso site, pensamos em que precisávamos passar ao visitante. Para isso começamos vendo vários sites de portfolios dos mais diferentes tipos, e analisando o que foi feito, para depois decidir o que e como iriamos fazer. Analisamos a estética, a navegabilidade e a dificuldade para se reproduzir o que havia nesses sites para tirarmos nossas conclusões.
[http://www.deleteagency.com/] —
Esse site passa a impressão de que “Uma imagem vale mais do que mil palavras.”, por seu conteúdo focado em chamar a atenção do leitor para os projetos.
[http://seanhalpin.io/] —
O design minimalista desse site foi considerado, mas optamos por um design que chama mais atenção aos projetos, e não ao que o dono do portfolio faz ou não. Legal notar também que o criador do site achou importante focar em quem ele é, e dar facilidade para o leitor se comunicar com ele.
[http://bjoernmeier.com/] —
O site acima tem uma home que chama a atenção, logo de cara mostrando quem o autor do portfolio é e o que ele faz, foi nossa principal inspiração para nossa homepage.
[http://salleedesign.com/home/] —
Outro site que tem o padrão que nos usamos de o nome grande na homepage e da barra de opções acima. Detalhe é que não gostamos muito da página “Works” desse portfólio.
[http://www.seymourpowell.com/] —
Desse site tiramos a ideia de colocar uma imagem embaçada no fundo das paginas de projeto, para que ela não chamasse mais atenção do que deveria. Mesmo que no fim ela tenha ficado em segundo plano nas paginas dos projetos.

source
Feedback do ninja

Vi que fizeram o sketch na lousa, o que não tem problema algum. Contudo, o tipo de tomada que utilizaram para as fotos da lousa não foi ótima. Dificultou bastante o entendimento das telas e de suas funcionalidades respectivas, além de se tornar dificil de vizualizar, só foi possível ler alguns itens dada a capacidade de zoom, devido a altíssima qualidade da camera que fotografou. Ao mesmo tempo, não referenciaram links de maneira clara, ao abri-los ficou evidente a inspiração no design centralizado com scroll contínuo, apoiado! Acho um design moderno e que combina muito com portifólios. Porém poderiam ter melhor representado quais fatores extraíram de links específicos tornaria a compreensão mais fácil! // Algumas marcas de alinhamento no desenho mais explícitas tornariam mais facil a identificaçãojá que é um desenho feito a mão.

Teoria das Cores e Tipografia

logo%20portfolios.png
(preencha seguindo o modelo da entrega fictícia

Referências de cor e fonte

Fontes:
Para a entrega final, optamos por fazer uma mudança no site, a fonte que antes era a Verdana, agora sera a Lato. O motivo dessa mudança veio por contra-argumentos a respeito do uso da Verdana, somado a necessidade de ainda se usar uma fonte não serifada e moderna.
A fonte antiga (Verdana), tem problemas com sua popularidade, por vários motivos, alguns designers gostam de usa-la, e outros abominam seu uso, algo parecido com a famosa fonte comic-sans.
Tendo isso em mente, decidimos trocar a fonte, já que vários dos argumentos é o de que muitos designers escolhem essa fonte por ela ser muito utilizada, e por esse motivo, alguns tem a impressão de que quem escreveu o texto simplesmente não se preocupou com a escolha da fonte e apenas escolheu uma que é padrão, ou altamente usada em textos na internet.
Particularmente, nos do grupo B1 não achamos que a fonte verdana fica ruim para o site, mas como temos que considerar as pessoas que podem vir a ler os textos no site, precisamos considerar que algumas delas podem ter uma mal impressão, simplesmente pelo fato da escolha de fontes.

Referencias contra a verdana:
http://www.bigbrandsystem.com/why-i-hate-verdana/
https://sbpoley.home.xs4all.nl/webmatters/verdana.html
http://idsgn.org/posts/apple-switches-to-verdana/
(repare que a noticia é uma bricadeira de primeiro de abril.)

A fonte escolhida precisava seguir um padrão, você pode perceber nas referencias de outros sites que usamos para fazer o layout do nosso que a grande maioria usa fontes não serifadas e com um ar mais moderno. A fonte Lato tem essas características, esta presente em varias paginas de recomendações de fontes, e não distoa muito do estilo que queríamos para o site desde o inicio.
Lato é uma fonte parecida com a Open Sans, outra fonte altamente usada e bem-vista pelos internautas. A grande vantagem da fonte é o ar serio que ela passa, mas não deixa de parecer moderna e elegante, algo que não acontece quando usamos fontes mais “comuns” como Helvetica, Times new Romans, ou a própria Verdana.
Apesar de que nosso site opta pelo uso de apenas uma fonte, é bom mencionar que a fonte Lato é muito elogiada por ser uma das fontes que mais combina com outros tipos de fonte, podendo ser usada para detalhes e textos pequenos, ate mesmo em sites com fontes serifadas, e continuar estaticamente agradável.
Enfim, escolhemos a Lato por que é uma fonte moderna e que se mantem nos padrões originais do site, sendo seria mas nem tanto, e ainda mostrando para os olhos mais observadores que o proprietário do portfolio se preocupou com a escolha de fontes em vez de apenas usar um padrão.
E como os próprios criadores da fonte afirmam:
“Os detalhes semi-circulares das letra dão a Lato uma sensação de calor. Enquanto a estrutura forte providencia seriedade e estabilidade.”

Referencias para a escolha da fonte Lato:
https://bootstrapbay.com/blog/google-web-fonts/
https://designschool.canva.com/blog/resume-fonts/
http://www.graphicmania.net/nine-fonts-to-use-and-avoid-in-design/
http://www.creativebloq.com/typography/10-best-google-fonts-print-web-and-mobile-11135171

Cores:
Cor da página inicial: Fundo branco ( #FFFFFF),
Cor das letras: Preta (#000000)
Cor do menu lateral: roxo (#4B0082)
A cor do menu lateral é roxo pois ela é análoga ao fundo do teclado do Macbook, que ilustra nossa página da web.
Foi utilizada uma paleta de roxo (cores #1e0126,#9a6bdb,#C4a7f2,#7847d7,#3e258a), em seus diferentes tons
A cor da fonte (branco) realça o destaque ao texto, mesmo com a mudança de fundo (diferentes tons de azul, #cor) causada pelo mouse passando por cima

[http://www.colormatters.com/the-meanings-of-colors/purple]

[http://www.color-wheel-pro.com/color-meaning.html]

A escolha do roxo veio de uma serie de fatores, o grupo concordou que deveria haver uma cor mais unica no site para que ele se destacasse com mais facilidade, então descartamos logo as cores azul, vermelho e verde.
Das que sobraram, escolhemos o roxo ja que ele representa, em muitas culturas (sobretudo a da maior parte do publico alvo que queremos), serenidade, seriedade e confiança
outro detalhe é o de que o roxo é considerado, por muitas pessoas, uma cor artificial, ja que é raramente encontrada na natureza
isso passa a ideia de que o dono do portfólio é único, e poucos (ou nenhum) serão iguais a ele
concluindo, a cor roxo se destaca sobre as outras mais utilizadas, mas ainda é seria,neutra, e deixou nosso layout esteticamente agradável. O significado pode ser interpretado como estabilidade, seriedade e confiança, características ideias para o dono do portfólio.

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