O projeto momento é um projeto realizado em grupo, com a Equipe 02 do PROA, como uma atividade integradora do curso.
A proposta do projeto é simular uma empresa com um determinado produto, e expor os setores que atuam dentro dessa empresa, caracterizando e apresentando os membros de cada setor.
- Principais Desafios:
- Desenvolver a estrutura do site, sua identidade visual e padronização de componentes;
- Codificar em REACTJS, fazendo uso das funções de reaproveitamento de componentes;
- Gravar os vídeos e preparar os roteiros de apresentação;
O Tema principal do nosso projeto foi desenvolvido em fundo preto, visando um maior contraste e impacto visual. Além disso, um fundo escuro é muito comum de ser utilizado por profissionais desenvolvedores, que compõem parte do nosso público-alvo.
Tipografia:
Visamos utilizar tipografias modernas, de fácil leitura web e coerentes com os elementos visuais utilizados
Tipografia para título:
- Oswald
- A Oswald é uma tipografia condensada e bem e encorpada, além de apresentar uma estrutura bem geométrica e moderna. O que também justificou essa escolha, é que ela tinha o contraste desejado com o texto geral da plataforma.
Tipografia para textos:
- Roboto
- A Roboto é uma tipografia para leitura web, sendo legível em diferentes tamanhos e resoluções, também contém uma família tipográfica completa, tornando sua aplicação mais versátil na plataforma.
Tipografia para detalhamento visual:
- JetBrains Mono
- A JetBrains Mono é uma família tipográfica de categoria monospace, onde as letras ocupam o mesmo espaço horizontal, simulando a fonte de uma máquina de escrever. A escolha dessa tipografia foi baseada em uma questão visual, sendo usado nas como uma forma de detalhamento visual, além disso é a tipografia utilizada em IDEs de desenvolvimento, criando uma familiaridade com o público-alvo.
Referências visuais utilizadas :
- Alura
- GitHub
- Udemy
- Rockseat
- B7 WEB
Vídeo da aplicação desenvolvida
O React foi a tecnologia escolhida por ser uma eficiente biblioteca para padronização e reutilização de componentes, além da possibilidade de criar componentes, dividir a aplicação em diferentes pastas, facilitando o processo de delegação de tarefa e divisão de código.
Padronização de pastas :
O projeto momento foi desenvolvido fazendo uso do versionamento de código, a partir do GITHUB ,então era extremamente importante delegar as tarefas, funcionalidades e componentes. A divisão de pastas, antes mesmo do processo de codificação, facilitou na consistência e perspectva do projeto.
Componentes :
Os componentes ficavam em subpastas onde continham o arquivo JSX e o CSS do respectivo componente.
Desenvolvimento do site (REACTJS) // Design de tela: