Un sitio web para dar vida a un documental histórico

El Cliente

Carles Benpar

Carles Benpar (Barcelona, 1947) es un director, guionista y productor reconocido por su compromiso con la preservación del cine y su defensa de la libertad artística. Ha ganado dos Premios Goya al Mejor Documental por Cineastas contra magnates (2006) y Cineastas en acción (2007), obras que denuncian la manipulación cinematográfica. Su filmografía abarca desde el cine de ficción hasta el documental histórico, explorando temas de identidad, justicia y memoria. Ha dirigido películas como Escapada Final, El género femenino y La verdad oculta, además de participar en proyectos televisivos y publicar estudios sobre cineastas como Nicholas Ray. Su trabajo se distingue por un enfoque narrativo riguroso y una profunda reflexión sobre el poder del cine como herramienta de denuncia y memoria histórica.

El Documental

"Llibertat Decapitada"

Se trata de un documental que reconstruye los últimos días de vida del General Josep Moragues, símbolo de la resistencia catalana durante la Guerra de Sucesión Española. A través de un enfoque cinematográfico basado en documentación histórica, la película explora su lucha contra el absolutismo borbónico, su captura en 1715 y su brutal ejecución como advertencia para quienes se oponían al dominio de Felipe V. Con una narrativa inmersiva y una cuidada fotografía que refleja el viaje de Moragues desde la esperanza hasta el sacrificio, el documental reivindica su figura, hasta ahora injustamente olvidada. Más allá de un relato histórico, Llibertat Decapitada es una reflexión sobre la memoria, la resistencia y el precio de la libertad, situando a Moragues en el lugar que merece dentro del imaginario colectivo.

Equipo de trabajo

Carles Benpar → Director de cine, responsable de la estrategia de presentación para inversores y coordinación de tiempos.

Néstor F. → Dibujante y diseñador visual, encargado de proporcionar elementos gráficos y multimedia.

Anna B. → Coordinadora de información y redactora de textos, asegurando la coherencia y calidad del contenido.

Cristina R. → Traductora, encargada de adaptar los textos a diferentes idiomas según las necesidades del público.

Guille Herrera → Responsable de la identidad gráfica, diseño visual, experiencia de usuario, diseño de interfaz y desarrollo del sitio web. También me encargué de la revisión de contenidos y la puesta en marcha del sitio.

Duración

Proyecto de 7 meses.

• Investigación y síntesis:
  2 meses (enero-febrero)
• Ideación, Prototipado y pruebas:
  2 meses (marzo-abril)
• Desarrollo y puesta en marcha:
  3 meses (mayo-julio)

Desafío del proyecto

El sitio web debía cumplir con dos objetivos principales: por un lado, atraer inversores presentando la película de manera atractiva; por otro, persuadir al órgano gubernamental destacando el valor cultural y social del documental, enfatizando su relevancia histórica como justificación para recibir subvenciones. Para lograrlo, fue fundamental estructurar la información de manera clara y persuasiva sin sobrecargar al usuario, equilibrando contenido textual y visual para mantener el interés de ambos públicos. Además, se diseñó una experiencia de usuario intuitiva con una navegación fluida y una interfaz completamente responsive para garantizar un acceso óptimo en dispositivos móviles y de escritorio.

Investigación y síntesis

Durante las primeras reuniones con el cliente aprovechamos su extensa experiencia en producción cinematográfica, para obtener información clave, definir el público objetivo y establecer los objetivos de la investigación.

Investigación

Objetivo

Determinar la mejor manera de presentar el documental para:

• Atraer inversores del sector audiovisual interesados en financiar proyectos cinematográficos.
• Convencer a organismos gubernamentales encargados de otorgar subvenciones culturales.

Público Objetivo

Inversores en cine

• Productoras, fondos de inversión en cine, empresas privadas con interés en el sector.

Organismos gubernamentales de subvención

• Funcionarios o expertos encargados de evaluar proyectos para recibir financiamiento público.

Metodología de Investigación

Dado que el acceso directo al público objetivo era limitado, se diseñó un plan ágil y eficiente.

• Investigación secundaria (Desk Research)
• Entrevistas con expertos del sector
• Validación con organismos gubernamentales

Definición y Síntesis

Objetivo

