Advocacia empresarialSão Paulo
Aldren Advocacia.
Site para um escritório de advocacia empresarial no Itaim Bibi. Quem procura um advogado para a empresa sabe o problema que tem, mas nem sempre o nome da área que cuida dele. O site começa pelo problema.
Estudo de caso
O desafio.
Sites de advocacia empresarial costumam se organizar como o próprio escritório: uma lista de áreas com nomes técnicos, uma página de sócios e um formulário. Para o diretor que acabou de receber uma autuação ou quer vender a empresa, isso obriga a traduzir o problema em vocabulário jurídico antes do primeiro contato. Ao mesmo tempo, o Provimento 205/2021 da OAB limita o que o site pode dizer: nada de promessa de resultado, casos concretos, preço ou frase persuasiva. O site precisava orientar sem oferecer.
- 01 Problema antes da áreaO visitante chega com uma situação concreta, e o site precisava aceitar essa entrada sem exigir vocabulário jurídico.
- 02 Informar sem captarO Provimento 205/2021 exige caráter informativo, discrição e sobriedade, sem promessa, preço, ranking ou autoengrandecimento.
- 03 Leitor sem tempoSócios, conselhos e diretorias precisam entender em minutos quem conduz o assunto e o que separar para a reunião.
- 04 Discrição com identidadeA norma pede discrição; o desafio era ser discreto sem parecer o site de qualquer outro escritório.
Método Flowt
O diagnóstico.
O site organiza o escritório pelo problema de quem procura, e não pelo nome técnico das áreas, e leva o diretor da empresa ao contato com o escritório em dois toques.
- VelocidadeA abertura é só texto, com fontes servidas pelo próprio site, e o maior elemento da tela é o parágrafo de abertura.
- Acessibilidade verificávelAs abas do mapa seguem o padrão WAI-ARIA, com setas, Home e End, e o foco é visível.
- Caminho até a ação principalAção principal: escrever ao escritório.
- Serviço e primeiro passoCada área tem o que faz, quando costuma entrar, normas e o sócio responsável.
- Conteúdo que informaO mapa de situações organiza o conteúdo pelo problema do cliente, com norma e artigo, etapas e documentos a separar.
Ver análise completa
Os 13 critérios, com a evidência de cada ponto: o que atende, o que atende em parte e o que depende de uma empresa real. Como a marca é um conceito, não existe um "antes" nem nota somada.
Ser encontrado
Título, descrição e um H1 por página, dados LegalService com equipe, horário e idiomas, tudo em texto. Fica em parte por escolha: noindex, robôs de IA bloqueados e nenhuma menção de terceiros.
Marca conceito, sem avaliações reais. Num projeto real, volume, recência e respostas seriam medidos antes e depois no Perfil da Empresa no Google.
O Perfil da Empresa no Google exige empresa real e endereço verificado. Num projeto real, categoria, horário, telefone, fotos e serviços seriam conferidos antes e depois.
Ser escolhido
A primeira tela do celular mostra área, bairro, público e próximo passo. O título é um lema que serviria a outro escritório; o mapa de situações, o diferencial, só aparece no botão.
5 de 6 checagens
Estrutura pronta: quatro advogados com área, idiomas e inscrição na OAB marcada como exemplo, parecer-modelo sem caso real e bairro. Numa empresa real entram as inscrições verdadeiras; a norma veda casos e clientes.
Marca conceito, sem canais externos para comparar. Dentro do site, horário e idiomas são os mesmos no rodapé das três páginas, nos dados do Contato e nos dados estruturados.
Marca conceito, sem perfil no Instagram. Num projeto real, mede-se se o perfil aparece na busca por serviço e cidade, com bio informativa e sem frase persuasiva, como pede o Provimento 205.
Cada área tem o que faz, quando costuma entrar, normas e o sócio responsável. O primeiro passo está descrito: mensagem, verificação de conflito, resposta em dois dias úteis e reunião presencial ou por vídeo.
O mapa de situações organiza o conteúdo pelo problema do cliente, com norma e artigo, etapas e documentos a separar. As seis notas técnicas, porém, são só títulos de exemplo, sem texto.
Ser chamado
A abertura é só texto, com fontes servidas pelo próprio site, e o maior elemento da tela é o parágrafo de abertura. Medição de laboratório, sem dados de campo, porque o site não tem visitas.
Lighthouse 99 no celular · LCP 2,1 s
As abas do mapa seguem o padrão WAI-ARIA, com setas, Home e End, e o foco é visível. Sem JavaScript, os cinco painéis aparecem em sequência; com movimento reduzido, a troca é instantânea.
Lighthouse 100 · axe sem violações nas 4 páginas
Nenhum rastreador, cookie ou pedido a terceiros, e o Contato traz aviso de privacidade com finalidade, base legal, retenção de 12 meses e encarregado. Sem medição instalada, porque é conceito.
Ação principal: escrever ao escritório. O Contato explica o que vem depois: verificação de conflito, resposta em até dois dias úteis com o nome do sócio e a primeira reunião.
2 toques (Menu e Contato); 3 pelo mapa, com o tema preenchido
Obrigações do setorProvimento 205/2021 e Código de Ética da OAB: nome da sociedade e inscrição dos quatro advogados no rodapé, marcados como exemplo, sem preço, promessa, caso concreto, ranking nem símbolo da OAB.
Num projeto real, cada critério é medido antes e depois, com a mesma régua e a evidência de cada ponto. Não há nota: o que se vê é quantos pontos continuam abertos.
Estratégia
Estratégia e mapa do site.
A home abre com um mapa de situações: cinco frases que um diretor diria, como “recebi uma autuação fiscal” ou “um sócio quer sair”. Para cada uma, o site mostra quais áreas conduzem e quais apoiam, uma regra de norma com o artigo, as etapas de costume e os documentos a separar, e fecha num contato neutro, com o tema já preenchido. Quem já sabe o que procura entra pelas áreas, no acordeão da home ou na página Atuação. As duas entradas se cruzam: cada área aponta para as situações em que costuma entrar.
01Início
- Abertura
- Mapa de situações
- Áreas de atuação
- Como trabalhamos e parecer-modelo
- Equipe
- Notas técnicas
- Contato
02Atuação
- Abertura com atalho para o mapa
- Índice que acompanha a rolagem
- Cinco áreas em detalhe
- Por onde começar
03Contato
- Abertura
- Como o escritório responde
- Dados de contato
- Formulário
- Aviso de privacidade
Sistema visual
Tipografia, cor e ritmo.
Cormorant Garamond dá aos títulos o registro de um documento jurídico, e Manrope mantém o texto curto e legível. Azul-noite e marfim fazem a base; o bronze aparece só em fios e no lacre. Uma coluna de margem guarda os rótulos “§ 1”, “§ 2”, como num parecer, e o movimento se limita a abrir e fechar: abas, acordeão, fios que se riscam e um lacre que entra uma vez.
- Mapa de situações
- Trilho conduz e apoia
- Folha do parecer-modelo
- Lacre com monograma
- Rodapé regulatório
Momento assinatura
Mapa de situações.
O visitante escolhe uma das cinco situações, numeradas de I a V, e um fio de bronze liga a escolha ao painel. Ali, um trilho mostra o papel de cada área (conduz, apoia ou não costuma entrar), seguido da regra de norma com o artigo, das etapas e dos documentos, com caixas para marcar. O fecho indica o sócio da primeira reunião e leva ao contato com a situação preenchida. Tudo funciona pelo teclado.
No celular
Feito para a tela pequena.
Três telas do site num celular de 390 px de largura, a mais comum hoje.
Recibos
Desempenho medido.
As notas abaixo são do site publicado, medidas pelo Lighthouse do Google. Não são uma promessa: são o estado do site no dia da medição. As demonstrações são apresentadas em vídeo. As medições registram o estado do projeto na data indicada.
No celular
- Maior elemento visível (LCP)
- 2.1 s
- Estabilidade (CLS)
- 0
- Bloqueio (TBT)
- 0 ms
No computador
- Maior elemento visível (LCP)
- 0.5 s
- Estabilidade (CLS)
- 0
- Bloqueio (TBT)
- 0 ms
Medido em 03/10/2026 com o Lighthouse 13.5.0, celular simulado e computador. *O SEO fica abaixo de 100 de propósito: o site conceito leva a instrução noindex para não aparecer no Google nem competir com empresas reais. Acessibilidade conferida também com o axe (zero violações) e alinhamento revisado em 7 larguras de tela.
Bastidores
Ficha técnica.
- Páginas
- Início, Atuação, Contato e página 404
- Idiomas
- Português (Brasil)
- Tecnologia
- HTML, CSS e JavaScript sem framework
- GSAP e ScrollTrigger para os movimentos de abrir e fechar, com rolagem nativa
- Gerador próprio em Python: mapa, áreas e equipe vêm de um arquivo de dados único
- Imagens em AVIF e WebP, em várias larguras
- CSS e JavaScript compactados com esbuild
- Fontes servidas pelo próprio site, com faces reserva de métrica ajustada
- Dados estruturados schema.org (LegalService)
- Imagens
- Sete fotografias geradas por IA (OpenAI e Higgsfield), numa série de material e luz em enquadramento fechado, reveladas com o mesmo tratamento; lacre, monograma, trilho do mapa e folha do parecer desenhados em SVG e HTML no código.
- Acessibilidade
- Abas do mapa no padrão WAI-ARIA (setas, Home e End), foco visível, os cinco painéis em sequência sem JavaScript, troca instantânea com movimento reduzido e zero violações no axe nas quatro páginas, no computador e no celular.
- Regras do setor
- Segue o Provimento 205/2021 e o Código de Ética da OAB: conteúdo informativo, “áreas de atuação” em vez de “especialistas”, nenhuma promessa, preço ou ranking, e a inscrição de cada advogado, marcada como exemplo, no rodapé.
Comece agora
Vamos colocar o seu digital no nível do seu serviço.
Comece pelo diagnóstico gratuito: a gente mede a sua presença digital e mostra, ponto a ponto, o que corrigir primeiro.
Agenda aberta para novos projetos
Conte sobre o seu projeto
Poucas informações bastam. O resto a gente pergunta.