Pablo Bürmann

El punto de partida

Pablo ya tenía una web. Se la había montado él mismo en Wix y, para ser honestos, estaba bastante bien hecha para ser un trabajo propio: se notaba el cuidado y las ganas. Pero había un problema de fondo.

La web usaba el negro como color base en toda la navegación. Y aunque el negro puede funcionar puntualmente —sobre todo en sectores creativos donde se quiere transmitir elegancia— cuando se aplica de forma masiva acaba cansando al visitante. La pantalla pesa, la lectura se vuelve incómoda, y lo que debería ser un recorrido fluido por el portfolio termina siendo una experiencia que invita a cerrar la pestaña.

Además, al estar hecha en una plataforma generalista, no transmitía esa sensación de "aquí hay un profesional al mando" que Pablo sí transmite en persona y en su trabajo. Faltaba estructura, jerarquía visual y ese punto de diseño que separa una web correcta de una web que enamora.

La solución

Rediseñé la web partiendo de cero con cuatro ideas claras:

Limpieza visual

Cambié la paleta a colores claros, dejando respirar cada sección. El resultado es una navegación ligera, donde el ojo descansa y el contenido —que al final es lo importante: el trabajo de Pablo— se convierte en el protagonista real de la página.

Botones con transparencias

Un detalle pequeño pero que marca la diferencia. En lugar de botones planos, usé un tratamiento con transparencias que aporta profundidad, modernidad y un toque de belleza que refuerza la identidad creativa de Pablo sin robar protagonismo a sus proyectos.

Estructura pensada para convertir

Reorganicé los bloques de la home para que cualquier visitante entienda en menos de 10 segundos quién es Pablo, qué hace y cómo contactarle. Nada de hacer scroll buscando información: todo está donde tiene que estar.

Redes sociales con el protagonismo que merecen

En la web anterior, los enlaces a redes quedaban relegados a un rincón, casi escondidos. Para un director de fotografía, donde Instagram y Vimeo son prácticamente una extensión del portfolio, eso era un error. Reestructuré los botones de redes sociales dándoles su lugar en la web, con un tratamiento visual que los convierte en parte del diseño y no en un añadido.

Y por supuesto, con el hosting incluido, dominio configurado y todo listo para que Pablo solo tuviera que preocuparse de lo suyo: seguir haciendo cine y publicidad.

Proceso de creación

Cuando me senté a diseñar la web de Pablo tenía un reto claro: construir un escaparate que respetara la identidad cinematográfica de un DP premiado, pero sin caer en el tópico del "portfolio oscuro de creativo". Quería que la web transmitiera luz, oficio y calma, tres cosas que definen bien el trabajo de Pablo detrás de la cámara. Estas son las decisiones que tomé, sección por sección.

La cabecera: Liquid Glass y una firma que respira

La cabecera es lo primero que ves, así que es donde más tiempo invertí. Apliqué el nuevo estilo Liquid Glass recién estrenado por Apple en sus sistemas operativos: un fondo con alto nivel de transparencia y desenfoque (backdrop-filter blur) que deja entrever sutilmente el contenido que pasa por debajo al hacer scroll. El efecto es casi imperceptible hasta que navegas, y entonces cobra sentido: la web "vive" bajo el cristal.

Sobre esa cabecera translúcida coloqué la firma personal de Pablo como logo, centrada y con identidad propia. En lugar de dejarla aplastada dentro de la barra, la hice sobresalir verticalmente con una sombra proyectada que le da presencia física, como si estuviera suspendida por encima del resto de la interfaz. Es un guiño visual a las placas de rodaje.

Y aquí viene el detalle funcional: la cabecera se reduce de tamaño cuando el usuario hace scroll hacia abajo. La firma encoge, el bloque se compacta, y lo que antes ocupaba protagonismo cede el espacio al contenido real. Es una transición suave controlada por JavaScript que escucha el evento scroll y ajusta la altura del header en tiempo real.

Justo debajo del logo, en una segunda fila también con tratamiento glass, coloqué las píldoras de navegación —Biografía, Premios, Reels, Trabajos, Contacto— con forma de cápsula redondeada, bordes suaves y un interior semitransparente. Cada píldora es un ancla interna que lleva a su sección correspondiente sin recargas, con scroll suavizado.

Las esquinas: el lenguaje del radio generoso

Un detalle que parece menor pero que define todo el carácter de la web: el uso sistemático de esquinas redondeadas con radio generoso. No son las esquinas tímidas de 4px que todo el mundo usa por defecto. Aquí apliqué un border-radius amplio (entre 24 y 32px) en prácticamente todos los contenedores: tarjeta principal, fotografías, bloques de estadísticas, botones, incluso las placas de premios del carrusel.

Esta decisión no es estética sin más. Las esquinas muy redondeadas transmiten amabilidad, modernidad y calidez, justo lo contrario del frío cuadrado corporativo. Es el mismo lenguaje que usan los iconos de iOS, los widgets de macOS y las tarjetas de Stripe o Linear. Comunica "atención al detalle" sin decirlo.

La paleta: un gris luminoso con alma

La paleta fue probablemente la decisión más valiente del proyecto. Descarté el negro de la versión anterior y también descarté el blanco puro, que habría quedado aséptico y clínico. En su lugar construí la web sobre un gradiente sutil de grises fríos con toques verdosos, muy cercanos a los tonos de una sala de revelado o al gris neutro de los monitores de referencia que usa un DP en postproducción.