Con los elementos clave definidos y un conocimiento profundo del público objetivo, el siguiente paso fue convertir la investigación en soluciones de diseño tangibles. A través de un proceso de ideación estructurado, se exploraron diferentes enfoques para presentar el documental de manera clara y persuasiva. Se desarrollaron prototipos iterativos, priorizando la jerarquía visual y la usabilidad, asegurando que la experiencia fuera intuitiva y efectiva para atraer inversores y cumplir con los criterios de financiamiento de los organismos públicos.

En busca de ideas

Dado el tamaño reducido del equipo, los recursos limitados y el tiempo acotado, la estrategia se centró en aplicar técnicas de ideación ágiles, eficientes y de bajo costo.

Brainwriting rápido

• Se establece que el diseño se desarrollará inicialmente en versión escritorio, permitiendo maximizar el impacto visual y garantizar una estructura sólida y bien jerarquizada. Posteriormente, se trabajará en la adaptación a distintos tamaños de pantalla mediante un enfoque responsive, asegurando que la experiencia de usuario se mantenga consistente y que el diseño conserve su fuerza y efectividad en cualquier dispositivo.
• Durante la sesión de Brainwriting, emergieron varios puntos clave para la estructura y funcionalidad del sitio web. Dos participantes coincidieron en la importancia de ofrecer la página en tres idiomas (catalán, español e inglés) para ampliar el alcance del documental a nivel local e internacional. También se discutieron diversas soluciones para gestionar el acceso a documentación sensible, como el guion de la película, asegurando que esté disponible bajo demanda.

Card Sorting con Post-its

• A partir de la sesión de Card Sorting, se identificaron ajustes clave en la estructura del sitio web. Se propuso una estructura base de 3 pilares: “El General Moragues”, “Llibertat Decapitada”, y “Carles Benpar”. También, después de probar varias alternativas, nos decantamos por subdividir la pestaña “Llibertat Decapitada” en “Sinopsis”, “Guión”, “Teaser” y “Reparto”.

