Bokeh UI: una propuesta de diseño visual
Los grandes lenguajes de diseño de interfaces tienen una metáfora en el centro. Material Design tomó el papel y la tinta, la física de las superficies, las sombras y la luz. Fluent Design tomó la transparencia, el acrílico y la profundidad. Cada uno encontró un referente del mundo físico y lo tradujo al mundo de las pantallas.
En julio de 2020 empecé a explorar una metáfora que nadie había llevado hasta sus últimas consecuencias en interfaces: la fotografía.
No las fotos. No los filtros. La óptica.
El punto de partida: Microsoft y el showcase
Todo empezó observando algo curioso en Microsoft. En sus materiales de marketing y presentaciones de concepto, usaban efectos visuales que nunca terminaban apareciendo en las interfaces reales de sus productos. Efectos de profundidad, bokeh, desenfoque selectivo. Cosas que se veían espectaculares en el showcase pero que desaparecían en la versión de producción.
La pregunta fue: ¿por qué nadie había intentado llevarlo en serio a las interfaces? ¿Por qué el blur siempre era de fondo y nunca del elemento en primer plano?
Bokeh UI: la propuesta
Lo que empecé a llamar Bokeh UI toma prestados los artefactos de la óptica fotográfica para crear jerarquía visual, profundidad y foco en las interfaces.
La diferencia clave respecto a Material o Fluent es dónde cae el efecto. En Material, las sombras y superficies crean profundidad entre capas. En Fluent, el background blur crea contexto. En Bokeh UI, el efecto va sobre el elemento enfocado y su relación con la profundidad de campo, igual que un lente que aisla un sujeto del fondo.
En la práctica esto significaría: cuando interactúas con un elemento —un botón, una tarjeta, un modal— los elementos que no son el punto de atención se desvanecen ligeramente, como si la cámara hubiera enfocado en lo que importa y dejado el resto fuera de foco. No desaparecen. Se subordinan.
Chromatic aberration: el artefacto inesperado
Otro artefacto de la óptica que exploré es la aberración cromática: el fenómeno que ocurre cuando un lente no maneja correctamente las longitudes de onda de la luz y cada color se refracta en una dirección ligeramente distinta. El resultado visual es ese borde de color —rojo, cian, púrpura— que aparece en los bordes de las fotografías tomadas con lentes de menor calidad.
La aberración cromática es técnicamente un defecto. Pero visualmente tiene algo. Los videojuegos la usan mucho, precisamente porque transmite una sensación de realismo imperfecto, de lente físico, de mundo captado y no renderizado.
En interfaces podría usarse de forma sutil en transiciones o en estados de error, transmitiendo una sensación de distorsión controlada, de que algo salió del plano habitual.
Motion blur: movimiento con peso
El tercer elemento fue el motion blur: el rastro de movimiento que queda cuando un objeto se desplaza rápidamente frente a un sensor. En interfaces, el movimiento suele ser o demasiado instantáneo —sin sensación de física— o con easing curves que se sienten artificiales.
El motion blur aplicado a animaciones de interfaz podría dar la sensación de que los elementos tienen masa, que se desplazan en un espacio con inercia real. No como un filtro encima, sino como parte de la lógica de movimiento.
El reto que sigue abierto
La propuesta terminó con una promesa: explorar estas ideas en prototipos y compartirlos. El reto que sigue siendo válido hoy es que todos estos artefactos se ven bien en fotografía y video, pero trasladarlos a interfaces implica resolver problemas de rendimiento, accesibilidad y consistencia que no son triviales.
¿Cuándo el blur deja de ser jerarquía y se convierte en distracción? ¿Cómo manejas la aberración cromática en pantallas de baja resolución? ¿El motion blur ayuda a entender el movimiento o lo oscurece?
Son preguntas abiertas. Pero la metáfora sigue siendo válida: la fotografía lleva más de un siglo resolviendo cómo dirigir la atención de quien mira. Las interfaces todavía tienen mucho que aprender de ese lenguaje.