Explorar el diseño Neumorphic con Figma: agrega volumen a interfaces | Katerina Liebich Blik | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Explorar el diseño Neumorphic con Figma: agrega volumen a interfaces

teacher avatar Katerina Liebich Blik, UI & Product designer | UX researcher

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción a clases y profesores

      1:48

    • 2.

      Diferentes estilos de UI-morphism

      2:35

    • 3.

      Resumen de Figma corto

      5:32

    • 4.

      Figma: panel de efectos sombríos

      5:22

    • 5.

      Sombras y arquitectura ligera

      3:53

    • 6.

      Crear diversos elementos Neumorphic

      8:44

    • 7.

      Elementos cóncavos y cóncavos y convexos

      18:32

    • 8.

      Elegir el color adecuado

      15:33

    • 9.

      Modo oscuro

      10:30

    • 10.

      Crear una interfaz móvil Neumorphic

      16:13

    • 11.

      Proyecto de clase

      1:26

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

107

Estudiantes

--

Proyectos

Acerca de esta clase



¡Oye, eh!
Soy Kate, diseñadora de experiencias de usuario con sede en Frankfurt, y estoy emocionada de darle la bienvenida a mi curso sobre diseño de Neumorphism Con más de 10 años de experiencia en el campo, estoy aquí para guiarte a través de este fascinante viaje de crear interfaces interesantes que crean tu diseño para crear tu vida útil.

Imagínate crear espacios digitales elegantes y modernos que te sientan tan reales que casi podrías tocarlos. En esta aventura de 1,5 horas, nos sumergiremos en el mundo del Neumorphism usando la poderosa herramienta Figma. No te preocupes si eres nuevo en Figma o diseñar: estoy aquí para hacerlo super sencillo para ti.

Aprenderemos la salsa secreta detrás del Neumorphism y cómo jugar con sombras y la luz para agregar un toque de magia a tus diseños. Confía en mí, ¡es más fácil de lo que parece! Además, te mostraré una técnica súper fresca y única sobre cómo elegir colores que harán que tus diseños aparezcan brillantes.

¿Has oído hablar de estilos reutilizables? Te enseñaré este truco que hará que tu proceso de diseño sea muy sencillo.

Pero aquí está la cereza arriba: nos ensuciaremos con proyectos prácticos. Al final, crearás tu propia interfaz móvil Neumorphic (Neumorphic Mobile). ¿Qué tan guay es eso?

Mantendré las cosas amigables y sencillas para que puedas seguir un rato sin problemas. Ya seas un profesional del diseño que busca subir de nivel o un novato emocionado de probar algo increíble, este curso es perfecto para ti.

Entonces, ¡sumérjete en el mundo del diseño del Neomorphism juntos y hagamos que tus diseños sobresaltan con cierta profundidad y estilo serios!

Duración del curso: alrededor de 1,5 horas

Prerrequisitos: no se necesita diseño o experiencia en Figma: ¡comenzaremos desde cero!

Who's It
For: diseñadores que quieran explorar las técnicas de diseño más modernas y curioso sobre el diseño y listo para sumergirse en

headfirst.- Desarrolladores que deseen agregar algo de magia del diseño a su conjunto de habilidades.

Únete a mí hoy, y creemos unos impresionantes diseños de Neumorphic que dejarán a todos diciendo: "Wow, ¿cómo hiciste eso?". ¡Nos vemos en clase!

Conoce a tu profesor(a)

Teacher Profile Image

Katerina Liebich Blik

UI & Product designer | UX researcher

Profesor(a)

I'm a product designer, a hunter of harmony and a user experience researcher.


For me, design is life thinking. It's not just a profession. I love colours and fonts, I love hand drawings and photography, and I love shapes and lines. I can see layouts in everything. It doesn't matter whether I'm doing: a poster, branding, mobile app, or maybe picking a couch for my room.



On another hand, I'm a researcher and I have worked in software and the IT industry for more than 10 years. From a UI designer to a UX Lead in a Product company, I'm designing successful Software Products from scratch and keeping users at the centre of my design processes. I'm using data-proven decisions to develop the smoothest user experience.

Follow me if you want to know about... Ver perfil completo

Habilidades relacionadas

