Site da Formabridge - Visão Geral do Desenvolvimento

Quando a Formabridge entrou em contato, eles estavam procurando fazer melhorias em um site já existente. A Formabridge foi um dos projetos mais "old school" em que trabalhei. Geralmente, ao lidar com os projetos front end no qual trabalho, é comum que haja alguma forma de React envolvida no processo de desenvolvimento. Com este cliente, a pilha de tecnologia era puro HTML, CSS e JavaScript. Não apenas isso, mas todos os deploys tinham que ser feitos por FTP (File Transfer Protocol). É uma experiência bastante interessante voltar a esses processos depois de ser mimado por tanto tempo pelo rápido crescimento da tecnologia front end.

Abordagem

Os requisitos para o projeto foram bem diretos; a Formabridge queria algumas páginas adicionais, textos e gráficos atualizados e algumas animações simples para tornar o site mais interativo. Eu comecei parte do trabalho com a barra de navegação.

As principais modificações foram correções de responsividade (navegação para desktop e mobile), estados de foco adicionados (fonte em negrito + borda inferior amarela) e uma expansão animada da barra de navegação em quaisquer links suspensos, conforme visto abaixo.

Além dessa atualização, as alterações em todas as páginas foram principalmente estéticas (aplicação de cores da marca, correções na seção com a apresentação de slides, implementação adequada do rodapé ondulado junto ao alinhamento de links, etc.). Eu também desenvolvi algumas páginas informativas adicionais que foram solicitadas e corrigi a responsividade das páginas que já estavam presentes quando entrei no projeto.

O site em si é muito estático, o que faz todo o sentido para seu propósito, no entanto, para torná-lo um pouco mais animado, incluí algumas animações de transição simples na visibilidade de alguns elementos com a ajuda da API de Intersection Observer, para garantir que as animações fossem acionadas apenas quando seções específicas fossem exibidas.

Uma correção final que fiz no site foi na apresentação de slides da série de vídeos, que tem várias miniaturas de vídeo que, quando clicadas, abrem o respectivo vídeo ao qual a miniatura pertence. Os slides não estavam indexando os dados corretamente e, portanto, o que acabava acontecendo ao passar pelos slides é que as descrições do vídeo não estavam alinhadas com a miniatura exibida e clicar em uma miniatura abria o vídeo incorreto. Todos esses problemas foram resolvidos corretamente.

Durante o ciclo de desenvolvimento, fui notificado de que essas mudanças que estavam sendo feitas no site seriam temporárias (por isso o trabalho de desenvolvimento foi mínimo), pois eles estavam planejando desenvolver um site totalmente novo e somente precisavam de um site que pudesse ficar no ar enquanto o novo fosse um trabalho em andamento. Independentemente disso, é sempre uma grande conquista poder levar essas soluções aos clientes, mesmo que não sejam duradouras.