⬇ Baixar PDF
Brandbook Comparativo · Prévia Conceitual

Bergamaschi & Bergamaschi
Advogados Associados

Comparativo lado a lado entre capturas reais do site institucional atual (bbadvogados.net) e da prévia conceitual desenvolvida pela Luma Sites, seção por seção — sem simulações, com os prints originais de cada versão.

ClienteBergamaschi & Bergamaschi Advogados
SetorAdvocacia full-service
Data
01
Sumário Executivo

O problema, a proposta e o ganho esperado

O problema

O site atual comunica volume real (20+ anos, 20 mil processos) mas dilui essa autoridade em falhas visíveis: carrossel do hero com transição que sobrepõe duas mensagens ao mesmo tempo, fotos dos sócios em recortes de losango que cortam o próprio título da seção, uma meta interna de faturamento exposta publicamente, e uma seção de "como trabalhamos" que começa (etapa 1) e nunca completa as etapas seguintes.

A proposta

Corrigir cada uma dessas falhas com evidência visual — mensagem fixa e legível no hero, cards de sócios organizados em grid, conteúdo institucional sem dados financeiros internos, jornada de atendimento completa em 4 etapas reais — e adicionar recursos de dinamismo que o site atual não tem.

20+Anos de atuação
20 mil+Processos conduzidos
6Cidades com escritório
4Sócios · 9 seccionais OAB
02
Diagnóstico

Achados críticos da auditoria técnica

SeveridadeAchadoPor que importa para o escritório
CríticoCarrossel do hero sobrepõe duas mensagens durante a transição (bug reproduzido em duas cargas de página distintas)O visitante vê texto ilegível e embaralhado nos primeiros segundos de visita
CríticoMeta interna de faturamento exposta na seção "Visão" públicaInformação estratégica do negócio fica visível para qualquer visitante, incluindo concorrentes
AltoSeção "Fale Conosco" mostra apenas a etapa "1. Primeiro Contato" e nunca renderiza as etapas 2, 3 e 4, seguida de um grande espaço decorativo vazioQuem rola a página até essa seção não entende o processo completo de atendimento
AltoFotos dos sócios em recortes de losango sobrepostos cortam parte do título da seção ("Transformam o Direito" fica parcialmente coberto)Prejudica a leitura do posicionamento institucional logo acima dos sócios
AltoTítulo dos cards de área de atuação duplicado no código da página (confirmado via inspeção do DOM)Quem navega com leitor de tela ouve cada área de atuação repetida duas vezes
MédioRodapé/contato apresenta endereços das 6 cidades como texto corrido, sem hierarquia visualPresença nacional em 6 cidades vira uma linha de texto que quase ninguém lê até o fim
03
Benchmark

Onde o escritório está em relação ao mercado

ReferênciaPonto fortePonto fraco / risco
Carvalho Advocacia Previdenciária (POA/RS)Números de autoridade em destaque visual (+15 anos, 25 estados)Copy promete resultado ("aposente-se mais rápido e ganhando mais") — risco ético real (Provimento 205/2021 CFOAB)
PWA Advogados (Goiânia/GO)Presença institucional diretaZero prova social, navegação com menu duplicado, sem hierarquia visual
Quinn Emanuel (referência global, IMA Best-in-Class)Autoridade por hierarquia de conteúdo técnico, não por adjetivosNão aplicável ao porte do BB — usado só como referência de linguagem

Oportunidade de diferenciação

Nenhum concorrente auditado combina presença física em 6 cidades com 4 sócios em 9 seccionais da OAB de forma visualmente clara. Esse é o maior ativo de credibilidade do escritório — hoje prejudicado por bugs visuais que esta prévia corrige.

04
Antes × Depois — captura real dos dois sites

Primeira impressão: hero

1. Hero

Mensagem de posicionamento acima da dobra — captura real de bbadvogados.net à esquerda, da prévia à direita.

Antes — bbadvogados.net Hero do site atual com duas mensagens do carrossel sobrepostas durante a transição
Depois — prévia Luma Sites Hero da prévia final: mensagem fixa, foto dos sócios e barra de credenciais
Por que importa: a captura à esquerda mostra o carrossel do site atual em transição — duas mensagens diferentes ("Soluções Inteligentes para sua Empresa" e "Excelência técnica como hábito...") sobrepostas e ilegíveis, reproduzido em duas cargas de página distintas. A prévia fixa uma única mensagem, sempre legível, com os números de credibilidade em destaque visual logo abaixo.
05
Antes × Depois — captura real dos dois sites

Institucional e áreas de atuação

2. Missão, Visão e Valores

Conteúdo institucional — com a meta financeira interna removida do texto público.

Antes — bbadvogados.net Seção Visão do site atual expondo meta interna de faturamento
Depois — prévia Luma Sites Seção institucional com painel de abas Missão, Visão e Valores e foto da equipe
Por que importa: a captura à esquerda mostra o texto real da "Visão" publicado no site — "triplicando nosso faturamento até 2026" — uma meta financeira interna exposta a qualquer visitante, incluindo concorrentes. A prévia mantém o espírito institucional sem esse dado estratégico.

3. Áreas de atuação

Grid das 8 áreas, com uma dinâmica de cor exclusiva desta prévia.

Antes — bbadvogados.net Grid de áreas de atuação do site atual
Depois — captura real, com destaque de cor ativo Grid de áreas de atuação com card em destaque de cor e barra de progressão
Por que importa: visualmente os cards já existem no site atual, mas o título de cada área está duplicado no HTML (confirmado por inspeção do código) — um leitor de tela lê cada área duas vezes. A prévia corrige isso e adiciona um destaque de cor automático com barra de progressão, ausente no site atual.
06
Antes × Depois — captura real dos dois sites

