02 / CASE VEDDU · Live marketing e experiências
Site para agência de live marketing: Grupo Speed
O site do Grupo Speed, agência de live marketing de São Paulo e Curitiba, feito para que as marcas que contratam ativações e lançamentos vejam o repertório da agência antes da primeira reunião.
Role a página: a home passa inteira, do topo ao rodapé, no desktop e no celular. Na faixa, as cenas da abertura aparecem empilhadas, como no modo de movimento reduzido.
Contexto
do projeto
Resposta direta
Como uma agência de live marketing deve mostrar seus eventos no site
Uma agência de live marketing deve mostrar cada evento numa página própria, com a marca atendida, o que foi feito e as fotos do dia. No feed, o vídeo do evento circula por alguns dias. A página do case fica no ar e responde a quem procura, no Google ou numa IA, uma agência que já trabalhou para marcas como a sua.
- Contexto
- Quem contrata live marketing são gerentes e diretores de marketing de empresas grandes, e a maior parte dos cases do Grupo Speed é com montadoras. A agência, que reunia as frentes Speed Sports e NetX, tinha um site em WordPress e lançou a marca Grupo Speed em agosto de 2026.
- Desafio
- Trocar o site antigo por um que respeitasse a direção de arte já desenhada pela própria Speed, fosse lido pelo Google e pelas IAs e mantivesse vivos os links que já circulavam.
- Decisão
- Sem blog e sem artigo educativo: a Speed prefere conteúdo de prova a conteúdo de aula. O trabalho de busca fica a cargo das páginas de serviço e de case.
Seis telas do site e a decisão por trás de cada uma.
Telas de speedsports.com.br capturadas em outubro de 2026, no computador e no celular. As fotos de evento e as marcas que aparecem nelas vêm do acervo publicado pelo Grupo Speed e pertencem aos seus titulares.
Abertura
Na abertura, a rolagem troca a cena em vez de descer a página.
A home abre com a frase da marca. Quando o visitante rola, a tela fica parada e as cenas passam de lado, com corte em diagonal: o carro de corrida, depois o skate. Setas e teclado fazem o mesmo caminho. No celular, cada cena tem um corte vertical próprio, com título e logo sobre a foto.
Projetos
Cinco projetos em card grande, cada um com atalho para o case.
A home dá card grande a cinco projetos, com o nome da marca no título e a foto do evento, e o link Explore todos os projetos, embaixo, abre o catálogo com os nove. O clique no card abre uma prévia com resumo e o botão Ver case completo; aberto em outra aba, o card leva direto à página do case. No celular, um card ocupa quase toda a largura da tela.
Catálogo
O filtro por marca vira um endereço que dá para mandar por link.
O catálogo de projetos filtra por marca e por universo, e a escolha fica gravada no endereço. Assim, o comercial pode mandar o link já filtrado em GWM para quem cuida da marca, e o Voltar do navegador desfaz o filtro. Nenhuma combinação de filtro vira página duplicada no Google.
Case de evento
O mosaico do case GAC usa fotos em 3:2 e não corta ninguém.
Na cobertura de um lançamento, as pessoas ficam nas bordas do quadro: executivos ao lado do carro, um grupo de seis na frente dele. Um corte mais fechado tiraria alguém da foto. O bloco do AION UT usa gradiente de vermelho profundo, porque o vermelho chapado cansava a vista, e o modelo serve para os outros cases. No celular, as fotos se empilham com o bloco entre elas.
Serviços
Cinco frentes de serviço, cada uma com página e título para a busca.
Quem procura uma agência de eventos digita palavras diferentes das de quem procura branding. Por isso cada linha do índice leva, pela seta verde, a uma página própria, com título escrito para a busca daquele serviço, como Eventos corporativos e lançamentos. A frase ao lado de cada nome é a mesma da descrição que a página entrega ao Google.
Página de serviço
As perguntas de cada serviço ficam à vista e marcadas para as IAs.
Cada página de serviço fecha com as perguntas de quem está para chamar a agência; na de live marketing, quais projetos dá para conhecer e como começar um projeto. As respostas estão na própria página, e as mesmas perguntas vão no código marcadas como perguntas e respostas, junto com a descrição do serviço. Logo abaixo, quatro botões levam às outras frentes, para quem chegou por um serviço conhecer os demais.
Como a Veddu constrói um site que faz uma agência de eventos ser encontrada.
1<section class="intro-scene intro-panel intro-static scene-race"2 aria-labelledby="intro-race-title">3 <div class="intro-scene-picture"><picture>4 <source media="(max-width: 760px) and (orientation: portrait)"5 srcset="/assets/intro-race-mobile.webp" />6 <img class="intro-artwork" src="/assets/intro-race-clean.webp"7 width="1672" height="941"8 alt="Carro de corrida em uma pista em preto e branco." decoding="async" />9 </picture></div>10 <div class="intro-scene-copy">11 <h2 class="intro-static-title" id="intro-race-title">12 <span>O PRÓXIMO</span> <span>MOVIMENTO É SEU</span></h2>13 <img class="intro-scene-logo" src="/assets/speed-logo-white.svg"14 width="122" height="42" alt="Grupo Speed" />15 </div>Trecho do HTML publicado, formatado sem alterar valores: o título é um h2, e a seção aponta para ele pelo aria-labelledby.
Quase tudo abaixo se confere hoje em speedsports.com.br; o resto sai dos registros do projeto e da revisão com a Speed. Vale para agência de eventos, de live marketing ou produtora.
- 01
Título em texto, logo em vetor, foto à parte
No PSD, título e logo vinham gravados dentro da foto. A Veddu refez as duas cenas fotográficas da abertura em camadas: o título virou texto de verdade, em Bebas Neue, o logo virou vetor tirado do arquivo, e o texto gravado saiu da foto por retoque generativo. Assim o Google e os leitores de tela leem o título.
1<section class="intro-scene intro-panel intro-static scene-race"2 aria-labelledby="intro-race-title">3 <div class="intro-scene-picture"><picture>4 <source media="(max-width: 760px) and (orientation: portrait)"5 srcset="/assets/intro-race-mobile.webp" />6 <img class="intro-artwork" src="/assets/intro-race-clean.webp"7 width="1672" height="941"8 alt="Carro de corrida em uma pista em preto e branco." decoding="async" />9 </picture></div>10 <div class="intro-scene-copy">11 <h2 class="intro-static-title" id="intro-race-title">12 <span>O PRÓXIMO</span> <span>MOVIMENTO É SEU</span></h2>13 <img class="intro-scene-logo" src="/assets/speed-logo-white.svg"14 width="122" height="42" alt="Grupo Speed" />15 </div>Trecho do HTML publicado, formatado sem alterar valores: o título é um h2, e a seção aponta para ele pelo aria-labelledby.
- 02
Cores em variáveis e fonte no próprio servidor
As cinco cores de base viraram variáveis no código, e um ajuste numa delas chega a todas as páginas de uma vez. A PolySans, fonte enviada pela Speed, sai do próprio servidor do site, em seis pesos.
Sistema visual do Grupo Speed
- Papel
- #F6F5F1 · fundo das páginas
- Tinta
- #141412 · texto e botão principal
- Vermelho
- #FF1C0A · barra de progresso e destaques
- Verde-limão
- #C5FF00 · setas, asterisco, traços da abertura e título do skate
- Linha
- #D8D7D1 · divisórias entre itens
- PolySans
- texto corrido e títulos das páginas internas
Valores lidos nas variáveis e nas regras @font-face do CSS publicado. O logo e o rodapé usam vermelhos próprios, fora das variáveis.
- 03
Revisão com o cliente, pedido por pedido
A primeira versão navegável foi revisada em reunião com a Speed. Cada pedido saiu da transcrição, com o minuto em que foi feito: uma cena a menos na abertura, cards de projeto em retrato, serviços que abrem por clique, títulos internos em maiúsculas. A versão anterior à reunião ficou guardada, com código e build.
- 01Primeira versão navegável, numa prévia fechada ao Google
- 02Reunião de revisão com a Speed, 11 de setembro
- 03Site no domínio da Speed, 23 de setembro
- 8
- pedidos da reunião aplicados no mesmo dia
- 3
- larguras de tela conferidas em cada página: 1440, 390 e 360 px
Datas e contagens do registro da revisão, guardado na pasta do projeto.
- 04
Mapa de páginas e endereços antigos
O sitemap entrega ao Google só o que deve aparecer na busca. Os endereços do site antigo redirecionam, com código 301, para o equivalente novo: /sobre-nos/ vai para /a-speed/, e o antigo endereço do evento da GWM leva ao catálogo já filtrado na marca. Rota que não existe responde 404 de verdade, sem mandar tudo para a home.
Sitemap · 19 páginas
- 5
- institucionais: home, projetos, serviços, a Speed e contato
- 9
- cases, um por projeto
- 5
- páginas de serviço
Fora do sitemap, de propósito- Privacidade
- Página 404
Mapa lido no sitemap.xml publicado, em outubro de 2026. As 19 páginas respondem 200.
- 05
Dados que unem o nome novo e o antigo
O bloco de dados da organização declara Grupo Speed como nome e Speed Sports como nome alternativo, com as duas sedes e os perfis oficiais, para Google e IAs tratarem tudo como uma empresa só. O robots.txt nomeia os robôs de busca e de IA liberados, e um llms.txt resume serviços, cases e contatos.
5 "@type": "Organization",6 "@id": "https://speedsports.com.br/#organization",7 "name": "Grupo Speed",8 "alternateName": [9 "Speed",10 "Speed Sports"11 ],12 "url": "https://speedsports.com.br/",13 "logo": "https://speedsports.com.br/assets/speed-logo.webp",Trecho real do JSON-LD da home, formatado sem alterar valores: o nome atual e os alternativos na mesma organização.
- 06
Capa própria para cada página compartilhada
Cada página ganhou capa de compartilhamento em dois formatos, horizontal e quadrado, gerada por script. Nos cases, a capa junta o nome do projeto e a foto do evento; nas outras páginas, segue a tipografia e os traços da Speed. O build falha se alguma página ficar sem capa, e outro script confere tamanho e peso de cada uma.
Parte da prancha das capas horizontais, com o endereço de cada página embaixo. Cada uma tem também a versão quadrada.
Peça um diagnóstico do site da sua agência.
Se a sua agência faz live marketing, eventos ou ativações de marca, a Veddu analisa o site atual, as marcas atendidas e o material que você já tem em foto e vídeo, e aponta o que falta no site hoje.
Frentes deste projeto
- SitesSite em código próprio, publicado na hospedagem da Speed com HTTPS, compressão e cabeçalhos de proteção, e cada atualização sai com backup e caminho de volta pronto.
- Social mediaCampanha de LinkedIn para decisores de marketing, auditoria do Instagram da agência e plano de audiência para distribuir os vídeos de evento.