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.
Katerina Liebich Blik, UI & Product designer | UX researcher
