Grupo B4

Informações Gerais

Trabalho em equipe

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

Membro\Encontro 05 06 07 08 09 10 11
Juliana Pessoa (Mecânica)
Vitória Rocha (Mecatrônica)
Guilherme Zaborowsky Graicer (Computação)
Bruno Bitelli (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/guizg/PortfolioProjetos

Arquitetura de Informação

Primeira tarefa

Projetos que demonstram competências de Engenheiro Mecânico

Primeiro Artigo
Segundo Artigo
Application do Singularity
Projeto Final
Sistema de Aquecimento de um Chuveiro Elétrico
Rede de Distribuição de Petróleo
Estação Meteorológica
Dinâmica Populacional
Farmacocinética ou Termodinâmica
Sistema Mecânico
Barata Elétrica
Brinquedo Infantil
Projeto Único
Estudo Autônomo

Projetos que demonstram competências de Engenheiro Mecatrônico

Primeiro Artigo
Segundo Artigo
Application do Singularity
Cálculo de Conceito
CRUD
Jogo da Velha
Projeto Final
Sistema de Aquecimento de um Chuveiro Elétrico
Rede de Distribuição de Petróleo
Estação Meteorológica
Dinâmica Populacional
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
Estudo Autônomo

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

Primeiro Artigo
Segundo Artigo
Application do Singularity
Cálculo de Conceito
CRUD
Jogo da Velha
Projeto Final
Sistema de Aquecimento de um Chuveiro Elétrico
Rede de Distribuição de Petróleo
Estação Meteorológica
Dinâmica Populacional
Farmacocinética ou Termodinâmica
Sistema Mecânico
Circuito Eletrônico com Amplificador Operacional ou Diodos e Transístores
Acionamento PWM com Eletrônica Analógica ou Filtro
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
Estudo Autônomo

Projetos que demonstram competências teóricas

Primeiro Artigo
Segundo Artigo
Application do Singularity
Sistema de Aquecimento de um Chuveiro Elétrico
Rede de Distribuição de Petróleo
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 do Limite Central
Estudo Autônomo

Projetos que demonstram competências práticas

Cálculo de Conceito
CRUD
Jogo da Velha
Projeto Final
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
Portfólio de Projetos
Protótipo de Aplicativo
Projeto Único

Feedback do ninja

Projetos que demonstram competências por Curso
Gostei que foram bastante abrangentes em todas os cursos, mostrando uma perspectiva de que os cursos exigem muitos conhecimentos diversificados. Colocaria mais alguns itens de software no engenheiro mecânico, ja que é uma das skills essênciais para o profissional dessa área
Projetos que demonstram competências entre Teórico e Prático
Acredito que foi muito condizente. Dividiria assim também."

Segunda tarefa

<Programação>
-Cálculo de Conceito
-CRUD
-Jogo da Velha
-Projeto Final
-Portfólio de Projetos
-Protótipo de Aplicativo

<Estatística/Dados>
-Análise Exploratória
-Comparação de Interfaces
-Modelos de Regressão
-Ajuste de Modelo Teórico
-Teorema do Limite Central

<Matemática e Modelos>
-Dinâmica Populacional
-Farmacocinética ou Termodinâmica
-Sistema Mecânico
-Estudo Autônomo

<Maker>
-Barata Elétrica
-Brinquedo Infantil
-Estação Meteorológica
-Projeto Único

<Eletrônica>
-Sistema de Aquecimento de um Chuveiro Elétrico
-Rede de Distribuição de Petróleo
-Circuito Eletrônico com Amplificador Operacional ou Diodos e Transístores
-Acionamento PWM com Eletrônica Analógica ou Filtro

<Textos/Vídeos>
-Primeiro Artigo
-Segundo Artigo
-Application do Singularity

Feedback do ninja
  • Separaria Maker de Eletrônica, projetos simples com arduíno podem entrar na divisão "Maker", mas PWM e circuitos avançados são muito mais especíicas.
  • Evitaria ao máximo a utilização de "Outros" como categoria, se pudessem criar uma categoria que mesmo que mantenha somente poucos itens, não é genérica.
  • Achei criativo o uso de <Tags> para cada uma das categorias :D

Terceira tarefa

A página do projeto sempre deve apresentar os campos "nome", "curso", "disciplina", "período", "duração", "natureza" (prático/teórico), e "descrição". Todas as perguntas que não podem ser respondidas pelos cinco primeiros campos podem ser respondidas pela descrição. Exemplo:

Nome: Estação Meteorológica
Curso: Engenharias de Computação, Mecânica e Mecatrônica
Disciplina: Intrumentação e Medição
Período: Primeiro
Duração: 1 mês
Natureza: Prático
Descrição: Esse projeto consiste na criação de uma estação meteorológica usando uma placa Arduino Uno, e sensores que meçam temperatura, pressão, umidade relativa, e mais um sensor a escolha do grupo. O sensores são calibrados pelos próprios alunos em laboratórios da faculdade, e deve ser montada uma placa com os componentes eletrônicos no laboratório de fabricação (FabLab).

Feedback do ninja

Ficou bem organizada. Gostei da descrição, ficou eficaz, objetiva.

Quarta tarefa

A página principal tem uma descrição do que é Portfólio de Projetos, seguida de cada categoria da segunda tarefa (hiperlinks para paginas com uma lista dos projetos daquela categoria, cada um também um link para a sua própria pagina). Depois dessa lista de categorias haverá um link para a página Sobre Mim.

A página Sobre Mim, conterá uma foto, o nome, curso a qual pertence e ano de conclusão do curso.

Obs.: Cada pagina (exceto a principal) terá um link "<— Volta", que volta para a anterior e um "Home", que vai para a pagina principal do Portfólio.

Feedback do ninja

Achei a descrição confusa. Talvez fique mais claro ao observar o site, mas só com a leitura do parágrafo, achei dificil de compreender o conceito. Gostei do Link de <—voltar, pode ser util.
Sobre mim

  • Acho que idade não é tão relevante para o portifólio
  • Assim como o ano de ingresso na faculdade, mais vantajoso utilizar o ano de conclusão do curso.

Leis de Gestalt e Princípios CRAP

thumbnail_IMG_5209%281%29.jpg

Descrição da imagem

A imagem acima é o nosso primeiro sketch e apresenta duas partes. A da direita, página inicial do site, traz o título da página na parte superior e com tamanho de fonte maior que o resto dos textos, a fim de destacá-lo. Logo abaixo, na parte central da página, encontram-se as categorias para navegação, que foram organizadas em função da característica do projeto (maker, eletrônica ou matemática, por exemplo).

Na lateral esquerda da página inicial, encontra-se uma aba que é expandida ao ser clicada (indicada na parte da esquerda da foto). Essa aba traz conteúdos relacionados ao grupo, como uma pequena sobre quem somos e o que cursamos.

Além disso, ao final de cada página há um rodapé com o logo do Insper.

thumbnail_IMG_5283.jpg

Descrição da imagem

A imagem acima é o nosso segundo sketch. Pensamos que uma página com menos texto e mais imagens explicativas fosse o ideal para proporcionar uma visita agradável ao site.
Dessa forma, optamos por um plano de fundo com imagens da faculdade e do curso de Engenheira, que se repetem numa sequência.

mockup1.png

A imagem acima apresenta o mockup realizado no programa Power Point. A imagem ao fundo iria variar com fotos relacionadas ao Insper e ao nosso curso de engenharia, e as mesmas se se repetiriam numa sequência. Além disso, escolheu-se um menu em preto com transparência para contrastar com as letras brancas.

mockup2.png
mockup3.png

Descrição das imagens

Os mockups acima trazem a configuração de como seria o site ao clicar nas categorias do menu, como por exemplo, "maker" ou "programação".
Menus secundários se abririam para poder acessar os projetos das categorias escolhidas.

Referências:

Estética e posicionamento:

A fim de fazer com que a navegação pela página seja mais agradável e com textos reduzidos ao máximo, optamos por preencher o espaço do site com imagens que têm relação com os projetos realizados. Esse esquema foi inspiração dos sites a seguir:
http://www.unaarquitetos.com.br/ - Juliana Pessoa: um site de arquitetura é uma boa referência porque é uma atividade que pensa em formas, cores e tamanhos para criar um ambiente harmônico.
http://burlemarx.com.br/inicio/ - Bruno Bitelli: O site foi uma inspiração porque os slides de fotos apresentando os projetos, faz com que os visitantes já entendam sobre o que o site se trata.
http://br.beatsbydre.com/ - Guilherme Graicer: o site da Beats tem posicionamentos de referência para o nosso grupo, pois apresenta o menu na parte superior e com uma boa visualização para o visitante do site.
http://www.apple.com/br/ - Vitória Rocha: o layout do site da Apple nos inspirou, porque o menu é de fácil entendimento ao visitante da página.

Teoria das cores e tipografia

Cores:

Visto que as imagens já são coloridas, optou-se por um layout preto e branco, para que a composição da página como um todo fique harmônica. Algumas páginas de internet que seguem esse modelo são:
http://isayweinfeld.com/ - Bruno Bitelli: assim como nosso site, a página do escritório de arquitetura tem letras e menu na escala de cinza, para focar nas imagens coloridas dos projetos.
http://store.osklen.com/ - Juliana Pessoa: o plano de fundo e as letras são pretas e brancas, contrastando com as imagens coloridas.
http://www.apple.com/br/ - Guilherme Graicer: tons de cinza, preto e branco, a fim de criar um aspecto harmônico com as fotos coloridas.
http://www.insper.edu.br/?gclid=COOouPb8sM8CFU8FkQodLOcNXg - Vitória Rocha: há a predominância da cor cinza, dando espaço para um foco maior nas imagens coloridas.

Tipografia:

Os sites a seguir nos inspiraram, porque contêm fontes simples, mas modernas:
http://www.innocentdrinks.co.uk/ - Vitória Rocha
http://getblk.com/ - Juliana Pessoa
http://canaloff.globo.com/ - Guilherme Graicer
https://www.vosswater.com/ - Bruno Bitelli

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