Derecho empresarialSão Paulo
Aldren Advocacia.
Sitio para un despacho de derecho empresarial en Itaim Bibi. Quien busca un abogado para su empresa sabe qué problema tiene, pero no siempre el nombre del área que se ocupa de él. El sitio empieza por el problema.
Caso de estudio
El desafío.
Los sitios de derecho empresarial suelen organizarse como el propio despacho: una lista de áreas con nombres técnicos, una página de socios y un formulario. Para el director que acaba de recibir una multa fiscal o quiere vender la empresa, eso lo obliga a traducir el problema a vocabulario jurídico antes del primer contacto. Al mismo tiempo, el Provimento 205/2021 de la OAB (Colegio de Abogados de Brasil) limita lo que el sitio puede decir: nada de promesas de resultado, casos concretos, precios ni frases persuasivas. El sitio tenía que orientar sin ofrecer.
- 01 El problema antes que el áreaEl visitante llega con una situación concreta, y el sitio tenía que aceptar esa entrada sin exigir vocabulario jurídico.
- 02 Informar sin captarEl Provimento 205/2021 exige carácter informativo, discreción y sobriedad, sin promesas, precios, rankings ni autoelogio.
- 03 Lector sin tiempoSocios, consejos y juntas directivas necesitan entender en minutos quién lleva el asunto y qué preparar para la reunión.
- 04 Discreción con identidadLa norma pide discreción; el reto era ser discreto sin parecer el sitio de cualquier otro despacho.
Método Flowt
El diagnóstico.
El sitio organiza el despacho según el problema de quien busca, y no por el nombre técnico de las áreas, y pone al director de la empresa en contacto con el despacho en dos toques.
- VelocidadLa apertura es solo texto, con fuentes servidas por el propio sitio, y el elemento más grande de la pantalla es el párrafo de apertura.
- Accesibilidad verificableLas pestañas del mapa siguen el patrón WAI-ARIA, con flechas, Home y End, y el foco es visible.
- Camino hasta la acción principalAcción principal: escribir al despacho.
- Servicio y primer pasoCada área tiene lo que hace, cuándo suele intervenir, normas y el socio responsable.
- Contenido que informaEl mapa de situaciones organiza el contenido según el problema del cliente, con norma y artículo, etapas y documentos que preparar.
Ver el análisis completo
Los 13 criterios, con la evidencia de cada punto: lo que cumple, lo que cumple en parte y lo que depende de una empresa real. Como la marca es un concepto, no existe un "antes" ni una nota total.
Ser encontrado
Título, descripción y un H1 por página, datos LegalService con equipo, horario e idiomas, todo en texto. Queda en parte por elección: noindex, robots de IA bloqueados y ninguna mención de terceros.
Marca conceptual, sin reseñas reales. En un proyecto real, el volumen, la recencia y las respuestas se medirían antes y después en el Perfil de Empresa en Google.
El Perfil de Empresa en Google exige una empresa real y una dirección verificada. En un proyecto real, la categoría, el horario, el teléfono, las fotos y los servicios se verificarían antes y después.
Ser elegido
La primera pantalla del celular muestra el área, el barrio, el público y el siguiente paso. El título es un lema que le serviría a otro despacho; el mapa de situaciones, el diferencial, solo aparece en el botón.
5 de 6 verificaciones
Estructura lista: cuatro abogados con área, idiomas e inscripción en la OAB marcada como ejemplo, dictamen modelo sin caso real y barrio. En una empresa real entran las inscripciones verdaderas; la norma prohíbe divulgar casos y clientes.
Marca conceptual, sin canales externos para comparar. Dentro del sitio, el horario y los idiomas son los mismos en el pie de las tres páginas, en los datos de la página Contacto y en los datos estructurados.
Marca conceptual, sin perfil en Instagram. En un proyecto real, se mide si el perfil aparece en la búsqueda por servicio y ciudad, con una bio informativa y sin frases persuasivas, como pide el Provimento 205.
Cada área tiene lo que hace, cuándo suele intervenir, normas y el socio responsable. El primer paso está descrito: mensaje, verificación de conflicto de intereses, respuesta en dos días hábiles y reunión presencial o por video.
El mapa de situaciones organiza el contenido según el problema del cliente, con norma y artículo, etapas y documentos que preparar. Las seis notas técnicas, sin embargo, son solo títulos de ejemplo, sin texto.
Ser contactado
La apertura es solo texto, con fuentes servidas por el propio sitio, y el elemento más grande de la pantalla es el párrafo de apertura. Medición de laboratorio, sin datos de campo, porque el sitio no tiene visitas.
Lighthouse 99 en celular · LCP 2,1 s
Las pestañas del mapa siguen el patrón WAI-ARIA, con flechas, Home y End, y el foco es visible. Sin JavaScript, los cinco paneles aparecen en secuencia; con movimiento reducido, el cambio es instantáneo.
Lighthouse 100 · axe sin violaciones en las 4 páginas
Ningún rastreador, cookie ni solicitud a terceros, y la página Contacto trae un aviso de privacidad con finalidad, base legal, retención de 12 meses y encargado de datos. Sin medición instalada, porque es un concepto.
Acción principal: escribir al despacho. La página Contacto explica lo que viene después: verificación de conflicto de intereses, respuesta en un plazo de hasta dos días hábiles con el nombre del socio y la primera reunión.
2 toques (Menú y Contacto); 3 por el mapa, con el tema ya completado
Obligaciones del sectorProvimento 205/2021 y Código de Ética de la OAB: nombre de la sociedad e inscripción de los cuatro abogados en el pie de página, marcados como ejemplo, sin precio, promesa, caso concreto, ranking ni símbolo de la OAB.
En un proyecto real, cada criterio se mide antes y después, con la misma regla y la evidencia de cada punto. No hay nota: lo que se ve es cuántos puntos siguen abiertos.
Estrategia
Estrategia y mapa del sitio.
La home abre con un mapa de situaciones: cinco frases que diría un director, como “recibí una multa fiscal” o “un socio quiere salir”. Para cada una, el sitio muestra qué áreas conducen y cuáles apoyan, una regla de la norma con el artículo, las etapas habituales y los documentos que hay que preparar, y cierra con un contacto neutro, con el tema ya completado. Quien ya sabe lo que busca entra por las áreas, en el acordeón de la home o en la página Actuación. Las dos entradas se cruzan: cada área apunta a las situaciones en las que suele intervenir.
01Inicio
- Apertura
- Mapa de situaciones
- Áreas de actuación
- Cómo trabajamos y dictamen modelo
- Equipo
- Notas técnicas
- Contacto
02Actuación
- Apertura con atajo al mapa
- Índice que acompaña el desplazamiento
- Cinco áreas en detalle
- Por dónde empezar
03Contacto
- Apertura
- Cómo responde el despacho
- Datos de contacto
- Formulario
- Aviso de privacidad
Sistema visual
Tipografía, color y ritmo.
Cormorant Garamond da a los títulos el registro de un documento jurídico, y Manrope mantiene el texto breve y legible. Azul noche y marfil forman la base; el bronce aparece solo en líneas finas y en el sello. Una columna de margen guarda las etiquetas “§ 1”, “§ 2”, como en un dictamen, y el movimiento se limita a abrir y cerrar: pestañas, acordeón, líneas que se trazan y un sello que entra una vez.
- Mapa de situaciones
- Riel conduce y apoya
- Hoja del dictamen modelo
- Sello con monograma
- Pie de página regulatorio
Momento distintivo
Mapa de situaciones.
El visitante elige una de las cinco situaciones, numeradas del I al V, y una línea de bronce une la elección con el panel. Ahí, un riel muestra el papel de cada área (conduce, apoya o no suele intervenir), seguido de la regla de la norma con el artículo, de las etapas y de los documentos, con casillas para marcar. El cierre indica el socio de la primera reunión y lleva al contacto con la situación ya completada. Todo funciona con el teclado.
En el celular
Hecho para la pantalla pequeña.
Tres pantallas del sitio en un celular de 390 px de ancho, el más común hoy.
Comprobantes
Rendimiento medido.
Las puntuaciones siguientes se midieron en el sitio publicado con Google Lighthouse. No son una promesa: reflejan el estado del sitio en la fecha de medición. Las demostraciones se presentan en video. Las mediciones registran el estado del proyecto en la fecha indicada.
En el celular
- Elemento visible más grande (LCP)
- 2.1 s
- Estabilidad (CLS)
- 0
- Bloqueo (TBT)
- 0 ms
En computadora
- Elemento visible más grande (LCP)
- 0.5 s
- Estabilidad (CLS)
- 0
- Bloqueo (TBT)
- 0 ms
Medido el 03/10/2026 con Lighthouse 13.5.0, en celular simulado y en computadora. *El SEO queda por debajo de 100 a propósito: el sitio conceptual lleva la instrucción noindex para no aparecer en Google ni competir con empresas reales. La accesibilidad también se verificó con axe (cero violaciones) y la alineación se revisó en 7 anchos de pantalla.
Detrás de escena
Ficha técnica.
- Páginas
- Inicio, Actuación, Contacto y página 404
- Idiomas
- Portugués (Brasil)
- Tecnología
- HTML, CSS y JavaScript sin framework
- GSAP y ScrollTrigger para los movimientos de abrir y cerrar, con desplazamiento nativo
- Generador propio en Python: mapa, áreas y equipo salen de un único archivo de datos
- Imágenes en AVIF y WebP, en varios anchos
- CSS y JavaScript comprimidos con esbuild
- Fuentes servidas por el propio sitio, con fuentes de respaldo de métrica ajustada
- Datos estructurados schema.org (LegalService)
- Imágenes
- Siete fotografías generadas con IA (OpenAI y Higgsfield), en una serie de material y luz con encuadre cerrado, reveladas con el mismo tratamiento; sello, monograma, riel del mapa y hoja del dictamen dibujados en SVG y HTML en el código.
- Accesibilidad
- Pestañas del mapa con el patrón WAI-ARIA (flechas, Home y End), foco visible, los cinco paneles en secuencia sin JavaScript, cambio instantáneo con movimiento reducido y cero violaciones en axe en las cuatro páginas, en computadora y en celular.
- Reglas del sector
- Sigue el Provimento 205/2021 y el Código de Ética de la OAB: contenido informativo, “áreas de actuación” en lugar de “especialistas”, ninguna promesa, precio ni ranking, y la inscripción de cada abogado, marcada como ejemplo, en el pie de página.
Empieza ahora
Llevemos tu presencia digital al nivel de tu servicio.
Empieza con el diagnóstico gratuito: medimos tu presencia digital y te mostramos, punto por punto, qué corregir primero.
Agenda abierta para nuevos proyectos
Cuéntanos sobre tu proyecto
Con poca información basta. Lo demás te lo preguntamos.