RESUMEN
Project overview
Campos es un proyecto documental cinematográfico que narra historias de resistencia, comunidad e identidad a través del fútbol en las regiones despobladas de la España vaciada. El objetivo principal era crear una plataforma web promocional de altísimo impacto visual que no solo informara sobre el proyecto, sino que trasladara la atmósfera y la carga emocional del documental al entorno digital. El diseño final se convirtió en la principal herramienta de pitch comercial, sirviendo de escaparate clave para captar el interés de grandes distribuidoras.
PLANTEAMIENTO
El Problema y los Objetivos
El formato tradicional de las páginas web informativas suele ser plano y estático, lo cual chocaba directamente con la naturaleza cinematográfica y artística de un documental. El desafío de UX/UI consistía en traducir la narrativa audiovisual a una experiencia web interactiva que retuviera al usuario, generara impacto emocional inmediato y transmitiera profesionalidad a posibles inversores.
- Impacto Visual y Diferenciación: Crear una interfaz disruptiva que capturara la atención de críticos y distribuidoras en los primeros segundos de navegación.
- Adaptabilidad Extrema (Responsive): Asegurar que las complejas composiciones visuales y animaciones se ejecutaran de forma fluida tanto en dispositivos móviles como en pantallas de alta resolución.
- Conversión de Negocio: Guiar sutilmente al usuario hacia el visionado del tráiler y el contacto directo con la productora.
- El Factor Humano: Al ser originaria de un pequeño pueblo de Palencia, pude aportar una perspectiva interna única a la fase de investigación. Entendía el arraigo, la nostalgia y la poética de los espacios rurales. Esto guió las decisiones de diseño desde la máxima autenticidad, asegurando que la interfaz se sintiera respetuosa con la realidad que el documental retrata.
BENCHMARKING
Investigación y Enfoque creativo
El proceso de benchmarking analizó plataformas y landings de cine independiente. Identificamos que las webs más exitosas utilizaban el espacio en blanco y la tipografía a gran escala para generar tensión dramática. La dirección de arte se inspiró directamente en la geometría del deporte: las líneas de cal que delimitan un campo de fútbol. Utilicé líneas que segmentan la pantalla y estructuran los diferentes apartados. A través del scroll y hover, estas líneas crecen, se cruzan y se transforman de forma dinámica, guiando el ojo del usuario a través del relato.
Desarrollo
Front-End: Animación y desarrollo
Diseñar una web con líneas vivas y animaciones que mutan según el dispositivo requería un
control estricto
de la viabilidad técnica. Mi conocimiento en Front-End me permitió plantear el comportamiento
estructural
bajo la lógica de CSS Grid y Flexbox desde Figma.
Además de diseñar para puntos de ruptura estáticos, planteé un comportamiento
"líquido", calculando contenedores escalables proporcionalmente. De manera que parte del desarrollo
se realizaba a la par que el diseño, para asegurar la viabilidad de los elementos.
CONCLUSIONES
Resultados y aprendizaje
La plataforma web superó las expectativas comerciales del equipo de producción. Funcionó como el dossier digital interactivo definitivo en reuniones clave de la industria, contribuyendo de forma directa a cerrar un acuerdo de distribución con Castilla y León televisión.
