Volver al portafolio
Legal

Almeida & Costa Advocacia

Sitio institucional con UI/UX y tema WordPress en PHP desarrollado desde cero

Mi rol
Diseñador UX/UI · Programador Full Stack
Almeida & Costa AdvocaciaAlmeida & Costa Advocacia
01

Contexto

Almeida & Costa es un estudio jurídico empresarial y consultivo de Belo Horizonte, con atención presencial y online en todo el país. Conduje el proyecto de punta a punta: de la concepción de la interfaz y la experiencia de usuario a la implementación del sitio, con un tema de WordPress en PHP desarrollado a medida e integrado al panel del estudio.

Cliente
Almeida & Costa Advocacia
Categoría
Legal
Roles
Diseñador UX/UI, Programador Full Stack
Tecnología
WordPress, PHP
02

Problema

En el ámbito jurídico, el cliente elige el estudio antes del primer contacto, y el sitio es donde empieza esa elección. Un sitio igual al de cualquier estudio no muestra con claridad las áreas de práctica, no demuestra experiencia y no deja claro el siguiente paso. El resultado es un visitante que se va sin entender por qué debería confiar en ese estudio.

03

Objetivo

Crear un sitio que transmitiera autoridad sin parecer distante, organizara las áreas de práctica de forma fácil de entender y llevara al visitante hasta el contacto. Todo en un WordPress que el propio estudio pudiera actualizar sin depender de un desarrollador.

04

Proceso

Arquitectura de la página: la secuencia sigue las preguntas que hace el cliente. Quiénes son (hero y números), por qué confiar ("Derecho con visión de negocio"), qué hacen (áreas de práctica), cómo trabajan ("Antes del proceso, está la estrategia"), qué ya hicieron (experiencia y testimonios) y cuál es el siguiente paso (contacto).

Hero con prueba inmediata: el título "Estrategia jurídica para decisiones que importan.", un único botón ("Agendar una conversación") y, justo debajo, una franja con los números del estudio: años de trayectoria, casos conducidos, clientes recurrentes y atención en todo el país.

Áreas de práctica en tarjetas: Empresarial y Contratos, Civil y Contencioso, Laboral Empresarial y Familia y Sucesiones, cada una con foto, resumen en lenguaje simple y acceso a la página del área. En lugar de jerga jurídica, el visitante encuentra su propio problema.

Diferencial y experiencia: el método en tres pasos (Análisis, Prevención, Actuación) explica cómo trabaja el estudio, y los casos (reestructuración contractual, disputa societaria, adecuación de políticas internas, planificación sucesoria) muestran el resultado en la práctica, seguidos de testimonios de clientes.

Desarrollo full stack: desarrollé un tema de WordPress en PHP desde cero, fiel al diseño y responsive. Áreas, casos, testimonios y contenidos se cargan desde el panel, así el estudio actualiza el sitio por su cuenta, y los botones de contacto aparecen en todas las secciones.

05

El sitio, sección por sección

Cada sección de la home responde a una pregunta del cliente y lleva a la siguiente.

  1. 01 / 07

    El encabezado

    La promesa del estudio en un solo título, "Estrategia jurídica para decisiones que importan", con un único botón: "Agendar una conversación". Justo debajo, la franja de números (años de trayectoria, casos conducidos, clientes recurrentes, atención en todo el país) prueba lo que el título promete.

  2. 02 / 07

    Por qué confiar

    "Derecho con visión de negocio": en pocas líneas, la forma de trabajar del estudio, con una foto real de una atención en lugar de imágenes genéricas de tribunal.

  3. 03 / 07

    Qué hacen

    Las cuatro áreas de práctica en tarjetas con foto y resumen en lenguaje simple. El visitante encuentra su propio problema sin necesidad de entender jerga jurídica.

  4. 04 / 07

    Cómo trabajan

    "Antes del proceso, está la estrategia": el método en tres pasos (Análisis, Prevención, Actuación) explica el diferencial antes de cualquier caso.

  5. 05 / 07

    Qué ya hicieron

    Casos reales por área (reestructuración contractual, disputa societaria, políticas internas, planificación sucesoria), cada uno con su año, para mostrar el resultado en la práctica.

  6. 06 / 07

    La palabra del cliente

    Testimonio de una clienta empresarial, con su cargo y tipo de empresa, que cierra la prueba antes de la invitación.

  7. 07 / 07

    El siguiente paso

    "Tu siguiente paso empieza con una buena conversación": la invitación final sobre fondo oscuro, con el mismo botón del encabezado, y el pie de página con la ciudad y la atención presencial y online.

Sistema Visual

Azul marino y dorado para una autoridad elegante: el marino da la seriedad que se espera de un estudio, el dorado marca los destacados y los botones, y los fondos claros alivian la lectura entre las secciones oscuras.

Paleta

Azul Marino

#0B1A25

Hero, secciones oscuras y pie de página

Dorado Claro

#E7CC8F

Botones principales, como "Agendar una conversación"

Dorado

#E9C181

Palabras destacadas en los títulos

Bronce

#A5844F

Botones sobre fondo claro e íconos del diferencial

Off-white

#F5F5F3

Fondo de las secciones claras

06

Aprendizaje

En el ámbito jurídico, la confianza se construye en el orden correcto: primero la propuesta, después la prueba, después la invitación. Y ser la misma persona en el diseño y en el código hizo que el tema de WordPress saliera fiel al diseño y fácil de editar, que es lo que mantiene vivo un sitio institucional después de la entrega.