Marketing

Tendencia de diseño: efecto de vidrio mate en el diseño web

Tendencia de diseño: efecto de vidrio mate en el diseño web 1

Con la combinación correcta de desenfoque y transparencia, tiene una de las últimas tendencias en el diseño de sitios web y aplicaciones: el efecto de vidrio esmerilado.

Es una técnica de diseño que utiliza el desenfoque, las sombras y la transparencia de Gauss para crear un elemento que imita el aspecto del vidrio esmerilado de la vida real.

Analicemos siete formas diferentes de utilizar esta tendencia de diseño.

Y, si necesita más inspiración, ¡no es de extrañar que Dribbble venga con ideas de diseño de vidrio esmerilado!

Elementos de diseño en capas

Tendencia de diseño: efecto de vidrio mate en el diseño web 2

Debido a la combinación de efectos (desenfoque, sombras y transparencia), la técnica del vidrio esmerilado funciona bien en un diseño multicapa.

Este ejemplo es bueno porque puede ver los elementos oscuros y claros en el fondo y cómo funciona la transparencia.

Ya sea para un solo elemento o apilado, como en el ejemplo anterior, crea una profundidad sutil de una manera que permite el paso de los elementos del fondo. Este ejemplo es bueno porque puede ver los elementos oscuros y claros en el fondo y cómo funciona la transparencia. Además, observe la sombra suave alrededor del borde blanco del área más grande del “vidrio” para que haya una clara diferenciación entre este y el fondo.

El efecto también forma parte de la navegación fija. Si no está seguro de cómo usar un efecto de cristal, podría funcionar perfectamente para este tipo de elemento de navegación y podría ser un buen lugar para comenzar.

diseño de icono

Tendencia de diseño: efecto de vidrio mate en el diseño web 3

Los íconos de vidrio esmerilado son un nuevo enfoque del estilo de íconos que la mayoría de los diseñadores han estado usando durante mucho tiempo. Sin embargo, este puede ser un uso más complicado de la tendencia.

Debido a que los iconos son tan pequeños, los efectos mate pueden agregar un nivel de complejidad visual a algunos diseños. Esto probablemente sea más factible para los iconos que se utilizarán de gran tamaño.

Otra opción viable son los diseños que no tienen muchos iconos y todas las formas y usos están bastante estandarizados y son comprensibles.

Fondo de color

Tendencia de diseño: efecto de vidrio mate en el diseño web 4

El efecto de vidrio esmerilado puede ser la base del fondo de un sitio web.

El truco para hacer que esto funcione es desenfocar la imagen o los colores de fondo para que el usuario no intente adivinar de qué está hecho el fondo. Debería ser más suave, casi una burbuja de color.

La mayoría de los diseñadores que usan un fondo de vidrio esmerilado trabajan con colores fríos (esto enfatiza la sensación de invierno).

El ejemplo anterior utiliza capas dobles mate con el fondo y el elemento intermedio cruzando sobre el fondo. El área blanca y la curva en el color de fondo son una combinación fuerte que proporciona interés para un diseño sin demasiados elementos altamente visuales.

Bloques estilo tarjeta

Tendencia de diseño: efecto de vidrio mate en el diseño web 5

El efecto de vidrio esmerilado es ideal para bloques de cartón para crear separación entre elementos.

En el ejemplo de la tarjeta de vidrio anterior, el diseño utiliza un elemento de estilo de tarjeta de crédito, pero esto podría reinventarse para casi cualquier superposición similar. Considere usar un mosaico con forma de tarjeta en este estilo como contenedor para publicaciones de blog en forma de revista o como botones en forma de mosaico en el diseño de una aplicación.

Hay muchas oportunidades diferentes para utilizar esta opción de visualización.

La otra cosa que este ejemplo trae a la mente es cómo colocar elementos de vidrio esmerilado en una interfaz oscura. Observe cómo el vidrio esmerilado suaviza todo el contorno del diseño.

arte dominante

Tendencia de diseño: efecto de vidrio mate en el diseño web 6

Es probable que el uso menos común del efecto de vidrio esmerilado en el diseño de sitios web sea un elemento artístico dominante, pero también podría funcionar para este propósito.

En el ejemplo anterior, la animación de primer plano mate sirve como punto focal mientras el texto de fondo animado se desplaza.

Cuando se usa como un elemento artístico dominante, el desafío con este efecto es garantizar que no sea “demasiado suave”. Quiere que los usuarios comprendan lo que están mirando y sepan cómo interactuar con él. La clave es no sacrificar la usabilidad por un efecto de diseño aquí.

Acentos de formas y botones

Tendencia de diseño: efecto de vidrio mate en el diseño web 7

La técnica del vidrio esmerilado se puede aplicar a elementos específicos de la interfaz de usuario en un diseño.

El concepto de página de destino anterior es un gran ejemplo de cómo usarlo para un campo de formulario.

Lo que hace el efecto en este concepto de diseño oscuro es ayudar a llamar la atención sobre el elemento de acción en la pantalla. Primero miras y sabes exactamente cuál es el compromiso de una chica.

Desde el punto de vista del diseño, tener el campo de forma más claro sobre el fondo oscuro ayuda a atraerle de una manera que no lo haría con un campo de forma puramente “fantasma” o delineado, un estilo que se ha vuelto popular porque crea un diseño elegante elemento. (Incluso si sacrifica algo de usabilidad).

Capa de fondo suave

Tendencia de diseño: efecto de vidrio mate en el diseño web 8

A veces, el fondo es súper suave y simple gracias al efecto de vidrio esmerilado. El área pequeña de color contra un fondo blanco intenso puede agregar algo de enfoque visual para garantizar cierto movimiento de la pantalla.

Sin embargo, intente no extender el elemento de fondo mate a toda la pantalla.

Esta es probablemente la primera implementación más sencilla de un elemento de vidrio esmerilado porque está puramente en segundo plano, sin otras capas en las que pensar.

Aunque este ejemplo se centra en un área pequeña, no siempre es así. Sin embargo, intente no extender el elemento de fondo mate a toda la pantalla. Tener un contador de espacios en blanco ayuda a enfatizar la técnica. De lo contrario, podría parecer un degradado.

Conclusión

Lo divertido del efecto de vidrio esmerilado es que puede funcionar como un elemento sutil en espacios pequeños o como el concepto de diseño general de un proyecto. Algunos grandes nombres del diseño ya lo están adoptando … solo mire algunos de los paneles de su iPhone mientras lo desliza hacia la izquierda o hacia la derecha.

Con tanta gente jugando con elementos de vidrio esmerilado, sin duda veremos muchos más en el futuro.

Por favor califica el contenido

0 / 5

Your page rank:

Author

Moisés Cabrera

Encantado de emprender, el Internet es como pez en el rio para mi y quiero aportar valor a este mundo digital. Si crees que es de interés estos artículos no dudes en comentar.