Diseño Diseño UX/UI
Level: All Levels

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción a cursos y profesores: Hola, soy Kate Liebich y soy diseñadora de experiencia de usuario de Frankfurt, Alemania Hoy, vamos a sumergirnos en el mundo del Neumorfismo y descubramos cómo agregar vida y muerte a A lo largo de mi carrera, he llevado todo tipo de proyectos, desde simples hasta súper complejos. Pero confía en mí, los diseños neumórficos pueden ser un poco acertijos para diseñadores y desarrolladores Ellos emocionantes tres es jugar con la idea de profundidad en tus diseños es como agregar una dimensión completamente nueva. En este curso, me emociona mostrarte mis trucos especiales sobre cómo elaborar ese tipo de Interfaces. Voy a hablar de sombras y luz, el dúo dinámico que hace que tus diseños destaquen así de 3D. También nos ensuciaremos las manos. Crear elementos que parecían artesanales en están tallados Usando un montón de métodos geniales. Además, voy a compartir contigo una técnica súper cool y única sobre cómo elegir un color rojo para los diseños de Elementos Neumorfos y Neumorphic, diría que esta técnica realmente puedes usar en el futuro para cualquiera Vamos a conseguir nuestro estado de ánimo creativo y armar un par de pantallas Eso es mostrar tus nuevas habilidades. Al final de este curso, te lo prometí, vas a tener confianza para azotar Neumorphic eres como un profesional Y no olvides que el proyecto que vamos a hacer al final de este curso será la guinda de tu portafolio de diseño. Tengo muchas ganas de verte en este curso. neumórficos listos para rockear. Nos vemos ahí. 2. Diferentes estilos de UI-morphism: Probablemente no recuerdes cómo o se ven las interfaces Alt. Los elementos que ves aquí son el primer paso hacia el skeumorfismo Este tinte fue impulsado por cosas del mundo real como explicación de funciones nuevas y desconocidas, es usar una analogía o metáfora Entonces cualquiera podría averiguar cómo funciona una computadora. Recuerda que el ícono de la basura en el viejo Mac OS o el ícono de Safari en 2003 era así. Es un puro skeumorfismo. Pero el tiempo va rápido. Los usuarios tienen largo, largo para distinguir un botón de icono sin sombras e iluminaciones innecesarias. Y las imágenes tridimensionales han desaparecido en particular de las interfaces. Los smartphones se han convertido en la norma y sobrecargarlos interfaces solo molestan a la gente El skeumorfismo como estilo se vuelve anticuado, pero hay muchas cosas diferentes que salieron diseño plano se hizo popular después del lanzamiento de iOS seven y sigue siendo utilizado por todos desde estudios de diseño hasta Apple, Google y Microsoft. Se considera el sucesor del skeumorfismo gráfico. Pero la idea principal de Leginon es opuesta. Como hoy en día la interfaz no debe distraer al usuario con textura y volumen extra Pero en 2000 20, todo se convirtió en algo nuevo. Y alternativa. Neomorfismo. Una combinación de volumen y elementos planos. Pero es imposible usarlo en su forma pura. Porque entonces será difícil para el usuario entender el estado de los elementos de la interfaz. Los colores son muy cercanos entre sí en tono. Se solicita mucho espacio en blanco en el que todos los botones siguen siendo distinguibles y comprensibles Por lo tanto, se desempeñó bien en una aplicación móvil con un pequeño número de funciones. Ahora tienes una comprensión de los Estilos UI-Morfismo. En este curso, vamos a aprender cómo podemos construir y diseñar fácilmente esos elementos usando solo luces y sombras y cómo combinar esos elementos con otras partes importantes para poder utilizarlos en la interfaz. Vamos a sumergirnos en el software Figma y ninguna las principales herramientas que vamos a utilizar en este 3. Figma corto: En este video, voy a proporcionar la primera Visión general del software Figma y la poderosa herramienta de diseño utilizada por profesionales de todo el mundo Personalmente prefiero usar Figma ya que puedes crear tu cuenta gratuita y usarla para tus propias necesidades Y al mismo tiempo, tendrás todas las herramientas que necesitas para crear unas interfaces de usuario permanentes. Si te acostumbras a otra herramienta, puedes saltarte esta lección e ir a la siguiente donde vamos a aprender cómo puedes estructurar y cómo puedes construir pedales y luz Entonces es básicamente no importa qué herramienta vas a usar. Lo básico es lo mismo. Empecemos con la visión general del software. Cuando lances Figma, serás recibido con un documento de lata en blanco El crear un nuevo documento. Simplemente haga clic a través del botón más en la esquina superior izquierda, o use el atajo de teclado para Windows Control más M para Mac, común más N. Una vez que tenga su documento abierto, es posible que desee organizar su trabajo en diferentes secciones Figma le permite agregar varias páginas a su documento. Para agregar una nueva página, vaya al Panel derecho y haga clic en el icono de la página. También se puede utilizar. El atajo de teclado para Windows Control plus, más N para no común plus más N. Ahora, profundicemos en la creación de tu primer fotograma. Un marco representa una pantalla o sección específica de su diseño. Para crear un marco, haga clic en el icono del marco en la barra de herramientas izquierda o use el atajo de teclado F. Simplemente haga clic en el área principal y dibuje su primer fotograma. En el lado derecho, puedes cambiar el tamaño del marco si lo necesitas. Figma ofrece una variedad de herramientas para ayudarle a diseñar y crear su visión Aquí tengo unos cuantos imprescindibles quiere que empiezas. Herramienta Mover. Esta herramienta le permite seleccionar y mover objetos dentro de su herramienta de forma de diseño. Usa esta herramienta para dibujar formas como rectángulos, círculos y polígonos. La herramienta pluma. La herramienta Pluma te permite crear formas de disfraces y pasarlas colocando puntos de anclaje y ajustando sus curvas. Herramienta Textos. Con una herramienta de texto, puedes agregar un EditText en tus diseños Por último, exploremos el panel correcto donde encontrará una gama de controles para afinar sus diseños Primero dibujemos un rectángulo. Puedes usar los atajos de teclado son, y vamos a cambiar el tamaño del rectángulo en el lado derecho solo para probar y cómo funciona eso. Exploremos más a fondo el panel derecho. Aquí siento características clave para estar al tanto de las alineaciones. Estos controles ayudan a alinear objetos tanto horizontal como vertical. Las restricciones permiten definir cómo se comportan los objetos y responder cuando se cambia el tamaño del diseño. Figma proporciona cuatro tipos de restricciones. Restricción de escala izquierda, derecha, superior e inferior y restricción fija Puedes jugar con ellos y ver cómo funciona. Configuración de capa. Esta selección le permite ajustar las propiedades de capa, como la Opacidad, Modos de Fusión y Efectos Figma proporciona una herramienta de selección de color para elegir y aplicar colores a sus elementos de diseños fácilmente Puede ser un relleno o trazo, pero lo veremos en detalle en el siguiente. Y eso es todo para esta rápida visión general de Figma. Recuerda, esto es solo la punta del iceberg. Figma ofrece numerosas características poderosas de capacidades para explorar y que le permiten dar vida a sus ideas de diseño En la próxima lección, vamos a hacer brillar un foco en el Panel de Efectos. Y créeme, va a estar ensombreciendo a Fn. Nos sumergiremos en los ajustes de sombra y exploraremos diferentes configuraciones. Prepárate para presenciar el poder mágico de las sombras para tus Interfaces, probaremos diferentes configuraciones y verás como es más fácil con solo sombra agregar un Volumen a los elementos y a tus interfaces Así que comencemos. 4. Figma: panel de efectos de sombra: En esta lección, vamos a profundizar en una de las figma. Efectos de Sombra. Prepárate para llevarlo a tus diseños. Usando solo Efectos de Sombra, puedes agregar un toque de realismo en profundidad a tus elementos de diseño. Empecemos y descubramos cómo aplicar sombras en el software Figma Para esta demostración, usemos como ejemplo una forma de círculo simple. Lo podemos encontrar en la esquina superior izquierda. Bien, vamos a dibujar un círculo pequeño. Para aplicar una Sombra, seleccione la forma y navegue hasta el panel derecho. Simplemente haz clic en el botón más y encontrarás la magia que estamos buscando para la sombra. Ahora, exploremos los diferentes ajustes disponibles para crear sombras y Figma. Al ajustar estos ajustes, podrás dar rienda suelta a tu creatividad y personalizar las sombras para lograr el efecto deseado Primero, veamos las posiciones X e Y. Esta configuración controla el posicionamiento horizontal y vertical de la sombra paralela. Puede crear efectos únicos ajustando los valores de cada eje También, puedes probar números negativos, y eso también funcionará en sentido contrario. Vea cómo puede mover la sombra a diferentes direcciones ajustando los valores. Permite experimentar y crear efectos dinámicos. Desenfoque. El ajuste de desenfoque determina la suavidad o nitidez en la Sombra Los valores de desenfoque más altos crean una sombra más suave y difusa, mientras que los salarios más bajos dan como resultado una sombra nítida e indefinida Observe cómo la sombra se vuelve más suave o más nítida a medida que ajustamos el valor de desenfoque Juega con esta configuración para lograr el nivel de efecto deseado. Continuemos con la configuración de propagación, que controla el tamaño o expansión de la sombra alrededor de la forma. Al aumentar el valor de propagación, la sombra se extiende más lejos de los bordes de las formas. Mira cómo la sombra se expande o contrasta a medida que modificamos este valor pred Esta configuración te permite controlar el alcance de la Sombra, creando interesantes efectos visuales, que definitivamente usaremos en nuestras próximas lecciones. Definitivamente puedes cambiar el color de la sombra, el ajuste de color que recuerda el tono de la sombra. Puedes elegir cualquier color que complemente tu diseño o combine con el ambiente desértico Explora diferentes colores de sombra para mejorar el estado de ánimo de tu diseño. Juega con varios Estados Unidos hasta que encuentres la pareja perfecta. El ajuste de opacidad controla la transparencia de la Sombra Los valores de opacidad más altos dan como resultado una sombra más pronunciada y sólida Mientras que los valores más bajos hacen que la sombra sea más sutil. Ajustar la opacidad puede cambiar drásticamente el impacto de la sombra Experimenta con diferentes niveles para lograr el equilibrio perfecto entre permanencia y repentino Figma también ofrece sombras internas, lo que crea un efecto de sombra dentro de la forma en lugar de afuera Se puede utilizar para agregar un sordo o simular efectos de embajada. Definitivamente lo usaremos. La configuración de la sombra interior abre una gama completamente nueva de discapacidades. Pruébalo para darle el toque y crear profundidad. Una dimensión de característica más existente es que Figma le permite aplicar múltiples sombras a una sola forma Esto significa que puedes usar y combinar diferentes efectos de sombra, lo que te da aún más control sobre tus diseños. impacto visual solo con la sombra para usted puede traer diferentes pasos a los elementos de la interfaz de usuario y agregar algún tipo de animación estática llamarlo. Por ejemplo, para el estado de desplazamiento, el botón tiene una sombra más pequeña que la predeterminada, y da la sensación de que se mueve y usuario físicamente En la siguiente lección, te voy a mostrar cómo aplicarla varios Sombra y efectos de luz a un elemento. Este es nuestro objetivo crear un Elementos Neumorfos y luego colocarlos en sus interfaces a través de sus 5. Sombras y arquitectura ligera: Antes de sumergirnos en la creación de elementos para la futura interfaz de usuario, echemos un vistazo rápido a la arquitectura de luces y sombras en términos simples. Si queremos que las cosas se vean 3D sobre una superficie plana, necesitamos entender cómo funciona la luz y hacia dónde deben ir las sombras para que se vea real. Al mover el deslizamiento, podemos hacer que las sombras vayan en diferentes direcciones y sean más oscuras o más claras Esto nos ayuda a dar forma a nuestros elementos de diseño y hacer que parezcan que tienen Volumen y forma. Entonces imaginemos que tenemos fuente de luz. Voy a lugares en la esquina superior izquierda. Por supuesto, cuando vamos a estar creando la propia UI, la interfaz de usuario, no necesitamos tocar algún tipo de luz, pero al menos tenemos que imaginar dónde está para colocar nuestras sombras de la manera correcta. Entonces si de nuevo, voy a dibujar algún círculo. Y como ya pueden ver aquí, agregué una sombra. Y la Sombra para este particular, en este ejemplo particular debería estar en el lado opuesto de la fuente de luz. Y la luz refleja o el lado de la luz de este elemento realmente se enfrenta a la luz. Otro consejo es que si colocas algunos objetos más cerca de la luz, entonces puedes ver que la sombra tiene un color un poco más fuerte. Es mucho más fuerte. Y para los elementos que están un poco lejos de la luz que el deleite se vuelven menos fuertes y más ensillados como para estos Otra cosa también se puede ver entre estos dos círculos diferentes. Se siente como este un poco más alto. Y este gran círculo tiene una forma más plana. También forma parte de la Arquitectura de la Luz y la Arquitectura de Sombras. Entonces como puedes ver aquí, la sombra es muy pequeña y sutil. Y entonces sentimos que este es elemento muy plano y esta sombra es un poco más larga y este círculo alimenta más alto. También lo puedes encontrar en tu espacio alrededor. Tú. Ahora mira tu escritorio o en tu habitación y verás, y encontrarás que cuanto más altos tienen, por supuesto, más sombra. Otro consejo que debemos recordar cuando volvamos a dibujar interfaces, es que todas nuestras sombras, deben colocarse del mismo lado para todos los elementos en una interfaz. lo que me refiero con eso, así que imagina si colocamos esta luz en el otro lado, en el lado derecho. Entonces significa que todas nuestras sombras aquí también sabían que ni término. Entonces probemos eso. La misma lógica está aquí. La luz se coloca en la esquina superior derecha. Todos los elementos tienen sus sombras en el lado opuesto. Asegúrate de que todos los elementos tengan sombras en el mismo lado. De lo contrario, obtendrá el resultado P38. Cuando vamos a diseñar la interfaz de usuario y utilizar nuestra normal de elementos que vamos a crear. Deberíamos usarlos con suavidad y delicadeza, alrededor de la interfaz y también del usuario Así que comencemos la siguiente lección y creemos finalmente, nuestros Elementos para las interfaces 6. Crea diversos elementos neumórficos: En esta lección, comenzaremos con una configuración muy sencilla. Recuerda que nuestro objetivo es lograr algún tipo de efecto Volumen. Pero en la superficie plana. Lo primero que me gustaría mostrarles es simplemente agregar a simples sombras de caída a un elemento. Entonces volvamos a Figma. Pero primero vamos a crear un círculo. Usaremos la tecla de acceso rápido 0, o simplemente encontraremos nuestro elemento en la esquina superior izquierda Te aconsejo que no tengas una sombra realmente grande de lo contrario y nuestras especificaciones pueden querer funcionar y serán demasiado pequeñas. Escojamos una talla de 160. Y otra cosa importante, debes asegurarte de que tu fondo también usa una Beta de digamos, color cálido. Este es el hex correcto y el círculo en sí también tiene que ser del mismo color que lo hará. Verás que se verá más realista con el fin de cambiar el color de fondo y escoger la mesa de trabajo misma Y luego aquí, cambia el campo al hex necesario para cambiar el color del círculo también en el panel derecho. Cuando se selecciona el círculo, puedes cambiar el color aquí, o simplemente puedes colocarlo. Simplemente puedes elegirlo de la superficie haciendo clic, estoy en el teclado. Bien, así que intentemos lograr nuestro objetivo y crear el primer elemento Neumorphic haciendo clic en este plus en el lado derecho Entonces agregamos la primera sombra paralela. Eso, ya sabes, ya se ve bastante bien. Pero intentemos lograr un efecto más realista. Entonces seguiré las especificaciones ya preparadas para este círculo en particular. Echemos un vistazo aquí. Existe 20. ¿Por qué es casi 20? El parámetro de la nota publicitaria es 14. Y difundir no voy a usar en este ejemplo el color hex. Vamos a colorear antes de un E 916. Bonito. Entonces nuestro elemento ya se ve muy realista. Y como recuerdas el foco del lado izquierdo, todavía lo tengo aquí solo para mostrarte y seguir la estructura que discutimos. Ahora, agreguemos otro efecto que será nuestra luz, también el efecto de sombra paralela. Entonces volveremos a hacer clic en Más en el Panel derecho. Y ahora usaremos el cuello blanco para construir. Esto se refleja en el lado izquierdo. Bien, así que vamos a elegirlas de color blanco, igual que aquí. Y la opacidad será del ocho por ciento. Y toda nuestra posición será opuesta a la posición de la sombra misma. Entonces es menos -20 y -20 otra vez, y el soplador es 16. Bonito. Echemos un vistazo a cómo se ve. Así que este es nuestro primer Elementos Neumórficos que en realidad ya se puede utilizar en Pero probemos con otras especificaciones. Esto es un poco más sutil. Construyamos un poco más planos Elementos. Elementos. Voy a copiar y el mismo círculo porque algunas especificaciones hacen similares y es simplemente más fácil para nosotros. Otra vez. Pasemos a la sección Efectos. Cambia la sombra paralela a esta espalda. Entonces X es de seis por seis de la nota publicitaria 16. Y el color, como puedes ver, es el mismo. Y cambiemos la opacidad a 17. Echemos un vistazo. La luz, el lado de la luz también tiene especificaciones un poco diferentes. Entonces usaremos menos diez o X menos también, menos diez. ¿Por qué más azul? Tiene 30 años. El resto es correcto. Color y opacidad. Ya cambiamos Bien, Echemos un vistazo. Si comparas esto con Elements, puedes ver que esto se ve un poco más plano y este círculo un poco más factorizado. Entonces probemos otro ejemplo que será un poco más complejo en términos de nuestras especificaciones, y necesitamos agregar cuatro sombras con diferentes configuraciones. La primera sombra paralela, con estos parámetros, es 66160 El color es el mismo, 70% de su capacidad. Bien, entonces tenemos que agregar otra sombra paralela. Verás la diferencia entre estos dos elementos. Que este círculo será más natural, más complejo ya que tendremos más efectos en la parte superior. Entonces agregaremos otra sombra con estos parámetros para cuatro a cuatro sopladores esparcidos usando y los colores. Mientras que cóncava hacia arriba. Entonces es 55550 y la opacidad es diez. ¿Bien? Y nosotros lo colocaremos, puedes moverlos. Sombras alrededor. Lo colocaremos en el fondo. El efecto de luz es menos diez, menos 1034 desenfoque. Y el cuello blanco, claro. Y voy a opacidad, la transparencia es una T. Agreguemos otra luz, reflexiona Y es bastante similar, pero directo. Entonces es menos menos diez. Menos diez. Entonces el desenfoque es diez. El color blanco. Y son pasivos. Sí. Bien, entonces tenemos cuatro configuraciones diferentes para este elemento. Y veamos cuál es la diferencia entre esto y es una diferencia muy sutil. Pero en la interfaz verás que este elemento se ve un poco más natural. El neumorfismo se trata de lograr un efecto 3D mediante el uso de sombra Entonces los elementos estarán apareciendo o insertando en la superficie. Comencemos la siguiente lección y aprendamos sobre los elementos convexos y cóncavos 7. Elementos cóncavos y convexos: Comencemos con la creación de Elementos Convexos. Las formas de contexto aparecen surgen del fondo ya que te invitan a tocarlas. Los elementos cóncavos tienen una apariencia instantánea como si estuvieran curvados hacia la superficie. Por supuesto, las sombras y la luz son los ingredientes clave para lograr estos efectos. Aquí creé varios elementos y Estilos. Y B los van a crear juntos. Ya decidí tener un nombre para cada estilo de este elemento. Y veremos otra opción en Figma donde también podrás guardar para el futuro con el fin utilizarla para cualquier otro Elemento Empecemos con nuestros primeros Elementos Cóncavos y Convexos. Uno será Convexo alto afilado, y otro cóncavo, profundo afilado. Lo colocaré, golpearé la parte superior y escogeremos otra herramienta de forma, que será un rectángulo. Los senos están en tu teclado o simplemente ir al lado izquierdo, esquina superior. Y rectángulo pico. El tamaño. Vamos a escribir 150 píxeles por una quinta parte. Y punto importante. También escojamos su color de fondo como éste, y1, y1, y1 Es de color muy claro sobre casi blanco, pero aún tiene un poco de diferencia con el blanco. Te puedo mostrar si quiero, colocar un rectángulo y hacerlo blanco. Como puedes ver, es bastante diferente. Tiene como un este color grisáceo, cálido grisáceo. Bien, entonces tenemos nuestro rectángulo. También hagamos las esquinas un poco más suaves. Voy a poner aquí como 32, probablemente. Sí, eso es bueno para crear estos bonitos elementos lisos. Y vamos a sumergirnos en nuestra configuración de FX. Y necesitaríamos crear dos sombras de caída y dos sombras internas para lograr este efecto. Y no olvides escoger el mismo color del rectángulo que nuestro fondo. Hagámoslo juntos. Yo solo lo haré con ellos con este tono aquí. Bien. Así que vamos a crear la primera sombra. Solo otra vez, haz clic en más y en el panel de efectos. Y usaremos esta primera configuración para lograr el efecto de sombra y será nuestra sombra afuera. Entonces X es 15. ¿Por qué es 15? El desenfoque es 35. La opacidad de transparencia es 35. Y escojamos este color. Lo usaremos en esta lección, mucho. 806-80-6806. Bien, eso ya se ve bien. Bien, Entonces vamos a crear otra sombra paralela, que será nuestra luz refleja afuera. Entonces, en algún lugar de la esquina superior izquierda. Entonces son menos diez. Menos diez es de 40 colores ya que este es el blanco más ligero. Sólo se alegran, o seis veces. Cuero F. Y su opacidad, como pueden ver, son 70. Bonito. Entonces también te aconsejo, esto ya se ve bien. También te aconsejo que lo lleves más profundidad y seleccionando nuestra forma y agregarle efecto, tenemos que escoger sombra interior en lugar de sombra caída Ten cuidado con eso. Y vamos a colocar cinco porqués. Cinco, el desenfoque es 40. Y el color, como mencioné, esta vez lo usaremos mucho. Y Duane T es nuestra opacidad. Bien, entonces ahora tiene como si fuera un Elementos Convexos, pero ahora tiene un poco de cóncavo por dentro. Entonces es como empujar un poco en el medio. Y agreguemos también un encendedor o efflux en su interior, que también estará dentro Sombra interior con color blanco como nuestro efecto de luz. Y veamos, es menos diez -10.44 efecto de desenfoque y 17%. Bien, ahora lo tenemos. Ahora. Vamos a usar la característica interesante que ofrece Figma Vamos a guardar esto Vamos, vamos a guardar este Fx por completo en un estilo. Voy a llamar a este estilo Convexo, alto afilado, pero puedes llamarlo como quieras. Entonces, ¿cómo hacer esto? En este Panel de Efectos, puedes ver estos cuatro puntos. Hacemos clic aquí y hacemos clic de nuevo al plus, creamos un estilo. Este es el ámbito de nuestro estilo. Y colocaré el nombre Convexo alto agudo y crearé este estilo. Ver ahora está apareciendo aquí. Y si voy a dibujar cualquier otro rectángulo, o vamos a círculo forma elipse Y ahora voy al panel de efectos y veo mi estilo aquí, aquí, Convex talk sharp, y le doy click. Y ya tiene esto todos los ajustes. Y en realidad eso es muy conveniente. Es muy rápido crear más elementos para tus interfaces, si lo vas a guardar ahora. Y hoy crearemos seis estilos diferentes. Ya puedes en la siguiente, nuestras lecciones las utilizan para crear algunas interfaces. Bien, continuemos. Y tenemos esta llamada cóncava, profunda más nítida a este estilo Y volvamos a intentar lograr lo mismo, el mismo efecto que vemos aquí. Nuevamente, estoy dibujando un rectángulo que será de uno por 150 píxeles. Y volveremos a tener esquinas redondeadas lisas. Además no olvides escoger el mismo color del fondo y entrar directamente en los Efectos. Entonces primero, Sombra afuera, es nuestro color, que volveré a usar. Y X es 15. ¿Por qué es 15? ¿Inferior? Es 40. Como puedes ver, los parámetros son muy similares entre sí todo el tiempo o simplemente diferente posición, diferente, en su mayoría desenfoque y opacidad Y entonces realmente tenemos un efecto completamente diferente. Bien, entonces la primera sombra caída está hecha. Entonces vamos a crear reflejos de luz exterior. Para eso necesitaríamos de nuevo drop shadow. Y para la luz siempre usaremos el Color Derecho. X es menos diez. Y es menos diez es 40. Y en. Bien, A continuación, usaremos una sombra interna, sombra interna y ocho para el color X, Y. Para T para Boston Tea y el desenfoque es 15. Bonito. Y los últimos Inner Shadow los van a seleccionar de forma. La última sombra interior será menos ocho. Menos ocho. El color es blanco, el nervio es 15 y la opacidad es 60 Bien, bonito. Y podemos volver a crear un estilo, otra vez, cuatro puntos más, y yo lo llamaré cóncavo, profundo agudo. De nuevo, puedes usar tu nombre que es conveniente para ti Crea un estilo. Bien, Ahora, sigamos. Y vamos a crear estos estilos que un poco más planos. Y me sumerjo directamente en la creación de este elemento. Nuevamente, volvamos a dibujar el recto. No olvides usar shift para crear un cuadrado, en realidad no el rectángulo. Y el tamaño es el mismo, 150, la esquina es 30 a esta la mayor parte de las esquinas, esquina, radio. Y el color, se vuelve a elegir, el color de fondo. En la siguiente lección, voy a hablar sobre los colores y cómo crear unos colores realmente geniales y agradables para tu Neomorfismo Y son más elementos. Te voy a mostrar algunos de mis secretos como suelo crearlos. Así que vamos a sumergirnos en nuestros estilos. Primero. Nuevamente, Efectos. Sombra Partida por 4 h ocho. Voy a color está en 6.40 es nuestro equipo de políticas. Bien. A continuación, directamente, estamos creando la siguiente sombra paralela, que será el flujo más ligero afuera. Y el mío de cuello blanco. Dan, diez o 40.74, Opacidad. El siguiente efecto es la sombra interior. Nuevamente, nuestro color oscuro y cálido es cinco. ¿Por qué 5 h 40? 20%. Y último reflejo de luz sombra, es mío y luego menos diez, ni 40. Y sí, claro que el color es blanco y 70% de opacidad. Y tenemos nuestro elemento con todos los Estilos necesarios. Ahora, vamos a guardarlo en nuestra biblioteca. Nuevamente, cuatro puntos en el nuevo estilo. Alcohol it Convex low, Sharpe, y colóquelo en su biblioteca Vamos a sumergirnos directamente en el siguiente componente. Bien, crearemos el elemento cóncavo 15030 para formar, coordinar, reducir el color de fondo, y sumergirnos en los Efectos Primera sombra paralela. Este 18. Sigue los ajustes aquí. Color. El desenfoque es de 30.15% pues lo pasarán a otra sombra paralela El efecto de luz exterior. Nuevamente, el color es blanco para nuestras luces, menos diez, -1,030.30% Lo siguiente es la sombra interior. Sombra, y el color para Y es cuatro, desenfoque es ocho y positivo 60. Y la última, la luz se refleja en su interior. De nuevo, es sombra interior, es menos cuatro. Menos cuatro. Color. Blanco. El desenfoque es bebida, té y opacidad en Vamos a guardarlo. Biblioteca de estilos. Entonces un comentario al guardar esto, los elementos deben ser, por supuesto, seleccionarlo, necesitan ser seleccionados. Y tu estilo cóncavo, código bajo más nítido. Y los dos siguientes elementos, su poco más suave. También es agradable para algunos UI y puedes usarlos también para tus ideas. Vamos a crear el primer elemento liso convexo. Nuevamente, el mismo tango. Creo que una vez que repitas todos estos seis elementos, aprenderás. Y entenderás qué es lo que realmente y cómo todos estos diferentes parámetros juegan juntos para lograr o efecto cóncavo o efecto convexo. Entonces como puedes ver cuando tienes sombras más viejas en el lado derecho, y como en este ejemplo, en el exterior. Y hay más fuertes de lo que parece el elemento es Convexo. Pero si colocas una sombra más fuerte su interior de lo que siente que este elemento es cóncavo. Sigamos con nuestro siguiente estilo. Nuevamente, un quinto a para ellos, tamaño 30 a cuatro, radio de esquina El color de fondo, y sumergirse en la configuración del efecto primero es nuestra sombra paralela, y la configuración será exceso de cero bits diferentes ajustes. Pero creo que lo que queremos lograr es como unos Elementos Convexos lisos con algún tipo de forma lisa. Entonces cero es cero, Y es cuatro, desenfoque es 30 y el color es un poco diferente. Es nuestro color de fondo. Otra vez, pongámoslo. Elemento siguiente. La luz se refleja en el exterior. Otra vez. Los agregamos. Editamos la sombra, diez para 54. ¿Por qué? Que entonces? Color oscuro, cálido, porcentaje barato es positivo. Y aprende 40. Vamos a añadir sombra interior. Si diez o 15. ¿Por qué? ¿El color es blanco? ¿Laura? 14. Y opacidad a la vista, conviértete en realidad esto también algunos rojos puedes usar verano Pero terminemos con eso. Agreguemos también una sombra interior para ellos. La sombra misma, no la luz y el color. Y el color debe ser diferente del resto será demasiado profundo lo que hemos hecho menos el desenfoque 2010 es 20.40% ¿Bien? Y como antes, vamos a crear estilo Convexo suavemente. Yo lo llamo y lo guardo en nuestra biblioteca. Bien, entonces el último elemento de esta lección, nuevamente, vamos a crear el rectángulo. Mismo tamaño y misma esquina, radio 32, mismo color para ellos. Para los Elementos, ser escogido del fondo y añadir la sombra paralela. Primero, 188-30-4806 para el color y 15 para la y 15 para La sombra es menos cuatro, X menos Y. Blusa, y 34 Pasifae, el color es blanco en 88 es de color sucio. Y 40 forma de Bassett. Y la última sombra interior. Entonces es menos cuatro X menos Y. Cuatro tuplas desenfoque, 60, opacidad y Y ya hemos terminado con el último elemento de esta lección. Ahora vamos a guardarlo en nuestros Estilos. Lo llamaré cóncavo liso para poder utilizarlo en las próximas lecciones. Así que ahora hemos aprendido a manipular con todos sus efectos con el fin de crear diferentes estilos para elementos cóncavos y convexos con diferente profundidad y también como efecto liso Y en la siguiente lección, voy a hablar de colores. Eso es muy importante. Nos vemos en la siguiente lección. 8. Elige el color correcto: Elegir el color adecuado para tus Elementos y forma es crucial para lograr una impresionante Interfaz Neumorfica Siguiendo algunas reglas simples, puedes crear una experiencia visual que se sienta cálida, fría o algo intermedio En esta lección, quería compartir contigo una técnica única, cómo puedes construir realmente el color desde cero. Sé que para algunos Diseñadores, a veces puede ser muy difícil encontrar un Color Correcto. Así que vamos a saltar de inmediato. Pero primero hablemos de autos cálidos y fríos. Entender la diferencia entre ellos te ayudará a crear el Modo Desierto en tus diseños Neumórficos, los colores cálidos evocan una sensación de aspereza Mientras que los colores fríos aportan una sensación de calma y arrogancia Recuerda, a la hora identificar autos cálidos y fríos, piensa en los verdes azulados como un resfriado Y rojos, naranjas y rojos, amarillos tan cálidos. Sigamos en la Interfaz Figma. Y ya preparé dos mesas de trabajo para nuestra siguiente lección, la exploración de los colores Si quieres hacer lo mismo, ve al lado izquierdo de la Interfaz, busca el menú selecciona marco y dibuja cualquier tamaño de marco que prefieras. Ahora, comencemos escogiendo la paleta de colores. Elegir el Color Correcto es crucial para cualquier interfaz de usuario. Debemos considerar la superficie, el elemento en sí y la sombra. Para la iluminación, suele ser mejor ir solo con un collar blanco, que es seis veces F en hex. Para evitar hacerlo más difícil, te mostraré una técnica para seleccionar el color adecuado para tu interfaz. Primero, dibujaré un rectángulo. Puedes usar la tecla R para crear una. El tamaño no importa para esta lección, ya que nos estamos enfocando únicamente en los colores. El color del rectángulo no importa, ya sea rojo, verde o azul. Puedes elegir a cualquiera en el seleccionador de color, colocar el spot en algún lugar de la proporción áurea ¿Qué significa? El lado muy derecho, pero alrededor de un tercio de la longitud de la línea desde la derecha. No es necesariamente, pero funciona mejor para colores más suaves y tranquilos, diría yo Y ya verás por qué. Además, fijemos la transparencia del color. Para ello, baja un poco y ponlo al cinco por ciento. Presiona Intro para aplicar el color. Ahora, dibuja otro rectángulo que cubrirá el anterior apenas un poquito así. El color para este rectángulo debe ser lo más sencillo, gris oscuro con una transparencia también establecida en 5%. Entonces estamos mezclando dos colores para encontrar el color que buscamos, que será nuestro color principal. Dando la Interfaz. Llama a esto, o warmish, en ese caso, más frío, yo diría humor El color grisáceo ayuda demasiado profundo en el tono. Ahora, para averiguar el valor hexadecimal de este color, dibuja otro rectángulo, justo en algún lugar de aquí. Y presiona I en tu teclado, o usa el seleccionador de color y selecciona el color rojo, las bolas de los colores se superponen del rectángulo anterior Este será nuestro color principal para los futuros Elementos Neumorfos Y te voy a mostrar qué hacer visitar más tarde. Ahora, vamos a crear un par de colores más. Coloca otro rectángulo en algún lugar de aquí. Seleccione nuestro primero. Crea este rectángulo y mueve esta selección a cualquier color que prefieras. Notarás que el color del primer rectángulo cambia de tono ligeramente más cálido o más frío Vamos con un color más cálido esta vez. Otra vez. Usa el asqueroso en tu teclado para seleccionar el hexadecimal de colores superpuestos Hagamos de nuevo el mismo ejercicio y creamos otro rectángulo para copiar rápidamente el Rectángulo anterior. Presione Alt, mientras lo selecciona y mueve. Ahora tenemos tres colores que podemos usar en nuestra interfaz Neumorphic A continuación, seleccionemos el Color correcto para las sombras. Y te voy a mostrar una técnica llamada a eso. Crea un marco donde trabajaremos con sombras y Estilos. Usa el recogedor de color. Nuevamente, presione I en el teclado y seleccione el primer color que creamos el justo, ahora mismo, recientemente, usemos Efectos de la lección anterior y agreguemos colores a ellos. Para ello, dirígete al panel de efectos del lado derecho. Y deberías ver todos tus estilos aquí. Si no los ve, asegúrese de que está trabajando en el mismo archivo Figma, que estábamos trabajando en la lección anterior Como puedes usar estos Estilos que hemos creado y eventualmente en el futuro, convertirlos en el sistema de diseño. Hemos creado otro rectángulo y elegimos un estilo que podrías haber hecho anteriormente. Para este rectángulo se selecciona Convexo, bajo Sharpe si el nombre, si sigues la convención de nombres de la lección anterior No obstante, los colores del fondo y del elemento no coinciden bien. Para arreglar esto, primero hagamos que el rectángulo sea un poco más suave con 32 píxeles del radio de la esquina. Se desprenderá este estilo para cambiar los colores de la sombra y la superficie Haga clic en el pequeño botón detrás de los estilos nombrados para hacer esto. Ahora, podemos ver todas las sombras caídas de nuestro creador y sombras internas de la lección anterior para este estilo en particular. Una línea de todos los elementos con el fondo seleccionando tu elemento y usando el seleccionador de color y escoge un color de la superficie de fondo Ya se ve mucho mejor. Sin embargo, desde mi perspectiva, los tonos y otros colores no coinciden del todo entre sí. Entonces hagámoslo reventar un poco más. ¿Cómo podemos lograrlo? Bueno, este es el color que creamos en la mesa de trabajo anterior Vamos a crear otro rectángulo. Solo para elegir el auto adecuado, seleccione el color de fondo y abra el seleccionador de color Ahora, localicemos dónde se encuentra este color en la paleta de colores. Parece ser de color azulado, magenta. Para escoger una sombra para ello. Preferiríamos algo similar en el tono, pero más en un tono grisáceo, sucio y más oscuro. Por supuesto. Pongámoslo el lugar en algún lugar en medio de este espacio, dividido en tres partes y ajustemos la opacidad a alrededor del 80 por ciento Genial. Ahora necesitamos una selección del color en sí, como hicimos en la mesa de trabajo anterior Crea otro rectángulo, selecciona este color, y podemos eliminar el anterior. Ve que no tiene opacidad alguna. Da click en el color hexadecimal para copiarlo. Selecciona tu forma y ve al panel Efectos. Echemos un vistazo a la sombra de fondo. Tenemos que cambiarlo al color que acabamos de crear. Simplemente pega aquí el valor hexadecimal. La parte ligera permanece mientras, así que no necesitamos tocarlas. Ahora la sombra interior, nuevamente, reemplazamos por el color que acabamos de crear. Simplemente copie y pegue el hex. Ahora, eliminemos nuestro elemento. Se ve bastante bien, perfecto. Puedes usar las estrellas creadas y simplemente cambiar el color de los elementos y la Sombra. Por supuesto. También puedes jugar con los colores en el seleccionador de color si lo prefieres, un enfoque más intuitivo A menudo lo hago sin técnicas específicas, pero a veces ayuda usar el método. Yo sólo te muestro cuando algo no se siente bien. Bien, recapitulemos. Podría haber parecido muchos pasos, pero una vez que entiendes el proceso, se vuelve fácil y rápido. Así que vamos a repetirlo un par de veces y te acostumbrarás y familiarizarás con eso. Vamos a crear otra mesa de trabajo. Seleccione el marco y dibuje otra forma. Escogeré un color que creamos anteriormente. El segundo poco más cálido, diría yo. Nuevamente, encontremos la sombra para ello. Primero. Haz la forma un poco más suave con un radio de esquina de sodio para recoger la salsa como la anterior. Selecciona uno de los Estilos. Escogeré un Elementos Convexos. Se puede ver que no se ve bien. Los autos grisáceos parecen estar sucios. Repetimos el proceso. Primero, seleccione el color del elemento del fondo, presione I y haga clic en cualquier parte del fondo. Ahora, intentemos construir el color de la sombra. Seleccione el rectángulo, elija una mancha en la paleta de colores donde se encuentre el color y muévala a algún lugar alrededor de la mitad de este cuadrado. Pero ahora grande el color de la sombra. Recuerda, esto va a ser demasiado brillante, así que necesitamos ajustarlo un poco, crear otro rectángulo y seleccionar el color que creamos sin transparencia. Y para elegirlo es nuestro propio Hex. Seleccione eso, presione Comando C o Control C en Windows para copiar el hexadecimal. Ahora, vuelve a nuestra paleta de estilos o menú de estilos y cambia las sombras. Hay cuatro estilos. La primera sombra, por lo que pasamos el color selecto aquí. Entonces la luz blanca permanece sin cambios. Y la sombra interior necesitamos cambiar también al color creado. Echemos un vistazo a nuestro elemento. Se ve bastante genial. Así es como puedes usar diferentes colores para Interface. Como prometí, intentemos una sombra más brillante. Otra vez. Selecciona un color que creamos en la mesa de trabajo anterior. El último, el tercero, es un poco verdoso. Haga que el radio de la esquina esté listo para, para hacer la forma más suave. Y ve al panel de efectos. Selecciona otro estilo, desconéctalo y no olvides seleccionar el color para el elemento del fondo Vulcanizado, pero aún un poco sucio. Hagamos el color de sombra correcto. Selecciona un rectángulo y haz grande el color del fondo para encontrar su grupo de colores. Como hicimos en las dos anteriores, mesas de trabajo. Muévelo al fondo. Y como dije, hagámoslo un poco más brillante. Para ello, empuja nuestro lugar un poco hacia la derecha, y tal vez en algún lugar en el medio o incluso un poco arriba. Veamos cómo se ve. Además, el uso de la transparencia puede colorear más profundo. ¿Te acuerdas de eso? Bien. Ahora selecciona este color sin transparencia como lo hicimos anteriormente. Dos veces. Utilice la herramienta cuentagotas Este es nuestro color objetivo. Copia el hexadecimal de este elemento y pega el color en la sombra interior y en la sombra paralela de nuestros elementos. Se ve bastante genial. Ahora, puedes crear tus propios colores y Elementos para la interfaz. Como puedes ver, eso le da un efecto súper agradable y le da la sensación elegante y única de la interfaz. Estamos casi al final de nuestro curso. Pero vamos al Lado Oscuro de la cantidad de elementos. Sí, tienes razón. En el siguiente flex y vamos a hacer un Modo oscuro. Empecemos. 9. Modo oscuro: Decidí agregar esta lección ya que creo que en el estado actual del mundo es súper importante. Al igual que en este video, convertiremos todas las estadísticas y Elementos que creamos en las lecciones anteriores en el Modo oscuro o ese equipo, mayoría de las implementaciones actuales de las aplicaciones móviles o web requirieron un simple cambio entre el modo claro y oscuro, y por supuesto para las interfaces Neumorfas también Entonces intentemos crear Elementos para el Modo oscuro. Te puedo decir ya desde el principio no va a ser difícil porque vamos a usar los mismos estilos que ya creamos y que ya usamos en las lecciones anteriores. Simplemente ajustamos el color de fondo, ajustamos el color del elemento. Y en realidad, eso es todo. Por supuesto, los equipos oscuros. Son un poco específicos, sobre todo en el campo y diseño de skeuomorfismo porque es más difícil hacer todos estos elementos más a ellos más volumen ya que todo es tranquilo, oscuro, y casi invisible y el texto es súper contraste con Entonces, aunque vamos a usar el Diseño Neumórfico para los equipos oscuros, debemos tener mucho cuidado En primer lugar, porque la sombra en sí, podemos escoger sólo un color negro para eso. De lo contrario, no será visible de lo que no podrá proporcionar este efecto de volumen o crear el efecto de volumen para los elementos. Como puedes ver en estos ejemplos, todo el color de fondo y el color principal. Es un poco oscuro, pero no es negro ni negro puro. Para que puedas ver las sombras y el elemento en realidad brotan de ellas. Superficie. Bien, así que volvamos a nuestros estilos creados anteriormente y cambiemos rápidamente al Modo oscuro. En primer lugar, seleccionaré el primer elemento. Se trata de un cuadrado, 150 por 150 píxeles con ese radio de coordenadas de 32 píxeles. Y todos ellos son iguales. Entonces selecciona el primer elemento, el toque, el estilo a partir de eso. Y ahora vamos a trabajar con todas estas sombras caídas y sombras interiores. Seleccionemos nuestro para cambiar el color de fondo. Como vamos a hacer el tema oscuro. Seleccione nuestra mesa de trabajo, vaya al panel derecho. Vea este combustible combustible componentes seleccionados y elija un color de la paleta en algún lugar de la parte inferior, en la oscuridad, la zona oscura. Pero claro que no los muy negros como ya expliqué de otra manera, están todos de pie, no van a ser visibles. Hagamos algunos colores bastante fríos, algo así. Entonces, como puedes ver, está un poco en el fondo y está bastante oscuro Pero aún podemos distinguir la tonalidad del color. Entonces. Efecto Goldfish. Y por supuesto necesitamos copiar el color seleccionado ya que lo vamos a utilizar también para el elemento en sí, como recuerdas de lecciones anteriores, el color del elemento y el color de la superficie deben ser los mismos. O podemos hacer eso también simplemente seleccionando el elemento. Y al presionar abrí Color, Selecto de Color y escogí el color de la superficie. ¿Bien? Ahora como puedes ver, todo nuestro estilo de lecciones anteriores sigue siendo el mismo y no es lo que queremos, no nos está ayudando a que este elemento se vea Volumen. Nosotros, se ve con Volumen. Bien, ve al panel derecho del efecto. Veamos cuál es la primera sombra paralela Schulz. Así que hagámoslo súper simple. La sombra paralela debería ser súper oscura para que podamos verla. Así que sólo podemos seleccionar color muy negro, que es básicamente seis veces cero. Y la opacidad debe ser del 100%. Entonces básicamente no hay, no hay positivo y el color es puro. El siguiente es el de cuello blanco. Recuerda de las lecciones anteriores, era nuestro efecto de luz o básicamente era el reflejo de la luz. Aquí. No necesitamos eso tan fuerte. Y te aconsejo que lo reduzcas para agregar 10% Opacidad A continuación, sombra interior. De nuevo, esta es nuestra sombra, pero dentro del elemento, de nuevo, vamos a escoger siempre color oscuro y 100% de opacidad Y la siguiente sombra interior, nuevamente era blanca. Hagámoslo sólo el diez por ciento de Boston. Mira nuestros elementos. Yo diría que está terminado y podemos usarlo en la interfaz. Y hagamos lo mismo que todos los demás elementos. La primera sombra es de color negro puro al 100%. El siguiente es, es blanco. Entonces es diez por ciento, sólo. La sombra interior, de nuevo, es, debería ser muy oscura y es 100% sin transparencia. Y el color blanco, otra vez es bronceado. Y claro que nos olvidamos de escoger un color de la superficie. Haré lo mismo con otros elementos. Y el último, el estilo. Escoge un color negro. 100%, cuello blanco, 10%, nuevamente, cuello blanco y negro puro Yo estaba diez por ciento. Me gusta llamar a esto 10%. Escoja una superficie. Entonces ahora tenemos nuestros elementos e intentemos cambiar. Y luego Equipo Oscuro, el color de ese equipo. Como aquí, como puedes ver, hay varios autos y parece ser diferente. Vamos a usar un poco de color cálido para el fondo. De nuevo, seleccione Mesa de trabajo. Y escojamos un color así. Puedes usar mi selección. Sólo tienes que copiar el hex de aquí. ¿Y qué vamos a hacer? Me dices que seleccionamos todos nuestros elementos y elegimos un color de la superficie. Y eso es todo. Y en un segundo vamos a sumergirnos en nuestra última lección de este curso. Enhorabuena. Vamos a usar todo el crear estilos y elementos para finalmente crear una interfaz de usuario 10. Crea una interfaz móvil Neumorphic: Esta es nuestra última lección en este curso, y estoy súper emocionada de finalmente diseñar una interfaz. Junto a usted, hemos aprendido a usar el software Figma para crear formas simples y agregarles luces y sombras, crear estilos reutilizables y encontrar colores complejos para las futuras interfaces de usuario En esta lección, vamos a crear dos pantallas simples para la aplicación móvil. Como probablemente recuerdes, te aconsejo usar norma muy sutil de elementos para no abrumar la interfaz Si echas un vistazo a triple o Pinterest y buscas Neumorphic do is, probablemente notarás que la mayoría de los buenos ejemplos estaremos usando solo una pequeña cantidad de esos elementos El resto serán componentes funcionales y planos que le den al Usuario una sensación de equilibrio. Este es un ejemplo que vamos a crear en esta lección. Preparé este diseño por adelantado, y tres lograrán el mismo resultado, pero juntos Sígueme en Figma. Vamos a crear un marco, pero hagámoslo un poco diferente. Seleccione los dos marcos. Y en el lado derecho verás todos los diferentes tamaños. Tu pico de pollo por su Interfaz Móvil o interfaz web. Voy a elegir el tamaño para el iPhone. Y claro, no te olvides de todos los elementos que has creado antes y de todos los estilos. Definitivamente, los estaremos usando ahora. Bien, así podemos comenzar desde el principio desde el pequeño menú en la parte superior de la esquina de ellos. Interfaz. No a. para hacerlo, escogeré un rectángulo y dibujaré líneas simples de árbol. Sí, podemos asignarles color. Solo escojamos un más oscuro. Y hagamos el título de la página ya que nuestra interfaz será sobre la programación de un evento para el usuario. Hagamos una advertencia amistosa y una interfaz de usuario amigable. Si desea crear un texto y una interfaz, simplemente elija conductos a la esquina superior izquierda del lápiz. Y podemos seleccionar el estilo de fuente. Yo aconsejaría para esta interfaz seleccionar un nuevo estilo sheriff. O simplemente sígueme. Elige en esta fuente. Me gusta mucho. Agreguemos algo de espacio entre líneas. También quiero agregar una pequeña línea. El fondo generalmente lo puede encontrar en los iPhones llamados informalmente bar casero Pero les da una mirada más realista y cercana. Interfaz real y real. El siguiente elemento en nuestra interfaz será el calendario. Eso es súper fácil de crear. Basta con colocar otra vez una herramienta de texto, poner algún número, selecciono la fuente Roboto para hacer un poco de contraste. Ellos. Encabezado principal. Cambia el tamaño para hacerte más pequeño. Y qué Hacer, tenemos que colocar básicamente 77 números en una fila y luego copiarlos en papeles similares y jugarlos juntos. Te aconsejo que tengas un número y lo coloques en algún tipo de cuadrado para que sea más fácil ajustarlos y hacer parejo todo el calendario. Sentí que mi ajuste ese no era yo correcto. Tan rápido, sí. Reorganice un poco el espaciado entre los números y simplemente copie pegue básicamente todas las filas juntas Ahora podemos seleccionar todos los números juntos y moverlos y ajustarlos un poco al tamaño que realmente necesitamos. Casi terminado. Eliminemos algunos números desde el principio porque normalmente no es el monstruo, no de un día. Y colocar todos los nuevos números de los meses. Sería un trabajo duro, repetitivo, pero no sabía de esa manera cómo puedes hacerlo de manera diferente Y necesitamos los fines de semana, cambiar el color a un poco más claro para mostrárselo al usuario. Y algunos pequeños ajustes. Mira cómo se ve juntos. Otros elementos. También quiero colocar la barra superior desde el iPhone para hacer más Elementos para la interfaz. Herramienta. Vacío. Poco, ajusta la composición. Y finalmente, podemos usar nuestros elementos que preparamos antes y aprenderemos a crear. Por supuesto, puedes crear tus estilos para este diseño. Pero yo aconsejaría usar lo que ya hemos ajustado poco su radio de esquina a 16, y el tamaño también del botón. Con un dispositivo móvil, por lo general, es mejor tener botones más de 50 píxeles de altura. De lo contrario, es Hopi demasiado pequeño para su dedo. Simplemente usando texto para, para agregar un icono al botón. Y vamos a crear rápidamente otro icono, que será una lupa más Search Se ve bien. También agregaría algo más de atención y elementos de este eventos ya creados o seleccionados el día del calendario para hoy, por ejemplo. Algo más de excelencia. Y para aportar colores. Parece que hemos hecho con la primera pantalla, pero quieres crear otra para ayudar al evento Entonces básicamente cuando Usuario retoque al botón más, el haz Habrá otra caída de pantalla para el usuario Ahora miren juntos las pantallas de los tazones. Siento que los botones podrían ser un poco más grandes. Nuestros elementos, y vamos a cambiarlos a 65 píxeles. Para la segunda pantalla, vamos a quitar el pliegue de la manera en que las necesidades. Y como va a ser un poco pop up, el fondo debe ser oscuro Y luego el pop-up en sí, aparece desde arriba. Y para este pop up, vamos a usar el mismo seleccionador de calendario porque tú Flow te crea el nuevo evento y necesitas seleccionar una fecha Para qué fecha vas a estar. Incluso. Cambiar el título. Y claro que vamos a usar otro elemento el cual creas un depósito y alcanzas será que presentes el TextField Pero primero ajustemos algunos elementos en el seleccionador de color rápidamente Yo aconsejaría seleccionar uno de ellos. Elemento cóncavo. Este elemento estará representando un campo de texto, o incluso mejor decir área de texto, donde el usuario estará agregando su descripción para el evento. Cambia el color, por supuesto, del elemento, elige el color del fondo. Y veo desde mi perspectiva, algunas de sus sombras pueden ser un poco. Por supuesto que tenemos que ajustarles también el radio de esquina. Y voy a adjuntar el estilo y los pedacitos que la opacidad de sus formas Entonces no va a ser tan fuerte. Como nuestra interfaz. Muy ligero y sencillo. Por supuesto, el usuario necesita cerrar de alguna manera esta ventana emergente así que necesitamos colocar un par de botones más. Probablemente cancele y luego pueda elegir o gruñendo el pop-up o en realidad agregando este evento No dar cuenta. Otro pequeño y último elemento que me gustaría agregar a esta interfaz es el pequeño texto de ayuda dentro del área de texto. Entonces el usuario entenderá que en realidad puede escribir dentro de esta forma dentro del cuadrado. Y terminamos con la última lección. Te mostré un ejemplo de la interfaz usando un brazo de elementos. Probablemente fue un poco rápido, pero mi principal objetivo era mostrarte y darte algún tipo de dirección en lugar de simplemente doblar, conocer. Para crear exactamente la misma interfaz, puedes usar esas ideas o la sensación de la composición de la balanza para lograr tus ideas, puedes probarlas por tu cuenta y simplemente crear una interfaz similar o incluso completamente diferente. En la última parte de este curso, te voy a explicar la tarea que puedes realizar por tu cuenta. Y entonces estoy feliz de revisar tus resultados y darte una sugerencia en toda dirección cómo mejorar 11. Proyecto del curso: Enhorabuena, terminamos con nuestro curso. Tu tarea es diseñar una o dos pantallas para una calculadora básica usando estilos Neumórficos Por supuesto, puedes usar elementos que hemos hecho juntos o crear tuyo propio usando todas las técnicas aprendimos durante este curso, te animo a usar todos los principios del Neomorfismo para crear interfaces visualmente atractivas Recuerda que al final, esas interfaces serán utilizadas por las personas. Una vez que hayas completado tus diseños, puedes compartirlos conmigo en el foro del curso. Y estoy más que feliz de comentar o ayudarte a mejorar. No puedo esperar a ver lo que se te ocurre. No tengas miedo de ser creativo y haberla financiado. Siéntete libre de experimentar y recordar, la práctica hace la perfección. Gracias por ser parte de esta increíble experiencia de aprendizaje. Y me alegro de verte en mis próximos cursos. Por favor revise mi perfil. También tengo otro curso que llamó composición. Si quieres practicar más y encontrar más inspiración del mundo que te rodea para desarrollar tus habilidades en cuanto a maquetación y composición. Así que échale un vistazo y nos vemos más tarde. Nos vemos. Adiós.