Sócios e presença nacional

4. Sócios

Os registros OAB já aparecem no site atual — o problema é a apresentação visual, não a informação.

Antes — bbadvogados.net Seção de sócios do site atual com fotos em recorte de losango sobrepostas ao título
Depois — prévia Luma Sites Grid de quatro cards de sócios com foto, OAB principal e seccionais adicionais
Por que importa: as fotos em recorte de losango do site atual se sobrepõem ao título da seção — "Transformam o Direito" fica parcialmente coberto pela foto de uma das sócias — e o layout assimétrico não segue um grid organizado. A prévia mantém as mesmas informações de OAB em cards uniformes, sem sobrepor o texto.

5. Presença nacional

Mapa do Brasil com os estados de atuação destacados, ao lado da lista de escritórios.

Antes — bbadvogados.net Rodapé do site atual com endereços em texto corrido
Depois — prévia Luma Sites Mapa do Brasil com estados de atuação destacados e lista de seis escritórios
Por que importa: no site atual, as 6 cidades aparecem como uma linha de texto corrido no rodapé, sem hierarquia visual. A prévia transforma a mesma informação em um mapa do Brasil com os estados destacados — presença nacional vira argumento visual, não texto perdido.
07
Antes × Depois — captura real dos dois sites

Como trabalhamos

6. Jornada de atendimento

O site atual começa a numerar etapas do atendimento, mas nunca completa a sequência.

Antes — bbadvogados.net Seção Fale Conosco do site atual mostrando apenas a etapa 1, Primeiro Contato
Depois — prévia Luma Sites Seção Como Trabalhamos com quatro etapas numeradas completas
Por que importa: na seção "Fale Conosco" do site atual, aparece "1. Primeiro Contato" com uma frase de descrição — e depois disso, um grande espaço decorativo vazio (foto e logo em marca d'água) até o rodapé. As etapas 2, 3 e 4 nunca chegam a aparecer. A prévia completa essa ideia como uma jornada real de 4 etapas, com direção visual clara do início ao fim.
08
Recursos Novos e Aprimorados

Dinamismo que o site atual não tem

Além de corrigir os problemas identificados na auditoria, a prévia introduz recursos de dinamismo genuinamente ausentes ou apenas embrionários no site atual.

Divisor visual entre seções com ícone circular relacionado ao conteúdo
Recurso novo

Divisores de seção com ícone contextual

Cada transição entre seções ganha um divisor com ícone relacionado ao conteúdo seguinte (bússola, balança, rota, e outros) — o site atual não tem nenhum elemento equivalente entre suas seções.

Botão flutuante de WhatsApp com efeito pulsante, visível no canto da página
Recurso aprimorado

Botão flutuante de WhatsApp pulsante

O site atual já tem um botão fixo de WhatsApp, estático. A prévia adiciona um efeito pulsante sutil que chama mais atenção para o canal de conversão sem ser invasivo.

Rodapé com cinco colunas: marca, navegação, áreas de atuação, escritórios e contato
Recurso aprimorado

Rodapé institucional completo

O rodapé atual tem contato e um formulário de newsletter, mas nenhuma organização por colunas. A prévia organiza navegação, áreas de atuação, os 6 escritórios e contato direto em colunas dedicadas.

Grid de áreas de atuação com card em destaque de cor e barra de progressão
Recurso novo

Dinâmica de cor nas áreas de atuação

Os 8 cards alternam automaticamente um destaque de cor com barra de progressão de 3 segundos (pausa ao passar o mouse) — o site atual não tem nenhuma dinâmica equivalente nesses cards.

09
Sistema Visual

Paleta, tipografia e uso correto

Navy institucional#0B2A4A
Navy escuro#071A30
Dourado (contraste)#B08A3E
Neutro claro#F5F6F8
Texto secundário#5B6472
Direito que move resultados.
Playfair Display (display) + Inter (texto) — par tipográfico que transmite tradição jurídica sem perder legibilidade em tela.
✓ Fazer
Usar o dourado (#B08A3E) apenas como acento — bordas, ícones, destaque de número. Nunca como cor de fundo em grandes áreas.
✗ Evitar
Gradientes coloridos genéricos, ícones flat multicoloridos ou fotos de banco de imagens com aperto de mão — quebram a sobriedade institucional do escritório.
10
Ganhos Mensuráveis

O que muda na prática

Performance

Página estática sem plugins de terceiros — carregamento praticamente instantâneo, sem "pulos" de layout enquanto os elementos aparecem.

Acessibilidade

Contraste de texto validado, navegação por teclado com indicação visual de foco, textos alternativos em todas as imagens e sem repetição de conteúdo para leitores de tela.

SEO

Título de página dentro do limite recomendado pelo Google, meta description objetiva — reduz o risco de aparecer cortado ou irrelevante na busca.

01
O que esta prévia cobre

Home completa com hero fixo, credenciais, institucional em abas, áreas de atuação com dinâmica de cor, sócios, "como trabalhamos", presença nacional, FAQ, contato e rodapé completo — pronta para validação do escritório.

02
O que viria em um projeto completo

Páginas individuais por área de atuação e por sócio, blog/notícias com artigos reais, formulário conectado a e-mail/CRM, domínio e hospedagem próprios.

Próximos passos

Esta prévia foi construída a partir de dados públicos do site oficial, como demonstração gratuita de prospecção. A validação do conteúdo (textos, números e imagens) e a publicação em domínio próprio dependem de aprovação e contratação do escritório.

11