Transcripciones
1. Creación de prototipos en Figma: lo que necesitas saber: Bienvenida de nuevo. Prototipado Figma simplemente significa hacer que el
diseño Es como si el proyecto
ya estuviera codificado y
logramos usarlo. Así que vamos a saltar y charlaremos más sobre
esto en un minuto. Entonces aquí hay dos pantallas de aplicaciones
móviles. Podemos registrarnos o iniciar sesión. Fantástico. Cambiemos al modo
prototipo haciendo clic aquí. No ha cambiado mucho,
pero eso está bien. Ahora, seleccionemos el inicio de sesión de
la pantalla de la izquierda. A medida que vayas por encima de él,
vas a ver este símbolo más. Haga clic y mantenga presionada y arrastre una
conexión a la otra pantalla. inmediato, vamos
a conseguir este pop up, y esto nos permite
afinar la interacción. En definitiva, queremos lo siguiente. Cuando hacemos clic en Iniciar sesión, así que ese es el disparador,
queremos navegar. Esa es la acción, y el
destino ya está establecido porque arrastramos esa flecha a esa pantalla específica.
Así que todos estamos bien. Y en términos de animación, animación
inteligente está bien. El resto realmente no importa. Bien, volvamos a hacer esto, pero en la otra pantalla. Así que haz clic en Registrar y
encuentra ese símbolo más. Ahora, arrastra una conexión
a la pantalla inicial. Observe cómo hay un
borde azul. Eso es genial. Mismos ajustes que antes, totalmente bien. Y
si, enhorabuena. Tenemos nuestro primer prototipo. Así que siéntete libre de
cerrar esta ventana. Bien. Y para probarlo, vamos a usar
este botón de reproducción aquí. Ahora, los prototipos más grandes pueden
tardar un segundo en cargarse, pero este es bastante rápido Y podemos hacer click y lo
podemos ver en acción. Es como si la app hubiera sido
codificada como si estuviera en vivo. Echa un vistazo al cursor, donde hay una
acción disponible, vamos a obtener el
icono de la mano en lugar de la flecha. Esto es prototipado
en pocas palabras, y solo hay un puñado de otras características que
realmente necesitas saber,
y voy a guiarte a través Pero aquí está el punto esencial. La creación de prototipos no es
una cosa de diseño. No se trata de hacerlo
elegante e interactivo, por lo que se ve mejor en las
redes sociales para obtener más me gusta. No, cierra la pestaña y
volvamos a nuestro proyecto. Ahora, haz clic en Una flecha para
abrir los ajustes de animación,
para que sepas a lo que me refiero. Entonces, ¿y si lo cambiamos de
Smart animate a mudarte? Ahora tenemos algunas opciones
más aquí. Digamos que se mueve desde el lado
derecho. Vamos a probarlo. Ahora, por supuesto, esto
es interesante, un efecto genial, pero la otra pestaña aún
queda en Smart animate Así que volvamos. Si en esta ocasión, lo
cambiamos para decir deslizarse hacia adentro. Entonces eso es otra cosa. Así
que eso puede parecer aún más genial. Y entonces tal vez cambiemos
la duración para decir 600. Y un último cambio, cambiemos la curva
a otra cosa. Vamos a cambiarlo para
facilitar la entrada y salida. Fantástico. Ahora vamos a golpear
Play y probar las cosas. Ahora, me estoy apresurando a atravesarlo, pero espero que empiezas
a detectar un problema Sí, esto se ve interesante. Se siente bien. Pero tal vez
podamos hacerlo aún más agradable. A lo mejor esto
necesita establecerse en 4:50, tal vez un
tipo diferente de curva, Y ese es en realidad el mayor
problema con la creación de prototipos. Te chupa. Se
tarda tanto tiempo. Es súper lento
como ninguna otra cosa. Y el tema es,
se siente como si estuvieras
progresando, ¿verdad? Como si estuvieras trabajando
en algo noble. Estás puliendo la aplicación. Lo estás haciendo
sentir especial, ¿verdad? Pero como fundador de una empresa de estudio de diseño de aplicaciones que dirigí por más de cinco años, puedo decirte esto, sin
dudarlo, sin dudas Todo lo que
vas a hacer, todo lo que hicimos aquí
no va a ser codificado,
como lo diseñamos. Entonces esos 450 o 600 milisegundos,
ese no es el caso. Muévete, deslízate,
ese no es el caso. Animate inteligente y así sucesivamente. Ahora voy a
explicar por qué ese es el caso con más detalle
en la siguiente lección. Pero por ahora, por favor
descargue el proyecto. Lo tienes adjunto y enlaza
estas dos pantallas juntas, como te mostré hace un minuto. La razón por la que estamos
usando pantallas de diseño de aplicaciones frente a un sitio web normal
se debe a su tamaño. Son más pequeños, así que hay
menos paneo alrededor. No tenemos que movernos
dentro del gran proyecto. Imagina 20 pantallas de escritorio. Eso es mucho
zoom y paneo, así que por eso elegí las pantallas
móviles de Lapa Pero sí, ve a por ello, pruébalo, mira cómo te va, y luego por favor asegúrate
de seguir viendo la siguiente lección porque es
bastante importante. Que se diviertan.
2. La creación de prototipos es esencial, pero tiene un gran defecto: Bienvenida de nuevo.
La creación de prototipos es emocionante Ya viste cuántas opciones
tenemos con nuestros escenarios, y eso es solo la
punta del iceberg Ahora, imagina lo intrincados, cuán pulidos podemos hacer que nuestros diseños se vean
y se sientan como Y eso seguramente va a ir
bien en las redes sociales. Va a recibir muchos
me gusta, comentarios y muchas solicitudes de trabajo, ¿
verdad? Yo proyectos, ¿verdad? Uh, no, en realidad,
no, en realidad no. Ten en cuenta, yo era el director general
de mi empresa de diseño de aplicaciones, así que solo pude decirle a
mis codificadores que coincidieran con mi creación de prototipos uno a uno.
Pero aquí está la cosa. Yo no lo hice. ¿Y por qué
es ese el caso? Porque la codificación es súper cara.
Piénsalo de esta manera. Digamos, 1 hora de codificación, codificación
IOS es decir 100 dólares, un número aleatorio, ¿de acuerdo? 100 pavos la hora. Ahora, el desarrollador
dice que hacer que este formulario de
registro funcione desde el punto
de vista de la funcionalidad, toma alrededor de 15 horas,
solo un número aleatorio Así que son 1.500 dólares, ¿de acuerdo? 500 pavos. Esto es pura funcionalidad,
sin animaciones, ¿verdad? Entonces preguntas por
las animaciones, y él dice que es en cualquier lugar de
10 a 30 horas extra Entonces eso es en cualquier lugar
$1000-3 mil extra. No lo sabe con
certeza porque es mucha afinación fina,
mucha ida y vuelta. Podría llevar más tiempo, pero definitivamente no más corto. Ahora, ¿dices que sí? ¿Aceptas ese enorme costo? Y ten en cuenta
que otras partes del proyecto que necesitan codificación. Entonces tu mejor apuesta es
hacer que la aplicación sea funcional, y luego si tienes tiempo, vuelves y
agregas algunas animaciones aquí y allá después de que se inicie
la aplicación. Entonces, ¿qué
significa eso para la creación de prototipos? Tiene que ser básico. Está ahí para ayudar al cliente y ayudar al codificador a
entender el flujo Echa un vistazo rápido
aquí. Supongamos que es la primera vez que
ves este proyecto, ¿de acuerdo? Ahora, ¿conoces todas
las posibles formas de empezar
a usar esta app? Déjame desglosarlo muy rápido. Para que puedas escribir tu
ubicación aquí, tu dirección. Ese es el número uno.
O puede hacer clic en este icono aquí para
identificar automáticamente su dirección. Entonces esa es una pantalla separada, así que esa es la
acción potencial número dos. Simplemente podrías saltarte
este paso y simplemente ver todos los restaurantes que
se enumeran dentro de la aplicación, y esa es la
acción potencial número tres, bien, tres flujos diferentes. Y por último, puedes
registrar qué login, y esa es la acción número cuatro. No se puede asumir
que un cliente o varios codificadores van a recoger todas
estas cuatro opciones Entonces, en vez de asumir que, en vez de hacerles pensar, les
vas a
mostrar todas las posibles avenidas que muestran es fantástico
porque no deja espacio para la imaginación,
¿ Entonces esto significa que los
prototipos son increíbles para mostrar
cómo se supone que funciona
un sitio web, una aplicación, cualquier cosa intermedia Y aquí el por qué. Los prototipos son una herramienta esencial a la hora de
buscar codificadores ¿Bien? Entonces un cliente suele
contratar a un diseñador, luego con un prototipo completo, comienza a recibir
cotizaciones de desarrolladores El prototipo está ahí
para que el equipo de desarrollo pueda
entender con precisión el proyecto para que sepan
todo al respecto. A través del enlace FigMA, pueden ver la interfaz de usuario,
el diseño real, pero también pueden ver los muchos flujos dentro de la
aplicación, cómo puede registrarse, cómo puede pagar un pedido, cómo puede agregar o eliminar
productos de la tarjeta, así sucesivamente y así sucesivamente Ahora, por ejemplo, fíjate que
no hay inicio de sesión en redes sociales dentro de esta pantalla.
Eso es muy importante. Todos estos pequeños detalles cambian
el alcance del proyecto. Digamos que agregamos algo como iniciar sesión con Facebook
o Google o lo que sea. Entonces eso puede tomar dos
días más de desarrollo, y eso puede agregar, digamos, 1,500 dólares de costo extra. Entonces es por eso que los prototipos
son absolutamente esenciales. Cuando el cliente
busca codificadores, tener un
prototipo interactivo y un diseño
completo, son invaluables Así es como obtienes
cotizaciones y estimaciones precisas porque, nuevo, la compañía de codificación
puede ver todo el asunto. Así es como pueden ser precisos. Pero volviendo a nuestro trabajo, nadie le importan las animaciones de
fantasía. 400 milisegundos, 600
deslizan hacia adentro, se mueven adentro. No, les importa ver todas las opciones
dentro de la app. Entonces así es como debes
acercarte a la creación de prototipos. Entonces no es una
herramienta de diseño para conseguir más likes. No, desde el
punto de vista de la funcionalidad, quieres mostrar
las características de la aplicación Estoy insistiendo mucho porque
vas a ver muchas animaciones elegantes
en driblar y Ser manos,
y tal vez pienses que eso es lo que buscan
los clientes, pero ese no es el caso Y no tienes que confiar en mí. Simplemente ve y busca estos proyectos que
ves en redes sociales. ¿Se han
implementado de esa manera? Ve y descarga esas aplicaciones. ¿Puedes ver todas esas animaciones sofisticadas y
complejas que
ves en Be hands o driblar Dentro de cualquier app o sitio web,
no importa. Nueve de cada diez veces, el proyecto real está
súper despojado. Sin animaciones ni
muy pequeñas. Y eso es porque cuesta
tanto tiempo y dinero. Muy pocas empresas
realmente pueden permitírselo.
Y aquí está la cosa. Saca tu teléfono,
mira las
compañías más grandes que existen. Mira sus aplicaciones, Netflix,
Uber, Amazon, lo que sea. ¿Por qué no tienen todas
estas animaciones elegantes? Porque es una distracción. Entonces muy pocas empresas realmente se benefician de
este tipo de cosas. Entonces en este capítulo, te voy a mostrar cómo hacer prototipos, pero no voy
a perder tu tiempo. El 99% de tus clientes van a querer un prototipo
funcional, no
uno súper pulido cuando
pasas medio día por
algunas transiciones. Ese no es el punto.
Vamos a asegurarnos de que los clientes
reales se
beneficien de tu trabajo. Así que
vamos a meternos en ello.
3. Usa el prototipo para encontrar errores y defectos: Bienvenido de nuevo. La creación de prototipos es una excelente manera de encontrar errores, cosas que olvidaste o
tal vez el cliente olvidó Ahora bien, un tipo de defecto es éste. Digamos que el usuario omite poner su dirección y simplemente
quiere ver los restaurantes
que están dentro de la aplicación Bien, en un nivel, eso tiene
sentido, ¿verdad? Quiere hojear por ahí. No pongamos ninguna barrera para que el usuario pueda explorar la aplicación, y entonces tal vez va a
ser más probable que se inscriba. Tiene sentido, ¿verdad? Pero, ¿ si esta aplicación corre
dentro de un país enorme como Estados Unidos, de
qué sirve mostrar restaurantes que están
a
miles de kilómetros de distancia? Entonces esto es algo que el
cliente tiene que considerar, y tu prototipo
resaltará esa falla potencial No es tu trabajo
cambiar la forma en que comporta
la app o
haberla buscado Pero si puedes mostrar problemas
potenciales, vas a ser
muy apreciado. Ahora volvemos a estas pantallas, hicimos un prototipo muy sencillo. Podemos movernos entre pestañas. Pero, ¿qué pasa cuando
pasas por encima de este botón? No pasa nada, y
eso no es lo ideal. Entonces en modo prototipo, hagamos clic en el botón, y en el
lado derecho, podemos ver esta parte aquí
llamada interacciones. Haga clic en el símbolo más. Esto
nos va a mostrar múltiples opciones, pero estoy buscando
mientras se cierne. Entonces, supongamos que
este es un sitio web, no una aplicación en la
que normalmente no tienes un estado estacionario dentro
del teléfono móvil, ¿verdad Pero mientras se cierne,
queremos que el botón
cambie a y tengamos un estado Ahora mismo, está puesto
en activo, ¿de acuerdo? Es naranja, así que tiene sentido. El botón está disponible, y puedes presionarlo, ¿de acuerdo? Pero cambiemos el estado para que se cierne y pero aquí está la cosa Sólo tenemos otro que
se llama discapacitado.
Eso no es bueno. Entonces nos falta
el estado estacionario, y eso no es aceptable Eso es un error de nuestra parte. Así es exactamente como se supone que debes
aprovechar los prototipos Así es como vas a encontrar errores usando el modo
prototipo. Acabamos de enterarnos de que nos falta un estado,
el estado estacionario Así que volvamos a cambiar
al modo de diseño. Nuestros activos están aquí, así que no hay
necesidad de buscarlos. Y aquí están los dos botones, pero necesitamos el tercero. Así que haz clic en este símbolo más, y vamos a
hacer una variante. Vas a ver que el nombre
ya está resaltado aquí mismo. Y en lugar de decir tres o cualquier cosa al azar,
escribamos hover Y, por supuesto, tenemos
que cambiar el diseño, pero vamos a
mantenerlo sencillo. Vamos a desvincular
el color de acción, y vamos a
elegir un tono más oscuro de naranja, algo así Bien, cosas buenas. Ahora,
volvamos al modo de prototipado, y ahora podemos retomar Entonces selecciona el botón, y bajo interacciones,
queremos lo siguiente. Mientras se cierne, cambie a hover. En cuanto a la animación, normalmente
voy por Smart animate en la mayoría de los casos Genial. Ahora vamos a probarlo. Y, por supuesto, va a
funcionar sin ningún problema. Esto es fantástico.
Entonces así es como revisas tus proyectos
antes de entregarlos. Este no es el fin
del mundo, este error. Pero si se suman
cinco de estos, diez, 20 de estos errores, entonces el desarrollador, se
va a enfadar. Él le va a decir al cliente el cliente no solo está contento, así que va a enviarte un mensaje a lo mejor en unas semanas,
a lo mejor en unos meses. Entonces probablemente estés ocupado
con un proyecto diferente. Entonces, como puedes imaginar,
todos están molestos. Entonces, por favor, no trabajes de esa manera. Si haces prototipos,
puedes
identificar rápidamente estos errores y corregirlos en unos minutos planos. Pero, ¿qué pasa con los campos? Bueno, primero, hay una
manera de poder escribir algo dentro de ellos
dentro de un prototipo, ¿verdad? Pero, ¿eso realmente ayuda? No, para nada. Por eso no
vamos a hacerlo. En cambio, vamos a
pensar en estos estados. Entonces este es el estado de insinuación. Mi nombre
en realidad no está lleno. Esto es solo un ejemplo, una pista, una manera en la que
le decimos al usuario qué
se supone que se debe escribir
y de qué manera Esto es muy útil en el
campo del número de teléfono, por ejemplo, donde en mi país específico, potencialmente
podrías
escribirlo de algunas maneras diferentes. Entonces así es como puedes escribir
un número en mi país. Entonces eso puede ser un poco confuso, pero al agregar una pista, es un texto auxiliar, ¿
verdad? Es fantástico. Ahora bien, en esta situación, ¿está claro que este
texto es solo una pista, un texto auxiliar que va a desaparecer cuando
realmente haces clic en él? No, en realidad no. Es demasiado oscuro. Es por eso que
en realidad deberíamos
cambiarlo por algo que esté
un poco más lavado. Incluso podrías hacerla cursiva. Lo que importa es que esto tiene
que ser visto como una pista. Tiene que ser claramente un indicio. Incluso podrías escribir EG o pista, y luego el
nombre real o lo que sea. Así es como hablas con
el desarrollador a través tu prototipado, a través de
tu trabajo de diseño Ahora necesitamos otro estado donde
realmente se complete el texto, donde el usuario realmente
tecleó algo, ¿verdad Y entonces en este caso, tiene
que ser muy
diferente de la pista. Estoy hablando más oscuro, más audaz, así que no hay
confusión al respecto. Ahora, voy bastante rápido a
través de los movimientos, pero espero que entiendas
el razonamiento Ese es el punto
de esta conferencia. Diseñas algo,
crees que está bien. Pero entonces cuando te sumerges más
profundamente en él a través de un prototipo, entiendes que no es
lo suficientemente bueno. Entonces tienes que regresar y tienes que hacer
todos estos cambios. Los diseñadores que
realmente han enviado productos conocen todas
estas situaciones y las manejan
desde el principio. Pero si no tienes
esa experiencia,
no es un problema, usa el modo de
prototipado Entonces ve a todos los
campos, todas las pantallas, y mira si olvidaste
algo porque estos finos detalles es posible que no los
obtengas desde el principio. Pero cuando configuras
todo de
esta manera , aquí está la cosa. Los desarrolladores te
van a encantar, y hay una mayor probabilidad de
que consigas más trabajo en este cliente o una
gran reseña o ambas cosas. Entonces, en conclusión, mi consejo, no
pierdas el tiempo
haciendo que los campos sean editables, bien, escribiendo algo dentro del prototipo.
Eso no ayuda. Pero asegúrate
de incluir estados
separados para los botones, para los campos
para la mayoría
de tus elementos, ¿de acuerdo? Tienes que asegurarte de que
todo esté claro como el cristal. Si quieres llevarlo
al 100%, este prototipo, potencialmente
podrías hacer un estado donde el
campo esté deshabilitado, donde el botón esté deshabilitado, tal vez el campo también esté
deshabilitado. Quizás algo más
deba suceder antes de que este
campo en particular esté disponible. Entonces así es como puedes
llevarlo al siguiente nivel. Ahora bien, cómo prototipos estos estados,
ya sea a través de clics, ya
sea a través de estados de vuelo estacionario, qué animación pones, esas cosas realmente
no importan Más que eso, no
tienes que hacer esto por cada campo en
un proyecto de 100 pantallas. En cambio, haces
exactamente como yo hice aquí. Trabajas en el componente
maestro. Entonces en el lado izquierdo está
el campo original. Ahí, tengo un
estado por defecto donde
aparece la pista y otro estado
que hicimos juntos, donde el usuario ha
escrito algo y el texto
se vuelve negrita y oscuro Cosas buenas. Ahora, una vez
que tengas estos estados, entra en
modo prototipo y conecta uno a tres y tres a uno aquí mismo desde
el lado izquierdo, desde los componentes
maestros originales. Bien básicamente ahora cuando
hagas clic en ellos, podrás
voltear entre estados. Al trabajar en los campos
originales, todos los ejemplares
del lado derecho, todos ellos van
a seguir su ejemplo. Entonces, si el proyecto
tiene 500 campos, seguirán actuando así. No es necesario
vincularlos manualmente . ¿Eso tiene sentido? Así que de nuevo, al crear
una interacción sobre el componente original y
mediante el uso de copias a lo largo del proyecto, con todo configurado con una vez, y va a funcionar
para todo el asunto. Y por si acaso tienes curiosidad, ¿qué pasa con este otro estado? Esta es una opción que
hice por si acaso el fondo es blanco y
la etiqueta necesita ser negra. Se puede ignorar.
No es importante. Entonces así es como
en realidad preparas un proyecto para la codificación,
para el desarrollo. Bien, ahora, adelante y arregla
estos problemas por tu cuenta. Y cuando estés listo,
por favor continúa. Muchas gracias.
4. Superposiciones en tus prototipos (pop-up): Bienvenido de nuevo. Las pop ups son
una excelente manera de transmitir significado para mostrar mucha
información en una sola pantalla. Esto es útil para todos, el cliente, el desarrollador, pero por supuesto, también para el usuario
final. El usuario final simplemente significa
el cliente del cliente. Entonces las personas reales que
van a usar la aplicación o sitio web. Entonces así es como funciona esto. Me di cuenta de que no
teníamos una pantalla emergente, que a veces se
llama el modelo. Entonces aquí está la cosa.
Rápidamente hice uno, ¿verdad? Entonces, después de hacer una cuenta, quiero que el usuario se haya iniciado sesión
automáticamente. Entonces, en modo prototipo, vamos a arrastrar una flecha de este botón a este fotograma. La diferencia es que al hacer clic, no
usaremos Navigate dos. No, en cambio, vamos
a usar superposición abierta. Ahora para la animación, usemos move in, aunque realmente no importa. Ahora, por ahora, vamos a
probarlo así así. Así que pulsa Prototipo Play, y vamos a verlo en acción. Ahora, quiero que notes que el fondo rojo
en realidad no cubre la pantalla
inicial, y eso es porque el pop up es en realidad bastante más corto que
todas las demás pantallas. El marco en sí es más pequeño.
Entonces veamos qué pasa. Me gusta usar Control
W para cerrar mis prototipos y
volver rápidamente al proyecto Para ajustar cualquier tipo de
conexión, simplemente haz clic aquí, y vas a
obtener la
misma configuración que antes. Ahora,
aquí está la cosa. En esta ocasión,
agreguemos un fondo, algo así como el azul o
cualquier otro color llamativo. Ahora vamos a golpear Play, y vas a ver que esto sí funciona, pero
aquí está la cosa. Sólo funciona en la
parte superior y en la parte inferior. El fondo rojo
aún permanece. Ahora bien, la conclusión es esta
para pop ups para modales, no agregues un thill Así que volvamos a cambiar al modo de
diseño y podemos ocultarlo
o
eliminarlo por completo. Bien, genial. Ahora, un consejo. Si pulsamos el
botón de reproducción aquí mismo, el prototipo nos va
a mostrar el modelo, no la pantalla inicial. ¿Por qué? Porque eso es seleccionado. Observe el borde azul. Entonces, como pueden ver,
cuando golpeo lay, esto no es realmente útil. Así que siempre recuerda
anular la selección, luego pulsa lay. Bien, veamos nuestro fondo
azul. Y sí, funciona bien. Ahora bien, la posición del pop up es irrelevante en la
mayoría de las situaciones, pero sí quiero
mostrarte una pista de UX Ahora, en la configuración emergente, podemos cambiar la posición del centro a casi
cualquier otra cosa. Ahora bien, la lista es bastante grande. Puedes revisarlos rápidamente, y vas a ver
que es bastante sencillo. Nada demasiado elegante,
pero puede ayudar a veces. Ahora bien, el truco real, el truco de UX es este. Cambiar la posición a manual. Ahora vas a obtener
una superposición en la pantalla, y puedes reposicionarla
a una ubicación muy precisa Ahora en esta situación, quiero que el
botón continuar esté muy cerca del botón original de Cuenta
Creighton. ¿Y por qué es eso? Porque el usuario ya
tiene su dedo o cursor en esa región porque mantener su enfoque en
ese lugar en particular, la aplicación fluye muy bien. En términos complicados, esto
reduce la carga cognitiva. No lo dudes. Sabes
que si ves naranja, puedes hacer clic en él y que mayoría de las acciones están disponibles
en la parte inferior de la pantalla. Y si te mantienes consistente a lo largo de la app con
todas estas cosas, todos estarán mucho más felices Ahora bien, es posible que los usuarios no
se den cuenta de por qué la aplicación se siente fluida, pero esta es una de las
grandes razones para ello. Bien, siéntete libre de probarlo, y vamos
a estar bien para irnos. Lo siguiente de lo que
quiero platicar es de ropa al
hacer clic afuera. Ahora, en ciertos casos,
esto hace maravillas. Quieres que la gente pueda navegar rápidamente por
tu prototipo, ¿verdad? Así que no los obligues a hacer clic en pequeños iconos o botones porque
eso se siente tedioso. ¿Verdad? Ahora bien, lo sé por un
hecho a la hora de contratar gente, los diseñadores harían
prototipos que no podrían seguir adelante a menos que
marcara una pequeña casilla Ahora bien, esa fracción no es lo ideal, sobre todo cuando llegas a ver montones y montones
de pantallas, ¿verdad? Entonces, por favor, no bloquees
tus prototipos. No obligue al usuario
a hacer ciertas cosas. Ahora, volviendo aquí, habilitar esta característica no tiene
sentido en este caso. Creas una cuenta y luego tienes un mensaje de éxito. Si simplemente lo cierras haciendo clic en algún lugar al
azar en la parte de atrás, vas a volver
a la pantalla de registro. Entonces eso sería un bucle. Entonces eso no es bueno. En
este caso, no lo uses. En otras situaciones, más adelante
abajo en otras lecciones, ve a por ello porque hace que la
experiencia de navegación sea más rápida. Entonces, recapitulemos Entonces cuando haces
pop ups, modales, puedes mantener el
tamaño del marco bastante pequeño, pero no agregues relleno.
No agregues un fondo. Puedes mantener el modelo centrado, pero también puedes
colocarlo manualmente para una experiencia
más rápida. Y hablando de velocidad, normalmente usa la opción de cerrar
al hacer clic afuera para que las personas puedan navegar
rápidamente por tu proyecto. Pero hazlo sólo en
situaciones en las que tenga sentido. Aquí, ese no es el caso.
Bien, continuemos.
5. Temporizadores en prototipos: Bienvenida de nuevo. Me gusta enseñar
los clásicos en cuanto a técnicas de
prototipado que en
realidad son útiles en
casi cualquier entorno, pero no requieren
de muchas habilidades Los temporizadores son una de esas cosas. Así que acabamos de crear una cuenta, bien, y obtenemos esta ventana emergente. Ahora, la pregunta es, ¿
necesitamos al 100% hacer clic en este botón para poder continuar y no.
La respuesta es no. Menos clics significa clientes más felices,
clientes más felices. Llegamos a mostrar un mensaje de
éxito para informar al usuario para
hacerle saber que algo
ha sucedido, claro, pero no
queremos causar fricciones. Queremos que el usuario realice un
pedido lo más rápido posible. Menos clics, clientes más felices. Entonces tenemos que hacer esto. Vinculamos el botón Continuar a
la siguiente pantalla así. Lo básico, nada
demasiado complicado. Ahora desde la sección de
interacción, vamos a agregar otra. Esta vez usaremos delay. Entonces el primero está al hacer clic, luego este otro
es retraso porque, sí, los puedes apilar. Puedes tener varios.
Y va así. Después de un tiempo de, digamos,
2000 milisegundos, que son 2 segundos, navegaremos hasta el fotograma
X, este de aquí Entonces sigamos adelante
y probémoslo. Entonces con hacer una cuenta, y luego presionamos el botón
y ahora vemos el pop up. Si tenemos prisa,
podemos dar click en el botón o simplemente
podemos esperar 2 segundos. Entonces esto es increíble. Esta es una gran experiencia. Si quieres uno más rápido, podrías bajarlo a
1,500 milisegundos. Pero aquí está la cosa. No
flashees cosas y te las lleves. Yo sería cauteloso al respecto. Algunas personas pueden comenzar
a leer el texto, y si lo ocultas
mostrando una nueva pantalla, eso puede molestar a algunas personas Este es el complicado
juego de equilibrio entre, ya sabes, velocidad versus dar a los usuarios control
completo y básicamente
ralentizar todo. Por lo general, cuando ralentizas las cosas, los ingresos disminuyen. Ahora, lo que sugiero es
que tengas una interfaz de usuario increíble. Si el diseño está a punto, si la tipografía es genial, vas a hacerlo mucho mejor Por ejemplo, texto corto
y dulce, así que la redacción publicitaria, eso está en el punto Has iniciado sesión, y luego una marca de verificación verde,
que funciona de maravilla Entonces la idea es guiar
al usuario inconscientemente. Ve una marca de verificación verde, sabe que está bien. Él ve conectado,
estamos bien para irnos. Ahora bien, el texto secundario en realidad ni siquiera
importa en ese momento. Bien, ahora es el momento
de hacer un ejercicio. Quiero que recrees
el siguiente efecto. Esta es una cuenta regresiva después de
haber hecho una cuenta. Comienza un nuevo proyecto
y ve cómo puedes manejarlo. No tienes
nada apegado. Hay que
hacerlo desde cero. Comienza con un cuadro de 720 por 12 80, pero para ser sinceros,
realmente no importa. Haz tu mejor esfuerzo para rehacer
algo como esto. No tiene que ser
perfecto, así que no hay presión. Simplemente diviértete con él.
Y cuando termines, comparte el
enlace prototipo así. Da clic aquí, y ahora estás
buscando esta opción. Si no puedes manejar, no te preocupes, puedes grabar el video con tu teléfono y
publicarlo en su lugar. Qué métodos es experimentar con esta función de retardo
con este temporizador. Este es el único ejercicio
en el que solo vamos a divertirnos un poco con duraciones,
curvas y otras cosas. Pero, sí, el resto del tiempo, nos vamos a centrar
en la funcionalidad y cosas que
realmente son útiles. Esto es solo por diversión, para el disfrute de nosotros mismos. Bien, vamos a por ello.
6. Desplazamiento en prototipos: Bienvenida de nuevo. Hablemos de desplazamiento en nuestros prototipos Esto es para propósitos de UX, pero los clientes suelen
apreciar estos detalles. Digamos que estamos en esta pantalla, y queremos desplazarnos hacia abajo
y ver más entradas. Así que ve al modo prototipo, y aquí mismo,
tenemos el comportamiento scroll. Cambia esto de no
desplazamiento a vertical, y eso obviamente tiene sentido Pulsa el ícono de reproducción
y echa un vistazo. Ahora bien, funcionalmente,
esto tiene sentido. Pero aquí hay una UX. Tener el menú superior visible en todo momento realmente ayuda a los usuarios. Entonces podemos hacer esto. Selecciona la barra de Verizon
y echa un vistazo aquí. En lugar de desplazarse con padre, cámbielo a fijo. Entonces haz lo mismo para la barra de acción donde
realmente puedes seleccionar la ciudad. Así que establece esto en fijo también. Bien, increíble. Ahora,
vamos a probarlo. De hecho, mantienen
su posición, por lo que el usuario siempre puede
usar la función de búsqueda, el sistema de filtro,
abrir la navegación, y así sucesivamente esto es algo útil. Pero para ser justos, el bar de Verizon
realmente no aguanta. Entonces volvamos a
cambiarlo. Entonces, en lugar de ser arreglado, volvamos a cambiarlo
para que se desplace con parent. Bien, ahora, veamos
cómo se ve esto. Y la cosa es, sí, ya no está arreglada, pero ahora sí tenemos esta fea brecha aquí
por encima de San Francisco. Pero ahí es donde la otra
opción realmente nos ayuda. Así que cierra el prototipo, selecciona la barra de acción, y cámbiala a pegajosa, que tipo de suena
similar a fijo, pero si continúas leyendo, dice, detente en el borde superior. Ahora vamos a echarle un vistazo. Y si, esto es lo que estamos buscando. Esto es perfecto. Así que haz una pausa ahora mismo
y pruébalo. Bien, cuando estés listo, cambiemos a un
sitio web, modo Escritorio. Nuevamente, primero, seleccionamos el marco grande y establecemos
el scroll en vertical. Después vamos a seleccionar el logotipo
y cambiarlo a fijo. Bien, cosas divertidas, la barra de
logotipos, claro. Entonces haz lo mismo para
el marco del menú principal. Este es el enfoque más básico, pero pruébalo y
asegúrate de conseguirlo. Y, por supuesto, con tener
los mismos problemas que antes, tener el logo mostrado en todo momento con los íconos de las redes
sociales, eso en realidad no tiene
mucho sentido. No es tan útil, ya sabes, así que estamos empujando
contenido valioso hacia abajo, eso no sirve de nada. Entonces
volvamos a cambiar para que se desplome. Y para el menú principal, haz que se detenga en el borde. Y en general, sí, esta es
una experiencia mucho mejor. Esto es cosas UX, experiencia de
usuario. Ahora, cambiemos al desplazamiento
horizontal, que
nos va a ayudar a entender algo Así que empieza con un marco aleatorio, algo así, blanco puro, retrato, nada elegante, ¿bien? Ahora, agreguemos un rectángulo
aleatorio como así tecla de acceso rápido R. Podrías
usar cualquier otra cosa. Realmente no
hace la diferencia. Estoy manteniendo las cosas lo más
simples posible. Ahora usemos Shift A. Bien, cámbialo para abrazar desde el área de cambio de tamaño del
lado derecho. Y porque estamos aquí,
cambiemos el flujo. Estamos buscando a este de aquí. Bien, horizontal. Estupendas cosas. Ahora, vamos a seleccionar el propio
rectángulo. Bien, entonces el rectángulo y golpeó Control D un montón de veces
así que tenemos suficientes copias. Haz lo suficiente para que salgan fuera
del marco, así. Ahora bien, este
sería un caso perfecto para un desplazamiento horizontal, ¿verdad? Entonces, cambiemos
al modo prototipo y luego seleccionemos el marco de
diseño automático Éste de aquí. Entonces
no el grande, sino éste que contiene
los rectángulos, ¿bien? Y a partir de aquí, cambiar el
desbordamiento a horizontal. Y podrías esperar que
este sea un trato hecho, ¿verdad? Pero no, si golpeamos lay, lo que verás es que
no funciona. ¿Y por qué es eso? Bueno, este icono
nos dice la situación. Dice que el contenido tiene que
ser más grande que el marco. Entonces esto significa lo siguiente. Vuelva a cambiar al modo de diseño. Eso es esencial.
No se lo puede omitir. Y ahora redimensionar el marco
a algo así. Entonces, sobre el ancho de la pantalla. Ahora puedes pulsar Play y listo. Funciona bien. Entonces, para recapitular, el contenido puede
salir del marco, pero el propio marco tiene
que sentarse dentro de la pantalla Esta es la clave. Esta frontera nos
dice el
camino correcto para hacerlo. Bien, volvamos al sitio web
de escritorio
e intentemos de nuevo. Así que vamos a agarrar los tres
primeros elementos, toda
esta fila, y
ahora usar Shift A. Lo
haremos agradable y lento. A continuación, selecciona una tarjeta y
haz un montón de copias. Entonces esto requeriría desplazamiento. Buen trabajo. Cosas buenas. Ahora, seleccione el marco de
diseño automático
y, en modo prototipo, cambie el desbordamiento
a horizontal Si pulsas play ahora mismo, no
va a funcionar.
Adelante, pruébalo. No está pasando,
¿verdad? No es bueno. Ahora vuelve al modo de diseño
y cambia el tamaño del marco así ¿Bien? Entonces está dentro de
la pantalla real. Haga una pausa con la frecuencia
que necesite para poder trabajar. Bien, ahora puedes darle a
Play. Y ahí tienes. Esto es un progreso sólido. Así es como vas
sobre el desplazamiento. Esto obviamente aplica para el desplazamiento
vertical, también. Ahora, para tu ejercicio,
quiero que hagas esto. Quiero que uses
esta pantalla y hagas un scroll horizontal para las
direcciones que están disponibles. Entonces agrega tres o cuatro así un poco más y agrega un pergamino,
uno horizontal. Si no puedes manejarlo, usa mi enfoque rectangular. Así que una pantalla completamente nueva y
luego volver sobre mis pasos. Después vuelve a la pantalla de
mis direcciones e inténtalo de nuevo.
Aquí está la cosa. En esta situación,
es posible que tengas que
cambiar algunas cosas
por cada tarjeta. Se puede cambiar el ancho. Puedes cambiar el método de cambio de
tamaño. Se pueden cambiar muchas cosas. Entonces te voy a dejar
eso a ti. La idea es que
tengas total libertad. Cuando hayas terminado, por favor haz lo mismo para
el desplazamiento
vertical Entonces otra vez, imagina que tienes cinco o seis tal vez
siete direcciones en total verticalmente, y
tienes que desplazarte. Sólo recuerda lo
que te enseñé sobre lo horizontal
porque también se aplica verticalmente. Diviértete y haz las dos. Horizontal y
vertical. Gracias.
7. Haz prototipos más inteligentes con este método: Bienvenida de nuevo. Los prototipos son útiles y los proyectos más grandes con los flujos pueden ser
bastante complicados, pero los proyectos más grandes
pueden ser un problema para prototipos debido a la
gran cantidad de pantallas Por suerte, podemos trabajar de una
manera más inteligente. Al vincular pantallas,
sabemos que seleccionamos un elemento y arrastramos una
conexión así, ¿verdad? Para registrarse e iniciar
sesión, eso es bastante fácil. Están uno
al lado del otro, y tiene sentido, ¿verdad? Pero, ¿cómo manejamos
la flecha hacia atrás? ¿A dónde debemos vincularlo? El caso es que puede ser
bastante complicado porque potencialmente
podrías llegar a una pantalla desde
múltiples ubicaciones. Entonces, ¿cómo sabes
a dónde enviar de vuelta al usuario? Pero aquí está la cosa.
Por suerte, hay una función incorporada en Figma. Entonces seleccionas la
instancia así, no la flecha, sino la instancia. Y luego agregas una interacción al hacer
clic en Volver atrás.
Y eso es todo. Figma sabe de dónde
vienes y todo listo, automáticamente
nada más que hacer Ahora, otro consejo rápido. Dentro del prototipo grande, siempre
puedes
reiniciarlo golpeando R. Eso te va
a llevar al inicio del flujo. Pero, ¿cómo estableces
el punto de partida? ¿Cómo se establece el
punto de partida del flujo? Entonces seleccionas el marco. En mi caso, es este de aquí, y luego modo prototipo. En este panel,
vas a ver el punto de partida
del flujo.
Y eso es todo. Ahora cuando juegas un prototipo, pero has ido demasiado abajo y no estás seguro de lo que pasa, simplemente presiona R, y
vas a ser llevado de vuelta
a la pantalla original. Además, siempre puedes configurar flujos para diferentes situaciones. Nuevo cliente versus un cliente que regresa,
solo como ejemplo. Pero volvamos a centrarnos en la flecha hacia
atrás. Tenemos muchas flechas
hacia atrás aquí. ¿Aplicamos manualmente la misma acción en
cada pantalla una por una, o copiamos pegar? No, en realidad puedes
enfocarte en el componente principal
aquí a un lado. Establecer este con ese
comportamiento, y esa es la cosa. Estamos listos para el rock and roll. Entonces aplicas esa interacción
en el maestro de componente, y todos estos chicos
son clones de copias. Por eso,
van a seguir su ejemplo. Entonces nuevamente, debido a que este
diseño se realizó con instancias con clones de
este componente original, eso significa que
funcionarán como se esperaba. De manera que se pueden definir
ciertas acciones a través de estos recursos. Por ejemplo, agreguemos un
enlace al logotipo. ¿Bien? Así que selecciónala y
establece lo siguiente. Al hacer clic, abra un enlace. Voy a poner mi página web, pero obviamente, no
importa. Esto es útil en caso de que
queramos mostrarle al cliente o
al desarrollador una página específica
que quizás ya esté en vivo. A lo mejor es un panel de administración o tal vez un cierto subdominio
que está oculto al público Y sí, funciona así
como así. Una última cosa. Hagamos que el menú lateral funcione. Por lo que esto debería ayudar a
todos los interesados. En primer lugar,
identificar ese marco. Bien, parece
que es esta de aquí. Tenga en cuenta que el ancho es el
mismo que el de las otras pantallas. Eso no es lo ideal. Así que vamos a arreglar eso rápidamente. Entonces bajaré el ancho de 720 para decir 640 o algo
así por esas líneas. El logo puede moverse, pero esa es una solución fácil. Quiero demostrar que
este es un menú lateral, no una pantalla completamente
diferente. Entonces es importante que
veamos algo debajo de él. Derecha. Este es el marco que
tenemos que tener en cuenta. Ahora, volvamos
al componente original. Si has estado
siguiendo mis cursos, sabes que te recomiendo
que tengas todos tus activos en un
marco separado así, así que a un lado. Bien, agrega la conexión, pero no hay necesidad de arrastrar una línea porque sabemos el nombre. Conocemos el nombre de ese marco. Entonces vamos a hacer esto. Overlay abierto, y ahora este es el marco que
estamos buscando. Posición, vamos arriba a la izquierda, y queremos que
ambas casillas estén marcadas. En cuanto a la animación,
sí, muévete. Aquí es donde tiene
sentido total. Y vamos a establecer esta dirección. Bien, increíble.
Vamos a probarlo. Recuerda, cuando
quieras iniciar tu prototipo desde
una pantalla específica, solo tienes que seleccionar el fotograma, y vas
a estar listo para ir. Bien, sí, esto es increíble. A lo mejor el Con es
un poco demasiado. Tal vez 580 o algo nada ware funcionaría un poco mejor,
pero esto está bien. Obtiene el punto a través. Pero, sí, estamos listos para irnos. Adelante, pruébalo.
Entonces por favor continúe.
8. Cómo hacer un desplegable interactivo: Bienvenido de nuevo. Hagamos un desplegable interactivo usando todo lo que
hemos aprendido hasta ahora. Pero ten en cuenta al
volver a lo básico,
nos estamos enfocando en la funcionalidad ayudar al cliente y al
codificador a resolver cosas, no para que el diseño sea
100% totalmente interactivo Ahora, aquí está la primicia. Entonces, cuando haces clic
en San Francisco, obtienes una lista de CDs que están disponibles dentro de
la aplicación, ¿de acuerdo? Entonces comencemos con
lo siguiente. Escribe dos, hot keyT y escribe algo como
nombre de ciudad. Mantengámoslo simple. Cambia el texto a negro
o algo así, y luego agrega todo el
diseño con Shift A, los clásicos van
bastante rápido aquí. Para los ajustes, Nonito dice
semi negrita, 28, lo que sea. Y en cuanto al acolchado, vamos con 60 y luego diez. Me apresuro a hacerlo porque quiero que te concentres en el prototipo
real, no en el lado del diseño Pero claro, lo
mejor es que te apegues
al estilo que ya hemos
configurado dentro de la app, ya
sabes, así que sigue el
mismo lenguaje de diseño. Un simple borde negro
también puede funcionar bien para
este menú desplegable. De nuevo, estoy haciendo zoom a través. Bien, ahora vamos a convertirlo en un componente así. Cosas buenas. Y para que sea
un poco más útil, vamos a
incluir un estado hover y luego un estado seleccionado ¿Bien? Ahora, la mejor
manera de hacerlo, agradable y rápido es
a través de la varianza. Entonces agrega el primero dando click aquí y llámalo hover
o algo similar ¿Bien? Estupendas cosas. Y luego agregar otro, así tenemos tres en total. Esta vez, llámalo seleccionado o estado abajo o
lo que quieras. Ahora para algunos diseños muy
rápidos, el estado Hover debería tener un color de
fondo ligeramente diferente Voy a elegir
cualquier cosa al azar, pero debes apegarte
al estilo en el proyecto. Y para el estado seleccionado, nuevamente, aquí algo
rápido, agradable y rápido. Vamos con naranja con
tal vez un texto en blanco puro. ¿Bien? Si quieres
aprender a diseñar figma, claro, tengo otros
capítulos sobre eso Se trata de la creación de prototipos. Bien, genial. Ahora,
hagamos el desplegable real. Así que arrastra una copia Alt y arrastra. Eso es Opción arrastre en una Mac. Y agreguemos un layout
automático Shift A, pero tendremos que eliminar
todo el padding. Entonces es cero y luego cero. Pero aquí está la
cosa para la brecha, eso va a ser cero también. Entonces tres ceros en total. Por cierto, en la sección de flujo, asegúrate de tener este seleccionado
vamos por vertical. Bien. Ahora,
seleccionemos la instancia. Este de aquí, ¿de acuerdo? Pausa tantas veces como necesites. Usa Control D un montón de veces. Entonces tenemos cuatro o
cinco opciones en total. Ahora, es posible que vea un
mensaje agradable y útil aquí de Figma. El programa quiere
ayudarnos a que la aplicación se sienta real. Entonces nos está ofreciendo la opción obtener automáticamente
algunos nombres de ciudades, lo cual es bastante genial,
así que usémoslo. Bien, hasta ahora, no hay prototipos. Esto era solo cosas de diseño
que quizás ya conozcas. Pero ahora cambiemos
al modo prototipo. Así que arrastra una línea del primer
botón al segundo. Estas están bastante
juntas, pero eso está bien. Para el gatillo, vaya con mientras se cierne y luego
cambie a flotar En cuanto a la animación, la
animación inteligente está bien. Y eso está hecho. Ahora, desde el segundo botón, arrastra una línea al tercero. Nada complicado al
hacer clic, cambiar a seleccionado. Y por último, vincula la tercera
con la primera, y vas a
ver que las opciones ya
están ajustadas correctamente. Esto es algo increíble. Así que vamos a probarlo,
pero completamente aislado. Así que selecciona este marco aquí. Entonces es el marco el que contiene
todas estas instancias. Ahora presiona el botón Reproducir. Entonces echemos un vistazo. Bien, entonces el estado hover funciona bien. ¿Bien? ¿Y qué hay de hacer clic? Sí, esto también es sólido. Felicidades. Hemos completado
el primer paso. Ahora, volvamos al
proyecto, San Francisco. Para ser justos, el menú Hamburguesa debe estar separado
de este ítem, pero nos centraremos en el
nombre de la ciudad y la flecha desplegable Entonces vincularemos estos dos
con el menú así. Y para la configuración, queremos que el disparador esté
al hacer clic, aunque hover también puede
funcionar igual de bien Y para la acción,
queremos superposición abierta. Aquí es donde esa característica tiene
sentido total. Cerrar al hacer clic afuera. Esto es increíble, útil aquí. Sin antecedentes, pero sí
queremos una posición personalizada. Así que haz clic y
cámbialo a manual. Ahora, a veces
es posible que no veas la vista previa, pero pulsa escapar o
cierra la ventana, luego da clic en la conexión, y deberías
poder verla. Bien, coloca el menú desplegable en algún lugar debajo
del nombre de la ciudad, escribe una línea si es posible.
Cosas buenas, sí. Bien, estamos listos
para el rock and roll. Entonces da clic en esta
pantalla específica en esta de aquí, y juguemos el prototipo. Sí. Bien, estoy
muy contenta con ello. Así que volvamos a lo que empecé con
esta lección. ¿Deberíamos también hacer de un estado una situación en la que San Francisco cambie a otra cosa, Nueva York o en función de
lo que seleccione el usuario? Y entonces, ¿deberíamos cambiar
el listado de restaurantes para cada opción en este desplegable para que
sea 100% interactivo? Entonces aquí es donde
los diseñadores se vuelven locos y pasan muchas
horas sin ninguna buena razón. Recuerden, hemos hecho
este desplegable, para que el equipo de desarrollo pueda ver el estado de flotación, el estado abajo Pueden ver que no
hay campo de entrada, no
hay campo de texto donde el usuario pueda escribir
algo y así sucesivamente. Básicamente, esto
les ayuda a sacar el alcance del proyecto. Y, claro, a lo mejor
el cliente tiene una mirada, y aclara las cosas, ¿verdad? A lo mejor esta es solo
la reciente lista
de citas que el usuario
realmente utilizó anteriormente A lo mejor aquí es solo donde la
aplicación está funcionando realmente. Pero si son 100 ciudades, ¿tiene
sentido este desplegable? Por supuesto que no? Entonces, como puede ver, todos estos detalles están fuera
de nuestro grado de pago. Ese no es nuestro trabajo, ¿verdad? Nosotros no tomamos estas decisiones. Pero a través de este prototipo, podemos levantar una bandera. Podemos dar a las
partes interesadas la
oportunidad de discutir y decidir la
dirección de la aplicación. Entonces podemos regresar e
implementar esas instrucciones. como está,
en realidad no lo sabemos, así que hicimos lo mejor que pudimos. Si el negocio está
planeando estar vivo en 100 ciudades, un desplegable
no tendría sentido. Lo más probable es que tenga que
ser un campo en la parte superior, donde el usuario pueda
escribir algo, más tal vez una lista
de ciudades recientes o tal vez una lista
ordenada alfabéticamente o porque, por ejemplo, tal vez esté
limitada a una sola ciudad Entonces nuevamente, no tiene
sentido mostrar un menú desplegable, tal vez solo mostrar la
dirección actual del usuario. Entonces es por eso que trabajar en este tipo de proyectos requiere
mucha comunicación. Pero todos esos esfuerzos y reuniones
requieren absolutamente de un prototipo. Si no tienes esto que mirar
para usarlo, no
estás realmente seguro de si
estás en la misma página. Bien, ahora es tu turno. Adelante y haz este
desplegable. Diviértete con él.
9. Ejercicio final: haz un prototipo completo: Bienvenido de nuevo. Ya
sabes cómo crear un prototipo interactivo por
una razón específica para ayudar al cliente y a
su equipo de codificación. No estás creando prototipos
para me gusta. No estás haciendo absolutamente
todos los artículos en los que se pueda hacer clic. No, eso sería
una pérdida de tiempo. Ahora, en cambio, estás
creando prototipos para encontrar errores, ambas pantallas que te has perdido, pero también errores lógicos
o de flujo que el cliente
necesita aclarar Ahora bien, ¿hay muchas otras
cosas que podría mostrarle? Por ejemplo, cómo cambiar
el estado de una casilla de verificación, cómo usar variables, cómo hacer que el prototipo
se sienta aún más interactivo Claro, claro, pero quiero prepararte para proyectos
del mundo real, y estas son las habilidades
que vas a usar el 90% del
tiempo, lo que enseñé así que con eso dicho,
esta es tu tarea. Tiene este archivo adjunto, por favor impórtelo. Después
inicia la creación de prototipos Siempre que encuentres un error
o una pantalla que falte, vincula ese elemento a una superposición
que diga: Esto falta. Vas a
tener que diseñar eso tú mismo, esa superposición. Ahora bien, ¿dónde aplicaría eso? Por ejemplo, olvidé la contraseña, no
tenemos pantalla para eso. Ahora bien, ¿por qué es eso importante? A lo mejor
nos va a pedir un correo electrónico, pero a lo mejor nos va a
pedir el nombre de usuario y un correo electrónico. Tal vez correo electrónico y teléfono. No tienes idea de cómo va a
acercarse
el cliente a su seguridad. Entonces esto podría ser
una vulnerabilidad. Entonces en realidad es
bastante importante. Pero como no está aquí, tenemos
que mostrar ese error. Así que vincúlalo a un nuevo marco
que vas a diseñar, configurarlo para superponer y configurarlo para que se cierre
al hacer clic afuera. Al final de este ejercicio, deberías tener un
gran prototipo, y puedes compartir el enlace en la plataforma para que
puedas obtener comentarios. Idealmente,
también puedes ver lo que hicieron
otros estudiantes y
ver sus errores. No se trata de hacer sentir mal
a nadie. Se trata de entender
cómo el cliente y sus codificadores van
a escudriñar tu trabajo, cómo van a comprobar todo y van a En mi carrera como maestra, eso es algo que he
escuchado 1 millón de veces. Ah, Chris, solo me
olvidé de ello. Claro, pero como diseñador, tienes que ser minucioso. No hacer el prototipo 100%
realista está totalmente bien. Sin saber que te faltan pantallas
esenciales,
eso no está bien. Así que ve a por ello, empieza
y diviértete con él. Espero que vayas a usar estas
habilidades de prototipado en todos tus proyectos para que puedas mejorar tus prototipos
y conseguir más trabajo Ahora, recuerda, tienes
que divertirte con eso. Si necesitas ayuda con
algo, solo pregunta. Estoy aquí para ayudar. Se trata Chris Barron cerrando sesión
por el momento. Disfrutar.
Chris Barin, Certified Photoshop Expert
