Transcripciones
1. Introducción: Hola a todos y bienvenidos
a nuestra sesión de hoy. Hoy, vamos a
adentrarnos en el fascinante mundo del encuadre
de alambre ¿Qué es exactamente un marco de alambre? Es una guía visual
que representa el marco esquelético de nuestra
aplicación o un sitio web ¿Por qué los wireframes
son muy importantes? Sí, es muy
importante
porque ayuda a entender
la claridad y la funcionalidad
de las pantallas o páginas que se
van a desarrollar. Ahora bien, ¿a quién nos beneficiaremos con este curso? Déjame decirte. Primero están los aspirantes a diseñadores, aquellos que quieren iniciar
una carrera en el diseño de UI En segundo lugar, los empresarios. Personas que
planean lanzar sus propias startups y
quieren diseñar su
propia interfaz de usuario. Siguiente es artista gráfico. Si te gusta el arte, entonces este
curso agregará una nueva habilidad a tus obras de herramientas y te
permitirá
explorar el nuevo diseño de la aplicación. El último es el entusiasta del diseño. Si simplemente te encanta el diseño, entonces esta es la forma divertida de
aprender algo nuevo. Básicamente es un curso súper
versátil, que puede beneficiar, como a cualquiera que esté interesado
en diseñar. Hay dos tipos
de wireframes, wireframes baja fidelidad y alta
fidelidad Y en este curso
vamos a aprender tanto los wireframes como también todo va a ser proyecto
práctico
2. Video del proyecto: Si más trabajo del proyecto, creará un total de
cuatro marcos de alambre. Te permitirá practicar técnicas de
wireframing
tanto de alta fidelidad como de
baja fertilidad para el wireframe bajo de frita Paso uno, elige un concepto de app que te gustaría diseñar. Paso dos, comience con los marcos de alambre de
baja fidelidad. Estos son los
planos iniciales del diseño de tu app. Paso tres, bosquejar
el diseño básico. Solo recuerda, enfócate en la funcionalidad
y no en los detalles. Paso cuatro, diseñe al menos
dos marcos de alambre de baja fidelidad. Ahora segundo son los marcos de alambre
Fili altos. Para ese paso uno, tienes que elegir uno de
tus marcos de alambre de baja finity, que se va a
convertir en una estructura alámbrica de alta fidelidad Paso dos, comienza por agregar
los colores o texturas. Esto hará que tus diseños
lleguen al paso tres. Crea al menos dos wireframes
de alta finity. Por último, después de tomar
una captura de pantalla
tanto de los marcos de alambre de baja fidelidad como de
alta fidelidad, simplemente comparta en la galería de su
proyecto.
3. Aprende a diseñar un marco alámbrico de baja fidelidad con actividad práctica.: Hola a todos. Entonces,
sin perder el tiempo, comencemos primero con el
wireframe Para eso, seleccionemos
la placa móvil. Ahora, aquí podemos encontrar el teléfono. Podemos usarlo, iphone 12, Pro Max. Ahora tenemos esto. Bien. Quiero mostrarte esta página de firma
de marco de alambre. Vamos a
hacerlo exactamente por aquí. Para eso, primero
hacemos los rectángulos, presiono R. Este será
el primer rectángulo Podemos duplicar esto
presionando el comando D. Sí, esto también se hace también. Vamos a necesitar de nuevo un tercer
rectángulo. Nuevamente, presione el comando D. Aquí lo conseguimos. ¿Puedes ver eso? Si me estoy moviendo hacia arriba, no me está mostrando
la alineación adecuada. Tan pronto como me cambié, vea puedo ver el color
marcado por aquí, lo
que significa que ya está correctamente centrado como
ese color. Ahora podemos sumar las fronteras. Podemos hacer el tamaño del borde desde adentro o podemos
hacerlo centro también o afuera. Pero creo que afuera se ve genial. Bien. Iremos al siguiente. Nuevamente afuera uno al 34, nuevamente, el tercero
que es un nombre de tala, nuevamente, afuera y 134. Bien. Entonces creo que estas cajas
son bastante grandes. Hagámoslo un poco
más pequeño, esto 35065. Bien. 31565. A 65. Ahora podemos escribir por aquí la rodilla
recordar y
dejar que escojan caja. Entonces hagámoslo. Bien, entonces esta fuente
está bastante bien. Podemos hacer una cosa. Acabo de copiarlo y
pegarlo aquí, ¿de acuerdo? Bien, y la
caja cuadrada de aquí, eso es para mí, la talla 25, 25. Podemos llenar este color azul. Este es de color bastante oscuro. Nos sale un poco de luz. Sin modelos. Bien, creo que 30 es suficiente. Bien, esta ya está hecha. Y ahora vamos a tapar lo que queda
en la próxima conferencia.
4. Aprende a insertar texto y campos de entrada en un diseño de Wireframe de baja fidelidad con actividad práctica.: Hola a todos. Ahora
pongamos los campos de entrada. Necesitaremos campos de entrada
para correo electrónico, contraseña e inicio de sesión ya que hemos
creado estos rectángulos Ahora insertemos el texto. ver puedes hacer como texto ya que estoy poniendo el
correo electrónico primero del teléfono. Que sea un poco de gras y el fondo, bien. Este fondo va bien, y por supuesto el tamaño. Entonces esto va bastante bien. Podemos volver a copiarlo. Podemos copiar esto, bien. Entonces esto va bien.
Ahora podemos copiar esto y pegarlo por aquí. Bien. Ahora haz una contraseña y cambia a un lado, ¿de acuerdo? Como puede ver, ya
tenemos las líneas de alineación. Bien, es correcto. A continuación volveremos a iniciar sesión. Simplemente puedes duplicar este comando siendo
puesto en el centro, y este será tu login. Siento que debería
ser menos coloreado. Bien, entonces
te sugiero que lo hagas más ligero. Bien, esto se siente bien, y este inicio de sesión nuevamente lo
hará un poco ligero. Bien. Creo que
debería ser oscuro. Sí, esto se ve bastante genial. El correo electrónico está hecho, contraseña
iniciar sesión, ¿me recuerdas? Y ahora viene la garrapata. Para hacer el tic,
tenemos que tomar los dos rectángulos en los
que estamos aquí Uno va a ser así. Gané otro. Bien. Eso es F 25. Bien. Vamos a rotarlo. Retiramos las aguas y también podremos volver a rotar. Esto se ve genial, ¿verdad? Bien, si quieres
podemos extender esto. 27 se verá. Kay, luce genial. Seleccionemos esto
y comandemos grupo G, que no sea blanco. Lo tengo. ¿Esto está hecho? Por supuesto, tenemos que
hacerlo más pequeño. No, creo que este palo
no se ve tan Siler, así que esto se ve genial Er, entonces este será el color blanco T. Así que ahora correo electrónico contraseña
iniciar sesión, recuerda está hecho. Vamos con el inicio de sesión de nuevo. Entonces he hecho comando
D. Este será login, el tamaño que estoy haciendo para. Creo que debería ser más grande. Esto está hecho. Bien. Hagamos las tres líneas de lado 75 veces 12. Vamos a duplicar
los dos tiempos 1.2, Quitar las aves zancudas Pon los colores, vamos
por más luz, la sombra. Creo que esto es bastante más grande. Hagámoslo 60 por 50. Ver, en la próxima
conferencia, vamos a completar las cosas restantes. Gracias.
5. Aprende a agregar más detalles en Wireframe de alta fidelidad con actividad práctica: Entonces como todos sabemos que lo
hemos hecho por aquí. De la misma manera podemos simplemente
copiar y pegar todo. Bien, me olvidé de
agruparlos primero. ¿Bien? Se puede ver en el lado
izquierdo rectángulo, copiar cuatro, copiar tres, y rectángulo podemos simplemente agrupar comando G y luego podemos
nombrarlo como barra lateral. ¿Bien? Como hemos hecho esto,
va a ser muy fácil simplemente
copiarlo y pegarlo por aquí. Y solo podemos darle un bonito color que
se adapte al fondo. Por supuesto, vamos a
seleccionar el color. Lo mismo va con el segundo, lo mismo va con el tercero a Similarmente, podemos ir
con un icono de búsqueda. Sólo cópielo por aquí. Y pegar. Bien, entonces tiene pasta por aquí, así que solo podemos moverlo, podemos hacerlo más blanco, claro, se ve más bonito. Y también volver
a aumentar las fronteras. Ve con esto más blanco. Y las fronteras, aquí vamos. Vaya, no me
di cuenta de que
tenemos una barra lateral por aquí Simplemente lo borraron. Ocurre cuando copiamos algo. Al igual que no nos damos cuenta podemos
entrar en cualquier parte de
este lienzo de boceto. Entonces eso está bien. hay que tener mucho
cuidado después de eso. Así que aquí vamos. Creo que esto se
hace ahora, así que puedo, y déjame comprobar si
se ha hecho correctamente alineado. Bien, entonces creo que
esto debería ser más grande y siento que la talla debería ser más o menos como y hacer la talla seis. Bien. Esto se ve genial. Creo que quiten
esto, será más
comprensible como podamos hacer. Bien, Y también busca. Bien, esto está hecho. Ahora escribamos el
inicio de sesión al texto. Podemos hacer una cosa, podemos aumentar el
tamaño como o algo así. Sí, esto va bien. Hasta 45 va bien, ¿verdad? Sí. También podemos
cambiar la fuente. Bien, esto se ve más bonito. Así que vamos con los rellenos. Y también podemos poner
el bonito color. Podemos aumentar el tamaño. Creo que esto se ve bastante bien. Podemos hacer una cosa. Podemos
agrupar este rectángulo así como este comando de entrada de correo electrónico. Podemos nombrarlo como correo electrónico también. Podemos agruparlo,
agruparlo y podemos
nombrarlo como contraseña. Este era el botón de correo electrónico, ¿verdad? Este correo electrónico de contraseña. Y esto es volver a iniciar sesión, podemos agrupar este botón de inicio de
sesión de dos nombres . Bien, así que estos
tres están hechos. Ahora podemos ir por lo
siguiente que es recordarme,
olvidé su contraseña. No tener un registro de cuenta. Entonces para esto, vayamos a
la siguiente conferencia. Cubra lo restante
en la siguiente conferencia.
6. Es hora de terminar nuestro primer diseño de Wireframe de alta fidelidad: Bien. Como podemos ver,
esta página está lista. Página de inicio de sesión Yo diría que
está completamente terminada. Bien, una cosa
sigue siendo frontera. Hagamos el borde, hagamos el color degradado. Esto se verá más hermoso. Yo preferiría
verde derecho en un lado. ¿Qué opinas?
¿Nos vamos con lo mismo entonces? Contraseña. Bien. Creo que deberíamos ir
con este color diferente. De este lado será verde y el otro
lado será rojo. Bien, verde y rojo. Prueba alguna otra, sí, creo que deberíamos probar algún
otro color en vez de
probaré algo amarillo
brillante. Bien. Creo que esto es
amarillo y se está volviendo, y no podemos ver la frontera. Vamos por el otro color. Bien, creo que esto
se ve azul cielo. Bien, aquí vamos. De botón Sang. Ahora
creo que ya casi terminamos. Todo solo
tiene una verificación cruzada, bien, registrando correo, contraseña,
todo está hecho. Como pueden ver,
hay algunas diferencias
entre las que he hecho
esto antes y esto. Y eso está absolutamente bien. Si quieres que
vuelva a hacer lo mismo, solo
voy a copiar este texto y lo
haré sobre telón de fondo. Ahora estamos con el tiempo, hemos visto que este
trasfondo es amplio, este texto se vuelve negro. Pero como tenemos fondo
negro, he guardado este blanco y colores
brillantes como texto. Entonces, que se ve bien. Sí, todo esto se trataba de
la alta fidelidad. Y vayamos a
la siguiente conferencia en la que te estaré enseñando
página de registro. Bien, nos vemos en
la próxima conferencia.
7. Aprende a hacer un diseño de Wireframe de alta fidelidad más con actividad práctica: Hola y bienvenidos a mi conferencia. En esta conferencia, vamos
a comenzar con la página siguiente. Déjame mostrarte una cosa ahora. Vamos a comenzar con la segunda página, que
es el registro. Ahora debes haber
entendido que esta también
es una
tarea muy fácil, que puedes hacer. Bien, comencemos a hacer
la misma página de registro. Vuelve a la Mesa de Trabajo. Seleccione iphone 12, Pro Max. Aquí vamos. Solo haz que el fondo sea
de color negro ahora mismo. Primero empezaremos con
los rectángulos, ¿de acuerdo? Simplemente duplicarlos. El 123, así que hazlo 300 y haz este 16. ¿Bien? Podemos duplicar este precio 1.3 Así que aquí vamos. Bien, entonces no estamos
obligados a verificar todo este espaciado cuando
hacemos así, cuando nos
acercamos, llegamos a conocer
el espaciado adecuado. De igual manera, te voy a mostrar 1
minuto es el segundo, así, entonces
vendrá y lo detendrá más de 58. Bien, ahora estamos consiguiendo el 58. El tamaño de los
rectángulos es de 300 por 16. Ahora vamos a insertar el texto. Bien, vamos a completar
esta parte también. Vamos D,
hagámoslo 2060. Ahora esto viene en el centro. Podemos colorear este
el color brillante. Nuevamente, me
gustaría elegir rojo oscuro, y el resto sería blanco. Bien, también si quieres, puedes hacer las fronteras. De igual manera, primero hay
que aumentar la palabra. Después he seleccionado
cuál es el gradiente lineal, que más prefiero. El color que estoy seleccionando
es, de nuevo, color azulado. Debe ser brillante porque el fondo es de color
negro. Colores para los rectángulos o los gradientes
que estamos usando, debe ser uno brillante Vamos al lado naranja. Sí, esto volverá a dar
los lados más
brillantes, más brillantes para
el próximo verde Sí, esto lo hace correctamente. Sí, me encantó. Ahora, ingresa el texto,
que de nuevo es, una parte muy simple para T, y luego puedes escribir solo tre. Todo bien.
Colócala en el centro. Hacer la talla 50. Bien, mantenlo 40, creo. Sí, esto se ve bien. Incluso puedes cambiar las fuentes. Yo preferiría un negro. Sí, esto da la versión
oscura y gruesa. Ahora vamos a buscar
entradas como nombre, contraseña de correo
electrónico, y
confirmar contraseña, así
como volver a registrarnos, yo diría que copia esto
y pégalo por aquí. Bien. No, no lo he hecho. Todo bien. Bien. Entonces yo diría que necesitas duplicar y
necesitas duplicar esto y podemos ponernos esto
y solo escribirlo. Regístrate. Bien. Creo que esto se ve
muy grueso y oscuro, genial. Esto se ve bien. Ahora, nuevamente, podemos ingresar el texto
de su nombre correcto. Pero otra vez, voy
a ir por este y también el tamaño debería estar bien. 30 o supongo 25. Sí, creo que está bien. Porque su nombre,
este será correo electrónico. Esta será contraseña. Este cambio es para
alinearse correctamente. Bien. Y luego otra vez, comando, perdón, mandar el duplicado
confirmar contraseña. Ahora esto está hecho. Creo que todo
se ha configurado correctamente, como nombre de registro,
correo electrónico contraseña contraseña
confirmada, todos ellos se utilizan correctamente. Ahora lo siguiente es flecha. ¿Bien? Entonces
vayamos por la flecha. Para eso, necesitamos de nuevo
un rectángulo. El otro solo puede
duplicar esto. Bien, aquí vamos. Antes que nada, quita este
color, hazlo blanco. Creo que esto es rosa, ¿verdad? Bien, esto se ve genial. Y nuevamente, las fronteras.
Quitar los bordes. Bien. Ahora solo selecciona
esto también. Lo siento. Ahora selecciona esto y solo gira. Luce más agradable. Simplemente haz las esquinas redondeadas y también esta divertida. Bien, ahora creo que es bastante
bueno. Seleccione los tres. Simplemente haz comando grupo G
y solo flecha derecha. Bien, Ahora esta
flecha también está hecha. Si quieres, puedes
hacerlo más grande. También puedes simplemente extender
las líneas o algo a 21 grados, así
entonces se ve igual. Se puede anotar nuevamente 20 grados. Y también puedes
hacer más esquinas, esquinas
redondeadas y
simplemente configurarlo correctamente. Bien, voy a hacer
esto también un poco más redondo. Sí, ahora va
Bien, aquí vamos. Bien, entonces ahora
que terminamos con esta flecha está
hecha, está alineada correctamente. Creo que este color es bueno. Puedes poner el color
de tu elección, pero no creo que sea necesario. Se ve bastante genial. Sí, esta página está hecha.
8. CONCLUSIÓN: Enhorabuena y complementa
este curso de marco de alambre. Ahora tienes las habilidades geniales
tanto en wireframes de baja fidelidad como
de alta fidelidad Además, has tenido
práctica práctica tanto
en la estructura alámbrica baja como en la
alta potria. Lo más importante es
que se ha ganado la confianza para enfrentar
los nuevos desafíos de diseño Pero espera, aún no ha terminado. Simplemente comience a explorar y
practicar sus diseños de interfaz de usuario. Este curso podría haber terminado, pero tu viaje de diseño apenas
está comenzando.
Saba Faisal
