Liquid Glass transforma el sistema de diseño de iOS 18/19 al introducir una interfaz más translúcida, dinámica e inmersiva, que los diseñadores web pueden adaptar con método sin sacrificar la UX, la legibilidad ni el rendimiento.
Liquid Glass en iOS 18/19: lo que realmente cambia en la interfaz de Apple
Liquid Glass marca una ruptura visual importante en el ecosistema Apple. Presentado en continuidad con las evoluciones anunciadas en la WWDC 2025, este lenguaje gráfico pone en valor superficies transparentes, efectos de profundidad y componentes que parecen reaccionar al contenido mostrado detrás de ellos.
El principio no consiste solo en hacer que la interfaz sea más brillante. Apple busca dar más importancia al contenido, al tiempo que hace que los menús, los botones, los widgets y las barras de navegación sean visualmente más ligeros.
En los debates en torno a iOS 18/19, Liquid Glass representa sobre todo una dirección clara: la interfaz móvil se vuelve menos plana, más contextual y más sensible al movimiento. Este cambio ya influye en la forma en que las agencias web, los diseñadores de producto y los desarrolladores front-end piensan las interfaces modernas.
Para una agencia como DualMedia, especializada en web y móvil, el reto consiste en traducir esta estética en experiencias web concretas, rápidas y accesibles. Por tanto, la verdadera cuestión no es copiar a Apple, sino comprender las reglas visuales que hacen útil este enfoque.
Por qué Liquid Glass es más que un simple efecto de transparencia
La transparencia no es más que la parte visible del concepto. Liquid Glass se basa en un conjunto de efectos combinados: translucidez, refracción, adaptación al fondo, morphing, redondeados acentuados y animaciones fluidas.
Un botón ya no se limita a estar colocado en la pantalla. Flota, deja entrever su entorno, cambia ligeramente según el modo claro u oscuro, y luego acompaña el gesto del usuario mediante una transición progresiva.
Esta lógica recuerda algunas intenciones de visionOS, diseñado para el Apple Vision Pro. La profundidad, las capas visuales y los elementos flotantes se convierten en referencias naturales para guiar la mirada sin saturar la pantalla.
En la web, este enfoque puede enriquecer una interfaz de reservas, un panel de control SaaS, un área de cliente o una aplicación empresarial. Se vuelve pertinente en cuanto mejora la jerarquía visual en lugar de producir un simple efecto de moda.
Las características clave del sistema de diseño Liquid Glass
Liquid Glass combina varias decisiones de interfaz que funcionan juntas. Por separado, estos efectos ya existen en el diseño web, especialmente con el glassmorphism, pero Apple los lleva hacia una coherencia de sistema más avanzada.
El hilo conductor es simple: reducir la sensación de rigidez y reforzar la continuidad entre las pantallas. El usuario debe sentir que la interfaz se adapta a su acción, a su contexto y al contenido visible.
- Superficies translúcidas que dejan percibir el contenido subyacente sin desaparecer por completo.
- Controles flotantes, a menudo redondeados, que parecen colocados por encima de la interfaz principal.
- Animaciones de transformación progresivas entre dos estados, cercanas a un efecto de morphing.
- Reflejos y variaciones luminosas que refuerzan la percepción de profundidad.
- Una adaptación al modo claro, al modo oscuro y a los fondos colorados.
- Una unificación visual entre iPhone, iPad, Mac, Apple Watch, Apple TV e interfaces inmersivas.
Estos elementos no deben aplicarse mecánicamente. Una interfaz lograda selecciona los efectos útiles, los limita a las zonas importantes y conserva referencias sólidas para la navegación.
Liquid Glass y UX: el riesgo principal sigue siendo la legibilidad
El diseño Liquid Glass resulta seductor a primera vista, pero impone una disciplina estricta. Demasiada transparencia puede hacer que los textos sean difíciles de leer, sobre todo sobre fondos colorados, fotos contrastadas o interfaces muy recargadas.
Apple ha previsto opciones de accesibilidad, en particular la reducción de la transparencia. Esta decisión recuerda un principio fundamental de la UX: el efecto visual nunca debe prevalecer sobre la comprensión.
En un sitio web, el mismo problema aparece rápidamente. Una barra de navegación translúcida colocada sobre una foto puede resultar elegante en desktop, pero volverse ilegible en móvil si no se controla el contraste.
Por tanto, un trabajo serio debe integrar las reglas de contraste, los tamaños de fuente, los estados de foco, las preferencias del usuario y las pruebas en pantallas reales. Los equipos que trabajan en laDiseño UX saben que la estética solo vale si acelera la acción.
Cómo adoptar Liquid Glass en la web sin degradar el rendormiento
Adaptar Liquid Glass a la web requiere un enfoque pragmático. Los efectos de desenfoque, transparencia y capas visuales pueden resultar costosos si cada componente utiliza filtros pesados o animaciones permanentes.
El buen método consiste en reservar estos efectos para los componentes de forte valor: navegación, tarjetas principales, modales, botones de acción, widgets de panel de bord o paneles contextuales. El resto de la interfaz debe mantenerse sobrio para preservar la velocidad de visualización.
En CSS, propiedades como backdrop-filter, border-radius, opacity, transform y transition ya permiten reproducir parte de esta estética. Para resultados más avanzados, SVG y WebGL pueden enriquecer ciertos efectos, pero deben utilizarse con moderación.
En un proyecto de cliente, DualMedia suele dar prioridad a una fase de prototipado antes de la integración completa. Esta etapa permite validar el equilibrio entre apariencia, accesibilidad y performancia, en particular en móvil.
| Elemento Liquid Glass | Adaptación web recomendada | Puntos a tener en cuenta |
|---|---|---|
| Superficie translúcida | Utilizar un fondo semitransparente con desenfoque controlado | Mantener un contraste suficiente para los textos |
| Control flotante | Crear componentes redondeados con una sombra ligera | Evitar ocultar el contenido importante |
| Animación líquida | Preferir transform y opacity para transiciones fluidas | Limitar las animaciones continuas en móvil |
| Reflejo dinámico | Emplear un degradado sutil o un pseudoelemento | No crear distracción visual |
| Interfaz adaptativa | Prever variantes clara, oscura y de contraste reforzordo | Respetar las preferencias de accesibilidad |
Esta tabla resume una regla esencial: la web puede inspirarse en Liquid Glass, pero debe seguir siendo más selectiva que un sistema operativo controlado de principio a fin.
La relación entre Liquid Glass, glassmorphism y flat design
Liquid Glass no surge de la nada. Prolonga varias tendencias ya conocidas: el skeuomorphismo historrico de Apple, el flat design y después el glassmorphism popularizado en numerosas interfaces SaaS.
El flat design simplificó las pantallas al eliminar los efectos demasiado decorativos. Este enfoque sigue siendo valioso, pero a veces puede producir interfaces frías, donde los niveles de importancia carecen de relieve.
Liquid Glass reintroduce materia sin volver a los excesos de iconos realistas o texturas pesadas. Añade una capa óptica, casi física, pero conserva una lógica minimalista.
Para situar esta evolución en la historia de las interfaces, es útil comparar con los principios del diseño plano. El futuro del diseño web no consiste en elegir un bando, sino en combinar sobriedad, profundidad y legibilidad.
Los componentes web que hay que replantear con Liquid Glass
Algunos componentes se prestan mejor que otros a una adaptación Liquid Glass. La navegación encabeza la lista, porque estructura la experiencia y sigue siendo visible en numerosos recorridos.
Una navbar translúcida puede dar una impresión de modernidad, siempre que sea estable, legible y compatible con fondos variables. El tema enlaza directamente con las buenas prácticas de una navegación web eficaz, donde la elegancia debe estar siempre al servicio de la orientation.
Las tarjetas de información también son buenas candidatas. En una aplicación empresarial, una tarjeta flotante puede resaltar un indicador clave sin recargar el cuadro de mando.
Los modales, menús contextuales, reproductores de audio, paneles de filtros y widgets de personalización también pueden beneficiarse de este lenguaje visual. Lo imporante es mantener una jerarquía clara entre las acciones principales y secundarias.
Ejemplo concreto: rediseñar una aplicación empresarial con una estética Liquid Glass
Imaginemos una pyme que utiliza una aplicación interna para hacer el seguimiento de sus intervenciones sobre el terreno. La interfaz actual funciona, pero acumula tablas, botones y filtros en un diseño denso.
Un rediseño inspirado en Liquid Glass puede mejorrar la situación sin alterar los usos. Los filtros se convierten en un panel flotante, las alertas críticas utilizan una tarjeta translúcida con buen contraste, y las acciones rápidas aparecen solo cuordo el usuario selecciona una intervención.
Este tipo de decisiones reduce la carga cognitiva. El usuario ve en primer lugar la información prioritaria y luego accede progresivamente a los detalles.
En un contexto profesional, el objetivo no es impresionar con reflejos. Se trata de clarificar el recorrido, agilizar las transiciones y hacer que la herramienta sea más agradable de usar a diario.
Esta lógica también se aplica al desarrollo de aplicaciones de negocio, donde la ergonomía influye directamente en la productividad de los equipos. Una interfaz más moderna puede reducir los errores, acelerar la formación y reforzar la adopción interna.
Liquid Glass y desarrollo móvil: una coherencia que debe preverse desde la concepción
Liquid Glass afecta en primer lugar al universo Apple, pero sus consecuencias van mucho más allá de iOS. Los usuarios se acostumbran a interfaces más fluidas, más reactivas y más integradas entre sus dispositivos.
Por tanto, una aplicación móvil que parezca rígida o anticuada corre el riesgo de generar una desconexión perceptible. Incluso en Android o en la web, crece la expectativa en torno a las transiciones suaves, los componentes adaptativos y las microinteracciones útiles.
Para un proyecto móvil, la coherencia debe pensarse desde las maquetas. Los diseñadores definen los niveles de transparencia, las reglas de movimiento, los estados interactivos y las variantes de accesibilidad antes del desarrollo.
Este enfoque responde también a las exigencias de laingeniería en desarrollo móvil. Cuanto antes se documente el design system, menos tiempo pierde el equipo corrigiendo las incoherencias al final del proyecto.
El papel de la IA en las interfaces inspiradas en Liquid Glass
Liquid Glass llega en un contexto en el que la IA se integra progresivamente en los productos digitales. Apple avanza por etapas: traducción en directo, descripción del contenido mostrado, ayuda contextual, automatizaciones y sugerencias inteligentes.
En la web, la asociación entre diseño adaptativo e inteligencia artificial abre vías interesantes. Una interfaz puede ajustar ciertas recomendaciones, simplificar un recorrido o priorizar ciertas informaciones según el contexto de uso.
Sin embargo, hay que evitar la trampa de la interfaz que cambia demasiado. Si la IA modifica la pantalla sin una lógica clara, el usuario pierde sus referencias y la confianza disminuye.
Los proyectos más sólidos combinan personalización y estabilidad. Esta orientación coincide con las reflexiones sobre la IA y el diseño web, donde la autonomía debe seguir al servicio de la comprensión.
Accesibilidad: adaptar Liquid Glass a los usos reales
Una interfaz translúcida puede ser magnífica en una keynote y menos confortable en el metro, al sol o en una pantalla envejecida. Por tanto, la accesibilidad debe acompañar cada decisión gráfica.
En iOS, la posibilidad de reducir la transparencia muestra que el diseño debe seguir siendo modulable. En la web, esta lógica puede reproducirse con temas alternativos, un modo de contraste reforzado y una atención especial a las preferencias del sistema.
Los estados de enfoque con teclado, los textos sobre fondo difuminado, los botones secundarios y las notificaciones deben probarse seriamente. Una simple variación de fondo puede cambiar por completo la percepción de un componente.
Por tanto, un buen design system inspirado en Liquid Glass prevé varios niveles de intensidad visual. El usuario debe poder disfrutar de una interfaz moderna sin sufrir una fatiga visual innecesaria.
SEO, rendormiento y Liquid Glass: los errores que hay que evitar
Un sitio inspirado en Liquid Glass no debe volverse más lento. Los efectos visuales pesados pueden penalizar la carga, aumentar el consumo de GPU y deterorrar la experiencia móvil.
El SEO también depende de señales técnicas: velocidad, estabilidad visual, accesibilidad, estructura HTML y confort de navegación. Por tanto, una estética avanzada debe integrarse en una estrategia global, no añadirse como decoración final.
Los errores frecuentes son conocidos: vídeos de fondo demasiado pesados, desenfoques excesivos en grandes superficies, animaciones no optimizadas, contraste insuficiente y componentes no accesibles con el teclado. Pueden dar una impresión prémium durante tres segundos y luego degradar todo el recorrido.
Para alinear diseño y visibilidad, conviene apoyarse en un marco técnico completo como una guía SEO actualizada. El rendormiento no es enemigo del diseño; es su condición de uso.
Cómo integrar Liquid Glass en un design system web
Para adoptar Liquid Glass en un sitio o una aplicación, hay que formalizar reglas. Sin design system, cada pantalla corre el riesgo de utilizar un nivel de desenfoque, redondeado o transparencia diferente.
El primer paso consiste en definir los materiales visuales: fondo translúcido, bordura, sombra, reflejo, intensidad del desenfoque y comportamiento en modo oscuro. Después, estas propiedades se convierten en tokens de diseño reutilizables.
La segunda etapa se refiere a los componentes. Una tarjeta, una barra de navegación, un menú desplegable o una ventana modal deben compartir las mismas reglas de estado: reposo, hover, focus, activo, desactivado y error.
Por último, hay que documentar los límites. Por ejemplo, no colocar nunca un texto largo sobre un fondo demasiado transparente, no utilizar varias capas borrosas apiladas o desactivar ciertos efectos en los dispositivos menos potentes.
Este método se une a las grandes tendencias UX/UI para los sitios web. Las interfaces más eficaces no son las que acumulan efectos, sino las que los orchestran con coherencia.
¿Hay que adoptar Liquid Glass en todos los sitios web?
Liquid Glass no se adapta a todos los contextos. Un sitio institucional muy sobrio, una plateforma médica o una interfaz bancaria pueden necesitar un lenguaje visual más estable y más directo.
En cambio, esta estética puede ser pertinente para una startup SaaS, una aplicación móvil, un producto creativo, una plateforma de medios, un panel de bord premium o una experiencia de e-commerce de alta gama. Todo depende de la audiencia, del contexto de uso y del nivel de confianza esperado.
Una buena decisión consiste en probar Liquid Glass en algunos componentes antes de extender el estilo. Una navegación, una tarjeta de producto o un panel de ajustes suelen bastar para medir el impacto real.
DualMedia recomienda generalmente partir de un prototipo clicable y luego confrontarlo con escenarios concretos. Este paso por el uso evita confundir tendencia gráfica y mejoración medible de la experiencia.
Nuestra opinión
Liquid Glass es una de las evoluciones visuales más interesantes del ecosistema Apple, porque vuelve a situar la profundidad, el movimiento y la materia en el centro de la interfaz. Su interés va más allá de iOS 18/19: ya influye en las expectativas de los usuarios respecto a los sitios y aplicaciones modernos.
Su adopción en la web debe seguir siendo mesurada. Bien utilizado, este lenguaje apporta fluidez, una mejor jerarquía visual y una sensación de producto premium; mal utilizado, perjudica la legibilidad, la performance y la accesibilidad.
La mejor aproximación consiste en transformar Liquid Glass en principios de diseño, en lugar de en una simple imitación. Es precisamente en este equilibrio entre estética, técnica, UX y performance donde una agencia web y móvil como DualMedia puede acompañar un proyecto con pertinencia.
¿Qué es Liquid Glass en iOS 18/19?
Liquid Glass es un lenguaje visual basado en la transparencia, la profundidad y las animaciones fluidas. Transforma los componentes de la interfaz en superficies más dinámicas, próximas al vidrio, a la vez que da más espacio al contenido mostrado.
¿Está Liquid Glass sustituyendo al diseño plano?
Liquid Glass no sustituye totalmente al flat design, lo complementa. Conserva una lógica minimalista, pero añade efectos de materia, transparencia y movimiento para estructurar mejor la pantalla.
¿Se puede reproducir Liquid Glass en un sitio web?
Sí, es posible inspirarse en Liquid Glass en la web con CSS, SVG o WebGL. Propiedades como backdrop-filter, los fondos semitransparentes, los bordes suaves y las transiciones permiten crear una estética similar, siempre que se preserve la legibilidad.
¿Liquid Glass es adecuado para las aplicaciones empresariales?
Sí, Liquid Glass puede ser adecuado para una aplicación empresarial si los efectos sirven a la comprensión. Las tarjetas flotantes, los paneles contextuales y los filtros visuales pueden mejoraorr el uso, pero los datos importantes deben seguir siendo perfectamente legibles.
¿Cuáles son los riesgos UX de Liquid Glass?
El principal riesgo UX de Liquid Glass es la pérdida de legibilidad. Una transparencia excesiva, un fondo demasiado recargado o animaciones demasiado presentes pueden ralentizar la comprensión y fatigar al usuario.
¿Impacta Liquid Glass en el rendimiento web?
Sí, algunos efectos Liquid Glass pueden afectar al rendimiento si están mal optimizados. Los filtros de desenfoque, las grandes superficies translúcidas y las animaciones continuas deben limitarse, especialmente en móvil.
¿Cómo hacer accesible una interfaz Liquid Glass?
Una interfaz Liquid Glass accesible debe ofrecer un contraste suficiente y alternativas visuales. Hay que prever un modo más sobrio, respetar las preferencias del sistema y probar los textos sobre distintos fondos.
¿Liquid Glass es adecuado para todos los sitios web?
No, Liquid Glass no conviene a todos los sitios. Es pertinente para interfaces prémium, creativas o de tipo aplicación, pero menos adecuado para servicios que exigen la máxima sobriedad y una lectura inmediata.
¿Qué diferencia hay entre Liquid Glass y glassmorphism?
El glassmorphism es una tendencia gráfica centrada en el efecto de vidrio, mientras que Liquid Glass es un sistema de interfaz más completo. Añade reglas de movimiento, de adaptación al contexto y de coherencia entre platformes.
¿Por qué recurrir a DualMedia para adoptar Liquid Glass en la web?
DualMedia puede ayudar a traducir Liquid Glass en una interfaz web o móvil realmente utilizable. La agencia interviene en la UX, el desarrollo, la performance y la coherencia del sistema de diseño para evitar un simple efecto decorativo.
¿Quieres obtener una cotización detallada para una aplicación móvil o sitio web?
Nuestro equipo de expertos en desarrollo y diseño de DualMedia está listo para hacer realidad sus ideas. Contáctenos hoy mismo para obtener un presupuesto rápido y preciso: contact@dualmedia.fr