Directorio de Diseñadores

Neumorphic Design Tutorial | Tendencia de Diseño 2020

Neumorphic design es una nueva tendencia de diseño que es utilizada para simular un efecto de relieve en los elementos de una interfaz.

Pretende darnos la sensación que apretamos botones reales a través de la pantalla. Puedes ver más ejemplos de neumorphic design en la página de Behance.

Para lograr éste efecto es fundamental el uso de luces y sombres sutiles. De esta forma se genera una sensación de profundidad entre el fondo y los elementos que conforman el diseño.

Éste efecto es muy sencillo de simular, sólo necesitas 3 cuadrados con un color base, uno más claro y otro más oscuro (para simular luces y sombras) y un ícono.

Una vez que tengas estos elementos realiza los siguientes pasos:

1. Duplica los 3 cuadrados y alínealos.

neumorphic-deisgn-tutorial

2. Mueve el cuadro de la sombra hacia un lado y el de la luz al lado opuesto.

neumorphic-design-tutorial

3. Aplica un desenfoque en el cuadrado de la sombra y la luz.

neumorphic-design-tutorial

4. Agrega un degradado con los colores de la luz y la sombra al borde de tu cuadrado base.

neumorphic-design-trend-2020

5. Aplica el mismo degradado al ícono.

neumorphic-design-example

6. Duplica tu ícono un par de veces y coloca un offset entre ellos. Después, utilizando la herramienta “Shape Builder” elimina la diferencia entre ambas figuras.

neumorphic-deisgn-icon

7. Aplica el color de la sobra a esta nueva figura y alínealo con tu ícono principal.

neumorphic-design-lesson

Listo, ahora podrás hacer la transición entre tus íconos flat a esta nueva tendencia de diseño.


Te recomendamos leer nuestro otro artículo donde conocerás más tendencias de diseño gráfico para éste 2020.

Summary
Neumorphic Design Tutorial | Tendencia de Diseño 2020
Article Name
Neumorphic Design Tutorial | Tendencia de Diseño 2020
Description
Neumorphic design es una nueva tendencia de diseño que es utilizada para simular un efecto de relieve en los elementos de una interfaz.
Author
Publisher Name
Diseño Toluca
Publisher Logo

Utilizamos cookies para asegurarnos que tengas una mejor experiencia. Al continuar navegando asumimos que estás de acuerdo.