Es una paleta que no cansa. Los contrastes están medidos: los textos van en negros profundos pero no puros, los fondos tienen variaciones mínimas entre sección y sección para crear jerarquía sin romper la continuidad, y los acentos están trabajados con mucha discreción. Es una paleta que se nota más cuando la quitas que cuando está.

El hero: la sección "International award-winning DP"

Al entrar, lo primero que ve el visitante es una etiqueta flotante dentro de una píldora glass con el texto "International award-winning DP". Esta es la promesa de valor en cuatro palabras, colocada en el punto de máxima atención.

Justo debajo, una fotografía de Pablo en pleno rodaje —enmarcada también con esquinas generosas y una sombra suave que la hace levitar— acompañada de un párrafo descriptivo corto. La composición es deliberadamente asimétrica: foto a la izquierda, texto a la derecha, dejando mucho aire alrededor. El aire, en diseño web, es lujo.

Y como remate de la primera pantalla, tres tarjetas de KPIs con los números que de verdad importan: 30+ años de experiencia, 50+ largometrajes junto a Hans Bürmann, 2017 Goya para "Frágil Equilibrio". Tipografía grande y negra para el dato, tipografía fina y gris para la descripción. En 3 segundos, cualquier visitante entiende quién es Pablo sin leer ni un párrafo completo.

Los premios: un carrusel horizontal infinito

Pablo tiene muchos premios y cada uno tiene su placa con laureles, su festival, su año. En lugar de amontonarlos en un grid estático que habría pesado visualmente, los coloqué en un carrusel horizontal con desplazamiento automático, donde las placas se deslizan de derecha a izquierda de forma continua. El usuario puede pausarlo al pasar el ratón y navegar manualmente, o dejar que el carrusel siga solo mientras sigue leyendo.

Cada placa respira con un pequeño margen y conserva su fondo negro original —es parte de la identidad de los laureles cinematográficos—, pero el contenedor del carrusel va en el gris luminoso de la web, así que el contraste hace que cada premio destaque sin gritar.

La sección Premio con imagen de fondo

Una de mis decisiones favoritas: para dar protagonismo al premio más reciente —Mejor Fotografía "Hidden Soldier", 23 Semana de Cine de Mula— creé una sección full-width con una imagen de fondo del propio rodaje, y sobre ella, otra píldora glass centrada con el texto del premio en tipografía serif elegante.

Aquí el Liquid Glass funciona en su versión más dramática: el blur sobre una imagen cinematográfica de fondo crea un efecto casi de lente anamórfica, muy apropiado para un director de fotografía.

La biografía: tipografía serif para el peso editorial

Para el titular de la biografía elegí una tipografía serif con carácter editorial, que evoca los títulos de revistas de cine clásico. El resto del texto va en una sans-serif humanista muy legible, en gris oscuro, con un line-height amplio para que la lectura sea cómoda incluso en párrafos largos. A la derecha del texto, un retrato de Pablo en plató enmarcado con las mismas esquinas redondeadas del sistema.

Los botones de redes sociales: del rincón al altar

Cada red social vive ahora en su propia tarjeta cuadrada con esquinas redondeadas y fondo glass, agrupadas en una rejilla de cinco bloques dentro de un contenedor "Perfiles". Instagram, IMDb, Facebook, LinkedIn y Vimeo tienen todas el mismo peso visual, y al pasar el ratón por encima, cada tarjeta reacciona sutilmente. Ya no son iconos diminutos de footer: son parte del diseño.

Los botones de acción: píldoras con contorno

Para los botones funcionales (Enviar email, WhatsApp, Abrir Film, etc.) elegí un estilo de píldora con contorno fino y fondo translúcido. Nada de botones sólidos que gritan "clicka aquí". Aquí el botón invita sin presionar, y al hacer hover cambia su opacidad y su fondo ligeramente para confirmar la interacción. Cada botón lleva además un pequeño icono contextual a la izquierda del texto, lo que mejora la escaneabilidad y añade personalidad.

El footer: elegancia y firma de autor

El pie de página respeta la misma filosofía del resto: nada innecesario. Solo el copyright de Pablo, los créditos a disenioweb.com como autores de la web, y fondo en el mismo gris luminoso. Sin menús repetidos, sin newsletter forzada. Cuando terminas la web, la sensación es de haber leído una revista bien maquetada, no de haber salido de un centro comercial.

Detalles técnicos que no se ven pero se notan

• Navegación por anclas con scroll suavizado para que al pulsar una píldora del menú, la página se deslice elegantemente hasta la sección en lugar de saltar bruscamente.
• Carga optimizada de imágenes, usando formatos modernos y lazy loading para que la web cargue rápido en móviles y conexiones lentas.
• Diseño completamente responsive: la misma web se adapta a iPhone, iPad y escritorio, reordenando bloques y ajustando tamaños sin romperse nunca.
• Páginas independientes para Film, Commercial y Gear, para que cada vertical del trabajo de Pablo tenga su propio espacio sin saturar la home.
• Hosting propio incluido, con certificado SSL activo y dominio configurado. Pablo no tiene que preocuparse por renovaciones ni mantenimiento técnico: todo forma parte del servicio.

El resultado

Pablo ahora tiene una web de presentación que está a la altura de su trabajo. Una página limpia, moderna y profesional que puede enviar con orgullo a cualquier productora, agencia o cliente potencial.

Y lo más importante: las consultas están subiendo. Desde el lanzamiento, sus futuras ofertas y proyectos están creciendo, lo que confirma que una buena web no es un gasto, es una inversión que trabaja para ti las 24 horas.