Grupo B2

Informações Gerais

Trabalho em equipe

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

Membro\Encontro 05 06 07 08 09 10 11
Alexandre Costa (Computação)
Luigi Almeida (Computação)
Patrick Wiegerinck (Mecatrônica)
Rodrigo Lino (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/Patrick8991/HTML

Arquitetura de Informação

Primeira tarefa

Projetos que demonstram competências de Engenheiro Mecânico

Projeto Final (Design de Software)
Primeiro Artigo (Grandes Desafios da Engenharia)
Segundo Artigo (Grandes Desafios da Engenharia)
Application do Singularity (Grandes Desafios da Engenharia)
Rede de Distribuição de Petróleo (Instrumentação e Medição)
Dinâmica Populacional (Modelagem e Simulação)
Farmacocinética ou Termodinâmica (Modelagem e Simulação)
Sistema Mecânico (Modelagem e Simulação)
Barata Elétrica (Natureza do Design)
Brinquedo Infantil (Natureza do Design)
Análise Exploratória (Ciência dos Dados)
Comparação de Interfaces (Ciência dos Dados)
Modelos de Regressão (Ciência dos Dados)
Ajuste de Modelo Teórico (Ciência dos Dados)
Teorema do Limite Central (Ciência dos Dados)
Portfólio de Projetos (Co-Design de Aplicativos)
Projeto Único (Física do Movimento)
Estudo Autônomo (Matemática da Variação)

Projetos que demonstram competências de Engenheiro Mecatrônico

CRUD (Design de Software)
Jogo da Velha (Design de Software)
Projeto Final (Design de Software)
Primeiro Artigo (Grandes Desafios da Engenharia)
Segundo Artigo (Grandes Desafios da Engenharia)
Application da Singularity (Grandes Desafios da Engenharia)
Sistema de Aquecimento de um Chuveiro (Instrumentação e Medição)
Rede de Distribuição de Petróleo (Instrumentação e Medição)
Estação Meteorológica (Instrumentação e Medição)
Dinâmica Populacional (Modelagem e Simulação)
Farmacocinética ou Termodinâmica (Modelagem e Simulação)
Sistema Mecânico (Modelagem e Simulação)
Barata Elétrica (Natureza do Design)
Brinquedo Infantil (Natureza do Design)
Circuito Eletrônico com Amplificador Operacional ou Diodos e Transistores (Acionamentos Elétricos)
Acionamento PWM com Eletrônica Analógica ou Filtro (Acionamentos Elétricos)
Análise Exploratória (Ciência dos Dados)
Comparação de Interfaces (Ciência dos Dados)
Modelos de Regressão (Ciência dos Dados)
Ajuste de Modelo Teórico (Ciência dos Dados)
Teorema do Limite Central (Ciência dos Dados)
Portfólio de Projetos (Co-Design de Aplicativos)
Projeto Único (Física do Movimento)
Estudo Autônomo (Matemática da Variação)

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

Cálculo de Conceito (Design de Software)
CRUD (Design de Software)
Jogo da Velha (Design de Software)
Projeto Final (Design de Software)
Primeiro Artigo (Grandes Desafios da Engenharia)
Segundo Artigo (Grandes Desafios da Engenharia)
Application da Singularity (Grandes Desafios da Engenharia)
Estação Meteorológica (Instrumentação e Medição)
Dinâmica Populacional (Modelagem e Simulação)
Sistema Mecânico (Modelagem e Simulação)
Brinquedo Infantil (Natureza do Design)
Análise Exploratória (Ciência dos Dados)
Comparação de Interfaces (Ciência dos Dados)
Modelos de Regressão (Ciência dos Dados)
Ajuste de Modelo Teórico (Ciência dos Dados)
Teorema do Limite Central (Ciência dos Dados)
Portfólio de Projetos (Co-Design de Aplicativos)
Protótipo de Aplicativo (Co-Design de Aplicativos)
Estudo Autônomo (Matemática da Variação)

Projetos que demonstram competências teóricas

Jogo da Velha (Design de Software)
Projeto Final (Design de Software)
Cálculo de Conceito (Design de Software)
Primeiro Artigo (Grandes Desafios da Engenharia)
Segundo Artigo (Grandes Desafios da Engenharia)
Application da Singularity (Grandes Desafios da Engenharia)
Sistema de Aquecimento de um Chuveiro (Instrumentação e Medição)
Rede de Distribuição de Petróleo (Instrumentação e Medição)
Dinâmica Populacional (Modelagem e Simulação)
Farmacocinética ou Termodinâmica (Modelagem e Simulação)
Sistema Mecânico (Modelagem e Simulação)
Estudo Autônomo (Matemática da Variação)
Projeto Único (Física do Movimento)
Portfólio de Projetos (Co-Design de Aplicativos)
Análise Exploratória (Ciência dos Dados)
Comparação de Interfaces (Ciência dos Dados)
Modelos de Regressão (Ciência dos Dados)
Ajuste de Modelo Teórico (Ciência dos Dados)
Teorema do Limite Central (Ciência dos Dados)
Circuito Eletrônico com Amplificador Operacional ou Diodos e Transistores (Acionamentos Elétricos)
Acionamento PWM com Eletrônica Analógica ou Filtro (Acionamentos Elétricos)

Projetos que demonstram competências práticas

Cálculo de Conceito (Design de Software)
Jogo da Velha (Design de Software)
Projeto Final (Design de Software)
Application da Singularity (Grandes Desafios da Engenharia)
Rede de Distribuição de Petróleo (Instrumentação e Medição)
Estação Meteorológica (Instrumentação e Medição)
Farmacocinética ou Termodinâmica (Modelagem e Simulação)
Sistema Mecânico (Modelagem e Simulação)
Barata Elétrica (Natureza do Design)
Brinquedo Infantil (Natureza do Design)
Projeto Único (Física do Movimento)
Protótipo de Aplicativo (Co-Design de Aplicativos)
Análise Exploratória (Ciência dos Dados)
Modelos de Regressão (Ciência dos Dados)
Circuito Eletrônico com Amplificador Operacional ou Diodos e Transistores (Acionamentos Elétricos)
Acionamento PWM com Eletrônica Analógica ou Filtro (Acionamentos Elétricos)

Feedback do ninja

Divisão por curso
Gostei dos itens apontados em todas os cursos, gostei da discriminação que fizeram das disciplinas específicas! Muito bom! (Jogo da Velha (Design de Software)) ficou em negrito acho que por engano.

Divisão entre: Teórico / Prática
Concordo com as separações que estabeleceram. Talvez os itens de Design de Software pudesseme estar em ambas as categorias. (Cálculo de Conceito (Design de Software)) por exemplo.

Segunda tarefa

Análise Matemática

Estudo Autônomo (Matemática da Variação)
Dinâmica Populacional (Modelagem e Simulação)
Farmacocinética ou Termodinâmica (Modelagem e Simulação)
Sistema Mecânico (Modelagem e Simulação)
Projeto Único (Física do Movimento)

Estímulo para criação e Execução de Projetos

Barata Elétrica (Natureza do Design)
Brinquedo Infantil (Natureza do Design)
Portfólio de Projetos (Co-Design de Aplicativos)
Protótipo de Aplicativo (Co-Design de Aplicativos)

Creative Thinking

Projeto Final (Design de Software)
Protótipo de Aplicativo (Co-Design de Aplicativos)
Brinquedo Infantil (Natureza do Design)
Projeto Único (Física do Movimento)
Barata Elétrica (Natureza do Design)
Circuito Eletrônico com Amplificador Operacional ou Diodos e Transistores (Acionamentos Elétricos)
Acionamento PWM com Eletrônica Analógica ou Filtro (Acionamentos Elétricos)

Desenvolvimento e Aplicação de Software

Projeto Final (Design de Software)
Protótipo de Aplicativo (Co-Design de Aplicativos)
Análise Exploratória (Ciência dos Dados)
Modelos de Regressão (Ciência dos Dados)

Circuitos Elétricos

Sistema de Aquecimento de um Chuveiro (Instrumentação e Medição)
Rede de Distribuição de Petróleo (Instrumentação e Medição)
Estação Meteorológica (Instrumentação e Medição)
Circuito Eletrônico com Amplificador Operacional ou Diodos e Transistores (Acionamentos Elétricos)
Acionamento PWM com Eletrônica Analógica ou Filtro (Acionamentos Elétricos)

Feedback do ninja

Concordo com as divisões que estabeleceram, contudo, alguns pontos:
*Achei interessante a divisão de "Creative Thinking", Contudo, acredito que mais projetos tenham envolvido o "pensamento criativo" desde a própria Barata Elétrica; Circutos de acionamentos (que tem uma liberdade grande de criação);
*Não entendi bem o que quiseram dizer com "Direcionamento" em "Direcionamento e execução de projetos", já que todos os projetos foram executados de certa maneira, talvez a escolha de palavras possa ser melhor escolhida, porque assim como vocês vejo alguma ligação entre os tópicos colocados nessa categoria em específico.

Terceira tarefa

Modelo de Descrição
Informação gerais (curso)
Papel do aluno
Cronograma (Período/ Data/ Duração)
Instrumentos e Técnica (Software, fabricação, eletrônica, design centrado no usuário, escrita técnica e científica)

O grupo decidiu não responder cada pergunta com um tópico específico, mas sim de uma forma mais dinâmica, descrevendo em forma de tópicos e textos o projeto e suas especificações.

Barata Eletrônica (OBS.: Exemplo)
Disciplina:

Natureza do Design

Papel do aluno:

O aluno teve com esse projeto um primeiro contato com modelo de produção e criação por meio de sketch e desenhos instrumentados, a fim de se obter um melhor raciocínio de planejamento e design.

Cronograma:

Primeiro Semestre
32/01
3 semanas

Instrumento e Técnicas:

Fusion/ Autocad/ Cura/ Inkspace
Impressora 3D/ Frisadora
Circuito do brinquedo

Feedback do ninja

Acho que poderia ser melhor aproveitado se tivesse uma descrição do processo também, que conte mais um pouco sobre o papel do aluno de maneira descritiva. E informações gerais poderia ser substituida por algo como: "Disciplina"? Não entendi o porque se chamaria informações.

Quarta tarefa

Página Inicial

O consenso do grupo foi de criar uma página inicial em que não sejam adicionadas grandes quantidades de informações relativas a cursos e projetos da engenharia. O modelo proposto é de formatar uma página em que sejam disponibilizado ao usuário a opção de acessar as categorias ou a página do aluno. Em suma, a página inicial tem como objetivo apresentar o site e apenas introduzir o projeto do grupo para os usuários.

Página "Sobre Mim"

Disponibilizar informações gerais do aluno, como idade, curso, etc.

Feedback do ninja

Não entendi o que quiseram dizer com "(…) site e ilustrar o projeto do grupo."
Sobre mim
Como assim disponibilizar informações sobre a criação e desenvolvimento do projeto? Não disseram que o consenso era, não mostrar coisas sobre projetos? não entendi essa etapa, mas legal estruturarem duas partes completamente independentes.

Leis de Gestalt e Princípios CRAP

Sketch da página principal

3GhOCMh.jpg
jSSR6BD.jpg
SnlQlKs.jpg
PPPL1KZ.jpg
1fBem0W.jpg

Referências de posicionamento

Otimização de Sites:
O processo de criação do site envolveu um grande trabalho no desenho e idealização do design de cada página, uma vez que o fato do conteúdo ser excepcional não significa, necessariamente, que os usuários serão atraídos e, mesmo que forem, nada garante que continuarão interessados. O design do layout de cada página é importante para deixar claro qual a lógica que o site segue, quais são as áreas de maior relevância, etc.

Desing da navegação:

SEO:
Baseado nas estratégias utilizadas pelo Search Engine Optimization, SEO, de promover maior visibilidade de um site nos meios de pesquisa, foi possível criar um design de navegação que facilitasse o acesso e o uso do site pelo usuário por meio de alguns conceitos adaptados pelo SEO, como por exemplo, o uso de palavras chaves e "botões" interativos que permitissem que todos usuários usufruíssem da mesma forma do site, sem nenhuma grande dificuldade.

1.Prezi
Possui um design circular e fluido, o que foi usado como base para o sistema de navegação do site.
2.Google Meu Negócio
Um bom exemplo de união de banners com descrições, montados de forma dinâmica e fluida.
3.UEFA
Assim como no site da UEFA o nosso site possui as opções (links) para escolher o caminho que você quer tomar.
4.Snapchat
No aplicativo do Snapchat a grande maioria das coisas são/eram redondas, nos inspirando a criar alguns dos nossos "botões"/links redondos.
5.NFL Rule Book
Com esse site, nos inspiramos a criar animações que abrem novas abas quando se passa o mouse por cima de determinadas palavras.

Perfil:
1.Instagram
Exemplo de foto de perfil pessoal com foto.
2.Whatsapp
A inspiração para a foto do aluno partiu do design de fotos de perfil desse aplicativo de mensagens.
3.Skype
Um software que abrange foto de perfil em conjunto com descrição do usuário.

Desing de estética:

Design Circular
Círculos representam uma abordarem inovadora e é multi-representativo, e é diferente das outras formas retas do portfólio. Com isso, o uso de círculos para botões facilita a conexão do site com o usuário em sua identificação de itens clicáveis, auxiliando a navegação.

1. Designs de links de bolas levando à outras páginas e a possibilidade de escolher o caminho que o usuário quer percorrer foram inspiradas nos sites Prezi, UEFA, Snapchat, YouTube, NFL.
2. A inspiração por páginas de projeto com imagens e descrições curtas se deu a partir dos sites Google Meu Negócio,CUBO Startups,Campus São Paulo,Circuit Lab e
JP Morgan FAQ.
3. Para um design de perfil do aluno (com uma descrição contando com informações básicas, curso, conquistas, etc), utilizamos como base os sites Instagram, GitHub (perfil do usuário), Whatsapp, Skype, Facebook.
4. O design de footer na parte de baixo do site se deu com base nos sites Google, Wikidot, Gmail, Wikipedia,Spotify

Feedback do ninja

//Bem descritivo! Desenhos feitos no computador deixaram mais claras as intenções de cada tela e bem divididas e organizadas. Gostei das referências de maneira analoga, se conseguirem achar alguma que reforce esses pontos, não por analogia as existentes, mas com argumentos de usabilidade seria ideal! ;) //

Teoria das Cores e Tipografia

(preencha seguindo o modelo da entrega fictícia)

Página principal.

W9tAM6Q.jpg

Página do aluno.

YZ3tzjH.jpg

Página dos cursos e suas categorias.

i36Ztpr.jpg

Página das subcategorias do curso.

isGCVqg.jpg

Página dos projetos.

jEH0v2z.jpg

Referências de cor e fonte

-MEVEM creative lab

-Mc Donald's delivery Pedidos Já

-Coca-cola Bottling Co.

-The Lit Pub

Justificativas das cores utilizadas
Vermelho com combinações.
O vermelho é uma cor que se associa com a paixão, beleza, e em muitas culturas, a felicidade. Já que nosso portfólio tem como alvo diversos tipos de profissionais de diversas culturas e países, essas características se encaixam perfeitamente com o design do site, uma vez que elas interagem com todos os usuários de diferentes culturas mas de todas as formas positivas.
Tons mais claros de vermelho transmitem uma sensação de suavidade, enquanto tons mais escurecidos transmitem conforto e emoções mais fortes, fazendo com que o usuário se intrigue com o site. Decidimos misturar vários tons de vermelho pois a sua combinação gera uma aparência de profissionalidade e modernidade, segundo o site acima.
Laranja
O laranja é uma cor que se relaciona com o vermelho. Ele representa energia, vitalidade, conforto e liberdade. Além disso, também ocasiona efeitos visuais de atenção, o que justifica colocar os botões do portfólio feito com essa cor, contrastando os botões com o site facilitando o usuário na identificação dos itens de navegação.

Justificativa do Posicionamento:
Análise do design do posicionamento de apps no IPhone
Segundo artigos relacionados ao design de posicionamento existem diversas formas de posicionar elementos de um site, ou em qualquer meio informático, porém o que foi utilizado no projeto foi o mesmo que é utilizado atualmente pela grande multi-nacional Apple, que aplica o "Flat Design", diferentemente do Microsoft e da Google. Não existe um regra de qual é o melhor design, porém escolheu-se o primeiro, levando em conta a facilidade na navegação gerada por esse tipo de design, que não gera impressões ambíguas e representa um layout mais simples.

Justificativa da Fonte utilizada:
Fonte Arial X Helvetica
A escolha da fonte Arial se deu, pois essa apresenta maiores curvas nas letras, exprimindo uma ideia de suavidade e sutileza, tornando a leitura do usuário do portfólio menos irritante aos olhos e, consequentemente, mais convidativa.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License