Prospecta Geo

Se você me perguntar qual projeto da minha carreira eu mais me orgulho, é esse. Não pela minha parte técnica — pela identidade visual que o designer da época criou pra Prospecta, uma consultoria de geologia, geofísica e meio ambiente. Tem trabalhos meus dos quais eu também me orgulho muito, mas que às vezes cansam de olhar, ou têm uma escolha de design tão forte que satura com o tempo. A Prospecta eu abro o olho e sei que é a Prospecta — e nunca cansa.

Design lá, front aqui

Na K13 a divisão era simples: o designer prototipava (na época em Adobe XD, ainda não era Figma), eu construía. Arquiteto e engenheiro — ou, como eu brinco, arquiteto e pedreiro. Trabalhamos juntos em tantos projetos, por tanto tempo, que ele aprendeu sozinho como o grid do Bootstrap funcionava, os breakpoints que a gente sempre usava, o tamanho do container — pra desenhar de um jeito que eu não precisasse reinventar media query nem sair correndo atrás de solução alternativa pra encaixar o design dele.

Um projeto passava por 3 ou 4 rodadas de aprovação do cliente antes de sequer chegar no front. Depois vinha a aprovação do designer: ele via o site rodando de verdade e comparava com o que tinha desenhado — "aqui deveria ser assim", "aqui eu esperava tal coisa" — e a gente ou corrigia, ou rebatia com argumento técnico do porquê não dava. Só que na prática, enquanto ele desenhava e eu codava, a gente já ia trocando informação o tempo todo — então quando chegava na aprovação formal, quase sempre já estava certo. A palavra final, o martelo batendo, era sempre do cliente.

Depois de tantos projetos juntos, virou instinto. Eu sabia que se uma fonte peso 400 era usada no corpo do texto, ele ia querer uma variante peso 100 num título específico. Sabia onde a cor secundária ia entrar, a ordem dos itens do footer — às vezes eu codava sem nem olhar o design de novo, porque já sabia como ele pensava, e ele já sabia como eu construía.

Front com dado mockado, WordPress por baixo

Nos sites em WordPress da K13, o front era construído inteiro com dados mockados — a gente não esperava a API pronta pra começar a estilizar. O time de back-end ficava responsável por integrar PHP e WordPress dentro do nosso tema depois. Tínhamos um boilerplate básico de estrutura (Home com um Swiper, página Sobre, Contato com formulário) e lógica já pronta pra listagem/post de blog, biblioteca de compartilhamento e galeria (FancyBox), slider (Swiper). Mas nenhum projeto saía igual ao outro — cada site ganhava páginas extras conforme o escopo, e a estilização em si, o SCSS, era sempre feito do zero. A gente só reaproveitava componente e grid do Bootstrap (accordion, etc.) — a lógica em JS existia, mas a cara visual, não.

Uma identidade que não cansa

O site inteiro respira a paleta terrosa da Prospecta — terracota como cor de ação, dourado e areia como apoio, tipografia Work Sans, botões em pílula que invertem fundo e borda no hover. Minha parte foi reproduzir esse trabalho com fidelidade de pixel — mas o orgulho maior é pela beleza que não é minha. Eu só construí em código o que o designer imaginou. Um tour página por página mostra melhor onde cada decisão entra do que qualquer resumo.

Home

O hero é um carrossel Swiper com 4+ slides — cada um um <picture> com <source media> servindo um banner mobile dedicado, não o mesmo arquivo redimensionado por CSS. Abaixo, os blocos de serviço (Geologia, Geofísica, Meio Ambiente) e o destaque de Estudo para Poços Artesianos alternam em zigzag (order-1 order-md-2), com formas decorativas soltas atrás do texto pra dar sensação de composição, não de grid genérico.

Sobre

Essa é a página onde a identidade visual mais aparece. A seção "Nossa Estrutura" usa parallax de verdade (background-attachment: fixed, com fallback pra scroll em mobile — evita o bug clássico de parallax fixo no iOS) sobre uma galeria Swiper de 7 fotos reais de campo e drone, cada slide um <button> que abre lightbox. Logo abaixo, o carrossel "Colaboradores" apresenta a equipe técnica com foto, nome, cargo e bio curta.

Serviços

Três categorias-card levam a 11 páginas de serviço individuais — cada uma com seu próprio hero em carrossel e galeria de fotos reais daquele tipo de trabalho em campo, não texto genérico reaproveitado entre páginas.

Materiais

Ebooks e cases de sucesso em PDF, baixados direto — sem formulário de captura de e-mail no meio do caminho. Decisão consciente de priorizar a entrega de conteúdo sobre a captura agressiva de lead.

Blog

A listagem é enxuta — card com título, excerto, data por extenso e paginação numérica, sem sidebar de categorias ou busca. Os posts em si são conteúdo técnico-regulatório sobre mineração (ANM, licenciamento ambiental, água mineral), todos assinados pela mesma pessoa da equipe técnica — não é o foco deste case detalhar cada um, mas a estrutura da página de post segue o mesmo sistema visual do resto do site.

Contato

Formulário simples (nome, e-mail, telefone, assunto, mensagem), o mesmo banner com parallax reaproveitado da página Sobre, e — em vez de um mapa embutido — links diretos pro Waze com as coordenadas de cada endereço. Widget de chat via Jivosite, com atalho direto pro WhatsApp Business.

Nos quatro carrosséis do site inteiro (banner principal, hero de cada serviço, galeria de campo, equipe), cada um recebe um rótulo de acessibilidade próprio — coisa que só faz quem se importa de verdade com quem usa teclado ou leitor de tela, não só com quem rola o mouse.

Obrigado

Esse projeto não teria acontecido sem a K13 — os métodos, as restrições, as metas que me ensinaram a trabalhar assim. Sou muito grato ao Robson Krieger, dono da K13 na época, e a todos os colegas daquele período que tornaram trabalhar lá tão divertido.