Este projeto consistiu em criar uma landing page como proposta de colocação no mercado através da Brivia, uma empresa de Marketing/P&D.
Clique neste link para ver o resultado do projeto.
- Desenvolver em HTML5, html deve ser semântico com as boas práticas de SEO;
- Utilizar SASS/SCSS para CSS;
- Utilizar Bootstrap Grid 4 ou superior como framework CSS;
- Deve ser responsivo respeitando os breakpoints do Bootstrap;
- Utilizar uma ferramenta de automatização de tarefas para compilar e minificar os assets;
- O formulário deve conter validação em todos os campos, não precisa fazer o envio;
- Utilizar SVG para os ícones;
- O prazo de entrega é de 7 dias, ou seja, desenvolvido entre 4/11/21 e 11/11/21
A se basear no prazo e em atividades passadas, segui o seguinte cronograma.
| Nome | Descrição | Deadline |
|---|---|---|
| Planejamento e concepção | Deve ser descrito todas as informações úteis e importantes para o desenvolvimento de peças gráficas e intelectuais(ex.: logo, copywriting) | 2º dia(5 de Nov. 2021) |
| Desenvolvimento | Desenvolver, ler documentações e testar o projeto, sempre a ser orientado por componentes e partes(de cima para baixo), respectivamente. | 6º dia(10 de Nov. 2021) |
| Correção de bugs e finalização de documentação | Preparar para entregar e boa sorte! | 7º dia(11 de Nov. 2021) |
De cara, pensei em misturar meu nome com o projeto é claro! Como devo seguir o modelo dos arquivos de apoio, a logo de forma rápida no figma, assim como os textos, cores, tipos e em palavras-chave que sejam atraentes para o SEO(Pelo tempo curto e pelo não-foco em redação, nos textos eu segui a minha intuição nessa parte).
Observação: Como usuário linux e por ter um computador low end, utilizar o Adobe XD ficou fora de cogitação para referenciar, portanto, utilizei meus conhecimentos e o layout a se basear na imagem enviada. Espero não perder pontos devido a detalhes de espaçamento ou animações feitas.
Para conciliar o React com o clássico HTML feito à mão, escolhi desenvolver com o Next.JS, que compila o projeto ao mais nativo possível, ou seja, ele dispensa a responsabilidade total do HTML in JS como SPA, em outras palavras, renderiza e constroe o React em HTML e CSS, todas as tags, elementos, classes geradas pelo Javascript. Com isso, é possível controlar e facilitar a leitura dos WebCrawlers dos provedores de busca, da geração das meta tags e de estilizações de pré-processadores.
Neste projeto utilizei este kanban e a aba issues para controle de tarefas e desenvolvimento.
Para acelerar o uso, configuração de ambiente e instalação de pacotes, usei este template de ixkaito.
Ainda no primeiro dia da sprint, desenvolvi uma logo simples e rápida, isso graças ao nome do arquivo do material de apoio. Savildesk.
Desk? Autodesk? Autocad? Produtos? Moveis? Business?
Essas foram as palavras-chave, suficientes para a concepção da mídia e textos.
A imagem perfeita seria um produto de mobi relacionado à reuniões, obrigado unsplash, encontrei a foto que está no hero da landing. Antes, verifiquei se eu poderia utilizar e posso sim. Será uma bela vitrine.
O resto da concepção foi fluiu a partir dos princípios: "copie, mas não faça igual ao material de apoio", botões quentes, textos discretos e sinceros, com toque familiar para pessoas da área e, talvez, humor.
Depois de um bom tempo, longe do bootstrap, recomecei a ver o que tinha de novo e vi que a versão 5.0 foi lançada recentemente. Para a minha felicidade, a nova versão usa o SASS.
Segui como princípio criar componentes independentes e declarativos, mas que fazem parte do todo.
Os componentes foram criados rapidamente através das classes do bootstrap, além da customização através dos módulos css/scss.
Optei por aplicar diversas formas de desenvolvimento, por exemplo, o uso do layout misto utilizando classes, módulos css e inline styling.
Bugs ficaram como última prioridade. Logo, ao ver algo que pode ser consertado depois, fui a criar issues.
- Funções, classes, variáveis, comentários escritos em Inglês;
- Hierarquia de arquivos: a seguir o padrão comum entre desenvolvedores React/Next.JS(Acredito que para devs de outros ecossistemas que os padrões de código são autoexplicativas); Especialmente a documentação ts do Next.JS
- Padrões de código e estilo: O favorito dos JS Devs, Airbnb, não como regra absoluta.
- Habilidades de uso e importância de breakpoints para uma interface responsiva;
- Usar na prática as funções, mixins e módulos, importações e outras funcionalidades do SASS;
- Diversas classes do Boostrap;
- Otimização de imagens;
Feito com 💜, Savio Castelo, 2021.