¿Cómo crear un diseño neumórfico (interfaz de usuario suave) en Adobe XD?

May 09 2022
El neumorfismo (Nuevo + Skeumorfismo) es la última tendencia en diseño de interfaz de usuario. Es un estilo visual que combina técnicas flat y skeuomorphism.

El neumorfismo (Nuevo + Skeumorfismo) es la última tendencia en diseño de interfaz de usuario. Es un estilo visual que combina técnicas flat y skeuomorphism. El propósito del neumorfismo es dar intensidad a los interruptores y botones en diseños con colores de fondo, luces, sombras, degradados y formas.

Los elementos neumórficos contienen una caja de sombra clara hacia arriba y una caja de sombra oscura hacia abajo. Debido a esta sombra, los componentes de la interfaz de usuario parecen salirse de la pantalla. Mientras visualiza, el usuario puede ver una forma de diseño tridimensional.

¿Suena interesante? Analicemos cómo crear una interfaz de usuario suave.

Empezando

Para empezar, necesitamos definir una paleta de colores para tu diseño. Compartiendo algunas referencias fáciles de aplicar para la paleta de colores a continuación:

#193566, #ECF0F3, #FFFFFF, #D1D9E6, #707070, #97A7C3

Ahora sigue los siguientes pasos:

  • Cree una nueva mesa de trabajo de cualquier tamaño que elija
  • Seleccione la herramienta de rectángulo y dibuje un rectángulo.
  • Duplícalo arrastrando la forma mientras mantienes presionada la tecla alt en el teclado
  • Seleccione ambos rectángulos para redondear las esquinas.
  • Vaya al panel de activos y aplique el color (#ECF0F3) a la mesa de trabajo
  • Seleccione las formas y aplique el mismo color (#ECF0F3) a los rectángulos

Estaremos trabajando con dos elementos significativos; llamémoslos elementos "arriba" y "abajo". Imagine que hay una fuente de luz en la esquina superior ya que el elemento superior se proyecta hacia arriba, luego habrá un área resaltada en la esquina superior izquierda y el área de sombra en la esquina inferior derecha.

Del mismo modo, en el caso del elemento de abajo, dado que se supone que está a una profundidad del plano, el área más clara estará en la esquina inferior derecha, y las sombras aparecerán en la esquina superior izquierda, ambos dentro del forma básica.

Hasta ahora conmigo?

Diseñando la pieza real

Ahora, traduzcamos eso a Adobe XD.

  • Vaya al Panel de capas y cambie el nombre del rectángulo a la base. Necesitamos tres formas idénticas, así que duplique la capa base dos veces usando el atajo Ctrl+T.
  • Ahora, cambie el nombre de la segunda capa a 'luz' y la tercera a 'sombra', así que después de esto, su Panel de capas se verá así, Base → Luz → Sombra.
  • Seleccione las tres capas y elimine los bordes.
  • Seleccione la capa de luz y agregue la sombra de luz.
  • Seleccione la opción de sombra en el Panel de propiedades y seleccione el blanco (#FFFFFF) como color al 100 % de opacidad. Ahora desvíelo a 15 negativo en ambos ejes y establezca el desenfoque en 25.
  • Ahora, haz clic en la capa de sombra para crear una sombra con un color más oscuro (#97A7C3) con un 50 % de opacidad.
  • Desplace la sombra en la dirección opuesta a la misma distancia y establezca el desenfoque en 25. Ahora agrupe las capas y cámbiele el nombre a 'arriba' para su uso posterior, o conviértalo en un componente para su uso posterior.

Todavía estamos a mitad de camino hacia nuestro diseño. Comencemos ahora el trabajo sobre el segundo efecto.

  • Seleccione el rectángulo y cámbiele el nombre a base y duplíquelo dos veces
  • Retire el borde de la capa superior y cambie el color de relleno (cualquier color, porque no importa ya que vamos a enmascarar usando esa forma)
  • Oculte la capa superior y cambie el nombre de la segunda y la tercera capa a luz y sombra, respectivamente
  • Seleccione ambas capas del Panel de capas y aplique un borde de tamaño 5 píxeles
  • Seleccione la capa de luz y expándala usando el punto de anclaje de la esquina superior izquierda
  • Haga lo mismo para la capa de sombra pero use el punto de anclaje de la esquina inferior derecha
  • Ahora, seleccione la capa clara y cambie el color del borde a blanco (#FFFFFF) y seleccione la capa de sombra y cambie el color del borde al tono oscuro elegido (#97A7C3)
  • Alternar la visibilidad de la capa base
  • Seleccione los tres y haga clic derecho y seleccione la máscara con la opción de forma
  • Y el paso final, cambie el nombre del grupo de máscaras a abajo

Consejo extra:

También puede agregarlos como componentes para usarlos en varias mesas de trabajo. Podrían usarse como campos de texto y marcadores de posición de imagen en los botones. Podrían combinarse fácilmente para obtener resultados variables.

Dejame mostrarte un ejemplo. Esta es una experiencia de inicio de sesión con la ayuda de un elemento de interfaz de usuario suave y animada en Adobe XD.

Escrito por: Falguni Rawat, asistente de diseño

© Copyright 2021 - 2022 | unogogo.com | All Rights Reserved