Tendencia UI 2021
-GLASSMORPHISM: Tendencia en diseño UI-
¿Estamos listos para este 2021? Este año viene cargado de nuevos cambios, y el diseño UI/UX no es la excepción. En el mundo del diseño y el desarrollo de interfaces estamos acostumbrados a encontrar tendencias minimalistas, donde menos es más, interfaces mucho más limpias cada día con el uso del material UI y el flat design estamos casi que obligados al uso de aplicaciones y webs con estos estilos que han reinado durante un buen tiempo.
Empezamos un nuevo año, y encontramos una nueva tendencia que no es tan nueva, hemos visto este estilo años atrás en algunas interfaces, pero que a mi parecer es un estilo sorprendente, con algunos problemas de accesibilidad, pero que dan un toque muy futurista y elegante a nuestras aplicaciones. Estamos hablando del “Glassmorphism”, esta tendencia ya la vimos en Windows vista el SO de microsoft no muy famoso y muy criticado en su época por el consumo excesivo de recursos y su lentitud para ejecutar algunas tareas, y también en IOS 7 por parte de apple en 2013. Pero eso no quiere decir que el Glassmorphism sea un fracaso, por el contrario, esta tendencia ha venido creciendo y creo que es gracias a sus llamativas características visuales:
- Transparencia (efecto de vidrio esmerilado con un desenfoque de fondo)
- Enfoque de varias capas con objetos flotando en el espacio
- Colores vivos para resaltar la transparencia borrosa.
- Un borde ligero y sutil en los objetos translúcidos.
Accesibilidad
En cuanto accesibilidad es fácil deducir que no es tan accesible como Material Design que estamos acostumbrados a encontrar en la mayoría de aplicaciones que usamos a diario, principalmente afecta un poco la visibilidad de sus elementos si se hace un uso excesivo del glassmorphism, por lo que se recomienda utilizar efectos de transparencia solo en elementos decorativos de la interfaz, y que no sean una parte integral de la experiencia. Es importante evitar su uso en botones o componentes de alta importancia, ya que estos deben contrastar lo suficiente para ser claramente visibles a los usuarios.
¿Cómo lograr este efecto?
Lograr este efecto es bastante sencillo, pero debemos tener en cuenta algunos aspectos importantes al momento de aplicar este estilo. Por ejemplo si nos basamos en un sistema de capas los elementos que están más cerca al usuario van a ser un poco más transparentes que los que se encuentran en la parte posterior.
Para configurar correctamente la transparencia de los elementos y poder lograr el efecto de “cristal” es necesario tener en cuenta que el relleno del objeto no debe estar al 100%, ya que sin importar la opacidad del objeto mismo, este no obtendrá el efecto borroso de los elementos de atrás, claramente debemos añadirle un valor de desenfoque de fondo al elemento para que esto funcione.
Otro aspecto importante que debemos tener en cuenta es añadir un borde interior de 1p con algo de transparencia a su forma, con lo que logramos simular el borde de un vidrio y con esto hacer que la forma destaque más del fondo. Por último, como debemos elegir los fondos a usar, podemos decir que no puede ser ni muy detallado, ni muy simple para lograr los resultados deseados en este estilo. Deben ser colores vivos que resalten el desenfoque y la transparencia del elemento en frente, y en lo posible hacer uso de distintos colores para lograr ver el salto de un color a otro a través del “cristal”.
Ahora bien ¿qué podemos esperar con esta tendencia? desde mi punto de vista creo que es una tendencia arriesgada y llamativa que puede crecer mucho este año en el desarrollo de aplicaciones e interfaces digitales, incluso apple en su versión Big sur de macOS ha empezado a incluir elementos con glassmorphism, lo que da un buen indicio de sus posibles aplicaciones a futuro por parte de otras compañías.
Finalmente, te invitamos a pensar en cuál de las tendencias en diseño de interfaces se adaptan mejor a tu producto digital.
¡Nos encantaría ser tu compañero en tu proceso de crecimiento!
Te invito a que profundices mucho más en temas de diseño UI través de:
Instagram: Goodcommercecontact
Facebook: Goodcommerce
Si tienes dudas, puedes comentarlas por medio de las redes sociales.
Si quieres seguir viendo contenido relevante para tu marca suscríbete a nuestra newsletter.