Olivia Monzón Rodríguez — Design Portfolio

01 · Introducción

De los semitonos a una herramienta interactiva

Mi objetivo en este proyecto era aprender cómo las ideas visuales y las funciones interactivas podían convertirse en un producto. Como me interesa estudiar diseño, quería entender cómo una interfaz puede hacer que una herramienta creativa resulte clara para otras personas. Al decidir qué tipo de aplicación crear, volví a mi interés por los semitonos. Mi experiencia con el modelado 3D me llevó a explorar cómo un efecto de semitonos podría responder al video y extenderse en tres dimensiones. Vi la oportunidad de desarrollar la idea como una herramienta creativa flexible, no solo como un efecto visual. Esa exploración se convirtió en Video Plane Studio y me permitió estudiar el diseño de interfaces a través de una idea visual que me interesaba.

02 · Proceso

Usar la IA de forma intencional

A medida que la IA adquiere más presencia en el trabajo creativo y técnico, quería entender cómo utilizarla de manera intencional. Como no tengo experiencia en programación, vi este proyecto como una oportunidad para explorar cómo la IA podía ayudarme a desarrollar una aplicación funcional mientras aprendía sobre diseño de interfaces. Durante el desarrollo, dirigí todas las decisiones de producto y diseño, definiendo cómo quería que cada función se viera y se comportara. El proceso consistió en proporcionar ejemplos, probar cada resultado y especificar lo que todavía debía corregirse o perfeccionarse. Aunque dirigir a la IA no es lo mismo que trabajar directamente con un programador, me dio experiencia para traducir ideas visuales en instrucciones precisas, algo importante cuando diseñadores y desarrolladores colaboran para crear productos funcionales. Este proceso me ayudó a organizar mejor mis ideas, describir decisiones visuales y dar indicaciones claras.

03 · Funcionalidad

Crear un sistema visual flexible

Una vez definida la dirección del proyecto, me concentré en desarrollar las funciones principales. Mi experiencia previa con Cinema 4D me ayudó a desarrollar colisiones entre símbolos, desplazamientos en el eje Z que crean profundidad, variaciones aleatorias en la escala y posición de la cuadrícula, y controles de iluminación y HDRI. También influyó en mi decisión de permitir que las personas subieran modelos 3D personalizados en lugar de usar los símbolos predeterminados. Como el efecto inicial se basaba en video, usar imágenes de la cámara web parecía un punto de partida natural. Sin embargo, añadí un video de muestra para que cualquiera pudiera probar la aplicación sin necesitar una cámara ni aparecer en pantalla. Al ampliar las fuentes, empecé a considerar cómo podría responder el efecto al audio en vivo. El audio era especialmente difícil porque no ofrece una imagen reconocible que los símbolos puedan reconstruir. Me centré en cómo la frecuencia del audio podía afectar a los símbolos y usé el color para hacer que la respuesta resultara visualmente interesante. Cuando estas funciones empezaron a trabajar juntas, el proyecto pasó de ser un único efecto de video a un sistema capaz de producir una gama más amplia de resultados.

04 · Interfaz

Hacer accesibles los controles complejos

A medida que la aplicación se volvía más compleja, tuve que reconsiderar cómo quería que las personas la experimentaran. Al principio la imaginaba como una presentación de efectos que yo ya había creado, pero comprendí que lo más interesante era el proceso de experimentar con los ajustes. Por eso decidí hacer que los efectos fueran editables, para que otras personas pudieran participar en esa exploración. Sin embargo, mostrar todos los controles desde el principio hacía que la aplicación resultara abrumadora. Para resolverlo, pensé en cómo la jerarquía visual guía la lectura en libros y carteles. Consideré cómo se leería la interfaz de izquierda a derecha, cómo el color podía separar la información y cómo un simple botón podía ocultar los controles detallados hasta que fueran necesarios. Estas decisiones permitieron que la interfaz comenzara con una pequeña selección de ajustes preestablecidos antes de mostrar sus herramientas. Organizarla de este modo me ayudó a comprender mejor cómo la jerarquía visual puede hacer más accesible una interfaz compleja.

05 · Ajuste preestablecido

Diseñar con la limitación del blanco y negro

Uno de los efectos más difíciles de desarrollar fue un ajuste de cámara web en blanco y negro. El color había hecho visualmente interesantes muchos de mis experimentos anteriores, así que eliminarlo puso más énfasis en el comportamiento de los símbolos. Si utilizaba un efecto que no se adaptara a la ausencia de color, el resultado podía parecer demasiado simple o desconectado del resto del ajuste. Después de varios intentos, usé símbolos cuadrados planos y un sistema de colisiones que reacciona con más fuerza en las zonas de mayor movimiento. Juntas, estas decisiones crearon un efecto de interferencia pixelada que funcionaba con la imagen en blanco y negro en lugar de verse limitado por ella. Para mí, diseñar consiste en identificar un problema y desarrollar una solución cuidadosamente pensada. Este ajuste se convirtió en un pequeño ejemplo de ese proceso y reforzó la importancia de responder a una limitación en vez de imponer una idea.

06 · Conclusión

Una invitación a experimentar

Comencé Video Plane Studio como una forma de aprender a comunicar una idea mediante una interfaz de usuario. A lo largo de ese proceso, la aplicación creció al reunir mis intereses previos con nuevas ideas y herramientas. De este modo, refleja mi convicción de que crear algo nuevo no significa empezar desde cero. Darme cuenta de esto me llevó a pensar en cómo la aplicación podía fomentar la experimentación más allá de mi propio proceso. Hacer que los efectos fueran editables transformó la aplicación final: dejó de ser una presentación de mi trabajo y se convirtió en una herramienta interactiva que invita a otras personas a experimentar y crear algo propio.