Transcripciones
1. INTRODUCCIÓN: Chicos santos, ¿te interesa diseñar una
interfaz de usuario usando IA? Si la respuesta es sí, entonces
este curso podría ser para ti. Entonces en este curso, vamos a tener múltiples proyectos. Entonces en el primer proyecto,
vamos a diseñar la interfaz de usuario para la
aplicación de aprendizaje de idiomas usando UISR Esta herramienta es muy fácil de usar. Todo lo que necesitas hacer es escribir el prompt describiendo
tu proyecto, y en menos de un minuto, UIZR te va a generar diseños de interfaz de usuario de
alta calidad como
este. Muy genial, ¿verdad? A continuación, también puedes
tomar una captura de pantalla de un sitio web o
aplicaciones móviles, y UizRT
podrá convertir esa captura de pantalla en diseños de interfaz de usuario editables
. Mira esto. En el próximo proyecto,
vas a scat una interfaz de usuario en papel, y puedes tomar una foto
del scat y subir esa foto,
y físicamente la IA
podrá convertir ese sket en diseños editables de
UI Muy genial, ¿verdad? En
el próximo proyecto, vamos a
diseñar la interfaz de usuario para el sitio web de Ecommerce
usando Wind Frame. Entonces también vamos
a diseñar la interfaz de usuario para el
análisis de ingresos por ventas usando FSL Miren a estos chicos.
Bastante genial, ¿verdad? A continuación, vamos a diseñar la interfaz de
usuario para la página de registro. Vamos a diseñar la interfaz de usuario para diseñar
pads manualmente. A continuación, vamos a analizar las atenciones de
los usuarios usando IA Entonces obtendrás el
hitmp y el hitmp te
mostrará dónde
se concentra principalmente la atención del
usuario se concentra principalmente Y por último, vamos a
realizar una investigación de experiencia de usuario utilizando UX Pilot.
2. Diseño de interfaz de usuario para una aplicación de aprendizaje de idiomas con Uizard: Santo elenco, bienvenido de
nuevo al curso. En este video,
vamos a diseñar la interfaz de
usuario usando UIZRT Bien, así que ahora, comencemos. Lo primero que
debes hacer es registrarte. Así que simplemente haz clic en Regístrate gratis, y serás
redirigido a esta página Como ustedes pueden ver
tienen dos opciones. Puedes registrarte usando
tu cuenta de Gmail. También puedes registrarte usando
tu cuenta de Microsoft. Entonces depende totalmente de ti. En este caso, voy a
registrarme usando mi cuenta de Gmail. Como ustedes pueden ver aquí, me redirigieron
a mi tablero Bien, entonces aquí mismo,
hay cuatro opciones. La primera opción es
un nuevo proyecto en blanco. Para que puedas crear la
interfaz de usuario desde cero. La segunda opción es
comenzar desde la captura de pantalla. Entonces puedes tomar una captura de pantalla de un sitio web o
aplicaciones móviles, luego subir esa captura de pantalla, y UISRT va a convertir esa captura de pantalla en diseños de interfaz La tercera opción es generar los diseños de UI usando
Auto Designer, y la cuarta opción es
comenzar desde plantillas. Como ustedes saben, UISRT
tiene muchas plantillas, por lo que pueden elegir una
de estas plantillas y personalizarla como
quieran No obstante, en este video, vamos a estar concentrándonos
principalmente en esta característica, Auto designer Así que simplemente haz clic en esto
y será redirigido a esta
página. Todo bien. Así que ahora comencemos. En primer lugar, ¿tendrá
que seleccionar para qué dispositivo está
diseñando? Como ustedes pueden ver
aquí, hay tres opciones móvil,
tablet y deskpe Voy a seleccionar móvil. A continuación, deberá escribir el prompt describiendo
su proyecto. Bien, entonces en este ejemplo, voy a crear una interfaz de
usuario para la app Language Learning. Bien, entonces voy a
escribir algo como esto, una app de aprendizaje de idiomas
para estudiantes y Tauro. Bien, entonces a continuación,
necesitarás describir
el estilo de diseño. Puedes especificar cosas
como colores y diseños. Bien, así que escribamos las descripciones una app moderna con equipo azul claro. A continuación, también puedes seleccionar
algunas de estas palabras clave. Voy a seleccionar ligero
moderado y elegante. Bien, entonces siguiente, solo haz clic en
Generar mi proyecto. Bien, así que esperen, chicos. El proceso puede tardar
un par de minutos. Ojalá no tarde demasiado
, y estoy súper emocionada de ver mi interfaz de usuario.
Bien, así que solo espera. En realidad, no quiero que
este video sea demasiado largo, así que voy a saltarme esta parte, y voy a regresar una vez diseño de
la interfaz de usuario esté listo. Bien, finalmente, los diseños de la
interfaz de usuario están listos. En realidad, el proceso
no tardó demasiado, chicos. Solo tardó 2 minutos o tal vez
incluso menos de 2 minutos. Bien, así que ahora voy
a dar clic en Vista previa. Y hagamos clic en Descripción general. Como ustedes pueden ver, UizRT
ha generado varias páginas. Mira esto. Entonces tenemos la página de
bienvenida, la página de registro, la pantalla de
inicio, la búsqueda, el perfil y la configuración de la cuenta.
Miren a estos chicos. Muy chulo. Bien, voy a
hacer zoom un poco. Bien, miren esto, chicos. Muy genial, ¿verdad? Bien, así que
ahora solo haz clic en Vista previa. Simplemente haz clic en Lo tengo. Bien, así que solo haz clic en Comenzar únete ahora. Bien, entonces esto es como
la página principal, chicos. Mira esto. Si hacemos
clic en el perfil, seremos redirigidos
a esta página Si hacemos clic en home, seremos redirigidos de
nuevo a esta página Y si haces clic en
alguno de estos cursos, serás redirigido a esta
página. Miren esto, chicos. Eso es increíble, ¿verdad? Bien, entonces ahora
volvamos a la página de edición. Voy a cerrar esta pestaña. Entonces, si no estás satisfecho
con los diseños de UI, puedes sentirte libre de
personalizarlo, ¿verdad? Para que puedas agregar texto.
Se pueden agregar botones. Se puede agregar forma, y todavía muchos más, chicos. También puedes agregar imagen,
así que simplemente haz clic en Imagen. Como ustedes pueden ver UISRT tiene
su propia biblioteca de imágenes aquí. También puedes generar
una imagen usando IA, así que simplemente haz clic en esto y solo
escribe aquí tu baile de graduación. Y si haces clic en los iconos, también
puedes agregar cualquier íconos a tu interfaz de
usuario. Como ustedes pueden ver aquí, el ISAT tiene muchos íconos diferentes
aquí, chicos. Mira esto. Además de eso,
también puedes editar la página. Así que solo selecciona la página
que deseas editar. Por ejemplo, en este caso, quiero editar el homestren para
que solo seleccione Homestren y
pueda Se pueden modificar las
posiciones, el tamaño. También puedes cambiar el estilo. Se puede cambiar el color de la pantalla. Puede agrupar o desagrupar
los objetos en esta página. Por último, si quieres Descargar el diseño de la interfaz de usuario,
simplemente haz clic en Exportar. Como ustedes pueden ver aquí,
tienen varias opciones. Por lo que puedes descargar
esto en formato PNG y formato JPAGEFMAT SVG o PDF.
Entonces depende totalmente de ti. Voy a descargar este diseño de
interfaz de usuario en formato PNG. Así que solo haz clic en Exportar. Bien, entonces el proceso puede tardar uno o dos minutos. Así que
solo esperen, chicos. Ojalá, no
tarde demasiado. Bien, como ustedes pueden ver, hemos
descargado con éxito esta imagen Mira esto. Muy genial, ¿verdad? Bien, chicos, creo que eso
es todo. Eso es todo lo que necesitas saber. Veré chicos en el
siguiente video donde vamos a crear un diseño de interfaz de
usuario usando otra herramienta de IA. Así que los
veré ahí, chicos.
3. Cómo diseñar una interfaz de usuario con Google Stitch y Figma: Hola, chicos. Bienvenidos de
nuevo al curso. En este video,
vamos a diseñar la interfaz de
usuario
utilizando dos herramientas de IA. El primero es Google States, y el segundo es FicMA AI Bien, comencemos. En primer lugar, vamos
a escribir el baile de graduación. Crear interfaz de usuario diseñada para software de análisis de ventas. Eso tiene dos montadores principales. El primero es el tablero de
seguimiento de ventas. Y el segundo son las segmentaciones de
clientes,
visualizaciones Hacer que el diseño sea moderno
e interactivo. A continuación, puedes seleccionar qué tipo de app
quieres diseñar. Si quieres diseñar la interfaz de usuario
para la aplicación móvil, haz clic en esta. Si quieres diseñar la interfaz de usuario
para la aplicación web, haz clic en esta. Adicionalmente, también puedes
subir una imagen o un boceto para inspiraciones y hagamos
clic en Generar diseño. Bien, ahora la IA está
creando el diseño de la interfaz de usuario, y tendremos que
responder estas preguntas. Para diseñar un software integral de análisis de
ventas, puedo crear las siguientes
dos pantallas para usted. Panel de seguimiento de ventas. Por lo que esta pantalla
proporcionará una visión general del rendimiento de ventas
con métricas clave y gráficos interactivos. Y la segunda son las visualizaciones de segmentación de
clientes Esta pantalla mostrará segmentos de
clientes a través varias visualizaciones
que permiten obtener información más profunda ¿Debo seguir adelante y diseñar
estas dos pantallas para ti? Bien, ahora, la IA va
a crear el diseño. Tardará unos minutos.
Así que esperen, chicos. Ojalá no tarde demasiado
, y estoy muy emocionada de
ver el resultado. Bueno, no tardó
mucho, chicos. Solo tardó 1 minuto o
incluso menos de 1 minuto. Bien, aquí está el diseño de la interfaz de usuario. Entonces este es el trabajo de escritorio
de análisis de ventas. Tenemos visión general de ventas, ingresos
totales, valor
promedio de venta, clientes, ventas a lo largo del tiempo y
ventas por Regent Y aquí están las visualizaciones de
segmentaciones de clientes. Por lo tanto, tenemos
distribuciones de clientes por su
valor de vida útil del cliente versus frecuencia de
compra y segmentos de clientes
principales por ingresos. Bien,
muy guay, chicos. Si quieres descargar este
diseño, es muy fácil. Simplemente haga clic en esta Descargar. También puedes ver el código. Como ustedes pueden ver, aquí
tenemos el código DDML. Puedes copiar el código y puedes compilarlo en
código VS. Bien, a continuación, vamos
a probar la segunda herramienta de IA. El nombre de la herramienta es Figma. Entonces vamos a
usar el mismo prompt. Entonces copiemos y
peguemos este baile de graduación, y pongámoslo aquí. Pero antes de eso,
asegúrate de investigar ya al FICMA Crear un diseño de
interfaz de usuario para software de análisis de
ventas
que tenga dos cadenas principales, panel de seguimiento de
ventas
y segmentaciones de clientes,
hsualizaciones, hacen que el Y hagamos clic en Generar. VICMA tardará unos
minutos en
generar el diseño de la interfaz de usuario.
Así que solo esperen chicos. Ojalá no
tarde demasiado. Bueno, no tardó
mucho, chicos. Sólo tardó un minuto o
incluso menos de un minuto. Bien, aquí está el tablero
de ventas. Tenemos visión general
ingresos totales pedidos totales, tasa de conversión de
nuevos clientes. UI muy cool, chicos, tendencias de
ingresos,
ventas por categoría, métricas de
rendimiento,
transacciones recientes, muy completas. Y hagamos clic en las segmentaciones de
clientes. Contamos con distribuciones de segmentos, comparación métrica de
segmentos. Una métrica de segmento detallada.
Muy completo. Y también puedes ver el código. Simplemente haga clic en esto y
podrá ver el código. Puedes descargar el código
y compilarlo en código FAS. Bien, chicos, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en
el siguiente video. Adiós.
4. Cómo crear diseño de interfaz de usuario para una aplicación de entrega de comestibles con Banani, Nano Banana y Manus: Holi chicos. Bienvenidos de
nuevo al curso. En este video,
vamos a diseñar interfaz de
usuario para la aplicación de entrega de
comestibles utilizando tres herramientas de IA. El primero es Banani. El segundo es Géminis, y el tercero es Manus. Bien, comencemos. En primer lugar, voy a iniciar sesión. Voy a iniciar sesión
usando mi cuenta de Gmail, así que hagamos clic en
Continuar con Google. Como ustedes pueden ver, he iniciado sesión
con éxito, y aquí está mi tablero de polvo. Bien, comencemos. Vamos a escribir el baile de graduación. Cree un diseño de interfaz de usuario
para la aplicación de entrega de comestibles. Esta app cuenta con tres montadores principales. El primero es el mercado de
productos. Con tarjeta de compra. Entonces, si el usuario
quiere comprar el producto, el usuario puede hacer clic en el producto y agregarlo
a la tarjeta de compras. La segunda característica es seguimiento de la
entrega de paquetes en tiempo
real en el mapa interactivo. Y la tercera fuente es el panel de
análisis de gastos
mensuales Por lo que el usuario
podrá rastrear y analizar su
gasto para cada mes. Bien, ahora hagamos clic en Generar
tardará unos minutos, tal vez uno o 2 minutos. Esperen chicos. Ojalá
no tarde demasiado y estoy muy emocionada de
ver el resultado. Bueno, no tardó demasiado. Sólo tardó un minuto o
incluso menos de un minuto. Bien, mira este tablero
de comestibles. Contamos con categorías de productos, seguimiento
activo de entregas, gasto
mensual. Mira esto. Muy chulo. Y aquí hay otra
alternativa. Mira esto. Es relativamente similar, pero el diseño es un
poco diferente. Y aquí está la tercera opción. Bien, muy genial. Si quieres descargar estas imágenes,
simplemente haz clic en Exportar. Y puedes exportar esta
imagen como PNG o GPG. Depende totalmente de usted
y simplemente haga clic en Exportar. Bien, ahora vamos a
probar la segunda herramienta de IA. Entonces abramos Jim andi. Y en este caso, vamos
a utilizar el modelo Nanobanana. Así que vamos a hacer clic en
este crear Imagen. Y voy a copiar y
pegar el mismo prompt. Así que vamos a crear un diseño de interfaz de
usuario para la aplicación de entrega de comestibles. Bien, hagamos clic en Enviar. Bien, ahora está cargando
el modelo nano Banana. Tardará unos minutos, tal vez uno o 2 minutos. Así que esperen, chicos. Ojalá
no tarde demasiado. Bien, aquí vamos. Aquí está el
diseño. Bien, mira esto. Tenemos tres características, ¿verdad? El mercado de productos, el seguimiento de la
entrega de paquetes en tiempo real y el análisis de gastos. Tablero Das. Mira
esto. Muy chulo. Bien, ahora vamos a
probar la tercera herramienta de IA. El nombre de la herramienta es Manus. Y vamos a copiar
y pegar el baile de graduación, así que vamos a usar exactamente
el mismo prompt y vamos a hacer clic en diseño. Bien, ahora, hagamos clic en Generar. Bueno, no
tardó mucho chicos. Sólo tardó 30 segundos o
incluso menos de 30 segundos. Bien, déjame
acercarme un poco. Entonces aquí está el primer mercado de
productos de cadenas. Y como ustedes pueden ver aquí, tenemos un carrito de compras para que el
usuario pueda hacer clic y el producto se va a agregar automáticamente
al carrito de compras. Y la segunda característica es el seguimiento de entregas en tiempo
real. Esta es la tienda de abarrotes, y esta es tu casa, y el chofer está en camino, y también tienes la hora
estimada de llegada. Mira esto. Muy genial, ¿verdad? Y aquí está el tercero más gordo. Panel de análisis de gastos. Por lo que podrás analizar tus gastos para cada mes, y además desglosa tus gastos por categoría de
producto. Muy chulo. Bien, chicos, creo que ya está. Eso es todo lo que
necesitas saber. Los veré chicos en el siguiente video. Adiós.
5. Cómo diseñar una interfaz de usuario para un sitio web de comercio electrónico con Wind Frame: Holocausto, bienvenidos de
nuevo al curso. En este video,
vamos a crear un diseño de interfaz de
usuario
usando Wind frame. Bien, así que ahora comencemos. Lo primero que
debes hacer es registrarte. Así que solo haz clic en Regístrate. Serás redirigido
a esta página. Como ustedes pueden ver,
tienen dos opciones. Puedes registrarte usando
tu cuenta de Github. También puedes registrarte
usando tu cuenta de Gmail. Entonces me voy a inscribir
usando mi cuenta de Gmail. Como ustedes pueden ver, me
redirigieron a mi tablero. Bien, entonces ahora vamos
a crear un nuevo proyecto. Así que simplemente haz clic en Crear proyecto. Deberá ingresar
el nombre del proyecto. Bien, entonces voy a
nombrarlo como diseño de interfaz de usuario. Y voy a dar
clic en Crear proyecto. Bien, entonces ahora Wind frame
está creando el proyecto. Y como ustedes pueden ver, nos
redirigieron a la página de edición Bien, entonces esta herramienta es
muy fácil de usar chicos. Todo lo que necesitas hacer
es escribir el baile de graduación describiendo cómo
debería verse la interfaz de
usuario , ya que puedes
especificar cosas como características, funcionalidades, color,
diseño y estilos. Bien, entonces en este ejemplo, voy a crear diseños de interfaz de
usuario para el sitio web de Ecommerce. Bien, entonces ahora
escribamos el prompt. Catálogo de productos, página para sitio web de
comercio electrónico con moderado Maquetación
estética de equipo. Y fondo oscuro. Bien, entonces ese es mi aviso. Ahora, vamos a hacer clic en
esto. Entonces el proceso podría tardar un par de minutos
chicos. Así que solo espera. Ojalá, no
tarde demasiado. Estoy muy emocionada de
ver el resultado. Bien, no quiero que este
video sea demasiado largo,
chicos, así que solo voy
a saltarme esta parte, y voy a regresar una vez el diseño de la interfaz de usuario esté listo, y les
voy a mostrar. Bien, finalmente, el diseño de la
interfaz de usuario está listo. En realidad, no
tardó mucho, chicos. Solo tardó 2 minutos o tal vez
incluso menos de 2 minutos. Bien, así como ustedes pueden ver, esta es la página del catálogo de productos para nuestro sitio web de comercio electrónico. Hay como dos
listados de productos aquí. Mira esto. Muy genial, ¿verdad? Si no
estás satisfecho
con el resultado, puedes pedirle
a AI que rediseñe esta interfaz de usuario, que puedas escribir el
baile de graduación aquí abajo y simplemente explicar qué parte
quieres arreglar Bien, así que ahora voy
a dar clic en Agregar a Canvas. Bien, entonces ahora
vamos a crear otro
diseño de interfaz de usuario usando wind frame. Entonces escribamos el prompt. Así que esta vez
vamos a crear diseños de interfaz de
usuario para la página de pago de
productos. Bien, entonces vamos a escribir el baile de graduación. Página de pago del producto
para el sitio web de comercio electrónico. Asegúrate de incluir el método de
pago y el botón de pago. Bien, entonces ahora
voy a hacer clic en esto, así que el proceso podría
tardar un par de minutos. Así que solo espera. Ojalá
no tarde demasiado, y estoy muy emocionada de
ver el resultado. Bien, entonces el diseño de la interfaz para los pads de
pago del producto está listo. Miren a estos chicos.
Muy genial, ¿verdad? Bien, así que ahora voy a agregar estas
almohadillas de producto a Canvas. Así que solo haz clic en Agregar al lienzo. Bien, entonces NX, vamos a
hacer clic en el código. Podrás ver el
código de esta interfaz de usuario. Entonces, si eres desarrolladores web
o desarrolladores front-end, no
necesitas escribir
el código desde cero. Puedes usar este código. Bien, entonces por último, vamos
a exportar este proyecto. Así que solo haz clic en Exportar. Bien, como ustedes pueden ver, hemos
exportado con éxito el proyecto. Tienes tres opciones. Las
primeras opciones están en DML La segunda opción es reaccionar, y la tercera opción es poca. Entonces voy a seleccionar en DML y dar clic en
Descargar archivo, ¿verdad Hemos
descargado correctamente el archivo. Bien, chicos, creo que ya está. Eso es todo lo que
necesitas saber. Los veré chicos en el siguiente video. Adiós.
6. Diseño de interfaz de usuario para el sitio web de Marketplace con V0: Chicos santos. Bienvenidos de
nuevo al curso. En este video, vamos a crear interfaz de usuario
usando Firsal Bien, así que ahora comencemos. Lo primero que
debes hacer es iniciar sesión. Así que solo haz clic en Iniciar sesión. Puedes iniciar sesión usando
tu cuenta de Gmail. También puedes iniciar sesión usando
tu cuenta de Github. Bien, así que a continuación, voy
a dar click en los precios. Te voy a mostrar que
esta herramienta en realidad es gratuita. Como ustedes pueden ver aquí,
Viral ofrece un plan gratuito. Obviamente, hay
algunas limitaciones. Cuando se trata del plan
gratuito, por ejemplo, solo
tienes 200
créditos mensuales, así que ese es tu límite máximo. Bien. Ahora
volvamos a la página principal. Si te desplazas hacia abajo,
podrás
ver los diseños de la interfaz de usuario
que se crearon usando FSL Mira esto. Bien, así que
escojamos un ejemplo. Vamos a dar click en éste. Bien, como ustedes pueden
ver, este es el baile de graduación que se utilizó para
generar este diseño de interfaz de usuario, un dashboard para el
análisis de datos de los KPI industriales Miren a estos chicos.
Muy genial, ¿verdad? Entonces todo lo que necesitas hacer es
escribir el baile de graduación,
describiendo tu proyecto. Puedes especificar
cosas como características,
funcionalidad, estilos,
diseño, color, etcétera, y Fir SL
te
va a generar un hermoso diseño de
interfaz de usuario Bien, así que
comencemos, chicos. Bien, entonces vamos a
escribir el baile de graduación Bien, así que en este ejemplo,
voy a crear interfaz de
usuario para el sitio web de
E-Commerce Bien, entonces ahora
escribamos el prompt. Comercio electrónico, marketplace
con catálogo de productos y etiquetas de precios. Bien, así que ahora hagamos clic en Enviar. El proceso podría
tomar un par de minutos chicos así que solo esperen. Ojalá, no
tarde demasiado. Como ustedes pueden ver ahora Versal está diseñando la interfaz de usuario. Así que solo espera Todo bien. Finalmente, el diseño de la
interfaz de usuario está listo. Bien,
mira a este tipo. Muy genial, ¿verdad? Entonces este
es nuestro sitio web de comercio electrónico. Entonces esta es la página del Hub chicos. Como ustedes pueden ver, aquí
tenemos el spar de búsqueda, y esto es como la página de destino del
producto Estas son las
descripciones de los productos. Y como ustedes pueden ver, este es el catálogo de productos.
Mira esto. Vamos a desplazarnos un poco hacia abajo. Como ustedes pueden ver,
ahí está la lista de precios, y también añadimos el botón de gráfico. Entonces, si el cliente
quiere adquirir este producto, entonces él o ella hará clic
en este botón, ¿verdad? Bien, así que hagamos clic en
el otro diseño de interfaz de usuario. Este es otro catálogo de productos, chicos. Muy genial, ¿verdad? Entonces, si quieres convertir este diseño en código,
puedes hacer clic en este. Como ustedes pueden ver,
tienen dos opciones. El primero es reaccionar, y el segundo está en CML Así puedes copiar y pegar
este código y darle este código a los desarrolladores web o a
los desarrolladores front-end, y ellos van a construir
el sitio web por ti. Bien, muy genial,
¿verdad? Y por último, si quieres
escuchar este proyecto, puedes dar click aquí, y automáticamente copiar los enlaces
a este proyecto, ¿verdad? Y puedes dorarlo
a otras personas. Bien, chicos, creo que ya está. Eso es todo lo que
necesitas saber. Los veré chicos en el siguiente video. Adiós.
7. Cómo diseñar una interfaz web con Teleport HQ: Espíritu Santo, bienvenido de
nuevo al curso. En este video,
vamos a crear diseño de interfaz de
usuario para un
sitio web usando Teleport en Q. Bien, ahora comencemos Lo primero que
debes hacer es registrarte. Así que simplemente haz clic en Comenzar. Serás redirigido
a esta pala. Como ustedes pueden ver,
tienen dos opciones. Puedes registrarte usando
tu cuenta de Gmail. También puedes registrarte usando tu cuenta de Github, así
que depende totalmente de ti. Bien, entonces en este caso, voy
a registrarme usando
mi cuenta de Gmail. Bien, entonces esto es
Teleport atsqdbg. Bien, entonces tienen
varias opciones, chicos. Se puede empezar desde cero. Puedes seleccionar una de
estas plantillas disponibles, y puedes
personalizarla como quieras. Como ustedes pueden ver, aquí
hay muchas plantillas. También puedes generar interfaz
web usando IA, y eso es lo que
vamos a hacer en este video. Bien, así que solo haz clic en
Empezar a construir. Esta herramienta es muy fácil de usar. Todo lo que necesitas hacer es escribir el prompt describiendo
tu proyecto. Y en menos de un minuto, Teleport AdSQ
te
va a generar una
interfaz de usuario de alta calidad para nuestros Bien, entonces en este ejemplo, voy a crear landing page para mi software de
desguace web Bien, entonces ahora
escribamos el prompt. Sitios web para desguace web. Software. Bien, así que ahora solo
hago clic en Siguiente. Bien, así que
aquí mismo, deberás seleccionar el equipo
para tu sitio web. Como ustedes pueden ver, hay varias opciones, creativas,
culturales, predeterminadas, eBook, eco, financieras, infantiles, nutrición, deportes,
startup y yoga. Bien, entonces voy
a seleccionar Start Up. Entonces el equipo se va
a quedar así. Entonces esto es como el modo de
luz, chicos. Si quieres cambiar al modo
oscuro, simplemente haz clic en este. Entonces depende totalmente de ustedes, chicos. En este caso,
voy a seleccionar el modo
oscuro. Creo que
se ve mejor. Bien así que ahora solo haz clic en
Generar sitio web. Entonces el proceso podría tardar
un par de minutos, chicos. Así que solo espera. Ojalá no tarde demasiado
, y estoy súper emocionada de
ver el resultado. Bien, así que solo espera.
Como ustedes pueden leer, se está generando el contenido. Bien, casi listo. Bien, así que a continuación, solo haz clic. Ir a la página. Bien, entonces esta es la página
de edición, chicos. Ahora voy a dar clic en Vista previa. Bien, entonces serás redirigido
a la página de vista previa. Bien, así que solo espera. Bien, aquí vamos. Entonces esta es nuestra página web. El nombre del
sitio web es Scraper. Bien, unlo el poder
del raspado web. Como ustedes pueden ver aquí,
tenemos como cinco páginas, características de
inicio, cómo funciona,
precios y contacto. Aquí hay un botón para empezar
ahora mismo. Y si te desplazas un poco hacia
abajo, hay como cuatro funciones, extracciones de datos
personalizables, desguace
programado, deporte
proxy, aseguramiento de la
calidad de los datos Muy genial, ¿verdad? Bien, así que esto es como las sesiones de
precios, caliente el plan adecuado para
su necesidad de desguace web Plan básico y pro gratis aquí. Volvamos a desplazarnos hacia abajo. Bien, entonces esto es como las secciones de
preguntas frecuentes. Bien, muy guay, chicos. Aquí hay un botón de inicio de sesión y también un
botón de registro aquí arriba. Bien, entonces ahora voy
a cerrar este paso. No dude en
editar los signos de UID. Se puede cambiar el color.
Se puede editar el texto. Bien, entonces, por último, voy
a mostrarte el código. Así que solo haz clic en el código. Como ustedes pueden ver,
hay dos expedientes. El primero es JavaScript
y el segundo es CSS. Entonces, si quieres poner en
negrita el proyecto, puedes usar este código, para que no tengas que empezar
de cero, ¿verdad? Bien, chicos, creo que ya está. Eso es todo lo que
necesitas saber. Los
veré chicos en el siguiente video. Adiós.
8. Cómo convertir una captura de pantalla en diseño de interfaz de usuario con Uizard: Gas santo. Bienvenidos de
nuevo al curso. En este video, vamos
a convertir una captura de pantalla en
diseño de interfaz de usuario editable usando UIZR Bien, entonces el proceso va
a ser muy sencillo. Todo lo que necesitas hacer es
tomar una captura
de pantalla de un sitio web o aplicaciones
móviles. Después sube la
captura de pantalla a UISrt. Después de eso, UISRT
va a
convertir eso en
diseños de interfaz de usuario que puedes editar Bien, así que comencemos. Entonces ahora voy a
hacer clic en Empezar desde
captura de pantalla y seremos
redirigidos a esta página Bien, así que solo esperen chicos. La carga puede tardar un poco. Bien, chicos, así que
ahora vamos a tomar una captura
de pantalla de este sitio web El nombre del sitio web es cero. Para aquellos de ustedes que
no saben lo que es cero, zi es uno de los mercados inmobiliarios
más grandes donde la gente puede encontrar propiedades
en venta y también
propiedades en renta. Sin embargo, puedes
sentirte libre de tomar capturas de pantalla de cualquier
otro sitio web o aplicación móvil
que quieras, ¿verdad? Bien, entonces ahora tomemos la captura
de pantalla. Bien, así que hagámoslo. Aquí vamos. Bien, acabo de tomar
la captura de pantalla. Entonces voy a
guardar esta imagen en mi escritorio y
volvamos a UIZRT Bien, por ahora, voy
a cerrar esta pestaña. Lo que vamos a hacer a continuación
es subir la captura de pantalla. Así que simplemente haz clic en
Escáner de captura de pantalla y simplemente haz clic en Subir. Bien, así que voy a
subir esta captura de pantalla,
chicos, solo haz clic en Abrir. Bien, entonces ahora está
subiendo la imagen. El proceso puede tardar
un par de segundos. Ojalá, no
tarde demasiado. Bien, así que solo espera. Bien, así que lo siguiente
que vamos a hacer es seleccionar el tamaño de pantalla
de salida Como ustedes pueden ver,
tienen tres opciones, móvil, tablet y descop Voy a seleccionar a Descop. Y ahora hagamos clic en Importar. Bien, entonces ahora estamos
importando esta captura de pantalla. Así que solo esperen, chicos. Ojalá, no
tarde demasiado. Bien, aquí vamos. Bien, entonces ahora vamos a
editar esta interfaz de usuario. Bien, entonces hay muchas
cosas que ustedes pueden hacer. Por ejemplo,
puedes editar este texto. Puedes escribir lo que
quieras aquí. También puedes cambiar
el color de la fuente. Como ustedes pueden ver,
ahora mismo, el color es azul, pero si quieren
cambiarlo a otro color, tal vez verde, solo
seleccione verde, ¿verdad? Aquí vamos. Bien, también puedes cambiar el color
de este botón, así que simplemente haz clic en este icono, y ahora mismo sigue siendo azul. Digamos que quiero
cambiar el color a rojo. Así que solo haz clic en esto.
Bien, aquí vamos. E incluso puedes usar IA para darte una sugerencia.
Así que solo haz clic en sugerir. Como ustedes aquí mismo, IZR está generando nuevo
contenido solo para ustedes Podría tardar unos segundos. Bien, así que solo esperen chicos ojalá
no tarde demasiado. Bien, aparte de eso,
también puedes reemplazar esta imagen
por tu propia imagen, ¿verdad? Así que puedes dar click sobre esta imagen y simplemente dar click sobre estos puntos de árbol y simplemente
desplazarlos un poco. Pero puedes subir
tu propia imagen, ¿verdad? Además de eso, también
se pueden modificar las posiciones y el
tamaño de la imagen. Bien, entonces ahora,
voy a cerrar esto, y lo que
vamos a hacer a continuación es rediseñar esta
interfaz de usuario usando IA Así que solo haz clic en esto,
asegúrate de seleccionar generar equipo, y también asegúrate de
seleccionar prom, ¿verdad? Bien, entonces ahora vamos a
escribir la panga. Rediseñar esta interfaz de usuario. Con un equipo más oscuro y moderno. Bien, así que ahora voy
a dar clic en Generar. También puedes seleccionar
algunas de estas palabras clave. Entonces voy a seleccionar
suciedad y moderno. Bien, así que solo haz clic en Generar. Bien, así que esperen, chicos, el proceso puede tardar
un par de minutos. Ojalá, no
tarde demasiado. Como ustedes pueden
ver, Izard ha rediseñado
con éxito
la interfaz de usuario En realidad, el proceso tardó un poco
más de lo que esperaba. Tomó casi 3 minutos, chicos. Bien, así que ahora, solo haz clic en Aplicar. Bien, como ustedes pueden ver ahora están aplicando el nuevo equipo, ¿
verdad? Aquí vamos. Mira esto. Muy genial, ¿verdad? Bien, así que ahora, si quieres exportar esta interfaz de usuario,
simplemente haz clic en Exportar. Y voy a descargar
esta imagen en formato PNG. Así que solo haz clic en PNG y
solo haz clic en Exportar, ¿verdad? Bien, como ustedes pueden ver ahora, estamos descargando la
imagen. Así que solo espera. Bien, así que hemos
descargado con éxito la imagen. Aquí vamos. Bien,
chicos, creo que eso es todo. Eso es todo lo que
necesitas saber. Los veré chicos en el siguiente video. Adiós.
9. Cómo convertir un boceto a diseño de interfaz de usuario con Visily AI: Holgays, bienvenidos de
nuevo al curso. En este video,
vamos a convertir skats en
diseño de interfaz de usuario usando PhiSle En este ejemplo,
vamos a utilizar este SCATS una app de gestión de
inventario de pies Puedes usar cualquier
skets manuscritos y subir la imagen, y la IA va a poder
convertirlo en UI Design Bien, comencemos. En primer lugar, voy a iniciar
sesión. Así que vamos a hacer clic en esto. Voy a iniciar sesión
usando mi cuenta de Gmail. Pero también puedes iniciar sesión
usando tu cuenta de Github. Depende totalmente de ti. Bien, tardará
unos segundos. Como ustedes pueden ver, he iniciado sesión
con éxito. Bien, ahora hagamos clic
en Bienvenido a facile, y hagamos clic en Comenzar con IA Y serás
redirigido a esta página. Bien, en primer lugar, vamos a subir la imagen. Así que
vamos a hacer clic en esto. Y voy a
subir este sketch. Vamos a hacer clic en Abrir, y
vamos a escribir el baile de graduación, convertir este boceto en
un diseño de interfaz de usuario. Para el contexto, esta es interfaz de usuario de la aplicación
Foot Inventory
Management. Bien, entonces ese es mi baile de graduación, y hagamos clic en Generar. Bien, tardará unos
segundos. Así que solo esperen, chicos. Ojalá no
tarde demasiado. Estoy muy emocionada de
ver el resultado. Bueno, no tardó demasiado. Solo tardó 2 minutos o
incluso menos de 2 minutos. La IA generó dos
estilos diferentes estilo uno y estilo dos. Pero por ahora, primero echemos un
vistazo al estilo uno. Bien, aquí vamos. Cosas de comida. Tenemos tres grifos actuales listas
de abarrotes y recetas. Despensa de Fritas y también
contamos con botón Analizar. Mira esto. Y
también tenemos alertas de caducidad. Y también puedes hacer clic en este botón de anuncio para agregar más comida. Bien, ahora echemos
un vistazo al estilo también. Vamos a hacer clic en esto. Entonces es básicamente lo mismo. La estructura es la misma, pero el color es diferente. Para ser honesto contigo,
prefiero el estilo uno porque creo que
el diseño es más adecuado para la aplicación de gestión de
inventario de alimentos. Y también puedes
hacer click en Openboard, por lo que serás redirigido
a la página de edición Bien, chicos, creo que ya está. Eso es todo lo que
necesitas saber. Los veré chicos en el siguiente video. Adiós.
10. Diseño de página de registro simple en Figma: Gas santo, bienvenidos de
nuevo al curso. En este video,
vamos a conocer el ICMA. Para aquellos de ustedes que
ya están familiarizados con ICMA, no dude en saltarse este video No obstante, si eres nuevo ICMA y quieres aprender más, asegúrate de que le pagues mucha atención a este video Bien, así que comencemos. Lo primero que
debes hacer es registrarte. Así que solo haz clic en
Comenzar gratis. Bien, entonces voy a
registrarme usando mi cuenta de Gmail, así que simplemente haz clic en
Continuar con Google. Como ustedes pueden ver, me
redirigieron a mi Daskbk. Entonces tengo varios
proyectos aquí en Figma. Bien, entonces ahora vamos a
crear un nuevo archivo, ¿no? Así que simplemente haz clic en Archivo de diseño. Y simplemente haz clic en
Crear nuevo diseño. Bien, así como ustedes pueden ver, nos redirigieron a
la página de edición Bien, entonces en este video, te
voy a enseñar paso a
paso cómo diseñar interfaz de usuario
sencilla
para una página de registro. Bien, así que comencemos. Bien, entonces voy
a seleccionar Frame. Bien, entonces esta va a
ser la aplicación móvil, ¿verdad? A continuación, voy a
seleccionar un rectángulo, y vamos a
crear tres rectángulos Entonces el primero es
para el nombre de usuario. El segundo es para el correo electrónico y el
tercero es para la contraseña. Bien, entonces puedes crear
otros dos rectángulos manualmente, pero en este caso, solo
voy a copiar
y pegar esto, ¿verdad Bien, aquí vamos. Bien, entonces a continuación, voy a crear otro
ángulo de ruptura aquí abajo, y este va a
ser un botón de registro. Bien, genial. Entonces a continuación
vamos a agregar texto a este diseño de interfaz de usuario. Bien, así que solo haz clic en texto Bien, así que voy a escribir
algo como esto. Regístrate. Page, es demasiado pequeño, así que vamos a hacerlo un
poco más grande, ¿verdad? Como ustedes pueden ver,
el tamaño del teléfono es 12, así que voy a cambiarlo a 35. Bien, aquí vamos. Y lo
voy a poner en el centro. Bien, muy genial. A continuación, también voy a
agregar texto para comer rectángulo. Entonces, hagamos clic en este icono. Bien, entonces voy a cambiar
el tamaño del teléfono 35-20. Bien, entonces escribamos
algo aquí. Nombre completo. Bien, entonces
vamos a copiar y pegar esto. Bien, entonces esta va
a ser la dirección de correo electrónico. Y el tercero
va a ser la contraseña. Bien, entonces cuando el usuario
quiere registrarse, necesita ingresar su nombre completo,
su dirección de correo electrónico y
también su contraseña. Bien, entonces a continuación, voy a agregar texto a este botón.
Entonces vamos a hacer clic en esto. Bien, entonces voy
a escribir apuntarse. Y vamos a poner esto en el centro.
Bien, aquí vamos. Entonces, si el usuario quiere registrarse, necesita hacer clic
en este botón, ¿verdad? Bien, entonces a continuación, voy
a cambiar el más grande
y los colores, chicos. Bien, entonces voy a
bloquear esto. Aquí vamos. Como ustedes pueden ver, el
panadero y el color es blanco, así que voy a
cambiarlo a azul claro. Bien, creo que esto
es lo suficientemente bueno. Miren a estos chicos.
Muy genial, ¿verdad? También puedes cambiar el
color de este botón. Como ustedes pueden ver,
ahora mismo, el color es gris, así que voy a cambiar el color a tal vez verde claro así. Bien, se ve bastante genial. Bien, chicos, así es
como diseñas interfaz de
usuario manualmente en VIC
11. Cómo crear un diagrama de flujo de usuarios con Miro: Hola, chicos. Bienvenidos de
nuevo al curso. En este video, vamos a
diseñar el flujo de usuarios usando Miro. El flujo de usuario es parte muy importante del diseño de la experiencia del usuario, así que asegúrate de prestar
mucha atención a este video. Bien, comencemos. En primer lugar, voy a iniciar sesión. Así que hagamos clic en Ir a Dashboard, y voy a iniciar sesión
usando mi cuenta GML Y hagamos clic en Continuar. Como ustedes pueden ver, he iniciado sesión
con éxito, y aquí está mi panel de control. Bien, ahora hagamos
clic en AI Playground, y serás redirigido
a la página de edición Y vamos a dar click sobre este icono. Y escribamos el aviso. Crear diagrama de flujo de usuario
para la aplicación AI Travel planner. Entonces en este ejemplo,
vamos a diseñar el flujo de
usuarios para AI Travel planner. Esta app tiene tres grilletes principales. El primero es el buscador de
boletos aéreos baratos y hoteles. El segundo grillete es el seguimiento del presupuesto de
viaje, y el tercer grillete es el generador de itinerario de
IA Bien, ahora hagamos clic en Generar. Tomará unos segundos, tal vez 20 o 30 segundos. Así que solo la forma en que va. Ojalá, no
tarde demasiado. Bien, aquí está el diagrama. Voy a cerrar
esto. Bien, aquí vamos. Y hagamos clic en
este complemento a Canvas. H echa un vistazo a este diagrama de flujo de
usuario. Entonces el primero es iniciar sesión. Entonces, después de que
el usuario inicie sesión, el usuario deberá elegir
uno de estos tres filtros. El primero es el buscador de
vuelos baratos y hoteles. Por lo que el usuario
podrá buscar el hotel más barato y los boletos de avión
más baratos. Entonces el usuario
podrá ver los resultados, y el usuario
también podrá aplicar filtros. Y al finalizar el proceso, el usuario podrá
reservar el vuelo y
también el hotel. Entonces ese es el primer montador. El segundo instalador es el seguimiento del presupuesto
de viaje. Por lo que el usuario
podrá establecer el presupuesto. El usuario podrá
agregar gastos, gastos fus, y el sistema va a verificar si el gasto está
por encima del presupuesto, entonces el usuario va a
recibir notificaciones o alertas Y aquí está el tercer montador, generador de itinerarios de
IA. Entonces, en primer lugar, el usuario
va a ingresar las preferencias y también ingresar
los destinos de viaje. Entonces la IA va a
generar el itinerario. Entonces el usuario va a
revisar o editar el itinerario. Y aquí está el último paso. El usuario va a
guardar el itinerario. Bien, chicos, ese es el flujo de
usuarios de esta app. Si eres diseñador de UIUX, es muy importante que entiendas el
flujo de usuarios de tu app Es muy importante que
entiendas cómo va a ser utilizada tu app. Bien, creo que ya está.
Eso es todo lo que necesitas saber. Los veré chicos en
el siguiente video.
12. Cómo analizar la atención del usuario con IA: Gas santo, bienvenidos de
nuevo a las portadas. En este video, vamos a analizar las atenciones de los usuarios
usando este plugin Figma. El nombre del plugin
es atención Inside. Como ustedes pueden leer aquí, mejore el rendimiento del diseño
con análisis previo al lanzamiento. Por lo que esta herramienta de IA podrá predecir instantáneamente
dónde
cuidarán los usuarios después de interactuar con
tus diseños para que puedas ahorrar tiempo y evitar
correcciones después del lanzamiento. Bien, así que ahora comencemos. Lo primero que debes hacer es
hacer click arriba y terminar. Como ustedes pueden ver,
tengo varios archivos aquí, así que voy a seleccionar
este archivo Aplicación Gaming. Como ustedes pueden ver, me
redirigieron para arreglar
mi página de edición Bien, entonces lo siguiente
que debes hacer es seleccionar qué marco
quieres analizar. Bien, entonces hagámoslo. Por ejemplo, en este caso, voy a analizar este marco, así que solo selecciona este marco. Y a continuación, basta con hacer clic en Ejecutar y seleccionar Analizar diseño.
Como ustedes pueden ver. Este plugin Figma tiene varias
características como escritorio,
móvil, carteles, estantes de
empaque y material de
marketing Bien, entonces voy a seleccionar Deskcop y aterrizar
porque como ustedes pueden ver, esto es como una página de registro, así que voy a considerar esto
como una landing page Así que solo haz clic en esto Bien, como ustedes pueden ver ahora, la
atención en el interior está analizando este
marco, así que solo espere. Ojalá no
tarde demasiado. Bien, entonces aquí vamos.
Este es el resultado. Por cierto, si no
has creado atención dentro de la cuenta,
necesitas crear una. Así que solo tienes que ir a este
sitio web, ¿verdad? Y solo haz clic en probar ahora gratis. Tendrás que iniciar sesión
usando tu cuenta de Gmail. Bien, entonces ahora
volvamos al FICMA. Como ustedes pueden ver, después de
realizar el análisis, IA generó este mapa de acierto. Entonces, basado en este mapa de éxitos, parece que las atenciones de los
usuarios concentran principalmente
en estas dos partes Bien, para que también puedas sentir
el mapa de enfoque. Mapa de contraste. Entonces, cuando estás diseñando
tu interfaz de usuario, deberías tomar esto en
concentraciones, ¿verdad? Y aquí abajo, también
di puntaje de enfoque. Como ustedes pueden ver
para el puntaje de enfoque, obtuvimos 100, lo cual es muy bueno. Quizás te estés preguntando
qué es Fokicore. Por lo que mide el nivel de concentraciones de atención
en tu imagen. Bien. Y para la claridad
óptima, obtuvimos 77, lo que también es bastante
bueno en mi opinión, chicos. Bien, entonces a continuación, voy
a hacer clic en Más adentro Bien, así que tendremos que iniciar sesión. Como ustedes pueden ver
tienen dos opciones. Puedes iniciar sesión usando
tu cuenta de Facebook. También puedes iniciar sesión usando tu cuenta de Gmail, así
que depende totalmente de ti. Bien, en este caso, voy a iniciar sesión usando mi cuenta de Gmail. Bien, así como ustedes pueden ver, nos redirigieron al Panel de
Atención Interior Bien, así que solo haz clic en eso. Se puede descargar el
análisis. Así que solo haz clic en esto. A continuación, simplemente haga clic en la vista actual. Bien, así que esperen, chicos. Podría tardar un par de
segundos. Todo bien. Como ustedes pueden ver,
hemos
descargado con éxito el hit map. Bien, entonces abramos esto. Bien, se ve muy bien. Lo siguiente que
vamos a hacer es descargar el informe. Bien, así que solo haz clic en Obtener Reporte. Entonces solo espera. Podría
tomarme un par de segundos. Bien, entonces necesitarás
seleccionar el formato de archivo. Tienes dos opciones.
El primero es PDF, y el segundo
es PowerPoint. Voy a seleccionar PDF. Bien, entonces ahora está generando el reporte. Así que esperen, chicos. Ojalá no
tarde demasiado. Bien, entonces ahora estamos
descargando el archivo PDF. Entonces solo espera. Bien, aquí vamos. Hemos
descargado con éxito el informe. Bien, chicos, creo que
ya está . Eso es todo lo que necesitas saber. Los veré chicos
en el siguiente video donde vamos a estar realizando una investigación de
experiencia de usuario. Los veré ahí, chicos. Adiós.
13. Realizar una investigación de UX con UX Pilot: Hola chicos. Bienvenidos de
nuevo al curso. En este video,
vamos a estar realizando investigación de experiencia de
usuario
utilizando UX Pilot. Bien, entonces hay muchas
cosas que ustedes pueden hacer. Entonces el primero es
generar wireframe. También puedes convertir
texto a Inside. UX Pilot también tiene revisión de diseño AIB
UX, para que puedas subir
tu diseño de UI, y esta herramienta va
a analizar automáticamente tu diseño y
darte recomendaciones Se puede generar
taller personalizado y aún muchos más. Y no se preocupen, chicos. La tienda es de uso completamente gratuito. Bien, entonces
te voy a mostrar las secciones de precios. Aquí vamos. Como ustedes pueden ver, su piloto ofrece un plan gratuito. Obviamente, existen algunas limitaciones cuando se trata del plan gratuito. Por ejemplo, sólo se puede obtener una vista previa para las entrevistas de los
usuarios. Sólo se puede obtener una vista previa
para la entrevista de diseño. Y solo puedes tener
cinco plantillas UX. Así que asegúrate de estar plenamente consciente de estas limitaciones. Bien, así que ahora comencemos. Lo primero que
debes hacer es registrarte, así que simplemente haz clic en Iniciar gratis. Serás redirigido
a esta página. Bien, así que voy a registrarme usando mi cuenta de Gmail,
así que simplemente haz clic en esto. Como ustedes pueden ver, me
redirigieron a mi tablero. Bien, entonces en este video, vamos a estar
centrándonos principalmente en la revisión del diseño. Bien, entonces revisa el diseño de UX,
mejora tu diseño, difunde la creatividad
con ideas frescas y agudiza tus habilidades de UX
con revisiones de diseño basadas en IA Bien, entonces cuando estás realizando análisis de experiencia de
usuario, tu principal objetivo es
encontrar el diseño más ideal
para tus clientes, ¿verdad? Quieres asegurarte de
que el usuario de tu app o tus
sitios web tengan la mejor experiencia
posible cuando interactúes con
tu app o tu sitio web. Y eso es lo que
vamos a hacer en este video. Bien, entonces esta herramienta
es muy fácil de usar. Todo lo que necesitas
hacer es subir el diseño. Bien, si recuerdas, a partir de los videos anteriores, hemos creado
varios diseños de UI. Bien, entonces en este ejemplo, voy a usar el diseño
creado por Musso AI Entonces voy a subir
esa imagen. Todo bien. Puedes no dudes en subir los diseños que
quieras. Depende totalmente de ti. Bien, así que solo abre mi carpeta. Bien, aquí vamos. Y
voy a hacer clic en Abrir. Bien, entonces ahora está
subiendo el diseño. Así que solo espera. El proceso
puede tardar un par de segundos. Ojalá, no tarde
demasiado. Bien, aquí vamos. Bien, así que ahora voy a dar
clic en Iniciar la reseña. Por lo que ahora la IA va a
analizar este diseño. Y la IA nos va a dar
recomendaciones, ¿verdad? Cómo mejorar la experiencia
del usuario. Bien, así que esperen, chicos. La revisión podría tardar
un par de minutos. Ojalá, no
tarde demasiado. Y estoy súper emocionada
de leer la reseña. Bien, aquí vamos. Bien, así que ahora vamos a leer la reseña. En primer lugar, tenemos claridad
y consistencia. Entonces el botón CTA o Llamado
a la Acción, iniciar a chatear carece de contextos. Considera reformular para iniciar el chat de
juegos o similar para conectarte con el
servicio ofrecido Nuestras secciones de prueba
aclaran el propósito con un subtítulo que explica
las superficies proporcionadas Para la guía de configuración rápida, necesitamos explicar qué características
puede ver Linkin a una guía más detallada o
explicar los pasos de configuración Entonces no debemos asumir que los usuarios están familiarizados con
la interfaz de usuario, ¿verdad? Y, por último, debemos garantizar un
estilo iconográfico consistente para avatares personalizados, chat de
voz y texto, detección de juegos y transmisión en vivo para
mantener la consistencia visual Bien, entonces esas son
recomendaciones respecto a la claridad
y consistencia. Ahora vamos a leer la revisión
visual de la jerarquía. Bien, entonces primero,
necesitaremos aumentar el contraste del texto de
navegación, las características del
tablero, etcétera, contra el fondo
para una mejor legibilidad Por lo que la recomendación es
usar color diferente. Bien, entonces ahora vamos
a la segunda. Únete a las secciones de aventura, necesitamos diferenciar inicio
del botón de inicio
a chatear para distinguir a
Bitwin iniciando un chat y
registrándote como nuevos usuarios Bien, entonces tal vez
va a ser lo mismo.
Solo usa diferentes colores. Y por último, para las sesiones de
registro, necesitamos aumentar el
espacio entre las opciones de
registro de Google y
las opciones alternativas de
registro de correo electrónico para mejores separaciones
físicas Bien, chicos, esas son algunas recomendaciones que
debes tener en cuenta si
quieres mejorar la experiencia de usuario de
tu app o tu sitio web.
14. Conclusión y resumen: Holi chicos. Bienvenidos de
nuevo al curso. En este video, voy a resumir todas las cosas que
hemos aprendido en este curso, y también voy a compartir
consejos y trucos sobre cómo mejorar la calidad
de tu diseño de UI Bien, comencemos con el primer tema, la investigación de usuarios. Necesitas realizar
investigaciones de usuarios para comprender las necesidades, comportamientos y preferencias
de tu público objetivo. Esta información guiará las decisiones de
diseño y garantizará que la interfaz se alinee
con las expectativas del usuario Bien, en primer lugar, tendrás que
decidir quién es tu público
objetivo. Por ejemplo, si estás construyendo
una herramienta de análisis de ventas, obviamente, tu público
objetivo son los profesionales de ventas. Necesitas hacer
preguntas como esta. Para los profesionales de ventas, ¿cuál es la parte más desafiante cuando están
analizando datos de ventas? ¿Qué herramienta adicional se puede construir para ayudarles a
analizar los datos de ventas? Entonces esas son preguntas
que debes hacer. Bien, volvamos
al mapa mental, y hablemos del segundo
tema, las pruebas de usabilidad. Debe realizar pruebas de
usabilidad con usuarios reales para obtener sus
comentarios sobre la interfaz, la
funcionalidad, la usabilidad
y la experiencia general del usuario. Además, las
pruebas iterativas le permiten mejorar continuamente su
producto en función de la entrada del usuario Entonces tienes dos opciones. Puedes encontrar un humano
real para probar tu aplicación móvil o sitio web
y obtener sus comentarios de los usuarios, o también puedes usar herramientas de IA
como UX Pilot o Cloud. Puedes subir tu
captura de pantalla de interfaz de usuario y puedes
escribir el baile de graduación así, realizar pruebas de
usabilidad integrales. Posicionarte
como usuario de esta app. Proporcione comentarios perspicaces. Bien, entonces ese es mi baile de graduación,
un baile muy sencillo. Y tardará unos segundos, tal vez diez o 20 segundos para
que la IA genere la respuesta.
Bien, aquí vamos. Realizaré una prueba de
usabilidad integral para el testbard de análisis de ventas
desde la perspectiva del usuario Bien, así que aquí están las
primeras impresiones y la experiencia general. Bien, estos son el equipo oscuro
fuerte, limpio, profesional
con buen contraste, informaciones
claras, jerarquía
con agrupación lógica, y hay dos preocupaciones
iniciales. Tres carpas de datos sin almohadillas de acción
claras e
información contextual limitada para la toma de decisiones. Y aquí abajo, tenemos comentarios
detallados de usabilidad. Tenemos cuatro problemas identificados ubicaciones actuales
poco claras,
generar etiquetas de navegación, migas de pan
faltantes y la funcionalidad de búsqueda no
está clara Y tenemos estas
tres recomendaciones. Bien, muy genial, comentarios muy
perspicaces, chicos. Y vamos a desplazarnos hacia abajo, y la IA también te da un
resumen. Mira esto. Tenemos
recomendaciones prioritarias. Tenemos la perspectiva del usuario final. Bien, vamos a leer
esto. Lo que me gusta. El tablero se ve profesional y presenta la
información de manera limpia. Lo que me frustra, puedo ver
datos pero no puedo actuar sobre ellos. Sé que mi ingreso total
es de 2.5 millones, pero no sé
si eso es bueno, malo o cómo se compara con el
último o mis metas. El gráfico se ve bien,
pero no me des los detalles que necesito
para tomar decisiones. Y aquí está el resultado final. Esto se siente como un informe
estático en
lugar de una herramienta de
análisis interactiva. Necesito más contexto, comparación e interactividad
para analizar realmente mi desempeño celular y tomar
decisiones informadas Y el
puntaje general de usabilidad es seis de cada diez. Bien, ahora,
volvamos al mapa mental, y hablemos de la tipografía legible del tercer
tema Es necesario utilizar tipografía legible y de
tamaño apropiado Considere factores
como el estilo del teléfono, interlineado y el contraste
para mejorar la legibilidad, especialmente para
bloques de texto más largos Esto es muy importante, chicos. Bien, chicos, este es
el final del curso. Muchas gracias por completar el curso y les deseo todo
lo mejor. Adiós.
Chris Raharja, Data Scientist & AI Enthusiasts
