Los diseñadores web han ideado trucos muy ingeniosos para darle a su trabajo una sensación de fisicidad.
El glassmorphism es una de esas técnicas. Al combinar un efecto de desenfoque con transparencia, los píxeles adquieren la cualidad ligeramente opaca del vidrio esmerilado, añadiendo un toque de textura y tridimensionalidad al diseño.
Aunque el glassmorphism en sí no es nuevo, el término lleva poco tiempo en el vocabulario de los diseñadores web, ya que fue Michal Malewicz quien lo acuñó apenas en 2020.
La evolución del glassmorphism
Podemos rastrear el glassmorphism actual hasta los intentos primitivos de realismo del esqueuomorfismo. En las décadas de 1990 y principios de los 2000, las computadoras mejoraban sus capacidades gráficas y las velocidades de datos aumentaban. Estos avances permitieron a los diseñadores crear sitios web que dependían más de lo visual, haciendo posible el esqueuomorfismo.
En lugar de crear elementos de interfaz novedosos, los diseñadores se centraron en replicar lo que la gente ya conocía en el mundo real. Con el esqueuomorfismo, el objetivo era trasladar nuestra forma de interactuar con el mundo físico a una experiencia digital. Degradados extravagantes, sombras paralelas marcadas y reflejos excesivos dominaban los sitios web. Texturas que imitaban el plástico, el metal e incluso la veta de la madera se veían por todas partes.
La interfaz de Musicmatch de 2004 es un gran ejemplo de esqueuomorfismo, desde los controles del reproductor de música hasta las pestañas que parecen carpetas de archivos y los botones excesivamente cincelados.
El glassmorphism emplea un toque más ligero que los píxeles densos y los bordes duros del esqueuomorfismo. Captura el aspecto del vidrio, pero no es esqueuomorfismo en el sentido tradicional. No pretende engañar a nadie para que piense que está viendo vidrio. Más bien, evoca la sensación de este.
Un gran ejemplo de glassmorphism se encuentra en los productos de Apple. Cuando iOS 7 se lanzó en 2013, los iPhone presentaban fondos grises translúcidos que añadían una ligera neblina a los iconos situados debajo. Apple dio otro impulso a este estilo de diseño en 2020 con la actualización de MacOS Big Sur, que incluía menús desplegables vidriosos y barras laterales translúcidas.
Pero el glassmorphism no es exclusivo de los productos de Apple; el sistema de diseño Acrylic de Microsoft Windows y Windows Vista utilizan el glassmorphism para superponer ventanas y establecer una jerarquía.
La interfaz de glassmorphism sigue siendo popular. Los botones, las opciones de navegación, los controles deslizantes y otros elementos de la interfaz destacan cuando sus líneas nítidas se colocan sobre un desenfoque vidrioso. En lugar de competir por la atención en el mismo plano dimensional, el glassmorphism ofrece un pequeño impulso visual, haciendo que los elementos sean más evidentes para cualquiera que esté navegando.
Cómo crear el efecto de glassmorphism
El glassmorphism añade una capa velada de transparencia. Los diseñadores lo crean mediante una mezcla de capas, opacidad y valores de desenfoque. A veces se añaden sombras paralelas y bordes para acentuar aún más la sensación de tridimensionalidad.
Glassmorphism de enfoque suave
El proyecto de efectos tipográficos de Mirela Prifti es un ejemplo de efecto de glassmorphism de enfoque suave. La imagen de fondo está desenfocada bajo una capa gris, lo que le da al texto superpuesto una sensación de definición.
El desenfoque es uno de los aspectos clave del glassmorphism y también uno de los más difíciles de conseguir. El objetivo es que la imagen de fondo parezca vista a través de una lente desenfocada, pero no tanto como para que se pierda en una neblina de píxeles. Sin embargo, un desenfoque demasiado ligero en la capa superior permite que los detalles del fondo se filtren y choquen con lo que hay delante.
La capa inferior puede ser una forma con un relleno sólido o una imagen sin transparencia. La capa superior tiene una opacidad baja, lo que permite que lo que hay detrás brille. Esta pila de capas contrastantes ancla un elemento a la pantalla mientras hace que la segunda capa parezca flotar encima.
Glassmorphism para crear imágenes
Con una peculiar variedad de formas, esta imagen del diseñador Dmytro Serebrennikov muestra las posibilidades artísticas de apilar diferentes formas.
.jpeg)
Para que el glassmorphism tenga el mayor impacto, debe haber algo visualmente atractivo detrás. Puede ser una forma geométrica, un degradado o incluso una fotografía. Dado que el fondo se distorsionará a través de un desenfoque vítreo, los colores brillantes y las formas llamativas funcionan mejor.
Bordes finos y sombras sutiles
El diseñador Artem Abramov utiliza líneas blancas finas y bordes redondeados para crear rectángulos que definen la capa superior del diseño.
Como el glassmorphism depende de un efecto de desenfoque, añadir un borde alrededor del elemento ayuda a definirlo. En la imagen de arriba, los bordes no solo separan la información, sino que también imitan la forma de la pantalla de un teléfono.
Lo ideal es que los bordes sean ligeros para no distraer del diseño. Incluir un toque de sombra también puede añadir sensación de tridimensionalidad. Usa un toque delicado. La clave está en la sutileza.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Ejemplos de glassmorphism
Ahora que hemos visto cómo lograrlo, veamos algunas de las formas en que los diseñadores lo están utilizando.
Vidrio esmerilado
Esta plantilla clonable de vidrio esmerilado encarna todo lo que nos gusta de este efecto. La sección principal ofrece un portal nublado hacia el fondo, con una imagen superpuesta. Además, una microinteracción desplaza este rectángulo en el eje Z, lo que aumenta aún más su sensación de tridimensionalidad.
Tutorial de glassmorphism
T.Ricks ofrece un excelente ejemplo de glassmorphism en acción mientras enseña cómo usarlo en tus proyectos de Webflow.
Esta lección te guía paso a paso para crear este impresionante efecto de vidrio que presenta una tarjeta de crédito translúcida flotando sobre una esfera líquida y amorfa. Cuando se aplica a un elemento como una tarjeta, el glassmorphism crea una capa translúcida. Colocar algo como un botón, una imagen o un texto encima le da la ilusión de estar más cerca del espectador. Es una forma efectiva de establecer una jerarquía visual y captar la atención.
Conquista la selva
La agencia de viajes Conquer the Jungle utiliza el glassmorphism para dirigir tu mirada hacia sus tres recorridos principales.
En un diseño de tarjetas estándar, los bloques de los recorridos estarían al mismo nivel que todo lo demás, lo que facilitaría que se perdieran en el ajetreado fondo tropical. El efecto de vidrio esmerilado en capas hace que las cajas resalten sobre la página y dirige tu mirada directamente a los paquetes turísticos.
Decimal Chain
Las páginas de equipo suelen ser solo una cuadrícula de rostros con aspecto profesional. No hay nada de malo en optar por este enfoque tradicional, pero un toque de glassmorphism puede hacer que el diseño sea más atractivo visualmente. Decimal Chain muestra a los miembros de su equipo en estas tarjetas ligeramente desenfocadas.
Los círculos de colores del fondo se refractan a través de cada tarjeta, creando ambiente e imitando el vidrio esmerilado. Al elevar suavemente cada bloque de contenido sobre la pantalla, el efecto de glassmorphism captura tu atención.
Dale a tu próximo diseño un toque de glassmorphism
Por mucho que nos gusten los diseños minimalistas y planos, es agradable ver a los diseñadores usar la profundidad y el espacio. El glassmorphism te permite moldear el espacio de la pantalla en algo que tiene tridimensionalidad. Solo hace falta apilar unas cuantas capas, añadir algo de desenfoque y ajustar los valores hasta obtener un resultado que te guste.
Anímate a publicar tus propias exploraciones de glassmorphism en Made in Webflow, ¡nos encantaría ver en qué estás trabajando!
Descubre diseños inspiradores de la comunidad de Webflow
Made in Webflow es el lugar ideal para explorar, clonar y personalizar los sitios web más recientes creados por la comunidad de Webflow.
