Introducción a UX/UI para diseñadores gráficos: Adobe XD

1. Avance: Muchos diseñadores quieren hacer la transición a UI/UX, pero puede ser realmente difícil saber por dónde empezar y es exactamente por eso que creé esta clase. Soy Maddy Beard y soy diseñadora estratégica con sede en Denver, Colorado. Primero tuve mi inicio en el diseño gráfico en el Programa de Diseño de Penn State, donde aprendí mayormente el diseño de branding, impresión, y packaging. Después de graduarme, trabajé en una empresa de tecnología como Diseñador Digital, diseñando sitios web de comercio electrónico para algunos de los principales minoristas del mundo. Entonces decidí que quería trabajar para mí mismo para que pudiera tomar más apropiación los proyectos en los que trabajé y además solo tener más flexibilidad en mi vida y carrera. Desde que se fue por mi cuenta. He hecho branding, diseño web, y diseño de UI/UX para pequeñas y medianas empresas, incluyendo Comune, una plataforma digital para el bienestar personal y social, Yoga con Adrian, una plataforma de yoga en línea con más de nueve millones de suscriptores en YouTube, WeFinance, una empresa fintech local de Denver y tantos más. Actualmente, estoy trabajando como residente creativo para Adobe, centrándome principalmente en el diseño UI/UX en el espacio wellness. También enseño conceptos de UI/UX en YouTube e Instagram, que es donde he escuchado de tantos diseñadores por ahí que están interesados en entrar en UI/UX, pero no saben muy bien por dónde empezar. Los estudiantes piensan que necesitan hundir miles de dólares y meses de tiempo en extensos campos de arranque y cursos de UX y eso simplemente no es el caso. Por eso estoy muy emocionado de estar compartiendo esta clase contigo. Realmente creo que no necesitas estudiar UI/UX para tener éxito, necesitas practicarlo. Eso es exactamente lo que te voy a ayudar a hacer en estas próximas lecciones. Estaremos repasando lo básico, lo que es UI/UX, y qué habilidades entran en ella. Después entraremos en todo el proceso de UX de principio a fin. No puedo esperar a que ganes más confianza en tus habilidades a medida que avanzamos por estas lecciones. Empecemos. 2. Resumen del proyecto: El proyecto para esta clase es diseñar una función única de aplicación móvil usando Adobe XD. No te dejes engañar pensando que necesitas rediseñar totalmente una experiencia completamente nueva desde cero, fin de mostrar tus habilidades en tu portafolio. De hecho, creo que como principiante, es más efectivo realmente afinarse y enfocarse intencionalmente en una característica o flujo. Este proyecto te permitirá completar todo el proceso de UX de principio a fin. En primer lugar, estarás definiendo el problema. Después pasarás a ejercicios, como mapeo de afinidad y bocetos, configurarás tu archivo Adobe XD, convertirás esos bocetos en wireframes digitales y luego diseñarás y prototipearás tus soluciones. Por último, tomaremos esos prototipos finales y los convertiremos en un video visualmente agradable que puedes usar en tus portafolios. Si esto suena súper abrumador, no te preocupes. Te voy a estar llevando cada paso del camino y compartiendo mi propio proyecto personal contigo, así como consejos que he aprendido en el camino a lo largo de los años. Mi consejo número uno para el éxito es tomar este proceso paso a paso, y compartir tu trabajo a continuación para que podamos apoyarnos y animarnos unos a otros a lo largo de este viaje. Con todo eso fuera del camino, saltemos a la 1ra lección. 3. ¿Qué es exactamente la UX?: Antes de sumergirnos en todo este proceso, quiero tomarme algún tiempo para definir exactamente qué es el diseño de UI/UX y algunos otros términos relevantes. Empecemos con el tema global del diseño de la experiencia del usuario. Cuando alguien dice que son un diseñador de UX, podrían abordar cosas como el diseño de la interfaz de usuario, la usabilidad, la accesibilidad, la arquitectura de la información y la interacción humano-computadora. Un diseñador de UX pone todas estas piezas juntas para diseñar un sistema que ayude a facilitar una experiencia útil para un usuario. Una interfaz de usuario o diseñador de interfaz de usuario es un poco más de un término específico; ese es alguien que diseña la interfaz real y cómo se ve al usuario. Para ponernos aún más granular, definamos qué es realmente una interfaz porque mucha gente piensa que una interfaz es solo una pantalla. Puede ir mucho más allá de eso. Una interfaz es el medio por el cual nosotros, como humanos, nos comunicamos o interactuamos con la máquina. Ejemplos de interfaces son una computadora y teclado, una pantalla táctil, un cajero automático, así como interfaces de usuario basadas en voz como asistentes virtuales. Otro término del que podría haber oído hablar es el diseño de producto. diseño del producto cae dentro de la misma categoría de diseño de experiencia de usuario, pero es específico de un producto, ya sea digital o físico. La usabilidad y el diseño visual son ambos realmente importantes, ya sea que estés diseñando algo digital o físico. Los diseñadores de productos a menudo tienen que equilibrar las metas y los objetivos desde una perspectiva empresarial así como desde la perspectiva de un usuario, y por lo general están trabajando estrechamente tanto con un gerente de producto como con un ingeniero. Otro término común del que podría haber oído hablar es el diseño de interacción. Esto es aún más específico. Es importante para los diseñadores de UX, los diseñadores UI y los diseñadores de productos por igual. Es honestamente exactamente lo que suena. Se trata de diseñar la interacción entre el producto y la persona que utiliza el producto. Los diseñadores de interacción necesitan pensar en las palabras que están usando, las representaciones visuales que están usando, los objetos físicos que forman parte de una interacción como un mouse o un trackpad. Tienen que considerar el tiempo, que entra en juego con la animación, el video y los sonidos, y tienen que pensar en la psicología conductual, es decir, cómo el humano puede realmente aprender y entender cómo interactuar con el interfaz. La experiencia del cliente es otra cosa realmente importante a considerar, y es algo en lo que algunos diseñadores de UX sí se enfocan y otros no. Se inicia siempre que el cliente tenga una necesidad, y termina siempre que se cumpla realmente la necesidad del cliente. Airbnb es un gran ejemplo. Alguien decide que quieren irse de vacaciones. Toda la experiencia de principio a fin es realmente importante. Recogiendo las llaves, interactuando con el anfitrión, lo que tienen que hacer para limpiar y revisar el lugar al final de las vacaciones. Todas estas cosas están alrededor de la experiencia del cliente, y son realmente importantes tener en cuenta y en realidad diseñar cada vez te ocurra un producto que existe en pantalla y en el mundo real, que hace la mayoría de los productos. El último término importante que pensé que mencionaría es el pensamiento de diseño. El pensamiento de diseño es básicamente solo un proceso circular en el que todos los diseñadores deberían estar pensando y haciendo de forma continua. Comienza con empatizar, luego entras en definir, continuación, idearás, luego prototipo y prueba, y por lo general volverás entre prototipos, pruebas, prototipos y pruebas, e incluso podrías saltar ida y vuelta a algunos de los pasos anteriores también. Es un gran marco en el que pensar y definitivamente es irrelevante en el proceso que estamos a punto de abordar en esta clase. No hay paso de acción para esta lección, pero si solo estás aprendiendo sobre la UX como oportunidad de carrera, entonces siéntete libre de pasar algún tiempo mirando las publicaciones de trabajo. Encuentro que si al final quieres conseguir un trabajo en UX, es importante saber qué buscan los empleadores en términos de habilidades y experiencias. Basta con buscar diseñador de UX o diseñador de productos en un sitio de publicación de empleo y echa un vistazo a lo que buscan los empleadores para empleos que podrían interesarte en el futuro. No dejes que esto te intimide. Es probable que estés justo al comienzo de tu viaje, así que solo trata de dar este paso a la vez. El primer paso es crear tu primer proyecto. Empecemos con eso en la siguiente lección. 4. Definición del problema: El primer y posiblemente más importante paso en cualquier buen proyecto de diseño es definir el problema. Siempre que te den una asignación en el trabajo o por un cliente, normalmente, te dedicarás a definir el problema utilizando una extensa investigación fundacional, lo que significa que hablarás con los interesados y los usuarios, y descubrirás cuáles son las metas y objetivos, y priorizar esos. Pero a la hora de crear proyectos de práctica como lo estamos haciendo en esta clase, el proceso para definir el problema es sencillo. Te das cuenta de un problema en tu vida cotidiana o a través de hablar con tus compañeros y luego lo investigas más a fondo con el fin de escribir una declaración sucinta del problema. Para ayudarme a entrar en el hábito de notar posibles problemas y oportunidades a mi alrededor, me ha gustado mucho tener un cuaderno donde solo anoto estas cosas cada vez que vienen a mí. A veces es cuando estoy usando un programa. A veces es cuando estoy tratando de hacer algo por el trabajo. A veces es cuando solo estoy viviendo mi vida diaria y otras veces, es cuando estoy teniendo conversaciones con mis amigos y familiares. Estos problemas no tienen por qué ser grandes ni alterar la vida. Realmente pueden ser cualquier cosa en absoluto. Si no tienes un atraso de problemas en un cuaderno como yo, entonces para llegar al problema, lo que puedes hacer es pensar en categorías o áreas o industrias específicas que realmente te interesen. Se podría pensar en problemas específicos que podrían tener que ver con ser creativo o ser estudiante o involucrarse en deportes. A lo mejor hay problemas relacionados con el bienestar, alimentación, el transporte, o la productividad. Un consejo para esta clase es tratar de mantenerse alejado de las experiencias de compra o problemas dentro de ese espacio. rediseños de sitios de comercio electrónico son extremadamente comunes y en mi opinión, son realmente aburridos porque no ejercen tu músculo de resolución de problemas. En la mayoría de los casos, el objetivo es el mismo, solo vender más productos. Para tu problema, intenta pensar en algo fuera de ese mundo y puntos de bonificación, si quieres validar tu problema o demostrar que vale la pena resolverlo a través de un poco de investigación de fondo. Para hacer esto, básicamente quieres solo reunir evidencia de que este es un problema que está experimentando suficiente gente, que valdría la pena tratar de resolver. Se podría hacer esto mirando foros de Reddit, grupos de Facebook, evidencias anecdóticas, hablando con amigos y familiares. También puedes hacer investigación de mercado para averiguar si alguien ya ha intentado resolver este problema. Si es así, eso no significa necesariamente que no debas abordarlo. Eso realmente valida tu problema porque es algo en lo que alguien más ha considerado lo suficientemente importante como para trabajar. Lo que puedes hacer es explorar su solución y ver qué puedes aprender de ella. Ahora vamos a entrar en cómo escribir realmente tu declaración de problema. Hay algunas cosas que tiene toda buena declaración de problemas. El primero es un poco de contexto, marcando el escenario para por qué el problema es importante ahora. Siguiente es el quién, quién está teniendo este problema y por lo tanto quién se beneficiaría de una solución. Siguiente es el deseo o necesidad que tiene esa persona. ¿ Qué quieren o necesitan que no tengan actualmente? Por último, ¿qué impide que esa persona alcance ese deseo o meta? Echemos un vistazo a la declaración de problemas que voy a estar abordando para esta clase. La gente está comiendo en casa con más frecuencia ahora que nunca. millennials que trabajan quieren cocinar y comer comidas saludables, pero están ocupados y la planificación de comidas puede ser tediosa. Necesitan una forma de agilizar el proceso y quitarle parte del tiempo y esfuerzo que se requiere. Observe que esta declaración de problemas no tiene nada que ver con la solución. No hipotética en cuanto a qué forma podría tomar la solución. Simplemente establece el problema y responde a esas cuatro áreas clave de las que hablamos antes. Al decir que la gente está comiendo en casa con más frecuencia ahora que nunca, eso establece el contexto y explica por qué este problema es importante abordar ahora. Menciona a los millennials que trabajan y luego también describe más adelante que estas personas están ocupadas, lo cual es una forma de afirmar al quién en el comunicado. Habla de lo que quieren. Dice que quieren cocinar y comer comidas más saludables en casa. Habla de lo que actualmente se interpone en su camino. La planificación de las comidas es demasiado tediosa para las personas que no tienen toneladas de tiempo libre. Ahora, te invitaré a pensar en qué problema vas a estar resolviendo para lo que resta de esta clase. Mis consejos para este paso son, mantener la declaración del problema realmente específica, pero solo ser específica sobre el problema. No introduzcas la solución aún. No hables nada de una aplicación móvil. Simplemente concéntrese en la necesidad u oportunidad. Para la práctica, en realidad recomendaría anotar cinco o 10 declaraciones de problemas y luego elegir una que sea más interesante para ti para seguir adelante. Una vez que tengas tu declaración de problemas, cópiala y péguela y compártela con la clase para que podamos proporcionarte retroalimentación. Si estás teniendo problemas para llegar a un problema propio, eso está totalmente bien. Ahora, voy a compartir unos cuantos más para mi cuaderno que puedes robar o cambiar un poco y usar para este proyecto. El primer enunciado del problema es, en estos días, es increíble lo fácil que es conocer gente que nunca habrías conocido sin Internet. Dos universitarios se están reuniendo para tomar café, pero no hablan el mismo idioma. Ellos quieren conocerse, pero están nerviosos de que no puedan conectarse por la barrera del lenguaje. Otra afirma que cuando te mudas a una nueva ciudad, es fácil moverse por ahí debido a las apps de mapas, pero esto hace que sea más difícil aprender realmente sobre un nuevo entorno. ¿ Cómo podrían los jóvenes profesionales que se mudan a una nueva ciudad aprender su camino mientras llegaban a donde quieren ir. El último enunciado del problema es que, en estos días, gente está aprendiendo lo importante que es comprar de segunda mano y dejar de contribuir a la moda rápida y las prácticas laborales perjudiciales, pero puede ser difícil hacerlo en la práctica. ¿ Cómo podría una mujer de 20 años decorar su nuevo departamento de la ciudad de Nueva York con muebles y decoración de segunda mano sin tener que hacer horas de investigación en la caza de tiendas de segunda mano. Como dije, siéntete libre de robar uno de esos o simplemente usarlo como inspiración para escribir la tuya propia. A continuación, vamos a aprender todo sobre mapeo de afinidad y a hacer uno de mis ejercicios favoritos, pero en realidad no necesitas un equipo para completar. 5. Mapeo de empatía: Normalmente, el mapeo de afinidad se realiza con grupos de personas que colaboran en un proyecto. Normalmente, todos han reunido notas y hallazgos y se están uniendo y utilizando este ejercicio de mapa de afinidad para organizar todo lo que han encontrado. Pero dicho eso, como freelancer y como alguien que normalmente es el único diseñador o una persona de producto en un equipo, normalmente hago estos ejercicios de diagramación por mí mismo y todavía encuentro un inmenso valor en ellos. Te voy a mostrar mi método favorito para hacer este solo para que lo puedas hacer por tu producto también. Se llama mapeo de empatía. Es una gran manera de ponerte en los zapatos de tu usuario y reunir más insights sobre el espacio problemático y el usuario. En primer lugar, tienes que determinar quién es tu usuario. Si escribiste tu declaración de problema y seguiste las pautas de la lección anterior, entonces esto debería ser realmente fácil. Para mí, es millennials trabajando. Siéntase libre de darle a esta persona un nombre, edad, ocupación, tal vez una descripción de una sola línea con el fin de dar vida a la persona. Voy a nombrar a mi persona Phoebe. Digamos que tiene 29 años y trabaja en casa como gerente de producto para una empresa de tecnología. Puntos de bonificación si realmente eres capaz de entrevistar a algunas personas diferentes que caen en tu grupo de usuarios objetivo. De esta forma podrás aprender un poco más sobre ellos, lo que hacen a diario, y sobre todo cómo actualmente tratan este problema. Si no, eso está totalmente bien, esto es sólo un proyecto de práctica. Pero puede que tengas que hacer un poco de llegar a la hora de este próximo ejercicio, sobre todo si tú mismo no caes en el grupo de usuarios objetivo. A continuación, es hora de configurar las diferentes categorías de nuestro mapa de empatía. Adelante y saca ocho notas pegajosas u ocho pedazos de papel si no tienes notas pegajosas a mano y escribe los siguientes encabezamientos; metas, y restricciones, decir, pensar y sentir, ver, escuchar, tareas y acciones, distracciones, motivaciones, y frustraciones. Ahora es el momento de una lluvia de ideas. Normalmente me resulta más fácil empezar con metas y restricciones. Pero luego después de eso, me gusta moverme y sólo anotar lo que me viene y luego categorizarlo a medida que voy. Trataré de ponerme en los zapatos del usuario y realidad pretendo que estoy tratando de lograr este objetivo. Simplemente veo lo que sale y lo anoto y lo pongo en cualquier categoría que tenga más sentido. Entonces, después de un rato, tendré cada una de estas categorías llenas al menos cinco post-its o puntos de bala si estás usando un trozo de papel. De acuerdo, echemos un vistazo a mi mapa de empatía para que veas cómo esto se junta. En primer lugar, veremos metas y restricciones. Escribí que las metas podrían ser comer más comidas caseras, vivir un estilo de vida más saludable para sentirse bien, hacer realmente las comidas que ahorra en Pinterest o Instagram, pedir menos Uber Eats. Entonces las limitaciones son que está ocupada trabajando desde su casa y solo tiene tiempo para ir de compras una vez a la semana, generalmente los fines de semana. Ahora pasemos a decir, pensar y sentir. Estas podrían ser cosas que le está diciendo en voz alta a la gente que la rodea, cosas que se está pensando para sí misma, o formas en que se siente acerca de este problema. A lo mejor se dice o piensa a sí misma : “¿Qué voy a hacer para las cenas de esta semana? ¿ Dónde volví a ver esa receta de chile? Creo que me olvidé de capturarlo. ¿ Qué necesito comprar para hacer todas estas comidas?” Escribí que podría estar sintiendo hambre y abrumada. Ahora pasemos a ver. ¿ Qué podría estar viendo tu usuario a su alrededor? Escribí muchos productos en la tienda de abarrotes, ingredientes fuera en el mostrador, una nevera vacía, y recetas en Instagram, Pinterest, y otros blogs. Esto realmente ayuda a poner la escena y podría inspirar una solución realmente creativa más adelante. Tan solo intenta ponerte en los zapatos de tu usuario y piensa en lo que podría estar viendo cada paso del camino. Pasemos a escuchar. Dije que Phoebe podría estar escuchando chisporrotear en la sartén con la que está cocinando. Podría estar escuchando un podcast que está escuchando mientras cocina. Podría escuchar el temporizador de la cocina apagándose. Su pareja le pregunta qué hay para cenar. A lo mejor amigos pasando el rato en la sala. A continuación se presentan tareas y acciones. Estas son cosas que podría necesitar para tomar medidas a lo largo de todo el proceso de cocción. Escribí encontrar recetas, guardar recetas, elegir recetas para la semana venidera, hacer una lista de abarrotes basada en estas recetas, comprar comida, y luego cocinar la comida. Estos son bastante autoexplicativos, pero realmente van a ser útiles cada vez que vayas a crear tu flujo de usuario. A continuación, hablemos de distracciones. Aquí es cuando es realmente importante pensar en tu usuario específico. Para mí, Phoebe podría distraerse con opciones de comida fáciles como comidas congeladas o Uber Eats. Podría estar distraída por su pareja trabajando desde casa. Podría estar distraída por su propio trabajo y correos electrónicos y por la TV, YouTube, o las redes sociales. A continuación, vamos a pensar en cuáles son sus motivaciones. ¿ Por qué es esto algo que es tan importante para ella? Escribí que la nutrición es importante para ella, sentirse y lucir saludable, tener energía, cultivar habilidades y rutinas de cocina, usar el acto de cocinar como una forma de acabar con su jornada laboral, y tal vez influencers en línea le están motivando. Por último, tenemos frustraciones. Esta es también una de las categorías más importantes porque te va a decir qué tipo de cosas debes evitar y qué tipo de cosas darle a tu usuario las habilidades para trabajar. Escribí que Phoebe está realmente frustrada cuando todas sus recetas están en lugares totalmente diferentes. Está frustrada cuando tiene que ir de compras con demasiada frecuencia. A ella no le gusta comer las mismas comidas una y otra vez. Se frustra cuando siente ganas de rendirse porque cocinar y comer sano en casa requiere demasiado esfuerzo. Se frustra cada vez que la comida se estropea, y odia esos molestos anuncios pop-up que siempre aparecen en los blogs de comida cuando está buscando recetas. Está bien, ahora es tu turno. Adelante y rellena tu mapa de empatía con tantas cosas como puedas. Trata de no filtrarte o juzgarte a ti mismo, porque algunas de las cosas que no crees que son importantes realidad pueden provocar algo más adelante en el proceso. Cuando termines, toma una foto y compártela a continuación. En la siguiente lección, vamos a estar entrando en una de mis fases favoritas que es bosquejar. Alerón de alerta, no tienes que ser bueno dibujando para poder hacer esto. 6. Proceso del usuario y bocetos: bosquejo es mi parte favorita de casi cualquier proyecto porque es cuando nuestras ideas pueden ser las más fluidas e iterativas. El objetivo no es encontrar la solución perfecta ni crear la interfaz más única, o dibujar las formas más perfectas, realidad es solo ser experimental. Pero tal vez estés pensando, ¿cómo se supone que sepa qué bosquejar? Bueno, antes de empezar a bosquejar, vamos a volver atrás y examinar nuestro mapa de empatía para tratar de llegar a la única característica o flujo de usuario que va a resolver de manera más efectiva nuestro problema. En otras palabras, si tu app solo pudiera hacer una cosa, cuál sería. Para el problema en el que estoy trabajando, creo que esa característica sería generar una lista del valor de una semana de abarrotes para alguien que ha reunido recetas de toda la web. Llegué a esta conclusión pasando por mi mapa de empatía y viendo que muchas de las notas que tomé y puse en diversas categorías, todas regresaron y tuvieron que ver con este tema de generar una lista de compras basada en recetas encontradas todas más. Esta es mi hipótesis. Si los millennials trabajando tenían una manera de generar una lista de abarrotes basada en el valor de una semana de recetas de diversas fuentes. Cocinaban y comían comidas saludables en casa con más frecuencia. Si recordamos volver a la primera lección cada vez que hablamos de pensamiento de diseño, podemos pensar en este proyecto adelante como una forma de probar esta hipótesis. Podemos crear prototipos de esta característica y ponerla delante de los usuarios para ver si en realidad sí les ayuda a cocinar y comer comidas más saludables en casa. O simplemente podemos usarlo como un proyecto de práctica. Ahora que sé en qué función me estoy centrando, puedo seguir adelante y trazar mi viaje de usuario. ¿ Dónde empieza, dónde termina? ¿ Cuáles son los puntos medios importantes que realmente ayudaron a cerrar la brecha? Empecemos con el principio y el final. Creo que el proceso para mí comenzaría cada vez que un usuario encuentre una receta en línea que podría querer hacer en la próxima semana, y quisieran que terminara con una lista de abarrotes generada. El paso medio podría ser primero guardar una receta. A lo mejor el usuario quisiera categorizarlo como cena o almuerzo o desierto, y luego realmente planeando sus comidas, navegando por todas las recetas guardadas y eligiendo las que quieren hacer esta próxima semana. También señalé al paso final donde se genera la lista que tal vez quieras categorizar la lista de diferentes maneras en función de cómo podrías estar comprando, y también quizá quieras poder revisar cosas que ya tienes en casa. Ahora, este mapa que crees será tu guía para tus bocetos. Ya que tengo cuatro pasos principales en mi viaje, probablemente tendré cerca de cuatro pantallas principales, tal vez más dependiendo de los detalles. Ahora entremos al proceso de bocetos. Siempre que empiezo a bosquejar, me gusta empezar con cualquier pantalla simplemente se sienta la más importante. En ocasiones esa es la primera pantalla porque quieres saber dónde empieza tu usuario. A veces esa es la última pantalla porque normalmente ese es el objetivo que estás tratando de lograr para tu usuario al final, lo hago de esta manera porque la relación entre las pantallas es mucho más importante que el individuo pantallas a sí mismos. Por eso estamos hablando de esto como un viaje. Si no es intuitivo que el usuario se mueva, entonces no va a ayudarles con éxito a lograr su objetivo. Si bien esbozo, voy a pasar por ahí y explicar algunos de mis mejores consejos para hacer bocetos, y luego te guiaré por mis bocetos para que veas cómo cobra vida un ejemplo real. consejo número 1 es usar una plantilla imprimible para iPhone si estás buscando ahorrar algo de tiempo. Como puedes ver, eso es lo que estoy haciendo aquí y vincularé ese recurso si quieres usarlo para tu producto. consejo número 2 es enfocar más en el contenido que en el diseño en esta etapa. ¿ Qué tiene que estar en la pantalla? Generalmente, ¿dónde debería estar y cómo se moverá el usuario del punto A al punto B? Consejo número 3, no tengas miedo de estar desordenado y hacer notas en los márgenes. Estos bocetos no necesitan ser bonitos. En realidad son solo una herramienta para que utilices siempre que entres a Adobe XD. Punta número 4, bosqueja cada pantalla varias veces. Mantente iterativo y no te atasques en tu primer intento. Se necesita práctica, y no me refiero sólo a la práctica como diseñador, sino específicamente a la práctica trabajando en este problema de diseño exacto. Consejo número 5, divide tus sesiones de bocetos para que tengas al menos un descanso en el medio. Puedes volver con la cabeza clara y una perspectiva fresca para evaluar y seguir iterando, y propina número 6, si alguna vez te sientes perdido, simplemente vuelve a tu declaración de problemas. Se puede ver que estos bocetos están por todas partes y no se ven bien en absoluto. He numerado estos para que básicamente cada vez que vuelva a intentar una pantalla, voy a numerar como número 2. Si entonces me rindo y lo vuelvo a intentar lo numeraré como número 3, y de esa manera cuando vuelva, sé cuál hice primero y cuál lo hice la última porque normalmente la última que esbozo es la más exitosa. Estos tendrán mucho más sentido cada vez que los meto en XD para wireframe. Pero por ahora, sólo señalaré todos los diferentes tipos de pantallas que tengo. Tengo la pantalla de inicio la cual se guarda recetas. Se categorizan las recetas por cena, almuerzo, desiertos. Podrías categorizarlos por cualquier cosa. Tengo algunas notas al costado que dicen copiar link desde Instagram, Pinterest, blog, etc. Entonces eso me inspiró a hacer una pantalla donde realmente estás pegando en el link, y eso es lo que es esto aquí mismo. Una vez que hiciste una receta, generaría una vista previa de cómo se verá esa receta. Puedes elegir entre imágenes de la propia página web de la receta. Para cualquier miniatura que quisieras usar, llamaría a los ingredientes y podrías editar el título de la receta, podrías editar los ingredientes, y luego mostraría las instrucciones. Esto es guardar la receta para ti para que cuando vayas a cocinar, también puedas abrir esta copia de seguridad y usarla. Una vez que todo eso se ve bien, entonces puedes darle a “Guardar”. Entonces, una vez que lo hagas golpear “Guardar”, te pedirá que elijas una categoría a la que entrará esa comida. Cenas, almuerzos, desiertos, y por supuesto, puedes crear la categoría que quieras tocando en “Nuevo”, que luego sacaría el teclado para que crearas uno nuevo. Esto, me inspiró Pinterest porque cada vez que estás guardando un pin, lo guardas en cualquier tablero que quieras, y siempre puedes crear uno nuevo. Esa es una interacción realmente similar ahí. Puedes ver las acciones que puedes emprender en esta pantalla de recetas guardadas son agregar una nueva receta, que luego traerá a la luz ese modal, que te permitirá pegar una URL a partir de una receta que copiaste de la web. Aquí abajo también puedes generar una lista. Si hacías clic en eso, entonces te llevarían a esta siguiente pantalla donde podrás seleccionar recetas de tu lista guardada y generar una lista basada en esas. Esencialmente la aplicación iría a buscar lo que la receta tenía como lista de ingredientes, y sería lo suficientemente inteligente como para poder generar una lista de compras basada en esos datos. Una vez que golpees “Generar”, entonces generará esta lista para ti. Como mencioné antes, pensé que los usuarios podrían querer ordenar ya sea por la receta que estén comprando o por la categoría. A lo mejor se van de compras y quieren abordar el producto primero y luego los alimentos enlatados, etc. Aquí tengo una nota que las miniaturas de la receta podrían estar aquí abajo en la esquina para que cuando toques eso, tú puede seleccionar y anular la selección de qué recetas desea que se incluyan en su lista. A lo mejor generas esta lista, pero luego cambias de opinión y quieres anular la selección de una de las recetas. Se abrirá así y eso es lo que podrás hacer en ese escenario. Ahora es tu turno. El paso realmente sentará las bases para el resto de tu proyecto. Adelante y consigue mapeo y bocetos y asegúrate de compartir instantáneas de tu trabajo abajo en la sección de comunidad de clases. Después de esto, por fin vamos a entrar a Adobe XD. Te voy a estar mostrando cómo configurar tu archivo, y luego en la siguiente lección, estaremos pasando por el proceso de wireframing. Esa lección será mucho menos abrumadora si tienes algo de lo que trabajar. Adelante y hazte bocetos y te veré en la siguiente lección. 7. Configuración de Adobe Xd: Antes de sumergirnos en wireframing, quiero darte un rápido recorrido por Adobe XD y mostrarte cómo configurar tu archivo por si acaso eres totalmente nuevo en el programa. Una vez que abramos XD, se nos pedirá con unos tamaños de mesa de trabajo diferentes para probar. Creo que voy a ir con el iPhone 12 por mi proyecto. Como puedes ver, eso nos pone realmente bien. Sólo tenemos esta mesa de trabajo aquí con la que vamos a empezar. Para mostrarte un poco alrededor, tenemos la barra de herramientas por aquí. Este es nuestro cursor donde podemos seleccionar objetos y moverlos. Tenemos nuestras herramientas de forma por aquí para que puedas crear una forma y puedes darle un relleno y un borde. También puedes deshacerte de la frontera. Puedes darle una sombra y puedes manipular esa sombra usando estos controles aquí. También podemos crear líneas y darle a esas líneas diferentes anchuras. También podemos dar a las líneas diferentes tipos de tapas. Una gorra redondeada y una gorra sobresaliente, cosas así. Podemos usar la herramienta de pluma, que para ser honesto, muy raramente usé la herramienta de pluma en XD. A mí me gusta simplemente trabajar con formas y texto, y normalmente puedo obtener la mayor parte de lo que necesito hacer usando esas herramientas. Por supuesto, tenemos la herramienta de texto para que podamos empezar a escribir aquí y podemos por supuesto, manipular ese texto usando todos estos controles aquí. Podemos elegir diferentes fuentes y podemos elegir diferentes variaciones de esas fuentes, tamaños. Podemos rastrear un poco el texto. Podemos utilizar estos controles también para nuestros textos. Adivino que muchos de ustedes, si ya son diseñadores, sepan de estos controles ya. Dentro de XD, son realmente intuitivos y los recogerás rápido. Esta es la herramienta de mesa de trabajo donde se puede crear una nueva mesa de trabajo. Pero lo que realmente me gusta hacer es el atajo, que es solo presionar A en tu teclado y luego puedes crear una mesa de trabajo a partir de ahí. Otro atajo que me gusta mucho es la R, que es rectángulo, y la T, que es texto. Eso me hace la vida mucho más fácil, y los uso todo el tiempo. A continuación, pasemos por la sección Activos del Documento. Esto es realmente bonito porque podemos establecer colores, estilos de carácter y componentes, que nos meteremos en una lección posterior. Podemos configurarlos en nuestros activos de documentos para que siempre podamos usarlos. No tenemos que copiar y pegar de mesa de trabajo a mesa de trabajo. Simplemente podemos tener estos a nuestro alcance, lo que hace que el diseño sea mucho más rápido. Por ejemplo, digamos que queríamos obtener alguna inspiración de color de esta foto, que acabo de descargar de Unsplash. Podemos empezar a crear una paleta de colores a partir de esta foto o realmente cualquier cosa en absoluto. Después para guardar estos colores, simplemente seleccionamos todas esas formas y hacemos clic en el icono más junto a los colores. Después tenemos estos disponibles para usarlos a lo largo de nuestra app y lo mismo va para los estilos de personajes. Este no es un estilo de carácter muy bonito, pero podemos añadirlo a nuestra lista de estilos de personaje y volver y usarlo más tarde. Hablemos de estos controles por aquí. Contamos con nuestros controles de alineación. Como pueden ver, tengo seleccionado este rectángulo y si lo alineamos al centro, este es el centro vertical, y así lo alineará verticalmente al centro. Alinémoslo horizontalmente al centro también. Podemos alinearlo a la izquierda, a la derecha. Podemos crear múltiples rectángulos y distribuirlos uniformemente usando esta herramienta, y finalmente, contamos con nuestras herramientas Shape Builder. Puedes usar estos para fusionar formas y excluir en todas estas cosas con las que podrías estar familiarizado si has usado Adobe Illustrator. Como dije, no uso mucho estas cosas, pero te vendrá muy bien si sigues usando XD para tus proyectos y te vuelves un poco más elegante con lo que creas. Por último, repasemos todos los modos en XD. Actualmente, estamos en modo diseño. Podemos sumar elementos y diseñar nuestra página. También puedes saltar al modo prototipo, que es lo que usaremos para animar transiciones y crear un prototipo por el que un usuario pueda realmente moverse. Si estuvieras trabajando en un proyecto real que quisieras compartir con alguien con quien estás colaborando, irías a la pestaña Compartir y crearías una experiencia de compartir diferente si quieres hacer una revisión de diseño versus compartiendo con tu desarrollador, tal vez quieras crear una presentación, tal vez estés compartiendo específicamente para las pruebas del usuario, o puedes crear configuraciones personalizadas. Entonces esos son todos los modos en XD que a menudo estarás alterando entre diseño mayormente y prototipo, y estaremos entrando en esos con más detalle en las próximas lecciones. El paso de acción para esta lección es sencillo. Basta con abrir un archivo en Adobe XD y crear una mesa de trabajo que sea de un tamaño móvil. Ya verás que hay muchas opciones. Elegí el iPhone 12, pero puedes elegir lo que quieras usar para tu proyecto. Ahora que estás un poco más familiarizado con XD, saltaremos directo a la wireframing. Te veré en la siguiente lección. 8. Contorno reticular: El propósito del wireframing es resolver la colocación de contenidos y resolver problemas de navegación y funcionales en un formato que sea realmente fácil de ajustar. En esta etapa, todavía no nos preocupa el estilo visual de las pantallas. Porque la funcionalidad es el objetivo principal aquí, personalmente me gusta tomar las interacciones importantes en mis wireframes y prototipos esas. Esto me da la oportunidad de realmente probar el producto yo mismo y averiguar cuáles son los problemas y cuáles son los puntos de pega. Esta lección tiene dos partes. En primer lugar, vamos a convertir nuestros bocetos en wireframes digitales. Después los vamos a hacer prototipos para tener una sensación la experiencia a nivel esquelético y luego retocar según sea necesario. El primer paso en realidad es realmente sencillo. Simplemente saco mis bocetos delante de mí y los transfiero a Adobe XD usando mayormente texto y rectángulos. Esto no tiene por qué ser bonito. El espaciado y la alineación no tienen por qué ser perfectos. Es solo para hacerse una idea de dónde irán los elementos y cómo un usuario se moverá a través de las pantallas. Al igual que bosquejar, este es un proceso muy iterativo, pero al menos para mí la mejor manera de iterar es interactuar realmente con mis pantallas. Empecemos a hablar más sobre el modo prototipo en XD. Tocamos el modo prototipo en la lección anterior, pero ahora quiero mostrarles cómo en realidad prototiparía estos wireframes que creé. Todavía no vamos a meternos en ninguna transiciones de fantasía, pero sí quiero mostrarles cómo tendría un usuario, que en este punto sólo será yo mismo, pasar de pantalla a pantalla. Al mirar mi viaje de usuario, lo primero que quiero hacer es que un usuario guarde una nueva receta. Como pueden ver, tengo este ícono plus aquí arriba, y como estamos en modo prototipo, cada vez que toque este icono plus, me va a dar esta flecha pequeña. Se puede ver cuando hago clic y arrastre en esta flecha, me permite enviar esta interacción a cualquiera de los otros tableros de arte que tengo. Tengo estos más o menos en orden, así que lo voy a enviar a esta siguiente mesa de trabajo, que es el add recipe pop-up modal, si se quiere. Claramente no está diseñado, pero hay un poquito que entra aquí lo suficiente para prototipar esta interacción. Entonces, podemos venir aquí y ver qué tipo de interacciones tenemos. Tenemos un gatillo de tap, que es lo que queremos, porque queremos que el usuario toque ese ícono. Tenemos la transición seleccionada, que es lo que queremos y en lugar de disolver, realidad quiero que esta mesa de trabajo se deslice hacia arriba, así que voy a seleccionar eso y a aliviar 0.30 segundos. Eso está bien. Nuevamente, no nos vamos a centrar demasiado en la animación real de estos todavía. Entonces una vez que lleguemos a esta diapositiva de agregar receta, realmente solo queremos que peguen su URL. Después de que hagan eso, esta pantalla poblará con toda esta información diferente basada en la página web que han pegado. En un diseño real, podríamos querer animar algo así como una pantalla de carga porque esto no se va a cargar de inmediato, pero para este wireframe, sólo vamos a mantenerlo realmente simple, así que estoy va a hacer lo mismo. Pega URL, y queremos que entre en esta siguiente pantalla de detalle. En lugar de deslizarme hacia arriba, voy a hacer disolver, y vamos a hacer que dure, tal vez un segundo. Si es un segundo completo, eso probablemente le ayudará a parecer que está cargando. Ya veremos cómo se ve eso en un rato. Hagamos un par más. Una vez que hayamos terminado de editar toda esta información, vamos a querer que el usuario presione “Guardar” y una vez que golpee “Guardar”, entonces deberían poder elegir en cuál de las categorías quiere que entre esa nueva receta. De nuevo, vamos a tener este deslizamiento hacia arriba. Creo que eso tiene más sentido, al menos por ahora. Entonces, lo que quieren hacer es realmente echar un vistazo a una de estas casillas. Digamos que revisan esta casilla, entonces queremos que casi de inmediato vaya a esta pantalla porque no debería haber ningún retraso o transición entre tener la casilla marcada y no marcada. Debe comprobar de inmediato cuando lo toques. Iremos Tap, Transition, y en lugar de tener una animación, en realidad no haremos nada y eso hará que la transición sea inmediata. Entonces, una vez que tocaron “Confirmar”, queríamos simplemente volver a la pantalla de recetas guardadas. Eso está de vuelta por aquí. Lo que vamos a hacer es arrastrar este cable por aquí, y para esto, creo que quiero que esta transición se deslice hacia abajo porque queremos que ese modal a, se deslizó hacia arriba como entraba y queremos que se deslice hacia abajo para que se sienta consistente . De acuerdo, echemos un vistazo a cómo se ve esto en realidad. Lo que quiero hacer es seleccionar en esta primera pantalla y lo voy a configurar como la pantalla de inicio, lo que indicará que esta es la primera mesa de trabajo en este flujo. Entonces aunque no tenga seleccionada esta mesa de trabajo, cuando vaya a tocar el prototipo que comenzará en esa primera mesa de trabajo. De acuerdo, echemos un vistazo. Tenemos el prototipo aquí. Primero queremos sacar una receta, pegamos la URL, y luego se cargará esta información. Una vez que elegimos qué imagen en miniatura queremos, y también podemos editar el título así como algunos de los ingredientes. Entonces le pegaremos a “Guardar”. Entonces nos preguntará dónde queremos guardarlo. Guardémoslo a las cenas. Genial. Entonces esto surgirá, que nos preguntará si queremos confirmar. Confirmamos y se remonta de inmediato a nuestras recetas guardadas. Esperemos que tengas una mejor comprensión de cómo funciona el modo prototipo. Voy a seguir adelante con esto por si tienes curiosidad cómo escucho el resto de este prototipo. La otra interacción que tenemos iniciando en esta pantalla de inicio o pantalla de recetas guardadas es generar una lista. Cuando generamos una lista, lo que queremos que suceda es que queremos poder seleccionar de estas comidas cuáles queremos generar la lista. Volvamos por aquí. Aquí es donde creé la pantalla que muestra las recetas seleccionadas. Voy a traer esto aquí para que sea más fácil de ver. Como es ahora mismo, todo lo que tengo son estas dos pantallas. Tengo una pantalla donde no se seleccionan recetas y tengo una pantalla donde se seleccionan cuatro recetas. Para que este prototipo se sienta real y en realidad poder probar cómo se sentiría esto como usuario, voy a tener que arreglar eso. Lo que queremos es siempre que alguien toque “Hacer lista”, queremos que puedan seleccionar sus recetas. Iremos a la pantalla, pero necesitamos arreglar un poco la pantalla, así que volvamos al modo de diseño. En este momento, tenemos estos cuatro rectángulos en el estado seleccionado. Lo que eso significa es que tienen un borde más grueso a su alrededor. Es así como lo he manejado en los wireframes. Una vez que llego a mis diseños reales, el estado seleccionado versus no seleccionado podría ser completamente diferente, pero para la fase wireframing, esto sin duda hará el truco. Volvamos a poner todos estos a un borde de un píxel porque así se va a ver la primera vez que te acerques a la pantalla de recetas selectas. este momento, hay cero recetas seleccionadas, así que queremos hacer eso también. Este botón “Generar” probablemente no debería estar activo todavía. Vamos a darle una opacidad ligera de tal vez 40 por ciento para mostrar que no has seleccionado nada por lo que aún no puedes generar una lista. De acuerdo, otra vez, vamos a subir para que tengamos un poco más de espacio. Entonces tomemos esta mesa de trabajo y la duplicemos justo al lado. Esto, vamos a llamar a uno seleccionado. Lo que vamos a hacer es convertir uno de estos en un estado seleccionado, así que le daremos un borde de cinco píxeles y entraremos en modo prototipo, y cada vez que se toque esto, queremos que pase de inmediato a este siguiente, por lo que no haremos animación porque queremos que sea inmediata. De vuelta en modo diseño, queremos hacer ésta porque ahora se selecciona una receta y queremos que este botón “Generar” sea completamente visible porque debe ser tocable en este punto ya que hay una receta seleccionada. Pero digamos que queremos seleccionar dos recetas antes de generar esta lista. Vamos a entrar y sólo hacer este proceso de nuevo. Dos seleccionados. Ahora tendremos el número dos aquí para indicar que hay dos seleccionados. Digamos que están seleccionando este en la categoría de almuerzo. Perfecto. Después volveremos al modo prototipo. En esta pantalla, vamos a querer que hagan clic en esto, y debe pasar inmediatamente a esa pantalla. Entonces sólo voy a hacer eso dos veces más para que tengamos cuatro recetas seleccionadas. De acuerdo, Ahora que cuatro están seleccionados, queremos que el usuario genere una lista. Si tocamos el botón “Generar”, entonces queremos que su lista de abarrotes se deslice hacia arriba en el marco. Hagamos deslizarnos hacia arriba, y una vez un segundo está bien por ahora. Entonces eso nos llevará a su lista de abarrotes. Cuando entramos en la fase de diseño real, también abordaremos estas interacciones más pequeñas como cambiar el ordenar por a comida versus categoría, y abrir este pequeño botón que te mostrará cómo seleccionar y anula la selección de qué recetas quieres que se incluyan en la lista. Pero por ahora, creo que ese es más o menos el prototipo. Tocémoslo de nuevo para que podamos probar esta próxima pequeña fase de interacciones. Yo quiero hacer una lista, así que ahora me va a permitir seleccionar recetas. Sólo una cosa que noté, que es exactamente por eso que pruebo mi propio prototipo, es que esa interacción fue rara. Se deslizó hacia arriba o hacia abajo cuando realmente sólo quería que se desvaneciera en esa pantalla, así que esa es una nota mental que voy a hacer para cambiar los tipos de transiciones. Pero de todos modos, queremos seleccionar esto. Eso es genial. Se movió el número de cero a uno, y también hizo que este botón “Generar” estuviera realmente disponible. Entonces tengo que recordar exactamente cuáles configuré, ya que esto es sólo un prototipo forzado y esto no es algo donde todas y cada una de las opciones están realmente prototipadas. Pero de todos modos, recuerdo que seleccioné este siguiente. Se está moviendo hasta dos, lo cual es perfecto. Después postres, y luego una cena más, y se está moviendo de 1, 2, 3, y 4 lo cual es genial. Entonces vamos a generar esa lista. Esto es perfecto. A esto se le ocurrió la lista ordenada por categoría, así que tenemos productos, todas estas cosas, alimentos enlatados, todas estas cosas. Como dije, vamos a entrar en algunas de las interacciones más pequeñas más adelante cuando realmente estemos diseñando, así que mete tus bocetos en XD y llévalos a un lugar donde puedas interactuar fácilmente con ellos en modo prototipo. Puede que aún no se vea bonita, pero debe ser una experiencia sin fisuras. Una vez que tengas eso, toma una captura de pantalla de tus wireframes o aún mejor, graba un video de tu prototipo y compártelo con nosotros a continuación. En el próximo par de lecciones, llegaremos a la parte realmente divertida, convirtiendo estos wireframes en diseños de alta fidelidad utilizando textiles, paletas de colores y componentes. Uno de los bloques de construcción más potentes de Adobe XD. 9. Diseño de UI: Lo hicimos a otro de mis pasos favoritos absolutos en el proceso, la fase de diseño. En estas próximas lecciones, realmente vas a ver que la función de tu app cobra vida visualmente, así que no te rindas ahora. Para poder decidir cómo quiero que se vea visualmente esta app, normalmente me gusta realmente hacer una mesa de trabajo fuera a un lado en mi archivo de diseño, y empezar a reunir algunas imágenes de inspiración, colores, y fases de tipo. Me gusta pensar en el espacio en el que existe el producto, decir quién lo va a estar usando, en qué industria existe, y hacer un poco de investigación sobre qué tipo de colores y estilos podrían prestarse a ese tipo del espacio. Tengo la sensación de que muchos de ustedes ya son diseñadores visuales de alguna manera. No voy a pasar toneladas de tiempo en este paso. Pero básicamente después de tener algunas ideas de cómo podría querer que fuera mi paleta de colores y qué fuente o herramienta me gustaría usar en toda la aplicación, seguiré adelante y probarlo en una sola pantalla. Normalmente tengo que hacer un poco de ajustes, sobre todo porque quiero asegurarme de que el contraste de color sea lo suficientemente grande para que el texto sobre los colores que estoy usando como colores de fondo o botones vaya a ser legible. Para ello, siempre uso el plug-in Stark, que puedes ver aquí. Como puedes ver, jugué con esto un par de veces antes de que realmente lo llevara a un lugar donde me gustaba. En primer lugar, tuve esta variación donde tenemos el ícono más con un poco de sombra aquí. Simplemente no estaba enamorado de eso, así que en las próximas versiones, simplemente lo mantuve realmente simple. Entonces también jugué con el estilo de botones. En primer lugar, estaba usando este fondo azul brillante con un trazo grueso. Sabía que quería seguir con este estilo retro general con los colores brillantes y las líneas rectas realmente gruesas, pero también hay algunas maneras de hacerlo. Esta fue mi primera variación, y luego decidí que quería que estas tarjetas de recetas luzcan un poco mejor. Ver por aquí, realmente son simplemente planos, y es un poco difícil para ellos sobresalir porque el pequeño texto aquí se mezcla demasiado con el fondo. Por aquí, agrupé la imagen y la foto junto con esta forma de fondo, que es blanca, para después añadir una sombra en el fondo para ayudarla realmente a sobresalir. El botón aquí se ve similar, pero decidí ir con ese amarillo. Definitivamente eso me gustó más, pero entonces realmente quería probar algo diferente con el botón que normalmente no hago, y le di esta dura sombra, que creo que es realmente única. Decidí ir con eso. Este último intento fue definitivamente mi favorito. Terminé ajustando mi página de estilos para reflejar eso. Entonces una vez que estés contento con eso, ese es un buen momento para seleccionar tus colores y fuentes y agregarlos a tus activos de documentos. Solo estoy seleccionando estos y haciendo clic en el botón Plus, y ahora tenemos todos estos colores al alcance de la mano. Yo voy a hacer lo mismo con estos estilos de texto. Estoy usando Roc Grotesk, y sólo lo estoy manteniendo realmente simple. Estoy usando eso todo el camino. Me estoy dando dos opciones diferentes para encabezamientos usando uno que sea súper audaz, y tenemos caso de título usado en este. Entonces éste, que sigue siendo audaz pero un poco más pequeño, rastreó un poco más con un espaciado de letras más grande, y también lo tenemos en todos los mayúsculas. Entonces esto es lo que estoy usando para todo el texto corporal. Como verás cuando nos metamos en algunos de los diseños, normalmente lo uso en 16 punto, pero a veces me hago un poco más grande o más pequeño dependiendo de cuáles sean las necesidades de la página. Añadamos esos a la sección de activos de documentos también. Yo sólo voy a entrar y darle a esto una etiqueta para que sea realmente fácil para mí. Llama a ese cuerpo subpartida y rumbo allá. Ahora, a medida que paso y diseño el resto de mi app, puedo tirar de aquí en cualquier momento, y simplemente lo hace mucho más rápido. A medida que estás construyendo esta página de prueba, podría haber cosas que necesiten un poco de ajustes que no necesariamente tienen que ver con tus estilos principales de colores de texto y estilos de botones realmente solo. Algunas otras cosas podrían entrar en escena. Por ejemplo, para el mío, este componente aquí entró, que definitivamente va a ser algo que uso dentro del resto de la app. A la hora de diseñar este tipo de cosas, si no tienes toneladas de fondo de diseño visual, podrías ir a buscar inspiración en otro lugar. Puedes mirar en Behance, o Pinterest, o Instagram, o especialmente pensar en las apps que usas todos los días y obtener alguna inspiración de esas en cuanto a cómo dar estilo a diferentes elementos como este. Es posible que también tengas que añadir iconos a tus pantallas. Si no quieres diseñar todos esos tú mismo, o si solo quieres ahorrar un poco de tiempo, entonces te recomiendo encarecidamente descargar el plugin llamado Icons 4 Design. Esto es lo que uso todo el tiempo, y tiene toneladas de iconos comunes. Usé aquí el ícono más, y por supuesto, podría haberlo hecho yo mismo. Probablemente no tardaría tanto, pero tener estas opciones para mostrarte qué tipos de estilos de iconos podrías usar es un recurso realmente genial para tener. Nuevamente, peinar una aplicación viene con la práctica. No te des una paliza si no se ve perfectamente como quieres que al principio. Puedes seguir mejorando a medida que avanzas. Una vez que estés contento con el aspecto de esta pantalla de prueba, sigue adelante y toma una captura de pantalla o exporta como PNG y compártela con nosotros en la sección Comunidad de clases. A continuación, vamos a aprender sobre el poder de los componentes y auto-animar en Adobe XD. Adelante y pasa por este proceso de estilos de diseño para tu propio proyecto, y te veré en la siguiente lección. 10. Componentes y más: En esta lección, quiero presentarte a los componentes porque esta es una herramienta que realmente te va a ahorrar algo de tiempo cuando estás diseñando el resto de las pantallas en tu app. Crear componentes en Adobe XD es una gran manera de agrupar elementos y crear diferentes estados o variaciones de un elemento. También puede configurar transiciones entre varios estados de un solo componente. Sin usar toneladas de tableros de arte, puedes crear cosas como micro animaciones. Si eso suena confuso, creo que verlo realmente ayudará. Permítanme mostrarles algunos ejemplos. En la última lección, viste que puse la pantalla solo copiando y pegando y cambiando algo de texto e imágenes dentro de estos elementos, pero en realidad hay una forma más fácil de hacer esto, que estoy a punto de mostrarte ahora usando componentes. Queremos crear un componente a partir de esto porque entonces podemos reutilizar esto. Posteriormente en la app, vamos a querer múltiples estados de este componente de tarjeta de receta. Vamos a querer a un seleccionado en un estado deselecto. Este es obviamente el estado por defecto el cual se deselecciona, pero más adelante, siempre que queramos que los usuarios puedan seleccionar qué recetas quieren usar para generar una lista de compras vamos a necesitar ese estado seleccionado. Este es un contendiente perfecto para crear un componente fuera de. Yo lo voy a hacer desde cero sólo para que veas a lo que me refiero. Muy bien, Vamos a configurar nuestra pantalla con todo menos las tarjetas de recetas, y vamos a recrear esto usando componentes en su lugar. Voy a crear esto desde cero para que puedas ver exactamente cómo lo hice. En primer lugar, empecemos con este rectángulo de fondo. Lo que tenemos es un rectángulo blanco. Sólo voy a hacer clic en la tecla R como el atajo de un rectángulo. Vamos a sacar esto. Eso se ve bien. Por supuesto, que te puedes conseguir realmente específico con el tamaño dependiendo de cuánto espacio quieras entre elementos y ese tipo de cosas. No queremos una frontera en esto, así que voy a apagar la frontera. Entonces sí queremos algo de espacio tanto para una foto como para un texto. En realidad lo que voy a hacer es hacer una máscara en la que podamos redactar nuestra foto. Podemos crear una máscara usando un rectángulo. Voy a golpear de nuevo R y crear un rectángulo aquí. De nuevo, voy a apagar el borde, y vamos a hacer este rectángulo gris para que realmente lo podamos ver. Está bien, entonces aquí es donde va a ir nuestra imagen. Entonces nuevamente queremos algunas copias. Voy a escribir pasta de camarón. Volvamos a nuestro panel de activos porque queremos usar la copia corporal para esto. Perfecto. Impresionante. Ahora lo que quiero hacer es asegurarme de que esto quede alineado. Eso es genial. Siempre voy a querer que empiece, digamos ocho píxeles de un lado. En lugar de ser este tipo de texto donde es básicamente ancho ilimitado, si sigo escribiendo, va a salir completamente fuera de esto. Eso no es lo que queremos. En cambio, queremos que esto sea de ancho fijo. Voy a arreglar el ancho a cerca de este tamaño. Queremos que sean ocho píxeles del extremo derecho también, perfectos. Entonces parece que la altura de la línea y aquí es demasiado grande, así que voy a hacer este 18 en su lugar. Impresionante. Ahora podemos extender esto hacia abajo para asegurarnos de que allí se alinea perfectamente. Ahora vamos a crear algún relleno para que no importa cuánto tiempo sea el título de la receta, este componente será flexible a eso. Para poder darnos relleno, tenemos que agrupar estos elementos. Voy a hacer comando G a grupo, y lo enviaremos a la parte de atrás para que aún podamos ver nuestra máscara arriba. Entonces seleccionemos este grupo y veamos cuáles son nuestras opciones. Vamos a revisar el relleno aquí. Como puedes ver, tenemos 91 píxeles de relleno en la parte superior, lo cual es genial porque nos da espacio para nuestra imagen. Tenemos ocho píxeles a la izquierda y a la derecha y seis en la parte inferior. Creo que eso está visualmente centrado, así que eso es perfecto. Ahora en realidad podemos convertir esto en un componente. Seleccionemos tanto este grupo como la máscara en la parte superior y golpeemos el comando K para componente. Ahora que este es un componente, podemos bajar a la sección de componentes y en realidad podemos arrastrarlo hacia fuera para crear otra instancia de ese componente. También podemos simplemente copiar y pegar o hacer clic y arrastrar y mantener presionado Option Shift con el fin de crear más de estos. Ahora las cosas impresionantes desde que agregamos ese relleno y este es un componente, aunque vayamos a sólo otra instancia del componente, en realidad podemos cambiar el título. A lo mejor es solo Pasta de Camarones y ahora como puedes ver, todo el componente en realidad es flexible a eso. A lo mejor este tiene un título realmente largo. Vegano y sin gluten, chile con frijoles negros. Ahí vamos. Puedes hacerlo más o menos todo el tiempo que quieras. Eso es lo impresionante de los componentes. Sólo tuve que hacer eso una vez y ahora va a ser flexible a todas las diferentes instancias que necesitamos crear. Lo que es impresionante es que ahora solo podemos arrojar las imágenes que queremos. Ya verás que cuando arroje una imagen a este primer componente, ya que ese es el componente principal, va a llevar ese estilo al resto de ellos, pero eso está bien porque fácilmente podemos anular eso. Tomemos este y solo lo dejemos justo ahí. Como pueden ver solo lo estoy dejando caer en la porción resaltada cada vez que entro aquí y esa es la máscara. Ahí vamos. Eso es mucho más fácil que lo que hicimos aquí donde teníamos que copiar y pegar y constantemente estar redimensionando esta forma de fondo. Ahora, creamos componentes que son flexibles. Ahora que estoy notando, aún no agregamos la sombra. Esto es genial. Podemos volver al componente principal. Si olvida cuál es el componente principal, si nota que este diamante no está lleno de verde, este diamante se rellena en verde. Así es como lo sabes, este es el componente principal. Lo que también puedes hacer, como, digamos que tienes este componente principal en una pantalla que está como en el otro lado de tu ventana y realmente no recuerdas dónde está, lo que puedes hacer es tocar cualquiera de las instancias, control-click y Editar Componente Principal. Eso te llevará directamente al componente principal. Lo que queremos hacer es darle una sombra a esto. Vamos a seleccionar en esta forma de fondo. Vamos a bajar y darle una sombra. Para mis sombras, me gusta mantenerlas realmente sutiles. Vamos a hacer ocho por ciento de opacidad con una sombra negra. Vamos a hacer 20 borrones. Eso por lo general se ve bien. Perfecto. Ahora como puedes ver, que es realmente sutil, pero eso sí lo aplicó al resto de las instancias. Tenemos este componente, pero como pueden ver, se van fuera de la pantalla. Si queremos que esto sea desplazable horizontalmente, realidad tenemos que decirle a XD que haga eso. Lo que voy a hacer es hacer unos cuantos más de estos. Los agruparemos. Entonces una vez que estén agrupados, se puede ver que tenemos estas opciones por aquí, y esta es la opción Grupos de desplazamiento. Este icono es un icono de grupo de desplazamiento horizontal. Vamos a golpear eso y como puedes ver, automáticamente se establece el parámetro como el ancho completo de la pantalla, lo cual es perfecto. Si entramos en el modo Vista previa, y todo lo que estoy haciendo es desplazarme horizontalmente, y ahora tenemos un grupo de desplazamiento horizontal. Lo último que tenemos que hacer con este componente es crear algunos estados diferentes. Como dije, queremos un estado seleccionado y un estado desseleccionado. Este estado por defecto es el estado desseleccionado y si realmente aprovechas este componente principal, porque lo hemos agrupado un par de veces, por lo que probablemente tengas que seguir pinchando. Entonces se puede ver que sólo hay un estado y es el estado por defecto. Pero sumemos otro y llamaremos a esto Seleccionado. Ahora, lo que quiero que se vea el estado seleccionado es que realmente solo quiero que esta forma de fondo tenga un borde. Ahora podemos ver si hacemos zoom, ya que esta forma está en el fondo de la imagen, se está cortando el borde. Entonces para arreglar eso, en lugar de tener un borde que es un trazo interno, vamos a darle un trazo externo. De esa manera, seguirá saliendo fuera de los límites de este rectángulo. Para que sea realmente visible, hagámoslo tres píxeles, y le daremos un color que está en una de nuestras paletas. Genial. Entonces aquí está el estado seleccionado. Fue tan sencillo como eso. Siempre y cuando seamos seleccionados en cualquier estado que queramos editar, podemos editar eso, y luego siempre simplemente volver al estado predeterminado. En el estado predeterminado, vamos a configurar una interacción donde cada vez que se toque este componente, debe pasar al estado seleccionado. Si hacemos eso en este componente principal, se aplicará también al resto de los componentes. De nuevo, ahorrando ahí tanto tiempo. Estamos en este componente actual y vamos a entrar en modo Prototipo. Si solo tocamos este cable en lugar de arrastrarlo, solo tocamos en él, entonces podemos tener la opción de elegir un destino que sea sólo otro estado. Vamos a elegir el estado seleccionado y lo que queremos que haga, realmente no lo necesitamos para animar. Simplemente queremos que pase sin animación porque queremos que sea inmediata. Pasemos al estado seleccionado y solo hagamos lo mismo para que un usuario pueda deseleccionarlo fácilmente si cometió un error. De nuevo, sólo vamos a aprovechar eso. Vamos a elegir “Estado predeterminado”, y va a recordar todos los ajustes que queríamos. Ahora, podemos previsualizar esto. Volvemos al modo Diseño, toca la vista previa. Si solo tocamos esto, como pueden ver, cada vez que estoy tocando, está siendo seleccionado y desseleccionado. Esa es una de las razones por las que harías un componente si quieres que tenga múltiples estados y quieres poder hacer una transición entre ellos. Pero otra razón para crear un componente sería sólo para que se tenga una fuente de verdad para cierto elemento. Tomemos un botón, por ejemplo. Tengo este botón y digamos que no lo hago un componente y solo lo copio y lo pego en muchas mesas de trabajo diferentes, y luego más adelante decido que quiero hacer un cambio. A lo mejor quiero que este color sea este rosa en su lugar, entonces tendría que pasar por seleccionar todos los botones y hacer ese cambio. Pero si hago de esto un componente simplemente asegurándome de que esté agrupado y luego golpeando el comando K, entonces si tengo este componente aparece varias veces, entonces todo lo que tengo que hacer es cambiar el. Yo sólo voy a entrar aquí y hacer este color, entonces todos cambian. Pero eso no significa que no tengas que tener solo un estilo de botón. Si lo cambias en una sola instancia, entonces como puedes ver, solo se aplica a esa instancia. Es una herramienta realmente flexible de usar ya que estás diseñando toda tu interfaz. Para mi botón, en particular, realidad sí quiero que tenga un par de estados diferentes. Yo quería tener este estado por defecto, pero también quería tener un estado inactivo. Yo quiero que esté ahí, pero quería tener una opacidad mucho menor para que quede claro que el usuario necesita tomar una acción adicional antes de que ese botón se active. Todo lo que voy a hacer es seleccionar este componente principal. Sé que es el principal porque este diamante verde se llena en la esquina, y voy a golpear “New State”, y vamos a hacer Inactivo. En realidad voy a dar click en este componente para que esté seleccionado en todo el grupo. Voy a hacer que la opacidad sea 50 por ciento. Ahora se puede ver que es el estado inactivo, tenemos el estado por defecto, y podemos movernos entre esos. Si vienes aquí también, puedes ver que eso funcionará en cualquier instancia del componente. A continuación, hablemos de auto-animar. Se puede utilizar la animación automática para la transición entre dos pantallas diferentes o dos estados diferentes de un solo componente. Déjame mostrarte un ejemplo de esto por si quieres experimentar con él en el diseño de tu app. Ya has visto esta pantalla antes y esta es la pantalla de recetas guardadas de la que realmente estábamos hablando. Ahora lo que estoy haciendo es crear un modal que quiero flotar hasta dentro de marco cada vez que pulses el botón más para agregar una nueva receta. He creado este modal y lo he agrupado todo como puedes ver. Esta mesa de trabajo es sólo una copia de la mesa de trabajo anterior con este modal en la parte superior. Lo que quiero hacer para animar entre estas dos pantallas es realmente tener este elemento en ambas pantallas. Se puede ver que en realidad sí tengo eso. Aquí abajo está este elemento, pero mira, está todo el camino hacia abajo en la parte inferior y la opacidad está en cero. Debido a que se llama igual, Grupo 64, Grupo 64, y es en ambas mesas de trabajo, auto-animar en XD en realidad va a poder animar la diferencia entre las dos colocaciones y especie de cómo aparecen. En esta mesa de trabajo, está completamente a cero por ciento de opacidad y está en la parte inferior. En esta mesa de trabajo, está al 100 por ciento de opacidad y está cubriendo casi toda la pantalla. Si conecto esto, puedo hacer doble clic hasta meterme en este ícono más. Puedo arrastrar este cable por encima y si seleccionamos “Auto-Animar”, y lo haremos, tal vez haga facilidad de entrada y salida y lo haremos bastante rápido, 0.3 segundos, luego a ver si puedes ver cómo sucede esto. Haga clic en el icono más y flota hasta en el marco. Eso es exactamente lo que queríamos que pareciera. En realidad solo hace que la animación sea mucho más fácil, porque todo lo que tienes que hacer es que aparezca un elemento en dos pantallas diferentes y que lo llamen igual en el panel de capas, y automáticamente animará la diferencia. Ahora que entiendes estas dos características críticas en XD, puedes seguir adelante y terminar tu propio prototipo. Recordatorios rápidos antes de terminar esta lección. Crea un componente en cualquier momento tengas un elemento que aparecerá de una forma u otra en múltiples lugares para ahorrarte tiempo y confusión. A medida que diseñas, sigue saltando al modo Prototipo para crear prototipos tus diseños y reproducirlos para probarlos y ver dónde necesitas hacer ajustes. Si quieres conseguir algo de práctica de un proyecto de UX real, incluso podrías hacer que otros prueben tus prototipos. Funciona mejor si realmente tienes a alguien en casa a quien puedes conseguir el prototipo delante, de esa manera en realidad puedes verlos y ver dónde tropiezan. Si quieres ver aún más demos y tras bambalinas de cómo diseñé mi función de aplicación, entonces puedes echar un vistazo al siguiente video, que en realidad es un video extra. Te guiaré por aún más de estos elementos de diseño e interacciones que he creado, y también te mostraré un lapso de tiempo de mi proceso de tres horas diseñando esto. Si ya estás realmente confiado en Adobe XD, entonces puedes sentirte libre de saltarte eso por completo o simplemente ver tanto o tan poco de él como quieras. 11. ¡EXTRA! Más diseño y timelapse: Como mencioné en este video bonus, voy a estar mostrándote toda mi función de aplicación de principio a fin, algunas interacciones más pequeñas, y elementos de diseño que he creado. Entonces al final, podrás ver un lapso de tiempo de todo el proceso que tardó alrededor de tres horas en total. Saltemos directamente y no lo olvides, si ya estás familiarizado con XD o simplemente estás ansioso por llegar al siguiente paso de crear tu video final. Siéntete libre de saltar adelante a la siguiente lección. Para crear esto, tengo 19 pantallas, pero realmente sólo cuatro diseños de pantalla diferentes. Tenemos esta pantalla de “Recetas Guardadas”, que ya has visto varias veces. Tenemos esto, agrega receta, pantalla, donde tenemos diferentes variaciones de la misma; donde no se llena, y donde se llena por completo. Tenemos esta “Guardar en” como en qué pantalla de categoría, y luego, misma cosa exacta, tenemos esta pantalla de “Recetas Guardadas”, pero es solo un poco diferente cada vez que estamos haciendo que el usuario seleccione recetas para generar un lista de compras, y luego, por último, tenemos la página de lista de compras real. Se puede ver que pudimos crear toda esta animación simplemente copiando y pegando, y ajustando algunas cosas alrededor y animando entre ellas. Déjame mostrarte exactamente cómo hice eso. Ya vimos esta interacción. Tenemos el botón “+” tocado y luego esta nueva tarjeta de receta, sale. Lo que quería pasar después fue, y queríamos que el usuario tuviera la capacidad de pegar una URL de su portapapeles. Entonces tal vez están mirando Instagram o Pinterest, o en uno de sus blogs favoritos de comida, y quieren importar una receta desde ahí. Simplemente mantienen pulsado para copiar el enlace, vuelven a esta aplicación, luego les solicitará que peguen cualquier URL que tengan en su portapapeles. Después de que hagan eso, quería que quedara claro que la receta se estaba cargando. Nunca se quiere tener un usuario solo se queda colgado. Quieres mostrarles que, lo que hiciste ha funcionado, la acción que tomaste es exitosa, pero solo estamos cargando los datos. Eso es lo que quería aquí. Entonces una vez que tengamos ese usuario toque en este elemento, pegue desde el portapapeles, lo que quería era realmente tener la siguiente pantalla ser esta pantalla de carga. Yo quería que pasara justo a esa pantalla con una disolución, y luego lo que he hecho es agregar un disparador de tiempo. Por lo que en lugar de tener que tocar cualquier cosa en esta pantalla, todo lo que pasa es que esta barra, tiempo, se moverá hasta el final para llenar la barra de carga. He establecido esa duración para que suceda a lo largo de dos segundos completos. Echemos un vistazo a cómo se ve eso. Tenemos esta pantalla de “Añadir Receta”. Tocamos esto para pegar desde la URL, y luego lo carga. Entonces tan pronto como acaben esos dos segundos, tenemos otro disparador de tiempo que nos lleva a esta pantalla, donde tenemos toda esta información realmente cargando. Si hago clic aquí, este grupo, grupo 87 es donde tengo el botón y todos estos ingredientes, y todas estas cosas. Eso se va a desvanecer desde abajo. Si recuerdas, de uno de los videos anteriores, puedes ver cómo hice eso aquí. Si hacemos click aquí, es el mismo grupo, grupo 87 y la opacidad está todo el camino hacia abajo, pero si lo subimos, veríamos que todo es de esa misma información. Eso permite que auto animate haga lo suyo porque, una vez que hemos encendido, eso, entonces simplemente animará la diferencia, la diferencia entre cero por ciento de opacidad al 100, la diferencia entre esta colocación en el fondo y la colocación en la parte superior. Es así como creé esa transición. Entonces lo que quería era que el usuario pudiera guardar eso. Entonces si hacemos clic en este botón de “Guardar”, podemos ver que eso simplemente colapsará esta nueva tarjeta de receta hacia abajo porque queremos que parezca el mismo proceso, pero el último paso en el proceso, así que lo estamos manteniendo el exactamente igual, es el mismo modelo pero solo un poco más pequeño para que puedas ver que es el último paso. Para ello, sólo tuvimos que asegurarnos de que este elemento, este rectángulo con las esquinas redondeadas en la parte superior, el mismo nombre en ambas mesas de trabajo. Se llama rectángulo 789, y por aquí, si comandamos click para tocar, todo el camino hacia la capa inferior, se le llama la misma cosa. Si estás más organizado que yo, podrías nombrar a todas tus capas algo que realmente tiene sentido. Pero para mí, cuando estoy diseñando, tiende a ser rápido, y sólo voy a volver atrás y hacer eso si tengo una interacción realmente confusa. Entonces lo que queremos es que esta información se desvanezca de la pantalla, y esta información se desvanezca. Podemos ver que eso sucede con bastante facilidad cada vez que tenemos esta animación suceda. Entonces lo que queremos es lidiar con esta situación de casilla de verificación. Como pueden ver, realidad he hecho de esta casilla de verificación un componente. Entonces si solo sigo tocando dos veces hasta que lleguemos aquí, tenemos este componente. Tenemos un estado por defecto, que está desmarcado, y tenemos un estado comprobado. Básicamente, lo que podías hacer si quisieras, fue configurar una interacción en el componente principal para poder tocar, apagar y activar ese estado comprobado. No obstante, también quería que este botón “Confirmar” cambiara de estado también. Terminé usando dos mesas de trabajo diferentes para esta interacción por esa razón. Lo que sucede aquí es que, cuanto se toque esta casilla de verificación, simplemente pasará a esta siguiente mesa de trabajo donde tenemos esto comprobado, y también tenemos el botón “Confirmar” a 100 por ciento de opacidad. Comprobemos eso, tocamos cenas y es tan simple como eso. Entonces a partir de aquí, queremos que el usuario haga clic en “Confirmar”, y luego esto simplemente saldrá de marco, y queremos poder ver la nueva receta entrar en marco. No sólo queremos que aparezca automáticamente porque queremos dar la retroalimentación y llamar la atención sobre el hecho de que, “Sí. Esta receta se sumó al inicio de la categoría de cenas”. Primero, déjame mostrarte a lo que me refiero. Golpeamos “Confirmar”. ¿ Viste eso? Eso es exactamente lo que quería pasar y te mostraré cómo lo hice. Es realmente sencillo conseguir que este modal desaparezca. Es exactamente el mismo proceso que hemos estado haciendo. En esta mesa de trabajo, tenemos el modal totalmente in-frame. Se nombra grupo 92 en esta mesa de trabajo. Si flotamos hasta abajo aquí, tenemos la misma mesa de trabajo llamada la misma cosa, grupo 92, pero la opacidad es todo el camino hacia abajo y también está en el mismo fondo. Lo mismo una y otra vez con este modal entrando y saliendo. Pero, la parte realmente divertida aquí es esta interacción. Si tocamos aquí al estado en el que queremos terminar, entonces podemos ver que tenemos estas cuatro recetas, solo voy a llevar todo este grupo de pergaminos, copiarlo y pegarlo por aquí. Entonces todo lo que voy a hacer es tomar estos elementos, seleccionar cada uno de ellos, y arrastrarlos para que tengamos la pasta de camarones como la primera. Entonces, como puedes ver como lo teníamos antes, tengo esta nueva que está tan ligeramente en cuadro, voltearemos la opacidad hasta ahí abajo, y como hemos copiado y pegado los grupos de scroll van a tener el mismo nombre en ambos, lo cual es perfecto. Si saltamos al modo prototipo, ahora podemos ver que he configurado un disparador de tiempo, después de solo 0.3 segundos, se autoanimará a esta siguiente mesa de trabajo y en realidad he usado la flexibilización en esto, y he usado snap, lo que lo hace realmente rápido. Me gusta mucho cómo se ve esa interacción. Vamos a previsualizarlo. Lo haremos previsualizar desde aquí porque es bastante rápido, golpeamos confirme, y ahí tienes. Es así como se hace ese tipo de interacción. A continuación, estamos llegando a las cosas buenas. Ahora, tenemos esta pantalla de recetas guardadas, pero lo siguiente que queremos que la gente pueda hacer es realmente hacer su lista de abarrotes. Tenemos ese botón ahí abajo, cuando eso está presionado, lo que queremos que la gente pueda hacer, es seleccionar las recetas que quieren que se incluyan en su lista de abarrotes. fin de dar retroalimentación que las selecciones están trabajando para hacer un seguimiento de cuántas recetas han seleccionado, también quiero tener un contador arriba en la esquina superior derecha. Como se puede ver, tenemos 0,1,2,3, y 4, con cada mesa de trabajo, se selecciona una nueva receta. Por esa razón, en realidad no terminamos aprovechando tanto los componentes en este escenario. Porque lo que podríamos haber hecho es simplemente tener esa interacción donde cada vez que se toca cualquiera de estos, cambia al estado seleccionado y eso hubiera funcionado muy bien. Pero entonces, todavía necesitamos una nueva mesa de trabajo para que este contador se intensifique. Esa fue la forma más fácil para mí de hacerlo. Todo lo que realmente hice fue iniciado con cero recetas seleccionadas, y como pueden ver, para eso, tenía este botón generar lista en el estado inactivo. Simplemente muevo la opacidad a 50 porque si el usuario no ha seleccionado ninguna receta, aún no deberían poder generar la lista. El listado no tendría nada en ella. Eso sólo les da más retroalimentación de que tienen que seleccionar una receta para poder ir sobre este proceso. Por el bien de esta maqueta, vamos a fingir que esta persona va a tocar la sopa cremosa de tomate como su primera. Vamos a configurar la interacción para que cuando eso sea tocado, automáticamente nos lleve directamente a la siguiente mesa de trabajo, y en esa siguiente mesa de trabajo tendrá el contador moverse hasta uno y el botón generar lista todo el camino arriba en opacidad. Eso es todo lo que estamos haciendo aquí cuatro veces diferentes. Estamos moviendo el estado de no seleccionado para seleccionarlo, estamos moviendo el contador hacia arriba 1,2,3, y 4. Por último, cuando tengan a los cuatro seleccionados, van a decidir generar la lista. Si vemos en modo prototipo lo que eso va a hacer, es básicamente va a auto animarse en esta lista y como esto te parece probablemente familiar, este es un modal y así usé el mismo proceso exacto. Tenemos todo esto agrupado, grupo 113 y si miras aquí abajo en la mesa de trabajo anterior, se llama 113, la opacidad está todo el camino hacia abajo, lo que nos va a permitir generar la lista y se va a deslizar hacia arriba como eso. Pasemos por eso una vez más para que veas cómo funciona esto. Alguien decide que quieren hacer una lista de abarrotes, esto cambia a seleccionar recetas para decirle al usuario qué hacer. Podrán seleccionarlos uno por uno. También estamos demostrando el grupo de pergaminos aquí, que se ve bastante guay. Sopa de curry, vamos a hacer galletas cargadas de ensalada y chip de chocolate y se puede ver que el mostrador fue hasta cuatro. Vamos a generar la lista y ahora se puede ver que la lista generada puede ser ordenada por categoría o receta. Esto es algo que no hice prototipo porque no era súper importante para mi último largometraje. Pero sí quería mostrar estas categorías derrumbables. Ya que está ordenada por categoría, quería que pudieras, al menos para una de las secciones que elegí, producir, abrir y cerrar esto. Tenemos esa interacción, que ahora les voy a mostrar cómo hacer eso. Es más fácil diseñar los resultados que la primera mesa de trabajo si eso tiene sentido. Este es el resultado final. Esto es lo que diseñé primero, hice toda esta lista, agrupé para hacer las cosas más fáciles. Se llama grupo 109, y si vienes por aquí, también puedes ver que el grupo 109 está aquí mismo grupo 109. Si volteamos eso hasta arriba, lo que verás es que simplemente tomé cada uno de estos elementos y los apilé uno encima del otro para colapsarlos porque eso es exactamente lo que es esto. Están colapsando esta lista para expandirla o colapsarla. Lo que podemos hacer ahora es entrar en modo prototipo y si tenemos este producto tocado, entonces lo que queremos que haga es animar a éste y si se toca de nuevo, entonces quieres que colapse de nuevo, sólo volverá a esta pantalla . Eso es bastante fácil. Eso es lo que hemos hecho aquí, producir. Simplemente puedes sacarlo arriba y abajo. Como puedes ver, también tuve que tomar esta sección de hornear y moverla hasta el fondo esta mesa de trabajo para que fuera sacada del camino para que puedas ver toda esa lista. Quería que los usuarios pudieran abrir y cerrar esta lista de recetas. Es solo una lista de todas las recetas que se incluyen, por lo que de esa manera si quieres anular la selección de alguna de ellas, puedes. Acabo de crear este componente donde uno de los estados está colapsado y el estado predeterminado es con todos estos fuera así. Hice el mismo proceso exacto con el estado colapsado. Seguramente se puede ver si entramos aquí, tenemos todos estos grupos que actualmente están a cero por ciento de opacidad, pero si los subo, se puede ver que todos estos sólo están escondidos detrás de ahí y están apilados uno encima del otro. Eso es realmente como lo hice. Lo que yo quería era, aunque estés en esta página donde estén todos estos fuera, si tocas esto, también quería que se derrumbaran, porque quería que hubiera espacio para que vieras estas recetas. Entonces echa un vistazo a eso. Ahí vas. Para hacer eso, creé esta tercera mesa de trabajo donde realmente tenemos todos estos fuera y ampliado. Es más o menos una copia de esto, pero con todos estos expandidos, así que de esa manera, si estás en esta mesa de trabajo y tocas esto, te llevará a esta mesa de trabajo. Pero si estás en esta mesa de trabajo y tocas esto, aún te llevará a esta mesa de trabajo. Entonces, pase lo que pase, si tocas esto para expandirlo, no sólo se expandirá en sí mismo, sino que también colapsará todas estas listas. La última interacción que quería mostrarles fue guardar su lista. Digamos que un usuario tiene su lista, pero no van a ir de compras de manera correcta o solo quieren guardarla para más adelante, son capaces de guardar la lista y en realidad poder acceder a ella desde su pantalla de inicio. Si pasamos a la nueva pantalla de inicio, una vez que se haya guardado una lista, puede ver que tenemos este elemento agregado. Acabo de diseñar un ícono de lista rápida y le di una pequeña insignia con el número 1 para que sepas cuántas listas has guardado. Para que eso se anime, te mostraré exactamente lo que hice. Digamos que estamos empezando aquí, tocas en “Guardar lista”. Se puede ver que es la misma interacción que tuvimos aquí cuando tuvimos que entrar la sopa de tomate a la categoría de cenas. Te lo mostraré otra vez, pero es prácticamente lo mismo. Lo que hacemos es, tenemos este prototipo para que si haces click en Guardar lista, entonces vengas aquí, y primero aterrizarás justo en esta pantalla de inicio normal sin la lista. Como pueden ver, si paso el cursor, en realidad tengo este ícono de lista todo el camino hacia la izquierda con la opacidad todo el camino hacia abajo. Es igual que siempre tan ligeramente en la mesa de trabajo. Entonces he configurado un disparador de tiempo donde aterrizará en esa pantalla pero luego después de medio segundo, se auto-animará a esta pantalla donde esto realmente está en su lugar y la flexibilización será un broche de presión, y sólo lo hará toma 0.2 segundos, por lo que será realmente rápido al igual que la interacción anterior. Esa es sólo otra forma de llamar la atención sobre algo que entra en la pantalla. Podrías fácilmente simplemente animarlo para que toques “Guardar” y te traigan a esta pantalla. Pero agregar esa interacción de la misma entrando la pantalla realmente solo impulsa el punto de inicio al usuario que, sí, lo guardaron y la aplicación les está mostrando, sí, se ha salvado con éxito y ahora vive justo aquí. Creo que esa es una interacción súper importante. Echemos un vistazo a todo el asunto y luego te mostraré todo el lapso de tiempo de mí creando esto si tienes curiosidad por cómo se veía eso. 12. Crea tu video: Todo el mundo, lo has hecho hasta el último paso. Aquí vamos a poner un lazo en tu función única de aplicación para que puedas compartirla en tu portafolio, Behance, o redes sociales. He intentado que esta última lección sea realmente simple para ti. Yo armé una pequeña carpeta de recursos por la que te guiaré ahora. Dentro de esta carpeta, tenemos dos cosas. Tenemos algunas imágenes de fondo, y acabo de descargar estas de Unsplash, así que es completamente gratis y libre de regalías. Puedes descargar algunos de los tuyos desde ahí si lo deseas, o puedes crear los tuyos propios. Entonces lo siguiente que tengo son estos marcos para iPhone. Acabo de crear uno en negro y es como un tipo de superposición 3D de arcilla. También tenemos una más plana en negro y otra más plana en blanco. Nuevamente, puedes descargar estos desde varios lugares de forma gratuita, así que siéntete libre de encontrar los tuyos propios. Pero sólo pensé que sería útil incluir estos ahí dentro. Lo que vamos a hacer es superponer este marco de iPhone sobre la parte superior de tu video prototipo para que agregue un poco de contexto y se vea realmente realista. Ahora es el momento de grabar tu prototipo en XD. Esto es realmente fácil. Todo lo que vas a hacer es seleccionar en el primer tablero de arte de tu prototipo y tocar el icono de “Play” y luego verás aquí arriba, puedes empezar a grabar. Adelante, toca “Record”. Siempre me gusta asegurarme de que lo veo empezar a contar por un par de segundos para darme un poco de espacio de movimiento y luego empezaré a interactuar con él. Yo sólo voy a pasar por ese proceso aquí. A mí me gusta ir lo suficientemente lento para que puedas ver exactamente lo que estoy haciendo, pero no tan lento que se ponga aburrido. Tómate tu tiempo. No se apresure a través de ella. Asegúrate de que eres capaz de ver todo lo que estás haciendo. Asegúrate de interactuar con todo lo que querías presumir. Impresionante. Una vez que hayas terminado, sigue adelante y deja de grabar. Entonces solo le vas a dar a eso un nombre único y guardarlo en tu escritorio. Yo lo llamaré prototipo de app. Genial. Ahora lo que podemos hacer es hacer doble clic para abrir eso en QuickTime y recortarlo. Como dije, me gusta dejar un poco de espacio de movimiento al principio y al final así que entonces es hora de recortarlo, asegurarme de que sea agradable y apretado. Para hacer eso, asegúrate de que estás en QuickTime y sólo tienes que usar los controles Comando T. Vamos a ver donde realmente comienza esto. Ahí es donde entra mi cursor. Voy a detenerlo un poco antes de eso. Entonces lo llevaré al principio y jugaré a través todo esto y lo pararé siempre que piense que es un buen momento. Perfecto, ahí mismo, recorte. También un consejo a la hora de grabar realmente tu prototipo, posible que tengas que hacerlo un par de veces para ponerte realmente suave en ello y practicar todas las interacciones, eso está totalmente bien. Asegúrate de conseguir uno bueno antes de seguir adelante. Voy a guardar eso, y sólo voy a guardarlo sobre esa versión. Impresionante. Ahora tenemos este prototipo de app, y voy a tirar eso justo en mi carpeta de activos de video, junto con los fondos y los marcos de iPhone que tenemos. Primero te voy a mostrar cómo hacer esto en Premiere Pro. Una vez que hayamos creado un nuevo proyecto, tendremos este bin de proyectos aquí abajo. Simplemente voy a importar todo lo que voy a necesitar y luego lo estratificaremos en la línea de tiempo. Primero, claro que voy a arrastrar en mi prototipo de video que acabamos de recortar. Entonces voy a encontrar un fondo que me guste. Haré éste. Entonces voy a encontrar un marco para iPhone. Voy a hacer esto más 3D buscando uno. Impresionante. Ahora como dije, podemos simplemente estratificarlos en la línea de tiempo. En primer lugar, voy a arrastrar este video prototipo principal y como pueden ver, el proyecto ha tomado las mismas dimensiones que este primer video en el que caímos. Lo que vamos a hacer es subir a los ajustes de secuencia. En realidad vamos a cambiar esto a 1920 para 1080. Entonces sólo vamos a necesitar que este video pistas sean más pequeñas. Podemos ir a escala bajo los controles de efecto y simplemente bajarlo. Es posible que tengamos que ajustar eso más adelante dependiendo del tamaño del marco que traigamos. Pero eso es bueno por ahora y como dije, sólo vamos a estratificar estos. Por supuesto que queremos la textura en la parte inferior, después queremos el prototipo, y luego encima de eso, queremos el marco del iPhone. Se ve bastante bien, pero necesitamos disminuir un poco más el tamaño del video para que encaje perfectamente en este fotograma. Entonces en realidad voy a mover la posición sólo un poco para que esté perfectamente centrada ahí dentro. Eso se ve bien. Pero quiero mover un poco el fondo. Yo quiero que este pliegues esté a un lado. Creo que eso se ve bien. Una vez que estés contento con él, entonces puedes ir a exportarlo. Todo lo que vas a hacer es subir a archivo, exportar, medios de comunicación. El atajo es Command M y luego donde diga nombre de salida, puedes elegir lo que quieras ponerle nombre y dónde quieres guardarlo. Simplemente haz eso. Aquí puedes ver todos los ajustes se ven bien, 1920 por 1080. Puedes desmarcar el audio si quieres, solo porque no hay audio. Después puedes hacer clic en “Exportar”. Ahora te voy a mostrar cómo hacer esto en iMovie, y es realmente similar. Pero desafortunadamente en iMovie, no se pueden capas más de dos pistas de video. Simplemente vamos a la capa dos, exportarla y luego traerla de nuevo y capas la tercera en la parte superior. Sólo voy a mostrarte exactamente cómo es eso, si no tienes acceso a Premiere Pro. Primero voy a caer en nuestros antecedentes ya que eso es lo que queremos en la parte inferior y luego voy a caer en nuestro prototipo. Tiraremos el prototipo encima así. Entonces sólo vamos a estirar esto hasta que llegue al final mismo de nuestro video. Ahí está este extraño efecto de Ken Burns en la capa de fondo que es solo un predeterminado en iMovie cada vez que importas una foto. Sólo vamos a apagar eso. Haremos cultivo para llenar y luego eso se ve bien. Haga doble clic en el video. Entonces si ven aquí arriba, hay una opción que dice cortar y se puede cambiar eso a imagen e imagen, que es lo que queremos porque eso nos permitirá manipular realmente el tamaño aquí. Hagámoslo, solo hazlo de este tamaño. Entonces de nuevo, quiero cambiar la colocación del fondo. Vayamos aquí y solo meternos en el tamaño. Perfecto. Entonces el pliegues aparecerá un poco más a la derecha. Creo que esto se ve muy bien. Entonces vamos a exportar esto y en realidad vamos a traerlo de vuelta para que podamos hacer lo mismo, pero simplemente estratiendo el marco en la parte superior. Haré un archivo, compartir, archivo. Perfecto. Ahora en realidad podemos simplemente ir a usar el mismo archivo, así que nos desharemos de esos. Vamos a buscar nuestra película en el escritorio y la dejaremos justo dentro. puede ver si fregamos, Sepuede ver si fregamos,se ve bien y ahora sólo tenemos que capas el marco del iPhone en la parte superior, así que cagemos eso y lo arrastraremos. De nuevo, vamos a aumentar la longitud e ir al cuadro y al cuadro en su lugar. Vamos a necesitar primero, entrar en cultivo y en forma para que puedas ver todo el asunto. Eso se ve bien y haga doble clic de nuevo imagen e imagen, y yo sólo haré eso para que encaje perfectamente. Ahora juguemos y veamos cómo se ve. Eso se ve genial. Como puedes ver, parece igual que el que creamos en Premiere solo dio un paso extra. Así es como se ve mi video final. No puedo esperar a ver el tuyo, por favor compártelo a continuación. Además, si decides compartirlo en redes sociales, siéntete libre de etiquetarme en MaddieBeard.ux en Instagram, y subrayar a MaddieBeard en Twitter. Nada me haría más feliz que ver tus proyectos y tenerlos compartiéndolos con el mundo. 13. Consejos finales: Antes de terminar esta clase, quería tomarme unos minutos solo para hablar de algunos conceptos erróneos comunes, preguntas, y cosas por el estilo, que podrían ayudarte si apenas estás al comienzo de tu carrera en UX. Mi primer consejo aquí es siempre tener un por qué detrás de tus decisiones. Como diseñador de UX, no eres necesariamente un artista, eres un comunicador y estás ayudando a alguien a usar un producto y sacar el máximo provecho de él. Siempre debe haber una razón detrás de por qué tomas ciertas decisiones de diseño. Este tipo de razones son realmente importantes para poder articular y mostrar y contar, no sólo a tus jefes, clientes, y cosas así sino también para ti mismo para entender realmente por qué estás haciendo las cosas que estás haciendo y tienes algo de tranquilidad de que hay investigación, datos, y pruebas que entran en tus decisiones porque eso es lo que hace que un producto exitoso. Mi segundo consejo es mostrar siempre tu trabajo de procesos en tus casos prácticos de UX y piezas de cartera. Los empleadores quieren saber cómo es tu proceso, y quieren saber qué entra en tu trabajo. No quieren sólo ver que puedes producir alguna bonita interfaz de usuario, quieren ver en qué se mete. Ya sea que eso sería investigación o 10 iteraciones o lo que sea. Debes mostrar todo lo que entra en tu proyecto una manera que sea extremadamente digerible para tus espectadores. No solo arrojes todo lo que hiciste en la página, sino trata de contar una historia de cómo llegaste de un problema a una solución. Mi tercer consejo es un poco técnico, pero creo que es importante y todo se trata de consistencia. Como diseñador de UX, necesitas practicar estar orientado a los detalles. Cuando se trata de tamaños de texto, consistencia de colores y consistencia de espaciado, estas cosas son cruciales. Cuando un empleador o cliente potencial está pasando por tus proyectos, realmente no deberían ver ningún error en estos aspectos. No deberían ver que decidiste usar un tipo de letra en la pantalla, pero cambiaste aleatoriamente a otro tipo de letra en otra pantalla. No deberían ver que estás usando 10 píxeles de relleno en este escenario y 25 en este escenario sin una buena razón. Siempre debes volver a comprobar tu trabajo en términos de consistencia y estar orientado a los detalles porque eso es algo que los empleadores van a buscar. Mi último consejo es probar temprano y con frecuencia. Esto es algo en lo que la gente en el campo de la UX puede ponerse de acuerdo en todos los ámbitos. Es realmente importante poner tus soluciones en manos de usuarios reales lo antes posible y a menudo como sea posible. Eso se debe a que como diseñador, tienes toneladas de sesgo y no necesariamente sabes lo que la gente va a hacer realmente. Podrás pensar que sabes lo que van a hacer, te podrían decir lo que van a hacer, pero eso no siempre coincide con lo que realmente hacen y cómo realmente se comportan con un producto frente a ellos. Incluso con proyectos de práctica o proyectos que solo son casos de estudio para tu portafolio, te recomiendo encarecidamente tratar de conseguir que alguien los pruebe. Simplemente va a ayudar a tus diseños a mejorar y mejorar cada vez que pruebes. 14. Conclusión: Llegaste hasta el final de esta clase. Aparecer y tomar acción es en serio lo mejor que puedes hacer para mejorar tus habilidades y eventualmente transitar hacia una carrera en UX. No siempre es fácil aparecer y probar algo nuevo y realmente poner todo en ello, pero siempre vale la pena. Realmente espero que hayas disfrutado de los procesos creativos y estratégicos que entran en un proyecto como este. No olvides subir tu proyecto a continuación, y siéntete libre de volver a esta clase en cualquier momento que quieras conseguir más práctica, y experiencia, y proyectos bajo tu cinturón. Ya sea que quieras crear más funciones de la aplicación para la misma idea o hacer algunas soluciones completamente diferentes, te animaría encarecidamente a que solo sigas adelante con ella. Me ha encantado compartir esta clase contigo, y no puedo esperar a ver cómo la has usado para crear algo que nunca habías diseñado antes. Muchas gracias por ver. La mejor de las suertes en tu carrera creativa.