Transcripciones
1. Vista previa del curso: Bienvenido al
curso de introducción al diseño UI UX. En este curso, vamos a aprender algunos de los conceptos básicos del diseño de UI UX utilizando la
plataforma gratuita llamada Figma, que construyen productos juntos. Mi nombre es Amy, soy tu instructora
para este curso. He sido diseñador
por más de tres años, trabajando en múltiples proyectos
tanto en aplicaciones móviles como web sobre si estás
interesado en aprender diseño. Y esta es tu
primera vez diseñando o tu viga diseñando
desde hace algún tiempo. Y ahora vas
a aprender Figma. Este curso es exactamente para ti. En este curso
vamos a aprender conceptos
esenciales de
diseño de UI y UX. Y por qué Figma
es una herramienta tan poderosa y cómo puede ayudarte en
tus proyectos de diseño. Y vamos a la primera
parte del curso.
2. Diseño de UI y UX: Entonces, primero, es importante
definir estos dos términos, interfaz de usuario o diseño de
interfaz de usuario se trata de la experiencia
estética. Para darle a esto un ejemplo tangible, piensa en la aplicación móvil
que usas todos los días. Y el diseño de
experiencia de usuario o el diseño ha ayudado a decidir
qué características, qué cosas
serían en ese producto, y cómo el trabajo y quién
se siente mientras los usa. Entonces aún suena un poco
complicado, ¿verdad? Tanto los diseñadores de UX como de UI
lo que estamos usando, pero intentemos desglosar
esto para que
sea un poco más clara la experiencia
del
usuario y la interfaz de usuario que la experiencia implica muchas cosas
diferentes . Cómo te sientes, dónde estás, tus motivaciones están en el
momento en que las estás haciendo. ¿ Qué pasa cuando
haces algo? ¿ Cuál fue la reacción? Hay muchas cosas involucradas en cómo experimentas cualquier cosa. Ahora echemos un vistazo a
la interfaz de palabras. Y la interfaz es una cosa
particular con la
que haces una o más
interacciones. Piense por ejemplo, en
un control remoto con, pero eso es una cosa con la
que se está interconectando para lograr algo. Por lo que esta es la
diferencia real entre experiencia
del usuario y la interfaz de
usuario. Entonces la experiencia,
lo que sea que sientas, lo que quieras en todas las diferentes
formas en que puedes hacerlo. Y una interfaz es
esa cosa tangible con la
que interactúas para
conseguir algo específico. Los diseñadores de Ui y UX suelen trabajar en los mismos proyectos y
muchas veces al mismo tiempo, pero son realmente
responsables de cosas muy diferentes. El diseñador de Ui es
responsable de representar visualmente todos estos conceptos e ideas una manera que el usuario sepa
exactamente cómo usarlos. Diseñador Ux responsable de
la experiencia general, entendiendo a los usuarios
y ayudando a dar conceptos y formas de mejorar la
experiencia para los usuarios. Y nos vemos en la segunda parte.
3. ¿Qué es la FIGMA: En esta parte,
exploraremos Figma, aprenderemos qué es y cómo podemos
comenzar con él. Repasaremos algunos de estos temas
esenciales que te
prepararán para diseñar
hermosos proyectos de UI UX. Figma es un software de
diseño líder, ayuda a equipos e
individuos a crear diseños de manera
más rápida y eficiente. Figma tiene algunas ventajas. Uno lo más importante, para ti, es gratis empezar si
estás trabajando por ti mismo. Utilizado por muchas
empresas porque también tiene realmente
buena colaboración. Por lo que puede tener varias
personas trabajando en el mismo archivo de diseño
al mismo tiempo. También muy rápido. Funciona en cualquier computadora, ya sea que tengas un
Mac o un PC o Linux, lo que tengas,
funciona justo en el navegador y
además cuenta con un laboratorio móvil. Para que puedas previsualizar tus
diseños en una pantalla móvil. Por lo que realmente
no hay inconveniente en comenzar
con una herramienta como Figma. Es un gran recurso para
cualquiera que inicie un nuevo IN UX. Por lo que esta es la página web
que sólo tienes que ir a figma.com. Ya he iniciado sesión, pero puedes registrarte muy rápido incluso con tu cuenta de
Google en. Comience a usar
la versión del navegador. Pero si quieres
usar la aplicación de escritorio, puedes hacer clic aquí
Buena aplicación de escritorio y abrir tu cuenta
de la misma manera. Pero antes de saltar
directo a Figma, quiero mostrarles la forma en que recomendaría para empezar. Por lo que solo quieres
empezar a practicar. Ahora para eso, no les voy
a pedir que empiecen a diseñar algo desde cero porque
creo que eso sería
muy duro con alguien. Sobre todo si eres
un principiante completo en este espacio y no
tienes bases en principios de
diseño y
cosas por el estilo. Por lo que la mejor manera de
empezar es en realidad copiando
otros diseños para terminar. El motivo por el que esto es tan
bueno es porque
se puede ver cómo se creó el
diseño. Para que cuando te quedes
atascado en algo, realidad
puedas ver cómo
esta persona que creó esto logró un efecto particular
o señal de figurar. Esto está totalmente bien
al principio porque no vas
a estar vendiendo estos. No vas a estar
diciendo que diseñas algo cuando
lo copiaste de otra persona. Esto es solo para
tu propia práctica y es una muy buena
manera de empezar.
4. Empezar con figma: Comenzar. Ahora, haz eso. Quería
empezar con una plantilla. Y lo que literalmente
hice fue hacer clic en comunidad. Entonces cuando mires eso, encontrarás una sucursal de kits de interfaz de usuario donde puedo
buscar apps de compras. Y esto es una gran
cosa de Figma. Hay una gran cantidad de recursos
gratuitos en la comunidad que
puedes usar para empezar a
practicar para incorporar a tu diseño para no
tener que empezar de cero. Y elijo esta aplicación compras
en línea como ejemplo. Y yo abro aquí. Después de que puedas hacer clic en
este botón aquí, obtén una copia que diga
Copiar a cuenta Figma. Y puedo empezar a editar esto. De acuerdo, entonces ahora
tenemos una copia de ese archivo que vamos a
usar como nuestro punto de partida. Entonces en Figma, como pueden ver, solo
puedo desplazarme hacia arriba y hacia abajo para ver las diferentes
pantallas y archivo de disco. Y puedo
reorganizarlos muy fácilmente. Notarás que en el archivo
original se colocaron lado a lado y tengo más
de un arreglo vertical. Y puedo moverlo con
el cursor del ratón así. Y puedo acercar y
alejar con un gesto de pellizco en mi track pad de esa manera
puedo ver todas mis pantallas. Entonces digamos que ahora quiero
empezar a hacer frente a este diseño, lo que hago, bueno, sólo
para darte lo básico. la izquierda aquí, solo
tengo una sección de capas. Y luego cuando
selecciono un elemento, obtengo la configuración de
ese elemento a la derecha. Por lo que comenzaremos paso a paso para rediseñar esta pantalla de inicio de sesión. Y a medida que avanzamos usaremos formas,
colores e íconos
específicos. Antes de comenzar,
ajustaremos nuestro entorno para agregar una nueva pantalla junto a
la pantalla de inicio de sesión original. Ahora el primer paso para
diseñar una nueva pantalla, hay
que elegir
el marco que envuelve todas las
formas de pantalla así. Damos clic aquí y elegimos un
marco para rediseñar de la siguiente manera, cualquier formato para nuestra pantalla. Pero lo que vamos a hacer
ahora para preparar el marco, vamos a elegir
aquí en esta parte izquierda, el tipo de marco
adecuado para nuestro uso. Y en este caso,
elegimos el iPhone 13 Pro Max y lo movemos
al lado de eso así. Ahora empezamos con
el encabezado del teléfono. Y usaremos los
plug-ins para el icono. Haga clic aquí
y elija plugins, más plug-ins para administrar nuestros plugins para usar
durante el diseño. Aquí encontrarás muchos plugins
útiles. Pero ahora vamos a
elegir icono si cinco. Después de renderizar
plug-in, haga clic en Instalar. Ahora podemos usar el
ícono a las cinco login. Empezando por el icono de Wi-Fi. Elegimos este icono y hacemos clic en icono de
importación para estar disponibles
para usar en nuestra nueva pantalla. Y terminamos el resto de los
íconos con el mismo método. Ahora cambiamos el tamaño de los íconos
y nos movemos hacia arriba así. Puedes agrupar sus tres iconos para moverte
en control fácilmente. Y la hora simplemente con
la herramienta de texto como esta. Y cambiamos ahora el color
de fondo como la otra pantalla.
Seleccioneel marco. Y aquí a la derecha,
baja un poco y da clic aquí. Como ves esta paleta de colores, podemos elegir un color como ese, o usar esta pequeña
herramienta, el picker, y luego dar clic en el lugar al que quieras tomar el mismo color. Ahora añadiremos este icono grande con el mismo método
que el otro. Escribimos compras y
elegimos el ícono nuevo quiero. Después construiremos
el campo nombre con la herramienta rectángulo. ¿ Cuál? Un anuncio de aquí. Y cambiamos el color de
su borde a blanco. Aquí a la derecha. Elegimos
este parámetro de trazo. Entonces podemos aumentar el tamaño del borde en
tres para ser más claros. Y ahora cambiamos
su color a rojo. Pero aún así es
necesario ajustar el
radio fronterizo así. Aquí a la derecha
en la parte superior hay como el parámetro de radio de borde. Ahora podemos agregar el otro
campo en el botón. Copia y pega del primer campo porque tienen
una forma similar. Y no olvides
cambiar el color del botón. Después añadiremos estos dos
íconos como los demás. Usando el icono. Si enchufo. Ahora nos movemos en
cada uno en su lugar. Pero como ven aquí, el ícono ha desaparecido. Lo has deseleccionado
y haz clic derecho con el ratón y eliges
Traer al frente. Nuevamente, es necesario
cambiar los colores a
blanco para los dos íconos. Por lo que ahora vamos a agregar los
textos para los dos campos e iniciar sesión para el botón. Y continúa agregando contraseña
olvidada justo debajo del botón con el mismo método. Pero hay que ser
más delgado que los demás. Para cambiar este parámetro. Seleccionas el texto y vas a la derecha y das clic
en esta lista de pick. Después elige la talla
que quieras. Para nosotros. Ahora elegiremos medio. Por último, terminamos con ello. Esta parte que contiene tres iconos y la
frase justo debajo. Vamos a elegir diferentes íconos de
la pantalla original, que veo son más
consistentes con nuestra pantalla. Y no olvides cambiar el color de los
iconos en el encabezado. Por lo que usamos en esta nueva pantalla las herramientas básicas de Figma y
cómo instalar y usar plugins. Aún así, hay otras herramientas y cosas que aprender y diseñar
con Figma como prototipos. Ahora has creado
algo que está muy cerca del diseño
original. Como puedes ver, comenzar con una plantilla
que ya está en Figma te permite hacer trampas
al principio y
copiar sobre elementos. Y solo debes buscar recursos
gratuitos que tengan diseños de
aplicaciones móviles o web y comenzar a sobrellevarlas. Mira cómo puedes recrear
estos elementos. Y con el tiempo comenzarás a interiorizar todos
los principios. Por supuesto, en algún momento, es realmente bueno si
comienzas a aprender sobre la
teoría real del diseño. Pero esta es una forma de
empezar sin
estar empantanado. Entonces tal vez puedas cambiar. Harás un
poco de práctica, un poco de la teoría, y empezarás a aplicar lo que aprendiste. Pero esta es una forma de
empezar sin conocer ninguna teoría y
justificar los diseños de afrontamiento. Ahora el siguiente paso a partir de esto sería empezar a
diseñar cosas en Figma cuando estés
cómodo con él y puedas recrear bastante
todo lo que ves. Por lo que es posible que veas una
app que te guste que no esté ya
creada y grande. Entonces tal vez busques
en Instagram o cualquier otra app que te guste
o app watts o algo así. Y puedes empezar a
diseñar eso en Figma cuando empieces a familiarizarte cada vez más con la herramienta. Y el paso después de
eso es mirar una app que crees que
podría mejorarse. Entonces tal vez tu
app bancaria es
realmente, muy mala y siempre has querido mejorarla
bien ahora ya
sabes usar Figma lo suficiente como para empezar a armar un nuevo diseño. Por lo que espero que este video te haya
sido de ayuda. Y si tienes alguna
duda sobre los próximos pasos, algo en lo que te quedaste atascado, contáctame en mi correo y te veré
en el siguiente video.
Amine Abdelkebir, UI/UX Designer