Sketching rápido (Crazy 8's)

• Se realizaron ocho bocetos en ocho minutos para explorar distintas versiones de la pantalla de inicio. El objetivo era identificar oportunidades de diseño que potenciaran la solución final, equilibrando un impacto visual atractivo con una presentación clara y efectiva de la información sobre la película.

Mapa del sitio

Tras la investigación de usuario, identificamos que el público objetivo necesita comprender tanto el valor del documental como la trayectoria de quienes lo llevan adelante. Para ello, la información debía presentarse de manera clara, bien estructurada y alineada con las expectativas de inversores y organismos de financiamiento.



Este proceso de depuración y refinamiento permitió crear una estructura sólida, equilibrando rigor informativo y atractivo visual, asegurando que cada sección respondiera a las necesidades del público y fortaleciera la presentación del documental.

Paper Wireframe

Tras las sesiones de ideación, el enfoque se centró en el diseño de las dos pantallas de entrada al sitio web: la Selección de Idioma y la página de inicio.

Digital Wireframe

Después de estructurar la base del sitio web en papel, los bocetos fueron digitalizados para definir con mayor precisión cada una de las pantallas y avanzar hacia un prototipo de baja fidelidad, permitiendo realizar las primeras pruebas de usabilidad y ajustes iniciales.

Prototipo de baja fidelidad

Una vez finalizado el diseño de todas las pantallas, se procedió a interconectarlas en Figma, creando un flujo de navegación que simula la experiencia real del usuario dentro del sitio web. Este proceso permitió estructurar la interacción entre las diferentes secciones y preparar el prototipo funcional necesario para la prueba de usabilidad, asegurando que el recorrido del usuario fuera fluido e intuitivo antes de avanzar a la siguiente fase de validación y ajustes.

Estudio de Usabilidad

Dado el contexto del proyecto, se ha diseñado una prueba de usabilidad eficiente, enfocada en validar la experiencia del usuario en base a las necesidades específicas de los perfiles clave: inversores y organismos gubernamentales.

El estudio de usabilidad fue altamente valioso, ya que los usuarios, con amplia experiencia en el sector, participaron de manera colaborativa, proporcionando aportes generosos y precisos que enriquecieron el proceso de diseño.

Hallazgos y oportunidades de mejora

Validación de la estructura por parte del cliente

Dado el profundo conocimiento del cliente sobre la industria cinematográfica, se decidió complementar el estudio de usabilidad con una reunión específica para validar los hallazgos antes de avanzar al prototipo de alta fidelidad. Esta instancia permitió asegurar que las mejoras implementadas estuvieran alineadas con las expectativas y visión del cliente, garantizando un equilibrio entre usabilidad y control sobre el sitio web.

El cliente validó los hallazgos, y además, solicitó la incorporación de una nueva pestaña en el menú de navegación titulada "Imágenes", destinada a exhibir una galería con fotografías de su trayectoria como director. Con esta adición, se buscó reforzar su experiencia y consolidar su carrera artística dentro del sitio web, añadiendo un valor diferencial a la presentación del proyecto.

Diseño final y pruebas

Decisión de omitir el prototipo de alta fidelidad

Se tomó la decisión de avanzar directamente al desarrollo final, omitiendo la fase de prototipado de alta fidelidad, debido a diversas razones estratégicas que optimizan el tiempo y los recursos del proyecto.

En primer lugar, la estructura del sitio web ya estaba bien definida y validada. El cliente aprobó el prototipo de baja fidelidad y realizó los ajustes necesarios, sin prever cambios significativos en la arquitectura o disposición del contenido. Además, el sitio web tiene una función principalmente informativa, con una estructura clara y sencilla que no requiere una simulación visual detallada antes del desarrollo.

Por último, dado que tanto el diseño como el desarrollo están bajo mi responsabilidad, la transición directa al código permite una mayor eficiencia en la implementación, evitando pasos intermedios innecesarios. Antes de iniciar el desarrollo, se acordaron con el cliente tanto la estructura del sitio como los elementos visuales, asegurando una ejecución alineada con sus expectativas y necesidades.

Diseño visual

Para el desarrollo visual del sitio web, se tomó como base la identidad gráfica previamente establecida por Carles Benpar y su equipo para el documental. Con el objetivo de garantizar coherencia estética y conceptual, se realizaron varias reuniones con el cliente y el equipo de diseño, donde se definieron los lineamientos clave para la adaptación de estos elementos al entorno digital.

Desarrollo del sitio web

El sitio web fue desarrollado íntegramente utilizando HTML, CSS y JavaScript, garantizando una estructura semántica clara, un diseño flexible y una experiencia de usuario fluida. Se priorizó la accesibilidad, asegurando compatibilidad con lectores de pantalla y estándares web, así como una optimización de carga eficiente, permitiendo tiempos de respuesta rápidos en distintos dispositivos y conexiones. La implementación de código limpio y modular facilita la escalabilidad del proyecto y futuras actualizaciones, asegurando su mantenimiento y rendimiento a largo plazo.

Optimización para móviles

Dado que nuestro público objetivo —inversores y organismos gubernamentales— analiza la información principalmente en ordenadores de oficina, el diseño y desarrollo se enfocaron primero en la versión de escritorio para garantizar una presentación clara y profesional en pantallas grandes. Sin embargo, para asegurar accesibilidad y compatibilidad en distintos dispositivos, se implementó un diseño responsive optimizado para móviles y tablets.

Adaptación de usabilidad y rendimiento

La adaptación para dispositivos móviles no solo fue una cuestión de escala, sino también de usabilidad y rendimiento. Se realizaron ajustes específicos para mejorar la experiencia en pantallas más pequeñas:

• Ajustes en el layout.
• Mejoras en carga y rendimiento.
• Accesibilidad en dispositivos móviles.

Pruebas de validación

Para garantizar que el sitio web cumpliera con los objetivos de comunicación y navegación esperados, se llevó a cabo una fase de validación final, en la que se evaluaron los ajustes realizados tras la prueba de usabilidad inicial.

Dado que el equipo y los recursos eran limitados, se optó por un enfoque mixto, combinando participantes que ya habían realizado la prueba de usabilidad con un usuario nuevo. Este enfoque permitió confirmar que las mejoras solucionaban los problemas detectados previamente, al mismo tiempo que se evaluaba la experiencia desde la perspectiva de alguien que navegaba el sitio por primera vez.

Ajustes finales

Las pruebas de validación permitieron confirmar que los cambios implementados optimizaron la navegación del sitio y facilitaron el acceso a la información clave para ambos grupos de usuarios. La experiencia de usuario resultó fluida tanto en escritorio como en dispositivos móviles, sin que los nuevos usuarios encontraran problemas de navegación o accesibilidad.

Se realizaron ajustes menores en la interfaz, incluyendo correcciones en el interlineado, márgenes y el tamaño de algunas imágenes en secciones específicas, asegurando un diseño más equilibrado y legible.

Durante la reunión final de validación con el cliente, se solicitaron cambios en la nomenclatura de algunas secciones. "El General Moragues" pasó a llamarse "El General Moragues y su tiempo", mientras que "Llibertat Decapitada" se renombró como "La Película". Además, se incorporó una nueva página titulada "Memoria de Intenciones", un espacio donde el autor expone sus motivaciones y visión artística detrás del documental, proporcionando un contexto más profundo sobre el proyecto.

Solución implementada

Diseño limpio y estructurado

Desde el inicio del proyecto, uno de los principales objetivos fue lograr un diseño UX/UI claro, funcional y alineado con las necesidades del público objetivo. Dado que los usuarios principales —inversores y organismos gubernamentales— suelen analizar información en entornos profesionales, se priorizó una estructura visual ordenada, con jerarquía bien definida y una experiencia de usuario intuitiva.

Información destacada para inversores y organismos gubernamentales

El sitio web fue diseñado para proporcionar a inversores y organismos gubernamentales un acceso rápido y estructurado a la información clave del proyecto. Secciones como la sinopsis, el guion, el teaser y la trayectoria del director fueron organizadas de manera estratégica para transmitir la relevancia histórica y cultural del documental, así como su viabilidad como producción cinematográfica.

Para los inversores, se priorizó la presentación clara del proyecto, permitiendo que evalúen rápidamente el potencial del film y accedan a material relevante como el guion. Para los organismos gubernamentales, se reforzó la importancia del documental en el contexto cultural e histórico, destacando la trayectoria del director como un aval de credibilidad para la obtención de financiamiento.

Mockups

Aprendizajes y reflexión

Próximos pasos

Dado que el sitio web fue concebido como una plataforma informativa y estática, su desarrollo se dio por finalizado una vez que se subió al servidor y se verificó su correcto funcionamiento. No se planificaron futuras actualizaciones ni se contempló una fase de iteración continua, ya que el control del sitio quedó en manos del cliente.

Tras la publicación, se realizaron ajustes menores a pedido del cliente, como pequeñas correcciones gramaticales en los textos, reubicación de imágenes y pequeñas optimizaciones de contenido. Estas correcciones fueron gestionadas de manera ágil para asegurar que el sitio reflejara con precisión la visión del director y cumpliera con su propósito de presentación ante inversores y organismos gubernamentales.

Impacto del proyecto

El sitio cumplió su propósito con creces: fue una herramienta fundamental para presentar el documental ante inversores y organismos gubernamentales. El cliente quedó muy satisfecho y lo utilizó como tarjeta de presentación digital para mostrar su trayectoria profesional y difundir su obra.

Gracias al sitio, el proyecto logró apoyo económico del Institut Català de les Empreses Culturals (ICEC). Esto evidenció el impacto positivo de la estrategia digital en la comunicación institucional del documental.

Aunque la producción quedó suspendida por la pandemia, el sitio permaneció activo durante varios años, funcionando como una pieza clave en la identidad pública del director y su trabajo cinematográfico.

Este proyecto me enseñó a equilibrar la visión del cliente con las necesidades del usuario, integrando decisiones UX estratégicas sin comprometer la identidad visual. La colaboración con un director con una fuerte perspectiva estética me permitió fortalecer mis habilidades de argumentación y negociación, asegurando una navegación intuitiva sin perder el carácter del documental.

Además, la gestión del tiempo y la optimización de recursos multimedia fueron desafíos clave. Implementé un flujo de trabajo eficiente para procesar imágenes sin sacrificar calidad y mantuve una comunicación clara para manejar retrasos en la entrega de contenidos.

En definitiva, reafirmé que un diseño exitoso no es solo visualmente atractivo, sino funcional, estratégico y adaptable a las necesidades del cliente y del usuario.