O Desafio
Em 2018, a Rodobravo estava em processo de reformulação de seus negócios e me confiou a tarefa de criar uma apresentação da empresa ao mercado e seus clientes. Este projeto foi baseado em 3 fases principais. Primeiro fiz o estudo para entender mais sobre a empresa e seus concorrentes. A partir dai, fiz a definição da paleta de cores e regras para utilização da logo, reforçando a identidade da empresa. Na segunda fase, fiz o wireframe (rascunho) do projeto, para então fazer o design da interface e validar com o cliente. A terceira e última fase foi a de codificação. Após a escolha do React para o Front-end e Node.Js para o Back-end, desenvolvi o site seguindo o princípio do pixel perfect, sendo assim, seguindo exatamente o design proposto na segunda fase, e também fiz uso da metodologia "Mobile First".
Estudo
Para atingir o ponto proposto de criar um site amigável, profissional e que comunique a identidade da empresa ao cliente, trabalhei na conceituação e design da interface, fazendo antes uma releitura da logo, e uma seleção da paleta de cores tanto RGB quanto CMYK. Para a seleção da paleta de cores, primeiro selecionei duas cores principais derivadas do estudo e releitura da logo, assim, usando o método de cores adjacentes fiz a seleção das variações para o projeto.
Tecnologias e desenvolvimento
Para o desenvolvimento Front-end deste projeto, selecionei o React JS. Essa escolha foi baseada nas seguintes vantagens:
- Biblioteca Javascript - Por eu ter domínio do Javascript
- Flexibilidade – O React possibilita interface com diferentes bibliotecas, e uma certa liberdade para definição do padrão de desenvolvimento
- JSX – basicamente uma sintaxe de XML dentro do Javascript, permitindo, entre muitos benefícios, escrever HTML e CSS dentro de um arquivo Javascript
- Browser Tools – ferramentas que auxiliam no debug e construção das aplicações direto no browser
- Popularidade
Além disso, decidi utilizar o SASS (pré-processador de CSS) por conta de vatagens como a criação de variáveis, Mixins, arquivos em partes, classes aninhadas e também pela facilidade em aplicar a metodologia BEM (Block, Element Modifier) que ajuda você a criar componentes de estilo reutilizáveis e facilmente compartilhados no código.
Algumas libs usadas nesse projeto foram:
- Helmet - Para gerir as alterações no head da aplicação e otimizar a página para os buscadores (SEO)
- Fortawesome – Biblioteca de ícones
- React Slick - Slide de imagens
O Back-end desta aplicação foi desenvolvido em Node Js e foi criado basicamente para gerir o envio de e-mail através do formulário de contato. A infraestrutura de compilação e deploy foi configurada no Heroku, uma plataforma como um Serviço (PaaS) em nuvem.
Atualização 2023: Devido a alterações nas políticas e precificação do Herou migrei a página demo para Amplify da AWS e o back-end foi desativado visto que não o serviço de envio de e-mail não e mais necessário.
Clique, para conferir o projeto no GitHub.