Transcripciones
1. Fundamentos de la construcción de marcos alámbricos y prototipos para la experiencia de usuario: Todos, bienvenidos a
los
fundamentos de construcción de
prototipos y estructuras alámbricas para participación de
habilidades de experiencia de
usuario Mi nombre es cáncer y soy diseñador UI UX con más de
tres años de experiencia. Me fascina el diseño de la experiencia de
usuario y
me emociona compartir mis
conocimientos contigo En esta clase, comenzaremos por aprender lo básico de
wireframes y prototipos Luego diseñaremos marcos
de alambre para aplicaciones
populares para tener una
idea del proceso. A continuación, construiremos
el marco de alambre desde cero para
una entrega de comida. Utilizaremos esta aplicación
como estudio de caso para aprender a aplicar los
principios del diseño estadounidense. Finalmente, convertiremos nuestros marcos de alambre
en un prototipo. Esto nos permitirá probar nuestros diseños con los usuarios
y obtener comentarios. Vamos a usar Pigma para
construir los wireframes
y prototipos No te preocupes si nunca antes construyes un marco de alambre
o usas Pigma Empezaremos desde
cero y
estoy aquí para guiarte en
cada paso del camino. Al final de esta clase, tendrá una
sólida comprensión de los carritos de alambre y el prototipo También
podrás diseñar y construir marcos de alambre y
tipo de foto para tus propios proyectos. ¿Estás emocionado? No puedo esperar a verte
en la primera lección.
2. Introducción a los wireframes: Los marcos de alambre son bocetos de baja
fidelidad de un sitio web o aplicación No tienen ningún
color ni diseñan solo la estructura básica
de la interfaz. Esto los hace rápidos
y fáciles de crear. Permite a los diseñadores centrarse en la experiencia del usuario sin empantanarse en los detalles Los marcos de alambre se utilizan para comunicar ideas a
otras personas del equipo, como desarrolladores
y partes interesadas. También se pueden utilizar para probar diferentes diseños con
los usuarios y obtener comentarios. Esto ayuda a garantizar
que el diseño
final sea usar y satisfaga
las necesidades del usuario. Aquí hay algunos ejemplos de cómo se pueden usar los marcos de
alambre
para resolver problemas. Cuatro personas, un sitio web para un nuevo restaurante podría
usar alambre. Tienda Pm. Mostrar cómo se
organizarán los hombres, dónde se mostrará la
información de contacto y cómo los usuarios pueden
ordenar la comida. Una aplicación para una tienda de comestibles
podría usar marcos de alambre para mostrar cómo los usuarios pueden navegar por
el inventario de las tiendas, agregar artículos a sus tarjetas y visitar el sitio web
de una agencia de viajes podría usar wireframes para mostrar cómo los usuarios pueden
buscar vuelos, hoteles, autos de alquiler y reservar
sus arreglos de viaje En cada uno de esos ejemplos, los marcos de alambre permiten a los
diseñadores centrarse en la experiencia del usuario
y asegurarse que la interfaz sea
fácil de usar y entender. Esto puede ayudar a mejorar la
experiencia general del cliente y hacer que sea más probable que
las personas usen el producto. Los wireframes son una
herramienta valiosa para los diseñadores. Pueden ayudar a
ahorrar tiempo y dinero, mejorar la comunicación y probar diferentes diseños con los usuarios. En el siguiente video, presentaremos
fototipos y aprenderemos la diferencia entre los tipos de
fotos y los wireframes
3. Introducción al prototipo y diferencia entre el wireframe y el prototipo: La principal diferencia
entre un wireframe y un prototipo de baja fidelidad
es la interactividad wireframes son estéticos, mientras que prototipos de
baja fidelidad
son interactivos Esto significa que los
usuarios pueden hacer clic en diferentes elementos del prototipo de
baja fidelidad para ver cómo funcionan. Esto es importante para probar
la usabilidad de un diseño, ya que permite
a los usuarios interactuar con la interfaz y proporcionar
retroalimentación sobre cómo funciona. Aquí hay un ejemplo de un prototipo de
baja fidelidad. Un diseñador está creando un nuevo
sitio web para un restaurante. Crearon el prototipo
de baja
fidelidad del sitio web utilizando formas
básicas y
texto para representar los diferentes elementos
de la interfaz. El prototipo incluye
la página de inicio, la página de menú y
la página de contacto. El diseñador comparte el prototipo de
baja fidelidad con algunos usuarios y
les pide que lo prueben. Los usuarios proporcionan retroalimentación sobre la usabilidad del sitio web. El diseñador utiliza los comentarios para mejorar el diseño
del sitio web. Prototipos de baja fidelidad, una herramienta
valiosa para los diseñadores. Se pueden usar para probar la usabilidad de la idea de
diseño al principio del proceso de diseño y para obtener comentarios de usuarios
y partes interesadas. Esto puede ayudar a
mejorar el diseño
del producto final y a garantizar
que sea fácil de usar.
4. 04 Figma Introducción nuevo: En esta lección,
vamos a crear una cuenta Figma y
familiarizarnos con la herramienta Figma. Si ya creaste
una cuenta en Figma, puedes saltarte esta lección Empecemos a hacer eso. Haz clic en Obtener Figma gratis. Enlace en la descripción, y redirigirás
a esta página. En esta página, haz clic en
este botón Comenzar. Da click en este botón azul
Comenzar Gratis. Después haz clic en Continuar con Google y regístrate
con tu correo. Después de registrarse, recibirá un correo
electrónico de confirmación a su casilla de correo electrónico. Complete el proceso de
confirmación y ya está listo para comenzar. Ya tengo una cuenta Figma. Yo lo abriré. Bien, ahora estoy en
mi cuenta Figma. Por lo que voy a dar click en este botón de archivo de
diseño. Entonces estoy en la herramienta Figma. Como primer paso, haré clic aquí y renombraré
este archivo de diseño de Fima Voy a renombrarlo como marco de alambre. Luego en el lado izquierdo, tenemos herramientas como mover
marcos y formas, lápiz y lápiz, texto
y herramientas que
podemos usar para diseñar
prototipos y marcos de alambre En tu letrero de la derecha, verás el panel Properties
Fane Prototype Como primer paso, voy a crear un marco. Para ello, voy a dar
click en este ícono de Pm. Aquí puedo ver
los tamaños de prem. Si vas
a diseñar sitio web, puedes seleccionar el tamaño en
el escritorio de la versión. O si vas a
crear un laboratorio móvil, puedes seleccionar el tamaño del teléfono. En este caso, vamos a
seleccionar el diseño del tamaño del teléfono. Para ello, hago clic en
este tamaño de teléfono y selecciono un marco que
llama Android Small. Entonces aquí está nuestro marco, y podemos renombrar el
marco como queramos. Voy a hacerlo como en casa, y entonces aquí dentro podemos
cambiar la altura wen, podemos agregar esquinas, y podemos hacer muchas más cosas. En el proceso de
diseño del marco de alambre, pasaré por todas
esas opciones. Por ahora, sólo voy a
crear pocas formas. Doy clic en el icono de flecha pequeña en herramienta
Forma y
seleccionaré una forma rectangular. Y presiona Mayús y
crea un rectángulo. Hagamos un 200 y es 200, entonces lo haré centro. A continuación, voy a dar clic aquí
y dar clic en Línea. Después presionaré control y
acercaré el zoom usando la rueda del ratón. Después haré clic
aquí y presionaré Mayús. Después arrastra la línea hasta aquí
y suértela así. Después también voy a dar clic en
la línea y dar clic en Mayús, y luego dar clic aquí. Entonces lo trapé como lo hice antes. Y aquí hay un
diseño sencillo que creamos. Ahora seleccionaré ambas líneas
en el trazo. Voy a hacer que el trazo
lance dos, ¿de acuerdo? Esta es una forma simple
de marco de alambre que representa la
imagen de nuestro diseño.
5. Diseñar el primer marco metálico para la aplicación Gmail: Hola a todos. Es hora de
crear nuestro primer marco de alambre. La manera fácil de crear
y practicar marcos de alambre son la interfaz mímica
de la aplicación o el sitio web Podemos obtener una captura de pantalla de aplicaciones, sitios web y diseñar
marcos de alambre para esa interfaz. Ya tengo cuatro interfaces de
app. Simplemente los arrastraré y los
soltaré en el Sigma,
y esos son la interfaz de la
aplicación de Gmail y la interfaz aplicación de estudio de
Youtube
y la interfaz de la aplicación de Instagram. Entonces aquí está el enlace
en la interfaz de la aplicación. Empecemos con esta interfaz de aplicación de
correo. Simplemente la
arrastraré aquí y la abriré así. Puedes encontrar este diseño de
interfaz en la
sección de recursos de la clase. Ahora voy a crear un marco. Simplemente haga clic aquí. Ahora seleccionaré el Android
Large Size aquí. ¿Lo ves? Entonces voy a disminuir
el tamaño de este correo. Interp. Simplemente haga clic en la
esquina y presione Mayús. Entonces puedes reducir el tamaño sin
afectar el diseño. Bien, y ahora
cambiaré el nombre de este marco a App Wire Frame. Bien, ahora tenemos que agregar
cuadrícula de diseño a este marco porque será fácil guiar el diseño y
agregar nuestro componente. Para ello, voy a dar clic en el marco y dar clic
en Cuadrícula de Diseño. Simplemente haga clic en este signo más, luego haga clic aquí y
hágalo en columna. Y voy a hacer que las columnas cuenten como cuatro y la
cuneta será diez También, agregaré margen
a este marco como diez. Bien, ahora podemos guiar esas
líneas y construir el diseño. Voy a incrementar el
diseño así. Y comencemos a
diseñar el marco de alambre. Como primer paso, hago clic en el triángulo y
creo un triángulo como este. Porque vamos a crear esta barra de búsqueda con
este menú de hamburguesas Entonces ya tenemos el color como este color ceniza
y lo voy a mantener. Esta es una
estructura alámbrica de baja fidelidad por lo que no necesitamos cambiar las esquinas ni agregar
gráficos a este marco de alambre Solo necesitamos crear la estructura básica
del laboratorio de correo. Este es el campo de texto, y voy a dar clic aquí
y dar clic en Elipse Después presiono Mayús y
hago una elipse así. Lo haré como 30 por 30, solo cambio fresco y
cambiaré el tamaño haciendo clic en el
botón izquierdo del mouse y cambiaré el tamaño. Entonces voy a cambiar el
color para que me guste este color. Y tráelo aquí así. Este es un icono de usuario. Lo haré como un usuario. Para ello, hago clic en elipse y creo otra
elipse como Esta es la cabeza del usuario. Voy a aumentar pulsando comando y usando
la rueda del ratón. Entonces esta es la cabeza
del avatar de usuario. Voy a crear, vamos a crear una forma de polígono y crear
un rectángulo como este Entonces voy a reducir las esquinas. Voy a ir aquí, y voy a reducir las
esquinas a la línea tres. Bien, hagámoslo un
poco más grande así. Bien. Aquí están las dos formas del
avatar del usuario por ritmo, cambio Y vaya al centro de la línea
horizontal. Y haz clic en él. Ya se centró así. Bien. Este es el icono del usuario. Entonces tenemos el menú de hamburguesas. Entonces voy a ir aquí
y hacer clic en la línea. Después haz clic en el Shift y haz el
menú de hamburguesas así Si no seleccioné el turno, la línea no será horizontal, así que tengo que seleccionar el turno. Y bien. Entonces aumentaré el trazo, seleccionaré la línea y
agregaré trazo como para, bien, aumentar el
tamaño del diseño. Después presione los diez, haga clic en la línea, y Me gusta esto.
Hagámoslo así y seleccionemos todas esas
líneas haciendo clic en Mayús y haciendo clic en el botón
izquierdo del ratón. Y haz clic en la opción Más. Y haga clic en Distribuir Espaciado
Vertical. Bien, ahora está centrado
verticalmente. Y ahora tenemos el menú de
hamburguesas, y tenemos el ícono de avatar Ahora tenemos que añadir este texto. Podemos agregar este
texto con solo agregar un rectángulo como
este y agregar colores. Vamos a agregar el mismo color. Simplemente haga clic en este icono
y haga clic aquí. Este será ese texto. O simplemente puedo escribir
búsqueda por correo. Agregaré búsqueda en correo aquí. Será más detallado. Da click en este texto, puedo, y da click aquí. Después agrega búsqueda por correo. Bien. Ahora lo arrastraré y
lo soltaré aquí. Haga clic en el texto y
haga clic en el texto Sentir. Después hazlo una línea, centro
vertical. Si quiero, puedo cambiar el
teléfono y los tamaños del teléfono, pero esto está bien para mí. Y ahora voy a añadir
este segundo texto. Así que hago clic aquí
y hago clic en Antiguo. Después hago clic en el botón
izquierdo del ratón y Dubligated. Entonces lo pondré
aquí y doy click en Viejo y sobre
este campo de texto. Y voy a hacer el espacio como 15. Entonces voy a hacer estos dos. Y hagamos audaz, hagámoslo semibold Ahora podemos agregar este elemento de correo electrónico. Para ello, daré click en E y crearé un Elise como este Entonces crearé un rectángulo. Este será el título
del correo electrónico que lo haga. Simplemente haga clic aquí y
haga clic en el Ava. Voy a en el color este color. Entonces lo haré en lo alto. Entonces duplicaré este
triángulo y
pondré alto para hacerlo más grande
así y cambiarlo a dos. Y luego podemos
agregar otra línea. Destacemos
ambos y que sean diez. Ahora voy a seleccionar todos estos textos y
bajarlo así. Entonces tengo que en su momento para hacer eso solo copiaré
uno y lo pegaré. Entonces hazlo, este rectángulo
está fuera del marco. Entonces haré clic en el rectángulo
y lo traeré de vuelta
al marco, lo haré centro. Entonces tenemos a esta Staletta 15, 15 Cambia el color a color. Bien, ahora resaltaré
o seleccionaré todas esas formas y presionaré Comando y se
convertirá en un grupo. Entonces presionaré a todos los dragones
Dubliatedy así. Voy a espacio 20. Hagamos el espacio 20. Y destaco tres de esos componentes y lo
hago así, creo que podemos agregar más espacio. Vamos a sumar 30. Entonces resaltaré esos tres y los
duplicaré así. Bien, ahora voy a
quitar esta. Entonces tenemos un pie de página. Hagamos un pie de página. Da click en Rectángulo y crea
un rectángulo como este. Voy a añadir el 40, vamos a hacerlo 50. Bien. Y ahora tenemos
esos dos íconos. Solo agreguemos el soporte facial. Éste estará aquí. Y cambiar el color
al azul oscuro. Y sólo duplicarlo. Bien. Aquí tenemos el cable de correo de
baja fidelidad. Rezar. Ahora, en el siguiente video, crearemos uno un
poco complejo. Lo crearemos
para Youtube Studio.
6. Marco alámbrico de 06 segundos: Bien, ahora vamos a crear el
wireframe para Youtube Studio. Voy a agarrar esta interfaz de Youtube
Studio aquí, luego dar clic en el marco y
dar clic en Android Small. Entonces reduce el tamaño
de esta interfaz. Bien, luego cambie el nombre del marco
a marco YT Studio Wire. Después agregaré
el diseño de grete. Simplemente haga clic aquí y
haga clic en columnas. Entonces cuatro columnas canalón
serán diez y el margen será diez Bien, ahora vamos a crear la
primera parte como la primera, tenemos el logo de Youtube studio, luego tenemos este botón de Subir y bueno entonces el logo del usuario. Vamos a hacer clic aquí. Vamos a crear un
rectángulo como este. Voy a hacer que tenga 60, después agregaré Text Studio. Después cambia el
teléfono para atornillar y aumenta el tamaño del teléfono
así, hazlo central. Después da click en el
icono de Elipse así. Hagámoslo 20 por 20. Cambiemos el color a
oscuro ya que tenemos otro icono. Entonces tenemos el icono de perfil. Voy a hacer clic a todos los que están en el rack ellos aquí así. Voy a hacer avatar. Para ello aumentaré
el tamaño y pincharé aquí. Entonces crea los
labios pequeños así. Después una forma de rectángulo. Y crea un rectángulo luego
en algunas esquinas como esta. Bien,
hagámoslo un poco más grande. No es centro. Trate de que se centre
como podamos. Bien. Entonces tenemos este nombre de canal y cuenta de suscriptor
y el logo del canal. Vamos a crear primero el logotipo del
canal. Vamos a crear así, luego haga clic en triángulo y
aquí está el título del canal. Después haga clic en texto y agregue
el suscriptor calcula como como 10,000 Vamos a
hacerlo un poco más grande. Entonces tenemos un pequeño
texto total de suscriptores. Vamos a resaltarlo
y hacer que el texto sea medio y disminuya
el tamaño del texto. Bien, resaltemos
los tres objetos. Y da clic en Comando. Haga clic aquí, luego haga
clic en una línea vertical. Bien, ahora la segunda
parte está terminada, y ahora tenemos la tercera parte. Para crearlo, voy a
hacer clic en el texto, o simplemente puedo copiar
el texto de aquí. Voy a repasar este texto y pulsaré clic en el texto
y lo pegaré aquí. Hagamos la
prueba Alta 20 y hagamos el tamaño a medio y
reduzcamos el tamaño de fuente. Hagámoslo semi tablero. Bien, entonces el texto
será Channel Analytics. Entonces tenemos dos cajas, tenemos texto aquí. Vamos a blig este texto haciendo
clic y arrastrándolo. Al presionar hold,
el texto será último 28 y lo resaltará. Disminuir el tamaño
del medio de texto. Bien, Y ponlo aquí. Después haga clic en el texto y
conviértalo verticalmente en un centro de línea. Bien, ahora tenemos dos cajas
para crear un triángulo así. Hagamos el
tamaño como 125 por 60. El texto será. Pongámoslo aquí. El texto será, voy a
duplicar este texto. Hagámoslo 635
y resaltarlo. Entonces tenemos que
aumentar el tamaño, 16. Bien, y eso, sonríe 50. Bien, y duplique esto, y póngalo aquí así. Bien. Después resalta todas
estas secciones. Y presiona el comando G para agruparlo. Luego se duplicó
presionando los diez,
enfureciéndolo hacia el lado derecho Entonces esta prueba se
cambiará para ver el tiempo. Bien, si queremos podemos
simplemente agregar esos símbolos. Podemos hacer clic en la flecha
y aumentar esto, luego agregarlo así. Y podemos ajustar la
flecha como queramos. Que sea así. Voy a Dublgatetre puede
hacer esta fidelidad media, pero la baja fidelidad es suficiente para
hacerse la idea del diseño Nos olvidamos de agregar el logo del
avatar aquí. Haré clic aquí
y cambiaré el color al y agregaré el logotipo del avatar. Además, podemos agregar el logo de
avatar así. Simplemente presione elipse y
cree la parte de la cabeza. Luego haga clic en la línea en
la línea así, luego cambie de color a esta. Aumentemos el
trazo, hagamos que se centre. Después haga clic en la línea
nuevamente a la mano. Duplica la mano así. Este es otro tipo de Avada. Bien, ahora tenemos esta última sección de contenido
publicado. Hagamos clic aquí y dupliquemos. Hagámoslo 20 contenido
publicado. Todo bien. Luego crea una caja. Crea un rectángulo como este. Y el tamaño será de 340 por 160. Ahora aquí tenemos la
miniatura del video y la URL del video. Entonces el tiempo, vamos a
crear el video, voy a cambiar de color
a este color. Cambiemos el
color así. Después da click aquí y las imágenes de
dos líneas siempre
se muestran como la imagen como una caja y
la cruz así. Entonces tenemos el texto. Para crear texto, puedo usar líneas. Haga clic aquí y
aquí está el título. Entonces aumentaré
el tamaño a E T. Vamos a disminuir el
color a este color. Entonces tenemos el segundo, el segundo texto será, es más pequeño y
se verá así. Entonces tenemos una línea como esta. Voy a disminuir el
color a color claro. Bien, ahora tenemos
los pequeños íconos. Agreguemos esos íconos. Simplemente crea la
elipse así y cambia el color de los labios
a este color. ¿Bien? Entonces tenemos algún texto. Duplicaré
el texto de aquí. Entonces tengo que
moverlo al frente
del marco y serán seis. Entonces uno, hagámoslo dos, vamos a fingirlo. 21, 61, 60. Bien, genial. Y ahora tenemos
esos otros textos. Entonces agreguemos esos textos. Entonces voy a copiar el texto
y pegarlo aquí. Rápidamente agregaré esos textos. Ahora voy a añadir esos
textos como estos. Bien, hagamos que esté centrado
verticalmente y arrojemos todos esos íconos
y hagamos una línea, ¿verdad? Bien, ahora tenemos la caja. Vamos a crear esa
caja para que me guste esto. Entonces obligaré a
este contenido. Puedo obligar a todo este
contenido y agregarlo aquí. Puedes hacer lo mismo o
puedes crearlo desde cero. Voy a destacar todos
esos contenidos Y solo pegarlo aquí, luego hacerlo así. Bien, pongámoslo así y agradable, llegar a donde. Bien, bien. Ahora tenemos que agregar la parte del
botón para hacer eso, solo
voy a aumentar un poco
del diseño así. Al aumentarlo, simplemente
hago clic en el comando y hago clic en la esquina y aumento la tripulación. Tenemos algunos enlaces o
botones que hacen una elipse. Esta es la N.
Cambiemos de color a este color y dupliquemos este texto aquí. Después en el tablero de texto, resaltémoslo y
hazlo un poco más pequeño. Que tenga el tamaño de nueve. Bien, El duplicado del texto, tenemos que duplicarlo por cuatro veces 1234, ¿bien? Y la siguiente
estará contenta. Y al siguiente se lleva el último comentario, no el último. El cuarto comentario y el quinto
destacan así. Y también presiona Comando por. Verlo en el componente. Así podemos agruparla,
hacerla centro, y presionar Comando,
presionar Centro de comando. Entonces lo haré,
sí, voy a hacer clic en todos
esos contenidos y dar click aquí. Y haga clic en Distribuir, Espaciado
Horizontal. Se verá así. Aquí está el marco de alambre final. En el siguiente video, crearemos esto
para Instagram.
7. 07 Tercer marco alámbrico: Bien, ahora vamos a diseñar marco de alambre de
baja fidelidad para Instagram. Voy a añadir
plantilla de Instagram ahí. Entonces voy a crear un marco. Seleccionaré la masa presa, Android Small, hazla. Después voy a cambiar el
nombre a Instagram. Bien, ahora voy a agregar
la cuadrícula de diseño. La cuadrícula de diseño serán columnas y
agregaremos cuatro columnas, luego serán diez. Y agregaremos el
margen como un diez. Bien, ahora voy a crear
un triángulo como este. Lo hacen 50. Entonces voy a contexto rápido, puedo agregar el texto. Este texto será, hazlo en negrita. Bien, esta parte está hecha. Ahora vamos a crear
esos tres iconos o esos tres botones. Así que solo podemos agregar hojas
para crear esos íconos. Cambiará el color
a gris oscuro claro. Lubricarlo así. Bien, pizarra de esos tres
entonces tráela aquí mismo. Bien, ahora tenemos que crear
esos cuatro en los íconos. Vamos a crear la forma del labio, luego crear elipse así Hagámoslo un 80.80, bien. Entonces hazlo aquí. Hagámoslo diez, vamos a llegar a ello. Bien. Entonces solo
agregaré unos labios que representen la cabeza del usuario y
crearé un polígono Hagámoslo así y cambiemos el color. Blanco y esquinero como este. Hagámoslo un poco más grande. Puedo crear otra elipse, un
poco más grande así Vamos a cambiarlo de color a blanco. Hay muchas maneras para esto me puede gustar esto. Bien. Entonces yo Dubois, antes de duplicarlo, lo resaltaré pre, luego lo doblaré así Bien. Algo mal. Esto es un poco más grande. Hagámoslo más pequeño así, todo esto y
alinearlo correctamente. Entonces sólo voy a crear un triángulo y un
triángulo así. Estos serán los
nombres del nombre de usuario
del Instagram por
todas partes aquí. Añadiré texto como Historia,
Historia y
lo resaltaré, luego lo haré. Regular y radio el
tamaño del teléfono a 14, 14 es mejor. Pongámoslo aquí. Pondré este texto alineado
con el texto de la historia. Destacar todos esos textos. Y solo haz clic aquí
y alinea correctamente. Bien, entonces tenemos que
crear esta parte. Para ello, sólo voy a dar clic
aquí y dar clic en Línea. Luego presiona Shift y
crea una línea como esta. Esta es la línea que creé. Ahora tenemos el
Bajo y el nombre. Vamos a hacer clic en uno de estos
usuarios y presionar los diez. Trapo así. Ahora voy a hacerlo más pequeño. Vamos a alinearlo aquí. Bien. Y ahora solo duplique
esto enfrentando a los diez. Haga clic en el botón izquierdo del ratón, y aquí está el nombre
del seguidor de Instagram. Entonces tenemos la imagen
para crear imagen, ángulo
directo y crear
una imagen como esta. Hagámoslo 60. Ahora haga clic en línea y
cree una línea como esta. Esto es solo una baja fidelidad, podemos hacer
pruebas de usabilidad con esos
Nosotros, solo necesitamos convertir esos marcos
de alambre en prototipos Después de practicar esto, diseñaremos
marcos de alambre para nuestra propia aplicación. Después
lo convertiremos en prototipo. Bien, ahora tenemos 123.44
botones o iconos aquí. Y aquí hay un icono. Haga clic en esos tres
iconos y duplique el a este. ¿Bien? Bien. Ahora está bien. Entonces solo obliga esta línea de
texto y esta será la cuenta y esta
será la fecha En realidad, si queremos
podemos simplemente añadir texto, pero por ahora sólo voy a añadir
esas dos líneas así. Entonces tenemos esto
a continuación lo puedo configurar, Vamos a crearlo
solo aumentará el tamaño
de la interfaz. Después haga clic aquí, haga clic en Conectan. Crea un rectángulo como este. Y esta parte es fácil. Vamos a copiar esos cuatro
elementos y ponerlos aquí. Entonces lo enviaré a arriba en el Instagram
vía frame frame. Ahora tenemos cinco artículos. Voy a ubligar éste, entonces lo enviaré a aquí Y también enviaré esto a Corner y seleccionaré
todos esos artículos, y pincharé aquí. Después haga clic en Distribuir Espaciado
Horizontal. Se verá así. Y ahora creamos con éxito
el marco de alambre de Instagram. Bien, creamos marcos de
tres hilos. Ahora es tu turno. Simplemente créalo. En el siguiente video, te
mostraré la
manera de crearlo.
8. 08 4º marco alámbrico: Bien, ahora vamos a crear marco de alambre para enlazados en. Espero que estés listo. Cree el marco de alambre. Sigamos el paso. Lo voy a poner como aquí. Después haré clic en frame y
crearé un marco pequeño de Android. Bien, hagámoslo un poco
más grande para que podamos comparar esas dos
secciones así. Bien, entonces
cambiaré el nombre a link en marco de alambre. Bien, comencemos primero
el diseño. Simplemente voy a hacer clic aquí
y dar clic en Vidas. Antes de hacer eso, tenemos que
agregarle la maquetación. Para hacer eso hago clic en el marco
y hago clic en el ciclo más. Da click aquí, luego haz que
la columna cuente a cuatro será diez, el margen será de diez. En realidad, podemos
guardar el diseño. Si solo haces clic en los cuatro puntos y
haces
clic en este plus con, obtendrás la grilla que
creamos y solo la
nombraré para grid y daré click
en Crear estilo. Si creo un nuevo marco, vamos a crear un nuevo
marco para iphone ocho. Y si quiero agregar
el diseño de cuadrícula, simplemente haga clic aquí y haga clic en
esto para agregar cuatro diseños de cuadrícula. Figma tiene características
para guardar cuadrículas ya que puede guardar colores
y otros pasos Ahora comencemos el diseño. Como primer paso, haré clic en elipse
y crearé la elipse Es para este ícono de avatar. Hagámoslo 40. 40 por 40. Y que sea 22 por bien. Hazlo 12 por bien. Bien, hagámoslo diez por diez. Bien, ahora hay que
crear un rectángulo. Este rectángulo es
para la barra de búsqueda, así que hagámoslo un tamaño 30. Sólo voy a añadir el
texto llamado búsqueda. Entonces tenemos este chat para crear unos labios pequeños como
este y agregarlo aquí. Bien, la primera
parte está terminada entonces voy a crear una línea aquí. Después tenemos los datos del
usuario crear. Deja esto para nosotros
en vamos a crearlo, hagámoslo 50 por 50. Hagámoslo como 70 por 70. Bien. A continuación, haga clic en una línea
y cree una línea. Este es el nombre.
Voy a hacer cinco. Hagámoslo ocho. Este es el nombre del
usuario que comparte esto primero. Y tenemos la ocupación o título laboral del
usuario, hazlo así. Y hagámoslo también, y tenemos el tiempo que esa
persona comparte la primera. Hagámoslo así. Bien,
hazlo solo presiona control para agruparlo y
hagámoslo enviado. Bien, ahora tenemos la
descripción de este post. Simplemente voy a hacer clic aquí
y lubricar esto. Esta es la descripción de la. Voy a añadir más
detalles como este. Entonces tenemos esta
gran grasa para crear, crear, crear esto rápido. Así.
Hagámoslo 340 por 340, bien. Entonces crea una línea como esta
y crea otra línea. Bien, entonces tenemos
el conteo de comandos. Crea labios más pequeños así. Entonces el conteo de comandos
aparecerá aquí, 125. No vienen en conteo, es conteo. Bien. Entonces tenemos
una línea horizontal. Ahora tenemos un botón
y entra botón. Vamos a crear el
botón aquí, 30 por 30. Entonces el texto llamó como y dobló
seleccionando y copiando seleccionando y copiando Como si. Bien. Ahora tenemos el fondo. Vamos a crear.
Antes de crearlo, solo
disminuyo el tamaño. Para ello, seleccione el
marco de alambre y haga clic en Comando y cambie el tamaño
del marco de alambre, El clang así
y cree el menú Entonces tenemos 12345 artículos. Simplemente obligaré a uno de
estos y lo haré centro, cambiaré el color a gris oscuro Entonces también copiaré el
texto y lo enviaré a arriba. Después hacer el texto como hogar. Bien, entonces para obtener este grupo luego presionando comando, permanezcamos en el tamaño de
fuente a él. ¿Bien? Haz que centren el espaciado
horizontal de distribución. Bien, así que aquí está el
marco de alambre de bajo servicio para enlazados en. En la siguiente lección, entraremos en crear
un marco de alambre para la aplicación.
9. Introducción a la creación de marcos metálicos para una aplicación: Bien, ahora es el momento de
diseñar marcos de alambre
para nuestra propia aplicación. Diseñaremos una app de
entrega de comida a domicilio para una cafetería. Entonces para ello, tenemos que hacer investigación de
usuarios y
crear personas. Historias de usuarios, realizar
investigaciones de usuarios y empatizar con los usuarios y auditar a los competidores para recopilar información
para diseñar nuestra aplicación Es un proceso que
tenemos que hacer en el diseño UX. Pero aquí solo estamos
enfocados en diseñar marcos de alambre. Yo ya hago el análisis de la
competencia. Y comencemos a
construir los carritos de alambre. Voy a iniciar sesión en mi cuenta de Ima. Ahora haré clic en este botón de archivo de diseño azul
y crearé un nuevo proyecto. Entonces llamaré a este
proyecto app de entrega de alimentos. Comencemos a diseñar el cable Pm. Después convertiremos esos carritos
de alambre a tipos de fotos. En el siguiente video, comencemos a
diseñar desde cero.
10. 10 páginas de inicio de diseño de aplicaciones: Comienza con la pantalla de inicio, haré clic en el icono del spray, y seleccionaré el
Android Large Size. Ahora voy a cambiar este
texto a Página Principal. Después agregaré Layout Grid. Haga clic aquí, y nuestra
cuadrícula será columna. Entonces tendremos cuatro columnas, y cuneta será diez, margen será diez Bien. Entonces hago clic aquí para
guardar esta grilla, este estilo. Y da clic aquí en el nombre. Vamos, bien. Ahora voy a empezar con el menú. Vamos a hacer clic en Triángulo, y
tendremos un menú de hamburguesas. Hace tres, luego dublicatese. Hola, ya les hablé. Y cambiar el
color para que sea más oscuro. Entonces los agruparé. Ahora voy a crear un
icono de usuario aquí para hacer eso. Crea un elipse. Entonces vamos a crear un avatar,
crear otro elipse. Y turno, esta
será la cabeza. Cambiemos a blanco y doblemos esto
presionando el viejo diez, arrástralo un poco por debajo, luego hazlo Bien, ahora tenemos un
poco más grande. Ahora voy a crear
una barra de aumento aquí, porque necesitamos una barra de aumento
para buscar alimentos en la cafetería. De esta manera
podremos encontrar la mejor comida. Entonces voy a Radio
esquinas, hacer cinco, ¿de acuerdo? Y da clic aquí. Después haga clic en Elipslipsn. Cambia el color a este color. En realidad, agrega Only Eat Rock, da clic aquí y tres como
el tamaño de trazo este. Acabo de crear un icono de búsqueda. Serán los tres. Bien, ahora lo
voy a destacar. Y vamos a agruparlo. Voy a agrupar esto,
la primera parte está terminada. En la siguiente parte, crearé
una sección para categoría. Haga clic en este texto, haga clic aquí, y esta
prueba será categorías. Espero que las palabras sean correctas. Y hagámoslo atornillar. Si quieres, puedes
cambiar el texto, pero voy a usar texto predeterminado. Esto es mucho más tarde. Usemos el texto predeterminado. Bien. Ahora voy a crear
cuadro cuatro categorías, crear un rectángulo como este. Después haga clic en la
línea, Crear imagen. Esta es una imagen. Voy a obligar este
texto y cambiar el tamaño a 11 será mediano Bien. Hazlo en el centro. Este texto será Especiales del
día. Especiales del día, voy a
destacar todo este clang. Y se convertirá en un grupo. Después blibli otra vez,
Ubd otra vez Ubd Entonces resaltaré
todas ellas y la convertiré en una línea centrada
verticalmente. Bien, es un texto. Esta será bebidas
seguirán siendo comidas. Bien, nuestras categorías
están terminadas. Entonces solo voy a aquí
y cambiaré el espaciado. Agregar el espaciado como, luego agregaré sección de
pie sucio Para ello, obligue a la
parte de categoría y agregue comida Bien, podemos blige este texto. En realidad, sólo podemos
alinearnos en este texto. Para ello, da clic en la línea y este será
el título de la T. Entonces podemos agregar, obtener esta. Ahora podemos sumar el precio. Simplemente agregaré dólar a. Entonces tengo que agrupar
esos artículos correctamente. Grupo de canciones ocho. Bien. Como podemos agregar reseñas de estrellas, agreguemos reseñas de estrellas. Simplemente crea un, tal vez
podamos usar polígono para
crear un grupo Reduce los signos en
el núcleo de campo a negro. Ahora mismo podemos duplicar esto. Ahora tenemos que agregar alimentos
recomendados. Simplemente duplique éste. Bien, podemos duplicar la sección de comida
popular para agregar. Aquí podemos agregar más artículos, pero por ahora,
agreguemos esos artículos. Ahora voy a hacer clic en el botón de comando y cambiar
el tamaño del marco. Entonces agregaré el rectángulo
y crearé una espuma aquí. Haré clic en Rectángulo
y crearé el Botón de Inicio, lo
haré centrar en la parte superior. Voy a añadir Texto Nombre de la app. Yo sólo voy a poner un pie Smolt 20. Voy a hacer que sea centro. Todos y cada uno de los fotogramas deben tener un nombre porque cuando
hacemos este tipo de foto, tenemos que entender el
marco en el que estamos. Creo que esto es más grande. Cambiemos la altura a bien. Se ve bien. Voy a hacer este poco
más pequeño así. Ahora tenemos que añadir aquí. Voy a duplicar esto en. Se trata de una brecha de entrega de alimentos. Debemos tener una tarjeta. Vamos a crear un auto. Crea un rectángulo como este. Cámbialo a
color blanco, hazlo central. Haga doble clic aquí, luego
también haga doble clic aquí. Bien. Y ahora voy a dar click en Vidas y
solo agregaré las ruedas. Después podemos agregar el asa alrededor de ella. Ahora, ¿por qué? Bueno, agrupa esto,
hazlo centro, bien. Podemos cambiar el color
de fondo. Si cambiamos el
color de fondo a oscuro así, podemos
ver claramente los iconos. Bien, ahora vamos
al segundo ítem. El segundo ítem
será página de búsqueda, página. Vamos a hacerlo.
11. 11 crear una página de búsqueda de diseño de aplicaciones: Ahora es el momento de
crear la página de búsqueda. Así que vamos a crear un marco. Y será
Android Large Size. Cambia el nombre del marco
a Search Foods. Bien, ahora voy a dar click aquí en la grilla y
Pizarra la grilla principal. Ahora podemos simplemente copiar esta sección anterior
desde la página de inicio. Los resaltaré todos
y presionaré todos y solo
duplicarlo así. Ahora voy a cambiar
el título a Alimentos. Bien. Entonces tenemos que
Crear Alimentos aquí. Antes de hacer eso,
duplicaré este texto y agregaré el texto como hamburguesa, y lo haré de tamaño mediano. Y reducir el tamaño del texto a 14. Y ponlo aquí, bien. Es el texto de búsqueda. Y ahora voy a agregar resultado de pie. Así que vamos a crear un
rectángulo como este. Hagamos 100. Bien. Luego distribuya el espaciado
horizontal. Ahora voy a dar clic aquí
y dar clic en la línea. Entonces haz una línea como esta, y haz una línea como esta. ¿Bien? Entonces los
resaltaré y lo duplicaré. ¿Bien? Ahora voy a agregar título aquí, las calificaciones, luego precio. Vamos a hacer clic en este. Vamos a agregar el título. Voy a cambiar y crear
una línea como esta. ¿Bien? Aumentar el tamaño de la línea. Después cambia el
color para que te guste y reduce la esquina
o redondear las esquinas. Después agregaré calificación por estrellas. Puedo crear una calificación por estrellas, o simplemente puedo
duplicarla desde la página principal. Lo duplicaré de la página de inicio y
solo lo meteré aquí. Después aumenta el tamaño 310. Pongamos aquí la tarifa. Y el título irá hasta aquí. Y aumentar el tamaño
del título En aquí, podemos agregar el precio. Simplemente haga clic en este
y agregue dólar 11.5 Vamos a reducir el Ok. Ponlo así, hazlo centro horizontal. Bien, solo voy a eliminar esos
dos elementos y puedo agrupar este ítem luego
DubligatedLet's
Agruparlo presionando
Comando y Dub it Bien, luego resalta
tres de esos grupos y haz clic en Distribuir Espaciado
Horizontal. Ahora solo doblaré y
repetiré los artículos así. Bien, se ve bien nuestra página
de búsqueda se ha completado. Todo bien. Bien, se ve bien. En el siguiente video,
vamos a crear la página de un solo producto para mostrar el producto
o mostrar el pie. Antes de hacer eso,
resaltaré todo esto y comprobaré el tamaño aquí. Aquí voy a cambiar
el tamaño a 20. Bien.
12. 12 crea una página de comida única para el diseño de aplicaciones: La fase de pie único. Para ello, voy a crear un marco creado
Android de gran tamaño, luego agregaré el
título del marco como un solo pie. Bien. Ahora voy a
copiar esta parte de cabeza. Sólo la parte de la cabeza,
solo resálcalo. Diez cara, los diez
db en realidad, antes de hacer eso,
tenemos que agregar la grilla. Agreguemos esta grilla. Bien, Ahora voy a agregar imagen de
comida aquí. Será una galería. Y vamos a tener el título de comida
y vamos a tener calificaciones. Entonces tendremos el precio. Después de eso,
tendremos un botón para agregar. Tendremos un pequeño campo de
texto que
podremos seleccionar las cuentas de hamburguesa
que queramos agregar al carrito. Vamos a hacerlo. Tendremos
reseñas y descripciones. Empecemos a diseñarlo. Primero voy a crear un rectángulo. Entonces esta será una imagen. Hagámoslo 200 como la
altura y 340 como el ancho. Crea la línea. Bien, ahora tendremos dos botones que
podremos cambiar la diapositiva. Tendremos cuatro círculos
para cambiar la imagen. Vamos a crear pequeños círculos. Seleccionemos este color. Y será de seis por seis. ¿Bien? Entonces obligan.
Obligarlo. Bien. Ahora selecciónalos todos, y arriba, conviértelos en el centro. Bien, Ahora vamos a tener
dos botones aquí. Vamos a crear esos dos botones, luego cambiar el color a
blanco y ponerlo aquí. A lo mejor podamos aumentar el tamaño. Vamos a duplicarlo,
resaltarlo y dubligateowin dubligateowin imagen. Entonces vamos a crear el texto. Agregamos este tipo de
texto porque el texto se
cambiará porque
cuando se selecciona el cambio de pie, se
cambiará
el título de la comida. Por eso
no vamos a crear un título
real como agregar un nombre de
pie real a este pie. Ahora tendremos las
previsualizaciones y el precio. Podemos sacar a
esos dos de aquí. Simplemente selecciónala y
consíguela desde aquí. Pon el precio aquí. Vamos a aumentarlo a 60. Aumentar el tamaño de la revisión, 15. Ahora tendremos un botón. Este será el botón
Agregar al carrito. Vamos a crear un rectángulo y
crear el botón así. Serán 40, vamos a dimensionar como 130. Bien, Ahora voy a duplicar
este texto como un auto. Enviemos este texto aquí. Y cambiar tamaño
a mediano y 60
, serán 20. Selecciona el texto y el marco, luego haz que se centre así. Después da click aquí y
tendremos que agregar conteo. Este campo utilizará para seleccionar el conteo de pies que
queremos agregar a las tarjetas. Pongámoslo así
y dupliquemos la prensa en una será, vaya aquí otra vez. Tenemos que hacerlo al frente. Bien. Ahora da click aquí y reduce
las esquinas a las cinco. Y haz lo mismo aquí. Bien, La primera
parte está completa. Destaca esto y
tráelo hasta 15. Bien, ahora
tendremos la descripción. Entonces haremos que las
reseñas dupliquen esta. Esta será descripción, agreguemos descripción como esta. Duplicemos esto. Tenemos la vuelta en ambas esquinas. Sólo damos la vuelta a una esquina, Así que hagámoslo a todos esos textos y
hagámoslo así. Bien, nuestra descripción
está terminada. Si queremos, podemos simplemente agregar
más artículos no necesarios. Ahora tendremos que
agregar las previsualizaciones. Haga clic aquí y
duplique éste. Esto serán reseñas. Bien, agreguemos cuadro de revisión. Duplica esta
caja de revisión y ponla aquí. Tráelo a colación. Ahora
tendremos que agregar título. Yo sólo duplicaré este título. Vamos a sacarlo a colación así
y cambiar el tamaño del título. Hagámoslo diez. Esta es la
descripción de la revisión. Disminuyamos el
tamaño así. Bien, bien. Después en el icono at
de la reseña, cambia el color para
crear usuario así. Cambia el color a blanco. Entonces este será el
nombre de la revisión. Para este tipo de app, solo
necesitamos el nombre. Voy a agrupar este
centro ava el nombre, Bien. Entonces resaltaré esto y presionaré comando de control
para duplicarlo. Aquí está la revisión Duplicada. Bien, ahora voy a hacer clic en
el marco de un solo pie, luego
cambiar el tamaño o cambiar
la altura del marco así. Y tenemos que añadir
esta parte inferior. Simplemente lo resaltaré y lo
pondré como voy a dubrow, tenemos página de pie único En el siguiente video, entraremos a
crear la página del carrito.
13. 13 páginas de carrito de diseño de aplicaciones: La página de la Tarjeta. Haré clic en un marco y seleccionaré
Android Large Size. Después cambia el nombre del
marco a tarjeta. Y copia la primera parte. Bien, es un
diseño de cuadrícula dos. Todo bien. Ahora cambia el texto a mi tarjeta, luego haz que se centre. Bien, ahora tenemos que agregar la lista de alimentos que seleccionamos
o que seleccionó ese usuario. Da click aquí, y esta
será la imagen de la comida. Hagamos un 60, luego creemos una línea. Ahora tendremos el
título y las papas fritas, y tendremos una pila de texto para cambiar el
recuento de artículos de la comida. Vamos a crear el título. Ahora tendremos que
agregar las papas fritas. Tendremos que agregar la
píldora de texto a en el conteo de alimentos. Entonces duplique esto. Ahora los alimentos seleccionados cuentan que un
usuario necesita en más artículo, puede hacerlo usando esto en la línea horizontal. Ahora voy a agrupar esto
y vamos obligados. Ahora sumaré el subtotal
y el conteo total de alimentos. Entonces subtotal ahora, sí, vamos a tener el total de alimentos Destacaremos todas
esas partes subtotales y la
eliminaremos del grupo Ahora aquí vamos a tener el total. Hagámoslo audaz. Y luego tendremos
un botón para checar. Vamos a crear un rectángulo
y crear un botón. Echa un vistazo. Oh,
agreguemos como por favor ordene. Bien, ahora voy a
añadir el elemento del menú. Vamos a agregarlo aquí. Bien, aquí está nuestra página de carrito.
14. 14 ventanas emergentes de diseño de aplicaciones para compilar: Bien, en el último video tenemos algunos problemas de alineación,
vamos a arreglarlos. En la página de la tarjeta, esto debería
ser un margen de cinco. Y ahora voy a destacar todas estas secciones y
esto debería ser margen. Creo que son diez, son 220. Vamos a agregar margen
de diez es el diez. Bien, y luego, tal vez podamos disminuir
el tamaño del marco, pero es una mirada, bien. Bien, ahora es el momento de
crear la página Order Success. Crea un nuevo marco y el nombre del marco
será Order Success. Agreguemos el diseño de cuadrícula. Bien, ahora en esta página no
necesitamos botón de tarjeta,
este botón de avatar. Solo necesitamos botón de retroceso. Vamos a crear el botón Atrás
como primer paso, ¿de acuerdo? Y cambia el color a esto, y este será blanco. Bien, aquí está el botón Atrás. Y ahora tenemos mensaje de
éxito mayor. Copiemos este título
y hagamos que sea un éxito. Ahora vamos a crear un
texto, hacerlo centro. Agreguemos texto como si
hubieras realizado un pedido con éxito. Bien, conviértalo en un centro de línea. Pongámoslo uno al 80. Bien. Duplicaré esto y ordenaré el ID. Después agregue el ID de pedido y
hágalo de tamaño mediano será de 14. Bien. Ahora tendremos un botón llamado
rastrear el pedido. Vamos a revisar los tamaños de los botones. Son 40, vamos a hacerlo 40 y bien, que sea centro. Bien, vamos a mandar
esto al centro. Y ahora voy a reducir
el tamaño del marco. Que se centre así. Entonces podemos agregar el marco
alrededor de este contenido. Vamos a reducirlo a 15. ¿Bien? Y esta será una
amplia Y haga clic en el marco, en realidad podemos hacer
este marco como un pop up. Para ello, se
verá mejor, hagámoslo. Para ello, hago clic en Rectángulo y creo
un marco como este. Después cambia de color a blanco
y envíalo hacia atrás. Después, reduce las esquinas. Vamos a reducirlo, vamos a
reducirlo como un diez. Y luego haré clic en este orden Marco de éxito y cambiaré el color a
este color más oscuro. Y trae aquí este texto. Y selecciona el botón Atrás. Y el botón Atrás estará aquí, o podemos agregar esto
como un botón de cierre. botón Atrás estará aquí y se ve mejor que
el look anterior. En el siguiente video, crearemos un pop up a
este botón Agregar al carrito.
15. 15 diseños de aplicaciones para crear que se agreguen al carrito: Bien, vamos a crear comida
agregada al carrito emergente. Para ello voy a dar click en el marco y esto
va a ser un pop up, así que tenemos que usar tamaño personalizado. Simplemente voy a hacer clic aquí
y aquí está el marco. Voy a cambiar el nombre de este marco a, vamos a configurarlo como
agregado a su pop up. Bien, ahora cambiemos a
340 y también serán 340. Entonces reduzcamos
las esquinas a diez. Bien, entonces tendremos un pie de
texto agregado a las tarjetas. Entonces simplemente crearé este
texto y lo pondré aquí, centro correctamente y haga clic aquí. Entonces agreguemos layout. Bien, entonces esto
será pie agregado a la tarjeta, Hagámoslo 120. Bien. Entonces tendremos que
agregar dos botones, uno será ver tarjeta y el siguiente será
continuar comprando. Así que vamos a crear el carrito de botón de
ver tarjeta, y este será de tamaño mediano. Bien, aquí está el botón de
ver tarjeta. Y también lo haremos en realidad, tenemos dos en las esquinas. Entonces duplicaré
este botón, y ahora tendremos botón
Continuar Compras. Bien, entonces aumenta el tamaño
del botón, hazlo centrar. Bien, aquí está el pop up. Y en prototipo,
agregaremos esto como pop up cuando alguien o cuando el usuario haga clic en este botón Agregar
al carrito. Bien, en el siguiente video, entraremos para convertir
estos
cuadros de alambre de baja fidelidad en prototipo. Nos vemos en la siguiente lección.
16. 16 crean retoques finales en el diseño de aplicaciones antes de convertirlo en prototipo: Bien, hagamos el retoque
final antes
de convertir los
marcos de alambre a tipos de fotos. Si lo reviso en
el modo presente o lo verifico en la vista móvil
real, se verá así. Tenemos que aumentar el
tamaño del diseño. Para ello, sólo voy a clic en el marco y
aumentar el tamaño. Entonces aumentaré
la altura a 800. Agreguemos este
menú de pie de página así. Y vamos a comprobar el diseño. Bien, se ve perfecto. Entonces voy a hacer lo mismo, otros
dos diseños En el solo pie, solo lo
agrego como pie de búsqueda. Debería ser de un solo
pie así, y la ventana emergente está bien. Ahora tenemos que probar esos botones porque
vamos a usar o vamos a
convertir esos botones
a componente y
crear el tipo de foto. Veré el texto y el comando
triángulo y arroyo. Lo haremos aquí y
lo haremos por el resto del botón. Bien, también tengo que dar clic aquí y hacer clic en el
ítem de este grupo, y es solo el elemento de imagen. Entonces haz un grupo
con esos artículos, y lo haremos por
esos cuatro artículos. Y te voy a mostrar por qué lo
hago en lección prototipo, voy a repetir el proceso. Bien, ahora estamos listos. Hagamos clic en este
ítem y hagamos clic en Vista previa. Se previsualizará así. En el siguiente video,
creamos el Fototipo.
17. 17 diseños de aplicaciones para crear se convierten en prototipos, la primera parte: Bien, vamos a convertir los marcos
de alambre al tipo de foto. Para ello, voy a ir a, voy a dar click en este menú
prototipo. Entonces voy a ver la página principal. Así que comencemos desde la
parte superior de la página de inicio. Así que al final de nuestra clase, te
voy a dar un
proyecto para completar. Por lo que incluirá
crear marcos de alambre para este menú de hamburguesas
y algunos de otros marcos Entonces no voy a crear prototipo para este menú de
hamburguesas Y lo harás en
el proyecto de clase. Entonces comencemos desde
el icono de la tarjeta. Entonces esta es nuestra página de tarjeta. Y cuando hagamos clic
en esta tarjeta Ticon, iremos a la página del carrito Entonces seleccionaré la tarjeta, en realidad tenemos que
agrupar esta tarjeta antes crearla en un
componente. Hagámoslo. Haga clic aquí y haga clic en
el elemento de fondo. Después presiona el comando
G para agruparlo. Y lo haremos por el
resto de la caja. Hagámoslo. Bien. Ahora da click en esta caja y la
convertiré a Componente. Es muy fácil, simplemente haga clic en
el elemento que desea convertir, y verá
cuatro triángulos aquí. Simplemente haga clic en él. Cuando pase el cursor sobre él, verá una
llamada de texto Crear componentes Así que simplemente haz clic en él. Al hacer clic en él, verás que se convierte en
un componente y verás una línea morada
cuando lo selecciones. Ahora voy a darle click y
tenemos que señalarlo aquí. Para ello, voy a dar click
en el Phototypeow. Sobre el icono,
verás este signo más. Simplemente haga clic en él y arrástrelo y
suéltelo en el marco del corazón. Entonces verás un menú pop up. En el menú emergente, puedes seleccionar la acción
que vas a hacer. En este caso, está de barril. Cuando toquemos el icono, iremos a la página de la Tarjeta. Entonces aquí está la sección en la que
podemos definir la acción
que vamos a hacer. En este caso, se
navegará a la página de la tarjeta. En aquí podemos
seleccionar otras páginas, pero solo necesitamos
seleccionarla como tarjeta. Y ahora si
lo reviso en la acción, simplemente
hago clic en la
página de inicio y da click aquí. Después sólo tiene que previsualizarlo
y dar clic en Página de inicio. Ahora bien, si hago clic en el botón de esta
tarjeta, irá a la página Mi Carrito. Esto es lo básico para
crear prototipos. Y Fema tiene oído la característica hacerlo sin meterse
con ningún diseño Y podemos hacerlo con claridad. Ahora tenemos puesto este avatar. Cuando hagamos clic en
este icono de avatar, se abrirá mi página de perfil. Esta es otra actividad que tienes que hacer
en el proyecto de clase. Ahora hay tres botones de tarjeta
más. Ahora hay
algunas formas de hacerlo. Simplemente podemos convertir este botón de tarjeta de forma manual
e individual, luego vincularlo a la página de la tarjeta. Pero ya creamos
este componente. Si reemplazamos el mismo componente
por otros botones de tarjeta, quedará
claro y no tendremos mucha
conexión así. Déjenme mostrar a lo que me refiero. Vamos a convertir esos botones
en componentes como este. Y ahora vamos a
dirigirlos manualmente a la tarjeta. Entonces esto también
dirigirá a la página de la tarjeta. Hagámoslo así. Ahora si hago clic en el lienzo, voy a ver tres líneas. Esta es la línea de tres a la que
apuntamos esos botones, esta página de la tarjeta, pero podemos
duplicar este componente. Y si reemplazamos este primer componente
de botón por otro botón de tarjeta, no se convertirá en un desastre
así y ahorrará más tiempo. Hagámoslo de esa manera. Yo solo presiono control
para deshacer los cambios. Bien, ahora hago clic en
este artículo del auto, ¿verdad? Luego haz clic en Copiar. Después hago clic aquí
y clic derecho. Da clic en Pace para reemplazarlo. Simplemente reemplazamos nuestro componente. Ahora si hago clic aquí, voy a ver esta conexión. Y si hago clic aquí, voy a ver esta conexión. Hagámoslo por el
resto de Botón duro. Ahora bien, esta es la manera de crear
fácilmente un prototipo. Bien, como siguiente paso, agreguemos acción a
este ícono de búsqueda. Si alguien escribe aquí
y busca algo, irá a la página de búsqueda. Obtendrá el resultado de la búsqueda. Para ello, podemos dar
click aquí y clic en Componente y
convertirlo a Componente. Después haga clic en este icono más y simplemente navegue hasta
la página de búsqueda. No necesitamos
hacer ninguna acción para esta barra de búsqueda porque
ya está en la página de búsqueda. Ahora tenemos esas categorías. En este caso, no creamos un prototipo para categorías. Vamos a recrear esas categorías
en esta página de pie de búsqueda. Para ello, voy a hacer
doble clic aquí. ¿Recuerdas
que creé grupos para esas imágenes de categoría? Ahora seleccione ese grupo y
haga clic en Crear componentes. Y si quieres,
puedes simplemente renombrar el texto como imagen de categoría. Pero no lo hago
porque este es un juego de marco de alambre simple. Solo hay pocos marcos de alambre, pero en gran proyecto, definitivamente
tenemos que cambiar
el nombre de esas categorías. Y lo hago para ahorrar
tiempo, pero si quieres,
puedes simplemente renombrar esas
capas en esta sección. Ahora cuando hagamos clic en
esas categorías, nos relacionaremos con
esta página de pie de búsqueda porque no
creamos página diferente, cuatro categorías, categorías de
alimentos. Ahora como lo hice antes, sólo
puedo copiar esta
imagen de categoría y dar click aquí. Después haga clic en Pace para reemplazar. Y haga doble clic aquí
para seleccionar la categoría, y haga clic en Pace para reemplazar. Haz lo mismo aquí, bien, bien. Ahora, si revisamos el proceso, si hacemos clic en él,
leeremos la página de búsqueda. Si hacemos clic en la barra de búsqueda, leeremos a la búsqueda. Bien, Ahora es el momento
de agregar la acción. Cuando alguien haga clic
en esos alimentos, haga clic aquí y conviértelos
en componentes como este. Y haz clic en el icono más. Cuando alguien lo toque, haga clic en este alimento, esa persona lo hará, a
la página de un solo pie. Bien, ahora voy a hacer clic
derecho y copiar. Después a la derecha y haz
clic en Pace para reemplazar. Porque todos esos alimentos
populares
son los mismos en este marco de alambre. Si agregamos acciones individuales como agreguemos acción a esto, habrá
muchas conexiones. Pero si reemplazamos el componente, solo
habrá pocas conexiones y
será realmente fácil de manejar. Bien, Ahora voy a hacer lo mismo, basta con hacer clic en Copiar y dar
clic en Colocar para reemplazar. Bien, ahora nuestra
página de inicio está terminada. Y ahora voy a hacer lo mismo
al pie
en la página de pie de búsqueda, porque todos esos son iguales. Simplemente haga clic en uno de los alimentos
y conviértelo en componente. Después sobre él, y verás
este tipo de
botón más y lo arrastrarás hasta
el marco de un solo pie. Bien, ahora copiarlo y reemplazarlo con el
resto de alimentos. Bien, en la segunda lección agregaremos acción a
esto en el botón de dos tarjetas. Si revisamos el proceso actual, iré a la página principal. Y vamos al prototipo. Y volvamos
a la página principal. Y si busco algo de comida, iré a la página
Buscar Alimentos. Y si hago clic en A y
va a ir a los Alimentos Individuales. Si hago clic en este botón de tarjeta, irá a mi tarjeta. Seguiremos
construyendo el prototipo.
18. 18 diseños de aplicaciones se convierten en prototipos, parte dos: Ahora agregaré acción a
esto en el botón de dos tarjetas, haga clic en el botón A tarjeta y haga clic en Crear componente. Entonces, cuando hagamos clic en
esto en el botón de dos tarjetas, se abrirá esto
en dos tarjetas pop up. Cuando hagamos clic en
él, dirá pie agregado a la tarjeta. Hagamos clic aquí y envíelo
al marco emergente de la tarjeta A. Ahora voy a cambiar
esos parámetros. El primero será
navegar a un auto pop up. Este es un pop up, no navegará frame, solo abrirá overlay. Esto tuvo que la tarjeta emergente será una superposición del marco de un
solo pie. click en Open Overlay, y aquí seleccionamos el fotograma
que queremos superponer. Y lo haremos en el
efecto como instante. Ahora en configuración de superposición, voy a dar clic aquí
y dar clic en Manual. Entonces ajustaré la
posición de esta superposición. Vamos a ajustarnos al centro,
así, ¿de acuerdo? Después voy a dar click
sobre un fondo. Después haga clic aquí. Y al fondo, cuando esta ventana emergente se abra, resto de la página
será de color negro claro. Ahora dijimos que si lo reviso, da clic en Página Única. Vamos a hacer clic en el modo Vista previa. Y si hago clic en una tarjeta, aparecerá como
superposición. Vamos a continuar. Si quiero editar esto, sólo
puedo hacer clic aquí. Vamos a cerrar haciendo clic afuera. Si lo pruebo, da clic
en él Hacia. Si hago clic en el exterior
de la ventana emergente, mostrará la página de
un solo pie o mostrará la página actual. Pero en este caso no
lo voy a añadir. Ahora tenemos dos botones. Simplemente haga clic en el botón y
conviértalo a Componente. Y va a rojo a
esta página de mi Tarjeta. Da click aquí y rojo
a la página de mi Tarjeta y haz clic en Continuar Comprando y conviértelo a Componente. Enviemos esto a
la página de pie de búsqueda. Cuando alguien haga clic en
Continuar comprando, leerá en la página de pie de
búsqueda. Bien, ahora tenemos que hacer
acción en la página de mi tarjeta. Así que agreguemos acción a
este botón Realizar pedido. Simplemente haga clic en él y
haga clic en Componente. Entonces, cuando alguien haga clic en
este botón Hacer pedido, leerá a
Order Success Frame. Bien, ahora espero que
entiendas el proceso. Y esta es la manera de convertir el marco
de alambre en prototipo. Y ahora voy a convertir este
botón en un componente. Este es el botón de inicio. Después conéctalo
a la página de inicio. Cuando alguien haga clic en
él, leerá la página de inicio. Lo copiaré y lo reemplazaré por el
resto del botón. Ahora, reemplacemos esta también. Olvidé agregar el botón Atrás. Vamos a agregarlo rápidamente. Vamos a agregar botón atrás aquí. Vamos a crear elipse simple. Y crea la
elipse así, cambia de color a esto,
y da clic en Rectángulo Y crea el pequeño rectángulo. Bien, ahora vamos a agruparlo
y pulsemos en Componente, y se convertirá en un componente. Ahora voy a hacer clic en Tipo de foto y dar clic en el
icono más en el componente. Cuando arrastre la conexión del
componente, verá el botón
Atrás abierto. Eso significa que si alguien
hace clic en este botón de retroceso, reaccionará a la página
anterior que abras. Vamos a revisar la acción. Pick a la parte posterior,
duplicará este diseño. Duplicado así. Bien. Ahora vamos a comprobar
la acción real. Vamos a abrir esto. Ahora estoy en la página principal. Doy clic en la página de búsqueda. Ahora bien, si hago clic en
este botón de retroceso, iré a la página de inicio porque estaba en la página de inicio. Esta es la forma de
usar el botón Atrás. El botón Atrás no está alineada. Vamos a alinearlo correctamente. En realidad, vamos a
centrarlo aquí. Bien, ahora
tenemos el prototipo.
19. 19 crean un prototipo de prueba de diseño de aplicaciones: Ahora tenemos un prototipo de
estructura alámbrica de baja fidelidad. Así que vamos a probarlo. Antes de probarlo, voy a quitar el flujo una
parte porque no lo necesitamos. Simplemente bien,
vamos a probarlo. Voy a la modalidad actual y
ahora estamos en la página principal. Imagina que soy un usuario que
usa esto para encontrar comida. Voy a escribir comida aquí y
hacer clic en el botón de búsqueda. Y voy a ir a la
página de búsqueda y soy hamburguesa. Después hago clic en
una de las hamburguesas. En aquí puedo ver
todos los detalles de la hamburguesa y tenemos deslizador de
imagen descripción
y reseñas. Entonces puedo agregar las hamburguesas
que quiero comprar. Entonces puedo hacer clic en Agregar al carrito. Cuando agrego al carrito, puedo ver la tarjeta
o Continuar comprando. Haré clic en
Continuar comprando, y aquí puedo volver a buscar alimentos que me gusten y
después agregarlos al carrito. Vamos a ver la tarjeta. Simplemente haga clic en la tarjeta. Aquí está mi tarjeta. Aquí puedo consultar el subtotal y la comida que compré Puedo contar con la comida
que quiero comprar. Entonces puedo hacer clic en
Realizar el pedido, y obtendré este marco de éxito de
pedido. Aquí, puedo dar click en el Rastrear orden Y
rastrear el pedido. No lo completé porque lo harás en
la sección de proyectos. Este es el proceso de nuestro conjunto de marcos de alambre
y espero que tenga una idea clara sobre diseñar marco de alambre alto y
convertirlo en prototipo
20. Proyecto de 20 clases: Bien, aquí está el proyecto. Por lo que hay que continuar con
este conjunto de marcos de alambre y agregar tres marcos más y compartirlo con los
compañeros diseñadores. Para ello, voy a dar enlace a este prototipo para que
puedas duplicarlo. Entonces como primer paso, hay
que crear
un menú de hamburguesas Para ello, puedes buscar en
Google como menú de hamburguesas en app y verás diferente
tipo de menú de hamburguesas Especialmente cuando creas
este menú de hamburguesas, debería ser un pop
up pop up como este Entonces, a modo de ejemplo,
si creo un nuevo marco de Android, el tamaño del menú de hamburguesas debería ser la mitad de este marco Y cuando hagas clic en
el ícono de la hamburguesa, este será pop up y el
resto de la página
estará oscura como lo hicimos
en el add to cart Avance emergente. Simplemente ejecuta la comida única. Y si hago clic en la tarjeta At To, este es el pop up y el
resto de las páginas más oscuras. Entonces después de hacerlo, entrarás a
crear marco para editar. Este avatar, será un
marco llamado Mi Perfil. Entonces crearás una
página para rastrear tus pedidos. Por lo que será marco de orden de seguimiento. Así que no hicimos ninguna
investigación UX para diseñar esta app, así que te sugiero que vayas a Google
o a un lugar como Ble para
encontrar inspiración de diseño. Como ejemplo, si voy a rival, busquemos en la página Track Order, obtendremos este tipo
de páginas de orden de seguimiento. Entonces si vamos aquí, esta será una gran página de pedidos de
pista, para que podamos usarla también. Puedes hacer tu investigación y
encontrar este tipo de marco. Entonces puedes rediseñarlo. O puede crear el marco de cable de esa página a página de perfil. Puedes hacer lo mismo así, hacer la investigación y
crear esas tres páginas. Después de crearlo, haz clic en este botón azul
Compartir y configura esto como cualquiera con
el enlace puede ver. Después haz click en este enlace de copia y compártelo con los
compañeros diseñadores estadounidenses. Buena suerte y gracias por
quedarte conmigo y espero que obtengas valiosos detalles sobre crear
fototiposireframes Si tienes alguna duda, solo pregúntame y estoy
dispuesto a ayudarte. Te voy a ver en
otro momento. Gracias.
Akalanka Karunarathna, UI/UX Designer & Content Creator
