top

UI Design

PioHub – website

10 Out , 2025  

Muito feliz em compartilhar um projeto recente onde contribui como Web Designer freelancer: um site single-page (ou “one-page”) de alta performance para a PioHub, uma agência de influenciadores da EPTV (Grupo EP)!
🚀 Construído com Bootstrap 5.3.8, arquitetura SCSS customizada e JavaScript “vanilla”, esta solução entrega uma experiência moderna e fluida em todos os dispositivos. O cliente aprovou e ficou satisfeito com a responsividade fluida e as animações suaves em GSAP 3.12.5 — incluindo revelações acionadas por scroll pinning progressivo de conteúdo, e efeitos parallax que dão vida à energia da marca a 60fps no desktop, e mantendo performance necessária ao mobile.

Versão publicada (site oficial): https://www.piohub.com.br/


Versão refinada, para atualização posterior: https://nstarconcepts.com/piohub-teste/


Resultados do PageSpeed ​​Insights: https://pagespeed.web.dev/analysis/https-nstarconcepts-com-piohub-teste/nwd72fbat8?form_factor=desktop
https://pagespeed.web.dev/analysis/https-www-piohub-com-br/rbfbo9tbwn?form_factor=desktop

Representantes da empresa me convidaram para antender a esta demanda, e me forneceram inicialmente o briefing com o manual de identidadde visual já pronto, feito pela BovaStudio, uma agência de design gráfico também terceirizada pela Grupo EP para este projeto.
O Figma Prototype foi a primeira demonstração que usei para apresentar a proposta de layout para os stakeholders, que aí eles avaliavam, decidiam sobre qual caminho a seguir sobre detalhes ou sebre o todo da proposta, e com a aprovação, segui no processo de implementação.

Levei mais ou menos 3 semanas para fazer — entre meados de Setembro e primeira semana e Outubro — desde o design (diagramação) no Figma até o desenvolvimento final do site e o protótipo funcional.

Usando o agente de inteligência artificial do Claude Code da Anthropic, ingrado com MCP Server para transformar o design do Figma em um protótipo funcional diretamente no código (no kickstart do processo de codificação e implementação), e segui refinando depois (sempre pedindo ajuda ao Claude Code, diretamente no meu VS Code, via terminal de prompt).

Entreguei uma solução pronta para produção que combina refinamento estético com código limpo e eficiente.

O que tornou este projeto especial foi a precisão técnica por trás da visão criativa: validação de formulários em tempo real com formatação automática para números de telefone brasileiros, efeitos de scroll baseados em IntersectionObserver, e um sistema SCSS modular que tornou a paleta de cores customizada e a biblioteca de componentes escaláveis e de fácil manutenção.

Estou orgulhoso de tornar possível à visão do time PioHub ganhar vida na internet, e grato pela confiança em trazer isso à realidade! 💡

 
 

, , , , , , , , , , , , ,


Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *