Fundamentos del diseño de experiencia del usuario: Diseño de UI UX con Adobe XD

1. Introducción al curso de capacitación: [ MÚSICA] Hola a todos. Mi nombre es Dan Scott y soy Instructor Certificado de Adobe. Juntos, tú y yo vamos a aprender a convertirnos en un diseñador de UX usando el software Adobe XD. Ahora, este curso está dirigido a personas completamente nuevas en el software Adobe XD. Además, está dirigido a personas que son completamente nuevas en el diseño de UX en general. Comenzaremos el curso justo al principio y trabajaremos paso a paso. En primer lugar, describiremos el breve y cómo vamos a trabajar con una persona UX. Entonces aprenderás a crear alambres simples. A partir de ahí aprenderemos cómo implementar colores e imágenes correctamente en tus diseños. Aprenderás el hacer y no elegir fuentes tanto para aplicaciones web como para móviles. Aprenderás a crear tus propios iconos, botones y todos los componentes de la interfaz de usuario. Compartiré contigo todos los trucos secretos dentro de Adobe XD que te ayudarán a acelerar tu flujo de trabajo, también facilitaremos nuestras vidas mediante kits de interfaz de usuario gratuitos y plantillas preexistentes en XD. Nos bajaremos de la computadora y te mostraré cómo probar tus diseños realmente en tu teléfono. Construiremos una guía de estilo simple lista para una entrega de clientes. Nos divertiremos haciendo estas micro indirecciones, transiciones de página y animaciones. Antes del final de este curso, tendremos un prototipo totalmente interactivo hasta colaborar con otros miembros del equipo y exportar los archivos correctos listos para su entrega a nuestro desarrollador o ingeniero de software. A lo largo del curso también, cubriré algunas de las expectativas de ti como nuevo diseñador de UX. Ahora, tengo tareas a lo largo del curso para ayudarte a practicar lo que estamos aprendiendo a medida que trabajamos, y también para construir algo único para tu portafolio. Muy bien, es hora de pasar de Adobe XD cero al héroe de UX, únete a mí en clase. Ahora, opinión honesta, ¿ estás pensando, “Esa es una luz genial que tiene ahí. ¿ Qué tan guay es eso?” O [Risas] esto es todo el camino a través del curso, estás pensando, “¿Para qué es la luz rosa coja?” 2. Primeros pasos con tu proyecto Adobe XD.: Hola a todos. Bienvenido al video de inicio. Lo primero que hay que hacer es descargar los archivos de ejercicio. Habrá un enlace en esta pantalla aquí, así que haga clic, descargue los antes de seguir adelante. Además, puedo hablar muy rápido cuando me emociona. Hay un engranaje de esa manera. [ Risas] Aquí hay un pequeño icono de engranaje. Me pueden acelerar o ralentizarme, si hablo demasiado rápido, hablo demasiado rápido. También asegúrate de haber instalado Adobe XD. Vamos a estar usando la versión completa de la misma. Hay una versión gratuita, llaman, por el momento, el plan inicial. Es nuevo, podría desaparecer, podrían cambiar el nombre de la misma. Tal vez tengas que averiguarlo. Las diferencias en este momento es que es solo para uso personal, esa versión gratuita llamada starter-plan. Además, hay algunas restricciones en torno a cuántas personas puedes compartir el documento y colaborar con ellas. Pero por el momento, se puede hacer este curso 100 por ciento con él. Sí cambian eso todo el tiempo. Nos vamos a centrar en la versión principal. Podrías tropezar con un par de pequeños cambios si estás usando esa versión de inicio a lo largo del curso, pero por el momento, 100 por ciento, puedes hacerlo totalmente. Otra cosa a tener en cuenta es que Adobe XD es relativamente nuevo. Lo están actualizando una carga. Cada vez que hago un curso, entran y cambian el nombre o algo así. Si es un cambio fundamental, volveré a grabar uno de los videos. Si es un ligero retoque y es cambiar de forma o se movió un poco, haré una nota, ya sea un pequeño pop-up como este, [RUIDO] o chequear los comentarios debajo. Podría ser algo nuevo y otros estudiantes lo han descubierto. Así que solo revisa por debajo. Voy a tratar de mantenerlo actualizado tanto como pueda, pero hay pequeños cambios que se van y hacen todo el tiempo con Adobe XD. Por último, Mac versus PC, ¿ qué necesitas? No importa. Puedes hacer todo este curso con PC o Mac. Todas las funciones son iguales, la interfaz de usuario es ligeramente diferente, pero no un gran cambio. Voy a estar usando un Mac en este curso sin ninguna buena razón [Risas] aparte de que se ve genial. [ Risas] Me venden en parecer un diseñador, mira las gafas, tengo el MAC, está en el stand. Tengo la luz, la luz está apagada. [Risas] Mira esto. hace absolutamente nada a la calidad de su trabajo excepto que mi ambiente se ve genial. [ Risas] Pero Mac, BC, no importa. Vamos a subir al siguiente video. 3. Qué es Adobe XD para y lo de la programación: Hola a todos. Hablemos de para qué sirve Adobe XD. ¿ Puedes simplemente exportar el código y tener la app o el sitio web directamente desde Adobe XD? Es una pregunta que me hacen mucho. No, Adobe XD es una herramienta de diseño, y luego una vez que se hace el diseño, entonces lo pasas a la siguiente fase que es para conseguirlo codificado, ya sea en Xcode o PHP o cualquier idioma que se esté utilizando para desarrollar esa app o ese sitio web. Podrías pensar, bueno, ¿por qué no lo haces directamente en código? Esa es una forma de hacerlo. Es como construir una casa y diseñarla a la vez, es muy difícil hacer cambios. Como diseñador, puedo mover las cosas, cambiar los colores, agregar una página extra, y toma minutos u horas dependiendo de [Risas] cuántos cambios tenga que suceder. Pero hacer esos mismos cambios exactos una vez que se está codificando es algo muy grande y requiere más talento del que tengo en la codificación. Puedo hacer alguna codificación front-end básica pero nada que construya un sitio complejo. A menudo, trabajaré en equipo. Hago el lado del diseño y las pruebas y la interfaz de usuario y UX, que discutiremos en el siguiente video, luego lo entregaremos de un desarrollador o un ingeniero o un codificador o cómo los vas a llamar, y lo construirán basado en ese diseño. Serías como, bueno, parece que dos personas haciendo un trabajo. Esa es una forma en que lo miro, pero lo realmente eficiente es mis habilidades como diseñadora es tomar el breve, entender el breve, llegar a algún tipo de hipótesis. No es un buen día. Sabes la palabra que quiero decir. Acuérdate con algunas cosas que quieras que crees que abordarán este problema, y luego probarlas. Eso es lo realmente bonito de Adobe XD. Si me diste una idea ahora mismo, dijo, tengo una nueva idea para una página de registro para nuestra página web, ¿ puedes crearla? Podría tomar ese breve y podría hacerlo muy rápido. Digamos que podría hacerse en unas horas, podría burlarse de este tipo diferente página de registro en su sitio web, llevársela a clientes potenciales y conseguir que la prueben. Realmente no funciona, no está completamente integrado, pero para la persona que lo prueba, es lo suficientemente bueno para obtener retroalimentación. O puedo verlos haciéndolo o grabar la pantalla con ellos haciéndolo, y encontrar algún bicho y ser como, pensé que iríamos allí, no lo son. Todo ese proceso se realiza a través de Adobe XD. puede ver lo rápido que se puede hacer, y puedo hacer 20 versiones diferentes antes de que yo sea como, éxito, saben inscribirse, esa es la mejor manera de inscribirse. Entonces puedo dirigirme al desarrollador con una cosa y decir, ve a hacer esto para mí. Se lo entrego al desarrollador, van y lo construyen. Ese es un flujo de trabajo eficiente. Estar codificando y haciendo lo mismo llevaría mucho tiempo, y las habilidades que no tengo para hacer un proceso de registro complejo, simplemente no puedo hacerlo. [ Risas] Necesitamos un par de personas involucradas en el proceso. Eso es lo que hace Adobe XD. Se trata de prototipos rápidamente, y se puede trabajar con un cliente, pueden inscribirse, pueden decir, me encanta este sitio, y luego se lo entregas para conseguir. Tienes que tener claro con tu cliente que este proceso, pesar de que lo puedan ver, les escucharás un enlace, que en realidad no es el producto terminado. Es algo que necesita salir y desarrollarse a continuación. Ahora, podría ser como, no tengo un desarrollador [Risas] ni un ingeniero o un codificador. Puedes hacer estas cosas tú mismo. Depende del trabajo, y quién es el cliente, y del tamaño de la empresa. Diseñarás en Adobe XD, sacarás bien el diseño, y luego si no vas a salir a un programador de desarrolladores y quieres hacerlo todo tú mismo, no hay opciones de código, cosas como Webflow y Elementor y WordPress. Tengo cursos sobre muchas de las cosas de las que estoy hablando, sobre todo esas, ya sea fuera ahora o saliendo muy pronto para que puedas, como diseñador, hacer el paquete completo, entregar un sitio web completamente. Pero habrá otras veces en las que estés trabajando con un desarrollo dentro de una empresa más grande o con un desarrollador construyendo algunas cosas personalizadas. Tu papel en XD será entregar eso al desarrollador. Las cosas que puedes hacer para ayudarlos, puedes darles mucho del código de estilo, que haremos en este curso, les das todas las imágenes y los elementos que necesitan para ponerse en marcha. Puedes codificarlo tú mismo. Si estás diseñando un sitio web simple, tengo una clase sobre Dreamweaver y VS Code. El VS Code uno es probablemente el mejor para poder aprender a hacer HTML y CSS usted mismo y construir sus propias cosas, o ir por las opciones de no código. Hay mucho. Squarespace, Wix, Webflow, Elementor, los dos en los que me estoy enfocando, WordPress, no hay muchas opciones de diseño de código. Todavía lo diseñas en XD porque es rápido y genial, y luego construirlo después una vez que el cliente tenga aprobación, lo que lleva un poco más de tiempo. No exporta código a un desarrollador, pero les dará elementos que necesitan o que usarás si lo estás codificando tú mismo. Ese es este video terminado. 4. Cuál es la diferencia entre la UI y la UX en Adobe XD: Hola. En este video, vamos a hablar de UI versus UX. Si ya tienes muy claro esos términos, puedes seguir avanzando al siguiente video. Para aquellos que necesitan un poco de sólo una explicación para dejarlo claro , vamos a pasar por eso ahora. Empezaremos con UI, parte de la UI/UX. Es un término. Esos dos términos se lanzan bastante, y juntos son similares pero diferentes en Adobe XD. Está todo mezclado ahí dentro. Diseño de interfaz de usuario o diseño de experiencia de usuario es un término usado cuando estás diseñando la apariencia de un sitio web o una aplicación o lo que pase a ser. Yo solía trabajar como diseñador de interfaz de usuario durante mucho tiempo. Antes de que UX se hiciera popular y me interesara en ello, solo era un diseñador de UI. Lo que eso parecía era que recibí un breve de los clientes, investigaba lo que necesitaban, había mucha de mi propia experiencia entrando ahí, como qué debería ir a dónde y cuáles son sus a los clientes les encantaría. El cliente lo firmaría y lo conseguiríamos hecho por un desarrollador o lo haría yo mismo. Ese fui yo como diseñador de interfaz de usuario. Donde UX es diferente es que a menudo es el mismo tipo de herramientas. Yo usaría mi experiencia para hacer lo que pienso, pero es mucho más humildad involucrada con lo que creo que sería una buena solución para el cliente. Necesito pensar que esta es mi hipótesis, esta es mi lo que creo que le va a encantar al cliente, al menos a sus clientes les van a encantar, y luego ponerlo a prueba. Ahí es donde empezamos a mudarnos a UX. Es un campo grande. Voy a tratar de cubrir tanto diseño UX como pueda en este curso. Pero está diciendo, esto es lo que creo encontrar a los usuarios adecuados para probar mi hipótesis o mi diseño, y luego averiguar qué funcionó, qué no funcionó y luego iterando sobre eso. No sólo una vez, no sólo dos veces, tantas veces como necesite. Digamos que es un proceso de registro para un sitio web que te han pedido crear, o un sitio web completo o una aplicación para algo completamente nuevo. El cliente quiere algo, tienes una idea sobre cómo entregar eso. Es poner a prueba esas ideas es donde empezamos a convertirnos en diseñador de UX. Trabajar con clientes, probar, averiguar qué funciona, y luego iterando. Por eso Adobe XD es realmente bueno. Es muy rápido. Puedes iterar muy rápido, puedes volver a salir a esas mismas personas para probar sobre la marcha o hacer algunos cambios, enviárselos luego al día siguiente, volverlo a probar hasta llegar a un punto donde estás cumpliendo tus tareas que dijiste. Podría ser el momento más rápido para inscribirse, o al menos la mayor cantidad de personas inscritas. Sea cual sea tu objetivo, puedes probar con el cliente para trabajar a través de ese proceso. Esa es la diferencia entre UI y UX. El diseño de interfaz de usuario de interfaz de usuario es cómo se ve, pero luego agregar ese nivel de diseño de experiencia de usuario es donde realmente vas y prueba esto. Hay varias formas de probar, pero esa es la versión simplista. Cómo se busca la interfaz de usuario y la experiencia del usuario es más que ver con las pruebas y la iteración. ¿ Eso tiene sentido? Lo explicaremos un poco más a medida que pasamos por el curso, pero eso es UI/UX por allá. No estoy seguro de por qué, pero eso son ellos. Vamos a subir al siguiente video. 5. Lo que estamos haciendo en este curso de Adobe XD: Hola a todos. En este video, quiero mostrarles a dónde vamos. Esto es lo que vamos a hacer en este curso. Empezaremos con hacer un wireframe. Solo un simple wireframe para conseguir los fundamentos de XD debajo de nuestro cinturón. Habrá algunas transiciones, y haremos algunas pruebas en teléfonos, y construiremos algunas cosas básicas y alguna animación simple. Solo para mojarnos los pies en Adobe XD, entonces comenzaremos a construir nuestro tablero de humor, cómo presentarlo a los clientes, luego comenzar con nuestra versión de alta fidelidad. Todos estos términos te explicaré más adelante en el curso. Pero echemos un vistazo a estos. Tengo múltiples opciones para la portada. Echemos un vistazo. Como animaciones, se puede ver lo que hacemos. Echemos un vistazo. Tiene un nav, tenemos botones Buy Now, tenemos cosas funcionando, tenemos cosas funcionando, [Risas] interruptores que se encienden y apagan sin razón aquí abajo, [Risas] pero se ven geniales, con alguna animación también. Eso es lo que estamos construyendo en este curso. Quiero darte un pico temprano para que sepamos a dónde vamos. Te gusta el interruptor de alternancia, luce genial, [Risas] ¿qué hacía la camioneta? Tú también puedes construir animaciones como las mías, con la camioneta haciendo poco wheelie. [ Risas] De todos modos, saltemos y empecemos. 6. Qué es un flujo de una persona y una tención en el diseño UX: Hola a todos. En este video, vamos a hablar de lo breve, la persona, y el flujo de tareas para este curso, y lo que significan esos términos. El breve, agradable y sencillo, Scotts Green Tea. Son un pequeño negocio local en Limerick, Irlanda donde vivo, y entregan té verde a tu puerta. Ese es el breve breve. Hablemos de persona que es este próximo trozo. ¿ Qué es persona? Persona es una palabra usada para describir al cliente objetivo. En nuestro caso, vamos a leerlo juntos. Nuestro cliente ideal es una mujer llamada Zoe. Zoe está en sus 40 años, está casada, tiene un título de doctorado, doctora Zoe, y trabaja en un equipo ocupado. Vive en Limerick y está algo familiarizada con su producto, pero disfruta de pasar tiempo considerando la próxima compra. ¿ Por qué es útil esto? En primer lugar, cuando vamos a hacer nuestras pruebas de UX, no tiene sentido conseguir que haga las pruebas porque soy Dan. Vivo en Limerick pero no tengo doctorado y no soy una mujer de 40 años que esté casada. Nos permite encontrar a las personas adecuadas para estar probando esto que es súper importante. Lo que también es importante es como diseñador, lo que he tendido a hacer, sobre todo al inicio de mi carrera, diseñé para mí mismo, tratando de imaginarme a mí mismo gusto el té verde. Vivo en Limerick lo cual es bueno, pero no soy de limerick, soy de Nueva Zelanda. Ahí estaba esta desconexión donde diseño para lo que creo que sería genial, y luego estaría batallando con lo que el cliente piensa que debería querer. El cliente no tiene razón, no tengo razón, Zoe tiene razón. Se trata de poner una persona ahí fuera para que yo y el cliente podamos hablar de Zoe, y se vuelve un poco menos apasionado. No me gusta el verde o no me gusta el morado. Bueno, ¿qué le gusta a Zoe? Se puede tener discusiones de un tercero sobre esta otra persona, y se vuelve un poco menos. Estás un poco menos herido como diseñador porque estás hablando de esta otra persona que es útil. Pero también te permite tomar decisiones en torno a los tipos de fuente, tipos de colores, la forma en que se construye su sitio web o aplicación porque está algo familiarizada con el producto, pero realmente disfruta pasar tiempo considerando la próxima compra. Vamos a tener que asegurarnos de que haya mucho detalle sobre este producto. La idea aquí no es ser la app de pedidos más rápida en todo el mundo, porque eso no es lo que quiere nuestra persona. A nuestra persona le gusta pasar tiempo considerándolo. Va a haber tal vez algún potencial esto versus eso, algunas comparaciones. Esas cosas realmente han enmarcado lo que voy a estar diseñando aquí, y son sólo un par de oraciones. De lo contrario, termino diseñando tampoco para el cliente, lo que quieren, y no están siendo usuarios. Son el cliente para ti, pero no el cliente de esta aplicación o sitio web que estás haciendo. O diseño para mí mismo. O terminas, el peor lugar es diseñar para todo el mundo, cada grupo de necesidad por ahí. Diseñar para todos es diseñar para nadie. Terminas con este sitio web o una app que realmente no hace nada por nadie, [Risas] y mucho menos un grupo. Eso es lo que una persona. Te da empatía por el cliente, por cosas que tú, té verde, ni siquiera me gusta el té verde. [ Risas] Nuestra persona me deja entender, qué pasa con Zoe podría interesarse en el té verde y permitirme desarrollar su diseño y mirar y sentir y fluir en función de sus deseos y necesidades. Esa es la versión corta de persona. Puedes entrar en mucha más profundidad. Eso es algún consejo. Te voy a dar de mi consejo a lo largo de este curso es que, si hay cosas que te gustan, yo entendí que, [Risas] explicó eso. Hágalo una pequeña nota en tu cuaderno y di, voy a investigar que después este video o después de este curso. Personas es una de esas cosas en las que hay mucho más de lo que tengo mucho más de lo que tengoexperiencia y soy capaz de comunicarme en uno de estos videos cortos, así que ve a conocer más sobre personas. Pero esa es la versión corta. A continuación, hablemos de flujos de tareas. Esta es la tarea que nos han pedido diseñar. Como diseñador te han pedido dar una empresa, para quién es. Esto es lo que necesitamos para producir o burlarse en Adobe XD, es que necesitamos una página homepage/marketing. Necesitamos nuestra página de detalles del producto, sobre té verde. Necesitamos una página de pago y alguna confirmación de pedido. Este es el flujo de tareas. Un flujo de tareas es bastante lineal. De lo contrario, si no has acordado algo para lo que estás diseñando, ya sea dirigiéndote desde tu gerente de producto, o tu jefe , o desde el cliente, terminas creando demasiado. Se puede terminar diseñando la página de términos y condiciones, que para lo que necesitamos ahora y salir a las pruebas a las personas del tipo Zoe o Zoe, no es útil. Útil al final, pero no es útil para esto se pruebe en manos de los clientes. Tenemos un flujo de tareas acordado, y esto es todo para este curso. Ahora, el flujo de tareas es un término, acostumbrarse a este enfoque lineal paso a paso. Veamos otro término, flujo de usuarios. Flujo de tareas versus flujo de usuario. Este es un artículo realmente bueno. Gracias, Erika Harano. Échale un vistazo. Habrá un enlace en la pantalla apareciendo arriba abajo en la esquina inferior allí. ¿ Por qué no estamos desarrollando un flujo de usuarios en este curso en particular? Es interesante. Bueno, es útil conocer la diferencia entre los tareas y los flujos de usuario. Este tiene un muy buen ejemplo de este flujo de tareas. Encontrar una receta de panqueques. Vas a la página de inicio en la que buscas panqueques. En los resultados de búsqueda, encuentran algo para una página de recetas de panqueques súper banana. Ese es un flujo de tareas, podemos diseñar a eso. Pero un flujo de usuario es lo mismo. Mismo comienzo, mismo fin. Pero echemos un vistazo a este particular aquí. Este es un flujo de usuario. Tiene los mismos elementos. Empiezas en la página de inicio, van a los resultados de búsqueda, encuentran la receta de súper banana. Pero ese flujo de tareas original descuida todas las otras rutas a las que el usuario podría ir a llegar, digamos que necesitan llegar hasta el final aquí. ¿ Puedes ver este diagrama de flujo? ¿ Puedo acercarlo? Yo puedo. Página principal, y en nuestro flujo de tareas, asumimos que van a utilizar los resultados de búsqueda. Pero puedes ver aquí hay esta decisión. Se pueden ver los pequeños iconos aquí. Estos son nodos de decisión. Se trata de interacciones con los sitios web. Estas son páginas diferentes que terminaron. Página principal, ¿realmente usaron la barra de búsqueda? Podrías encontrar a través de las pruebas que muy pocas personas que realmente usan la barra de búsqueda. Acaban aquí abajo. No, si usan estas categorías de navegación, podrías terminar gastando mucho más de tu tiempo construyendo una opción de navegación de categoría muy clara. O alternativamente, podría ser lo contrario. Podrías construir esta increíble extravagancia desplegable de navegación de un menú desplegable. Nadie lo usa. Todo el mundo usa la búsqueda, o es una mezcla de ambos. eso están aquí estos flujos de usuarios, para encontrar callejones sin salida. Podrías estar asumiendo esto, pero la gente está tratando de encontrar algo más que no está ahí. Ahí es donde algo como este flujo de usuarios puede ser bueno al principio, cuando estás explorando un trabajo. Todavía llegas al lugar correcto y aún no estás diseñando la página de términos y condiciones, que probablemente no es importante para la aplicación o sitio web que estás haciendo en esta etapa. [ Risas] Tal vez lo encuentres muy importante. Pero en esta etapa inicial, es un trabajo más grande haciendo un flujo de usuario en lugar de solo un flujo de tareas. Pero estamos manteniendo este curso conciso y haciendo una pequeña parte del flujo. El flujo de tareas es bastante lineal, paso a paso y un flujo de usuario suele ser árbol de decisión no lineal y es una opción de prueba más completa para salir a las pruebas de usuarios. Más complejo. Más simple. Dependerá del trabajo que te hayan pedido hacer. En nuestro caso, es este trabajo. Llegamos a diseñar estas cuatro páginas. He mantenido esto bastante sencillo para que sea fácil para este curso. Pero puedes entrar en mucho más detalle con el breve, sobre todo. Podrías que te den trabajos que no tienen breves. Oye, quiero un sitio web. Ese podría ser tu breve. Podrías conseguir unos que son súper detallados. Podrían venir a través de una empresa más grande donde ha habido un equipo de personas, investigadores de UX. Es posible que tengas líderes de equipo, y gerentes de producto, y, no sé, VPs y todo el mundo trabajando en un proyecto y te entregan un proyecto bastante detallado que hacer. Para mí, muchas veces estoy trabajando con productos pequeños, pequeños clientes, y muchas veces me dan la opción no breve, o muy limitada. No lo sé. ¿Estás viendo aquí dentro que, con una persona, y un breve, y un flujo de tareas, sé lo que tengo que hacer ahora. Se hace mucho del arduo trabajo. A pesar de que es bastante simple mirar en la pantalla, está muy claro lo que va a conseguir el cliente y lo que necesito entregar. Si no lo haces y eres nuevo en esto, es difícil de hacer cuando eres nuevo, pero debes pensar en retroceder al cliente o a tu jefe, ¿qué es, quién es la persona? ¿ Cuáles son las páginas reales que estoy diseñando? ¿ Es un flujo de usuario, flujo de tareas? ¿ Qué aspecto tiene? La otra última cosa que se descuida de aquí son cosas como valores de marca y declaraciones de misión. No sabemos mucho de Scotts Green Tea. No sabemos, ¿ todos son de eficiencia? ¿ Les está sirviendo su robot? ¿ O se trata de volver al agricultor y el agricultor obtiene los precios más altos, pero al agricultor se le paga un salario justo? Ese personal es súper importante. Averigua, si estás trabajando para una empresa más grande van a tener una declaración de misión y valores, directriz, y mucha documentación para darte una idea del negocio. Para una empresa más pequeña, va a ser mucho más difícil. Probablemente sólo va a ser una conversación con el dueño sobre lo que quieren hacer, lo que están tratando de hacer, y conseguir un poco de comprensión de esa manera. Para mí ahora como diseñador de UX más maduro, viejo [risas], voy a empujar hacia atrás en todas estas cosas porque sé que mi vida es realmente dura, si no estoy realmente seguro para quién diseñar. Si estoy muy claro quién es el mercado objetivo, quién es la persona, y lo que estoy destinado a estar haciendo, puedo noquear esto claramente, puedo meterme en pruebas muy rápido y entregar un impresionante producto. Todos mis problemas a lo largo mi carrera ya sea como diseñador gráfico, o artista de motion graphics, o como retoque fotográfico, o diseñador web, todas estas cosas que he hecho, mayoría de los problemas provienen de expectativas poco claras, ya sea a través de un breve. Es principalmente porque me gusta asustarme. [ Risas] Se pone bien empujando hacia atrás. Eres, ¿puedes hacer este trabajo? Lo estás, está bien. Te vas y luego te das cuenta de que no tienes suficiente información al respecto. A medida que tengas más experiencia en UX Design, lo estarías, hay un gran agujero en mi entendimiento y regresa al cliente temprano y rápidamente para que no sea el día antes de que esté destinado a ser entregado, pero comenzar las conversaciones con estas cosas como breves, personas, y flujos de tareas. Wow, eso fue uno largo y un poco de viento largo. Empieza a mostrarme, “[Risas] Es como hacer clic en los botones, Dan”. Haremos eso. ¿ Estamos haciendo eso a continuación? Creo que podríamos ser muy pronto por lo menos. [ Risas] Siguiente video. 7. Proyecto de clase 01: crea tu propio breve: Hola a todos. Es tiempo de proyecto de clase. No consideres esta tarea. Es como la tarea, pero es una forma de seguir en este curso, no sólo ciegamente seguir y ver videos consiguiendo que hagas cosas. Lo que he hecho es, me estoy asegurando que todos sean un poco únicos. En tus archivos de ejercicios, verás que ahora no hay mucho ahí porque estoy construyendo el curso, pero van a ser algo llamado proyectos de clase. Abre eso y se verá algo así. Te dirá lo que debes hacer para este proyecto de clase en particular. Este es bastante fácil. Está generando tu propio breve y persona. He hecho un sitio web. Bueno, el equipo de Bring Your Own Laptop ha hecho un sitio web para usted. Se llama randomprojectgenerator.com. Ve ahí y genera tu breve. Básicamente, una vez que estés aquí, quiero que vayas a la que dice Adobe XD , ingresa tu nombre. Usa tu apellido, el nombre de tu amigo, el nombre de tu mascota, algo para darle a tu negocio un nombre único. Firmando en el mío. Scott es mi apellido, eso es lo que voy a usar, y luego ingresa a tu ubicación. Estoy viviendo en Limerick y luego golpeamos “Generar Proyecto”. Ese es el producto que vas a estar vendiendo. Estamos en el tema de la entrega de comida. En este caso es el queso de Scott. Viste en el último video que hice, ya lo he hecho y terminé con el té verde de Scott. Eso fue todo. El tuyo será diferente. Será único, excepto el nombre y el lugar donde se lleva a cabo el negocio. Está en tu zona porque sabrás cómo va a apoyar y ser la zona. Pero por aquí esto será todo diferente. Ahora, si eres como, yo no estoy haciendo queso, puedes golpear “Retry”, pero sólo una vez. Podrías decidir patatas fritas, esa es la que quiero. No más. Sabes que paso y solo sigo golpeando “Retry” y encontrando uno, usa el primero o el segundo. No lo golpees la tercera vez. Habrá problemas. Una vez que tienes tu breve, es realmente útil cuando obtienes algo de lo que no estás seguro. Si te has gustado, nunca he comido patatas fritas en mi vida, ese es un gran producto con el que trabajar, porque vas a tener que entender realmente a Sebastian y cómo es finales de sus 20 y averiguar lo que le gusta como freelancer. Una vez que tengas tu breve, haz una captura o haz clic en este “'Descargar como PNG”, y eso es con lo que vas a trabajar junto con este curso. Vamos a construir lo mismo, pero lo que no quiero hacer es tener a todos que luzcan igual que yo con té verde. Vamos a seguir a todos. Vas a escoger imágenes y fuentes y colores que sean diferentes a los míos porque quiero que construyas algo genial para tu portafolio al final de esto. Eso es sólo para que cuando estás presentando la tarea, no todos estamos haciendo exactamente lo mismo. Ahí es un poco de creatividad. Dice hacer eso. Dice que ingrese su nombre y ubicación, guarde el escrito en su computadora y los entregables. Va a haber entregables en todos estos. Este es solo subir tu JPEG o tu captura de pantalla PNG a las asignaciones o los proyectos o a la sección de comentarios de este sitio web. Eso es todo lo que tienes que hacer, nada más. Te veré en el siguiente video. Consigue tu calzoncillo, emociona tu queso o lo que sea. Te veremos en el siguiente video. 8. Qué es lo Fi Wireframe el Wireframe la alta fidelidad en Adobe XD: Hola a todos. En este video, vamos a hablar de LoFi versus HiFi o, aka, wireframes versus versiones de alta fidelidad o bonitas. Un wireframe es donde vamos a empezar en este curso y donde debes comenzar como diseñador. Podría llevarme unos minutos burlarme de esto. Algunas cajas simples y puedo ponerlo en manos de alguien para probar e iterar realmente rápidamente el poder del diseño de UX, un MVP, el Producto Mínimo Viable, y sacarlo y ponerlo a prueba antes que tú pasar edades haciendo todas las cosas donde terminas gastando medio día kerning [Risas] o liderando o recogiendo imágenes. Esto no me dará una prueba de mejor experiencia. Esta versión no me dará un resultado de prueba mejor y más rápido de mi usuario que esta voluntad. Esto, súper rápido y fácil, hacer ajustes mientras están sentados allí. También saca mucho de la cuando estás haciendo tus conceptos iniciales, entregando algo como esto al cliente, lo pueden usar, lo pueden probar, pero no vuelven con extraño cosas como, “Oye, esa es la fuente equivocada”, a, “no sé dónde está el color”, porque al inicio del proceso ese no es nuestro objetivo es no escoger los colores, es asegurarme las funcionalidades correctas. Vamos a conseguir el núcleo justo antes de empezar a pasar tiempo en liderar y kerning. Colores, no lo hacen o les gusta, se puede ver que habría sido eliminado texto. Este es mi mensaje de mercadotecnia para que no estemos inmersos en : “Oh, no podemos decir eso”, o, “nos gustaría llamarlo otra cosa”. Sólo estamos obteniendo la funcionalidad de este trabajo, que es un flujo de tareas y el flujo de tareas es muy simple. Sólo estamos haciendo estas cuatro cosas. Una vez que tengamos bien la mecánica, entonces podemos pasar tiempo. Sigue siendo importante, pero no es importante al principio. Omita el trozo wireframing del proceso a su juicio. Ahora, ese es el wireframe que hice. Mira esquinas redondeadas de lujo. [ Risas] Intenta mantenerte alejado. Espuma aburrida, colores aburridos. Cambia a blanco y negro, sin esquinas redondeadas. Esta no es la única mirada. Echemos un vistazo. Depende de ti averiguar qué requiere el trabajo. ¿ Va a ser súper simple, o va a ser un poco más avanzado? Sigue manteniendo fuera el diseño. Pero se le puede decir a éste gastando mucho más tiempo haciendo que esta cosa se vea bien. No todos los wireframes se crean iguales. Estoy adentro para el conseguir que se haga rápidamente y fuera a menos que vaya en mi cartera. Entonces haré que el wireframe luzca bonito, y compro bonito me refiero a algo más como esto donde hay un poco más de diseño metido en él, mucho más tiempo con liderar y kerning, pero es un pieza de cartera. Solo tienes que tener eso en cuenta. Wireframes o baja fidelidad, alta fidelidad, y aquí abajo, esta es mi versión de alta fidelidad o buena imagen o visión HiFi. Esto es lo que estamos haciendo en la clase. Va a ser divertido. [ Risas] Aquí tienes un ejercicio divertido. De todos modos, eso es todo. LoFi, HiFi. Vamos a subir al siguiente video. 9. Tableros de arte y cómo de ancho debería estar mi sitio web o aplicación en Adobe XD: Hola a todos. En este video, vamos a dibujar cuatro rectángulos blancos [Risas], va a ser emocionante. Vamos a explorar qué son las mesas de trabajo. Hablaremos de tablet móvil o escritorio primero diseño y algunos atajos básicos de navegación para ponerte en marcha, pero vamos a hacer algunas casillas. Para empezar abre Adobe XD, y vamos a empezar ya sea con un nuevo archivo que te dará solo un archivo de inicio genérico o puedes escoger de uno de los presets aquí. Sólo te lo mostraré. Hago clic en “Nuevo Archivo” y por defecto es lo que crea que quieres. Va a decir: “Oye, tienes una página que es un tamaño de sitio web ”, y podrías estar como, “Eso no es lo que quiero”. Archivo cerrarlo, y lo que vamos a hacer es escoger de los presets. Cosas móviles, cosas web, tamaños de redes sociales, mucho diseño se está haciendo en Adobe XD en lugar de tal vez algo como Illustrator porque la gente se está acostumbrando a ello. Es bastante rápido. A menudo tienes muchos de tus colores y activos ya en Adobe XD, por lo que la gente está haciendo muchas cosas en redes sociales, trabajos de diseño en XD. No hay nada de malo en eso, y obviamente tienes un tamaño personalizado que puedes escribir. Ahora, voy a empezar con móvil para este marco de alambre, y aquí arriba a ti. Voy a empezar con el iPhone 8; este tamaño SE, porque es sólo un tamaño realmente genérico en este momento. En el futuro algunos de estos tamaños altos o más delgados, es posible que estés viendo esto y podría haber un iPhone 50. Simplemente Google cuál es el tamaño de teléfono más común y empieza a trabajar con eso. Este de aquí es bueno para los tamaños de Apple y Android, así que voy a empezar con el iPhone 8. Ahora, lo que podemos hacer aquí es que podemos hacer click en el nombre a lo largo de la parte superior. Vamos a hacer clic, haga clic de nuevo en. Por aquí, ¿puedes ver esto ajustar? Es contextualmente sensible lo que significa que cambia dependiendo de lo que hayas seleccionado. Si necesitas cambiar el tablero de arte, haz clic en él. Se puede decir por aquí en realidad lo necesito para ser este nuevo tamaño que es de 400 píxeles de ancho, poco más ancho. Voy a deshacer eso, no es lo que quiero. Deshacer es Editar. Voy a usar Command Z en un Mac, Control Z en un PC para el resto de este curso pero probablemente sepas Deshacer. La otra cosa que puedes hacer es dibujar tu propio tamaño personalizado. Te metes aquí, es el equivocado. Puedes hacer click sobre él; dar click en el nombre, pulsa “Eliminar” en tu teclado y vas a esta matriz blanca genérica; nada de tierra, y puedes ir por aquí. Esta es tu herramienta de tablero de arte. Tu herramienta de tablero de arte; pincha sobre ella, y obtenemos todos esos valores predeterminados. Otra vez por aquí están todos dispuestos de esta manera. Hay relojes en sus redes sociales, pero digamos que queremos volver al iPhone 8 SE. Aquí vamos. Esos son los predeterminados, solo puedes arrastrarlos hacia fuera. Podrías estar diseñando algo que necesita ser arrastrado. Simplemente puedes hacer clic y arrastrar estas cosas como quieras. Haga clic en los nombres en la parte superior y puede eliminarlos. Por alguna razón la mía se abre no lo suficientemente amplia. Ahora solo una nota sobre escoger el tamaño, escoger genérico o escoger lo que tiene tu cliente. Si tu cliente va a estar probando esto y él o ella tiene un tamaño de teléfono específico, puedes decir que tienen un iPhone 13. Diseña ese tamaño porque van a poder usarlo fácilmente. Más tarde cuando vaya a la codificación y su desarrollador lo esté construyendo plus con su ayuda con un diseño receptivo, en realidad se ajustará a diferentes tamaños de teléfono. Tienes que escoger una talla para empezar, y cuando entra en desarrollo se ajustará a diferentes tamaños de teléfono. Lo que queremos hacer ahora es que queremos renombrarlo. Lo que podemos hacer es donde dice iPhone 8 o lo que tengas encima, haz doble clic en eso y vamos a cambiar a éste. Esta va a ser mi página de inicio/marketing. Voy a entrar en mi teclado que podamos nombrar nuestras mesas de trabajo. Las mesas de trabajo es sólo otra palabra de decir nuestra página. Ahora puedes verlos por aquí. Si no puedes podrías estar en esta cosa, o esa cosa, o esa cosa, así que vamos a estar en esta opción de capa por aquí y me está mostrando mis diferentes mesas de trabajo. Ahora vamos a crear cuatro páginas. Bueno antes de seguir adelante, quiero barajar mi página. No vamos a meternos en demasiados atajos desde el principio, pero hay algunos esenciales. Mantener pulsada la tecla Barra espaciadora te da esta pequeña mano, y luego haces clic y mantén presionado, y arrastra el ratón. Mantenga pulsado “Barra espaciadora” , haga clic, mantenga presionado y arrastre porque lo que quiero hacer es hacer clic en la parte superior de esto. He hecho clic en toda la mesa de trabajo. Voy a ir en un Mac, Comando C, Comando V; copiar y pegar. En un PC es Control C, Control V. Haga doble clic en él por aquí, y voy a llenar mi diferente flujo de tareas. Puedes consultar el flujo de tareas, está en nuestros Archivos de Ejercicio aquí. Estamos construyendo esta : Página principal, Detalles del producto, Pedido y Confirmación. El siguiente se va a llamar Detalles del producto. Copiar pegar. [ Risas] Si haces clic una vez con tu herramienta de mesa solo la arroja en donde se sintió así, así que voy a golpear “Eliminar” en mi teclado. Barra espaciadora, [inaudible]. Haga doble clic aquí. Esto se llama, no puedo recordar. [ Risas] Déjame chequear, y luego el último. ¿ Nos metemos en demasiados atajos? O haz un pequeño atajo más. Dos antes en el curso en espera. Con tu herramienta de mesa de trabajo seleccionada, puedo arrastrar esto alrededor igual que un objeto, como un cuadrado. Voy a deshacer para volver a moverla. Puedo mantener pulsada mi tecla Opción en un Mac, tecla Alt en un PC, y simplemente arrastrar otra versión de la misma. Se puede ver si me acerco a ella, hay algo de la magia de XD. Mira esto. Lo consigues cerca de aquí. Dice: “¿Te gustaría alinearte y te gustaría estar en el mismo espaciado?” Estás como, “Sí”, el mismo espaciado. [ Risas] Me parece emocionante. Nuestro último se llama Confirmación. ¿ He escrito eso correcto? No he [Risas]. Volveré enseguida. Estoy de vuelta, no puedo deletrear. [ Risas] Si has hecho alguno de mis otros cursos, ya lo sabes pero es confirmación. Ahí vas. nuestras cuatro mesas de trabajo. No encajan del todo. Mi técnica de barra espaciadora; recuerde mantener presionado “Barra espaciadora”, haga clic y arrastre. Acercar es otro atajo, el último lo prometo. Mantenga pulsada la tecla Comando en un Mac, la tecla de control en un PC y presione menos en el teclado para salir. Probablemente puedas adivinar cómo entrar, es plus. Mantenga pulsada la tecla “Comando” en Mac, “Control” en un PC y presione más o menos. Hay tableros inteligentes. Ahora vamos a estar enfocándonos en el móvil. No hay razón por la que ahora no pudieras agarrar tu herramienta de mesa de trabajo, y decir en realidad voy a ir a averiguar tamaño de mi tablet y estoy usando el iPad Pro. Voy a empezar a hacer esto, voy a trabajar en el iPad. Podrías decidir en realidad que voy a mover eso aquí abajo. Recuerda agarrar el nombre y arrástralo. Haga clic y mueva la cosa alrededor , y yo podría hacer lo mismo. Puedo copiar y pegar, y construir una Página de inicio, Detalles del producto, Confirmación de Pedido, y empezar a construir la tableta, y luego la versión de escritorio. En este curso haremos una versión de escritorio, y probablemente se esperará que hagas una versión de tablet y escritorio para tu maqueta dependiendo. Si es una aplicación para un teléfono, entonces no. No necesitas una versión de escritorio. Lo que estamos haciendo aquí es un sitio web móvil, no una aplicación. Va a tener que haber una tablet y una versión de escritorio porque queremos que nuestros clientes puedan pedir nuestro queso o té verde ya sea desde su computadora, o su teléfono, o su tablet, pero por ahora sólo vamos a apegarnos al móvil. Bueno apenas brevemente, estamos utilizando el primer diseño móvil. Lo llamamos móvil primero porque vamos a diseñar y poner nuestro esfuerzo en diseñar primero este diseño móvil, luego adaptarlo para tablet y escritorio. Lo haremos bueno para esos, pero estamos diseñando el móvil primero porque sabemos que a través de la investigación de usuarios, a través una buena conjetura que la mayoría de la gente va a estar ordenando vía su teléfono . Estamos diseñando primero para eso. Si estás diseñando una aplicación de escritorio y sabes que las personas acceden a tu sitio o a este producto a través de escritorio primero, luego haz primero un diseño de escritorio. Estaré trazando esto en versión de escritorio. Cuando digo escritorio, me refiero a estos de aquí; escritorio web. Si no estás seguro de qué diseñar para que sería realmente común hacer esto aquí; 1366, pero también google. ¿ Cuál es el tamaño de escritorio más común en este momento? Google te dirá, puedes diseñar para eso. Lo último que vamos a hacer es nombrarlo, lo contrario vamos a tener sin título. Hombre, terminarás con un montón de intítulos. No te preocupes. Lo vamos a nombrar haciendo doble clic en él en la parte superior aquí. Vamos a darle un nombre, voy a llamar a éste. No lo llamo Checkout, lo llamo Scott por el nombre del cliente. Scott Tea es nuestro nombre de cliente. Así es como lo nombro. Puedes nombrarlo todo lo que quieras excepto que lo llames Final. [ Risas] Final V1, V2, completa. Lo has hecho antes [Risas]. Dale algo bonito e iterativo. En lugar de llamarlo así, estoy llamando a esto mi flujo de tareas de Checkout porque eso es lo nos han pedido que diseñemos y va a ser V1, o A1, o lo que quieras usar. Cuando hacemos cambios significativos podemos cambiarlo a V2, y simplemente seguir actualizándolo de esa manera. No lo llames Final. Vamos a golpear “Save” y estamos fuera. Eso va a ser. No voy a establecer la tarea adecuada. Sólo quiero que dibuje unas cuatro páginas. No voy a revisarlo, pero nombrelo con el nombre que tienes del generador de proyectos aleatorios. Nombralo y ten tus cuatro páginas aquí listas para el siguiente video. No te saltes la tarea, así es como terminarás recordando estas cosas por más tiempo. Te veré en el siguiente video. 10. Trabajar con tipos de letra en tus esquemas de página XD: Hola mi amigo. Si pensabas que cuatro rectángulos blancos eran emocionantes, esperas cinco bits de garrapatas. [ Risas] Vamos a mirar los fundamentos del tipo. No vamos a meternos en las malas hierbas. Todo que ver con tipo en este video. Vamos a conseguir lo suficiente para ponernos en marcha. Muchas cosas que ni siquiera voy a explicar porque es cómo arrancar y subrayar, haz clic en el botón de subrayado. Eso le dará las cosas extrañas para Adobe XD. También tenga en cuenta que nos meteremos en las malas hierbas con ellas. Cuando digo malas hierbas, entrar en los detalles de tipo más adelante en el curso. Hay otro video llamado Font and Text Level 2 más adelante en el curso donde nos metemos un poco más de detalle. Sólo quiero que nos vayamos rápido y sí, vamos a entrar en la introducción al texto en este video. El tipo herramienta, es esta de aquí, parece una T. mayúscula Tú lo sabías. Atajos en este curso, puedes ver si pasas cursor por encima de cualquiera de estas herramientas, estas y con bastante frecuencia, aprenderás el atajo. Esa T, se puede ver entre los paréntesis ahí, es para la herramienta de tipo. V es una muy común, te hace volver a subir a la herramienta de selección aquí. Porque select comienza con V. Pero algunos de ellos son un poco más rectángulo Alfa. Ya sabes, esto va a ser círculo, no, será elipse, E para elipse. T para la Herramienta Tipo. Hay dos formas de poner en cuadros de texto. Haga clic una vez y obtendrá una caja que continúa para siempre. Si vuelves a la Herramienta Tipo y haces clic y arrastra un cuadro aquí abajo, y si haces clic y arrastra el cuadro, tiene lo que se llama ancho fijo y significa que cuando escribo, se romperá y bajar a la siguiente línea. Bueno para el texto de párrafo. Mucha copia, y esto es bueno para cosas genéricas, botones y botones [Risas]. Hacemos muchos botones. Puedes cambiarlos. Tienes que seleccionar primero el cuadro así que agarra tu herramienta de selección, haz clic en el cuadro una vez, y puedes ver en realidad que ahora eres de ancho automático. Ahora cuando empiece a escribir en él, seguirá para siempre. Lo mismo con este de aquí. Selecciónalo con tu herramienta de selección. Da click en este tipo y di en realidad ahora eres auto fija altura o altura auto, lo siento. Significa que llegará hasta el final y luego se romperá. Esos son esos dos. Lo que necesitamos ahora es que necesitamos un par de cosas. Voy a hacer click en eliminarlos. Voy a agarrar mi T para mi herramienta de tipo, luego hago clic una vez. Vamos a poner en nuestro logo de placeholder, así que tenemos a Scott. En realidad voy a hacer capiteles, té verde Scott, así que escribe en tu versión. Lo que vamos a hacer es agarrar mi herramienta de sección, moverla aquí arriba. Cuando estás diseñando, sobre todo si la empresa es nueva, posible que no tengan un logotipo. Simplemente escribirlo, tener sólo una versión de texto. No seas la mitad tratando de diseñarlo en esta etapa. La otra cosa es que si la empresa ya tiene un logotipo, solo intenta usar una versión en blanco y negro del mismo, para que no estés introduciendo color en esta etapa. Wireframes deben ser simples para probar, rápidos, sin color, y hablando de eso, tampoco se te permite elegir fuentes. ¿No hay fuentes? Pero no estoy listo para mentir ahora, quiero hacer fuentes. Se llega a hacer fuentes más adelante cuando hagamos nuestra versión de alta fidelidad, que hablaremos más adelante. Pero en esta etapa se quiere sacar cualquier diseño de ella. Se trata de funcionalidad para pruebas, así que incluso si realmente te gusta Brush Script, no puedes usarlo aquí, tienes que escoger algo sencillo. En términos de simple, mío es incumplido con Helvetica Neue porque estoy en un Mac. Pero algo así como si no estás seguro lo que es genérico de buen aspecto porque Arial, ni siquiera me gusta la Helvetica. No se lo digas a nadie. Creo que he cometido un pecado de diseñador, pero la Helvética es aburrida. Roboto, sé que no es tanto [Risas]. Menos aburrido, pero es sólo una fuente realmente buena para usar para wireframes, para cualquier cosa, cualquier copia del cuerpo. Está claro, es muy accesible, es gratis si no lo tienes en tu computadora ahora puedes ir a descargarlo. Es la nueva Arial, no lo sé, me gusta más. Otros buenos son Open Sans es una fuente genérica realmente común. Open Sans, Source Sans, Source Sans Pro. Todos estos se pueden encontrar en línea. Estoy bastante seguro de que todos son gratis, podrás descargarlos desde algún lugar. Lo que no quieres hacer es cuando empieces a hacer esto, probando tus wireframes, lo que va a hacer muy rápido al principio, es que no quieres, sobre todo cuando tienes un cliente y son como , oh, no es la fuente corporativa ni hey, no podemos usar eso o si has agregado carácter a las fuentes en esta etapa, puedes terminar en conversaciones con el cliente sobre qué tipos de fuentes, éste no es el correcto, y te quitará el tiempo para ser rápido. Manténgalo simple. Elige solo una fuente, tienes un límite de fuente. Puedes jugar con el blanco. Eso tiene que ver con aquí abajo, tan semi audaz, negro audaz. Es por eso que me gusta Roboto. Roboto. Echemos un vistazo. Roboto es realmente útil para, tiene muchos de estos y en realidad se puede conseguir más a Roboto también. Open Sans también es bastante decente. En cuanto a cursiva, adelgazar, y escoger algunos médiums. [ Risas] Estaba diciendo que no escojas fuentes aquí. Yo yendo tras diferentes fuentes y sus diferentes pesos. De todos modos. Pon tu título en la parte superior. Voy a escoger a Roboto para mi uno. Tú eliges lo que quieras. Hice clic una vez y conseguí éste. Voy a añadir otro poco de texto aquí y lo voy a hacer un ancho fijo porque este va a ser mi mensaje de marketing y quiero que se sienta dentro de este espacio. Voy a escribir, este es mi marketing. Recuerda la última fuente que estabas usando, así que voy a tener que cambiar esto. Este es mi mensaje de mercadotecnia. Voy a seleccionar todo el texto, arrastrar un cuadro alrededor de él. Voy a ir a Roboto y no me voy a ir atrevido. Sólo voy a ir a la mediana. Sigo diciendo ancho fijo. Se llama altura automática. Este es el que se llama tamaño fijo. A Adobe le gusta llamarlo diferente en diferentes programas. El segundo en, la altura auto, no voy a cubrir todas las cosas correctamente como tamaños de fuente aquí. Ya sabes escoger tamaño de fuente, voy a escoger 48. Eso es demasiado grande [Risas]. Voy a centrarlo, trabajar su camino a través de él. Pequeños iconos lo regalan. Este de aquí es el espacio entre letras. Si lo abro hasta 20, se puede ver el espacio entre letras abierto, voy a deshacer. Este es tu líder o el espaciado de líneas. Por el momento voy a ir a abrirla un poco. Este es el espacio después de los párrafos. Hablaremos de estas cosas más adelante. Puedes hacer clic en estos, es terriblemente difícil. Subrayamos. [RISAS]. Lo único que estás recogiendo fuentes aquí es que no estás destinado a estar peinando ellas. A pesar de que he ido y hecho un poco, es que estás recogiendo tamaños porque este es mi principal mensaje de marketing. Éste tal vez quiero ser un poco más pequeño. Vamos a bajar a 16. Voy a hacerlo audaz. Ahora estoy tomando decisiones sobre lo grande que debería ser esto. Esto se reduce a la legibilidad, lo fácil que es de leer, tal vez temas de accesibilidad. Voy a decir accesibilidad a lo largo de este curso. No lo cubrimos con mucho detalle, pero es asegurarnos de que la gente realmente pueda leerlo. otro botón es lo suficientemente grande. En este caso, ¿este mensaje de marketing es lo suficientemente grande? Totalmente lo es, pero ¿es lo suficientemente grande en términos de hacer llegar mi mensaje de marketing a través? Ahora, puedes pasar mucho tiempo diseñando esto, pero ¿qué pasa cuando me alejo? Si estás diseñando de esta manera, vas a terminar recogiendo tamaños de fuente a este tamaño. Ahora lo que se podría pensar que va, voy a hacer click en esto, voy a ir 100 por ciento. Perfecto. Esto dependerá de dónde se muestre. Si cojo mi teléfono aquí, no me puedes ver, pero tengo mi teléfono, lo estoy recogiendo, poniéndolo desde mis monitores ahora y es aproximadamente el doble del tamaño demasiado grande. Sé si sigo sosteniendo mi teléfono junto a él y voy mando menos o control menos. Eso es correcto. Cuando estoy tomando decisiones de diseño ahora acerca es esto lo suficientemente grande? Si estoy al 75 por ciento, sé que estoy cerca. El tuyo será diferente, el tuyo podría estar en un 100 por ciento. Tal vez tengas que ser mucho más pequeño. Depende de tus ajustes en tu monitor. Sin embargo, lo que realmente es cierto es que deberías estar probando en el dispositivo. Vamos a hacer eso también en esta clase, no en este momento, pero te mostraré cómo puedes publicar esto en tus teléfonos. En realidad se puede tomar decisiones realmente buenas. Sólo vamos a entrar en el estadio de baile aquí. Un par de otras cosas para ponernos marcha es si copio y pego texto, así que lo selecciono con mi herramienta de selección en un comando Mac C, comando V, o control C, control V en un PC, notarás que realmente no hizo nada. Hay dos versiones de ella, ahí está té verde Scott, ahí está el té verde Scott, pero están uno encima del otro, sólo para que lo sepas. No los pone a un lado. Este de aquí se va a llamar mi tiro de producto. Voy a tener una foto aquí arriba. Estamos usando el texto como placeholder por el momento. Moviendo esto hacia abajo. Te darás cuenta también, a, esto está centrado porque lo hicimos antes. Alinear a la izquierda centrada. Te darás cuenta que en XD, cada vez que arrastro algo por ahí usando mi herramienta de selección, ves, mira eso, realmente quiere estar en el medio de la página o en el doble medio de la página. Súper práctico. Voy a poner eso ahí. Ahora quiero texto aquí abajo para botones así que en lugar de copiar y pegar ese mismo truco que hicimos por recordar duplicar esto. ¿ Quién recuerda lo que fue? Eso es correcto. Mantén presionada la tecla Opción en un Mac, tecla Alt en un PC, cuando estás arrastrando algo. Puedes duplicarlo en la misma instancia que moverlo. Este va a ser mi Comprar Ahora. Voy a duplicar esto. Este va a ser mi botón Saber más. Muy bien, eso será todo por ahora. Otras cosas interesantes que son bastante específicas para Adobe XD. Voy a acercar. Echemos un vistazo a decir té verde aquí arriba. Tienes este pequeño punto blanco abajo por la parte inferior para un fijo, sigo llamándolo ancho fijo. Se llama altura automática, ¿no? Caja de altura auto. Recuerda el que irrumpe en la siguiente línea. No tienes los mismos controles, tipo de hacerlo. Esto tiene cuatro puntos blancos para que puedas expandirlo. Éste porque hicimos clic una vez y se llama anchura Auto, tiene un punto y eres como, Oh, ¿qué hace? Hace un par de cosas, es un tipo extraño. Acercar. Puedo arrastrarlo hacia abajo y hacia arriba y lo redimensiona. Interesante, en lugar de usar esto podrías ir, ahí vas. Lo otro que hace es en lugar de hacer clic en él, mira esto. Si me muevo por ahí. ¿ Ves el cambio de icono? Demasiado lejos, a la derecha, el lugar mágico. En realidad se puede rotar. hacer todas esas cosas por aquí. Simplemente puedes decir que necesito que sea 45 grados y teclearlo. O simplemente puedes estar flotando ahí arriba. Eso es lo que hace. Puedes hacerlo aquí abajo, selecciona en éste. Si arrastro la parte inferior, no hace el tamaño, pero sí hace la rotación. Aquí vamos. Muy bien. Prometí no meterme en las malas hierbas de éste y me metí un poco en las malas hierbas, pero aquí tienes. Muy bien, eso es todo para el texto. Entrémonos en el siguiente video. 11. Rectangles, círculos, botones y esquinas redondeadas en Adobe XD: Hola, bienvenidos de nuevo. Todavía estás aquí, lo cual es una buena señal. Este video, vamos a ver dibujando rectángulos. Vamos a sumar esquinas redondeadas a los bordes, dibujaremos elipses, y algunos de los atajos se lanzarán aquí para la navegación también. No te saltes si crees que puedes dibujar un rectángulo con lo mejor de ellos, y hay algunos atajos de navegación que te mostraré a lo largo. Vamos a saltar. Para dibujar un rectángulo, no es de extrañar, golpeas la herramienta rectángulo, y luego simplemente arrastrarlo hacia fuera. A menudo cuando estás haciendo un wireframe, realidad no pondrás las imágenes. Sólo estoy poniendo un marcador de posición para las imágenes. En este caso, va a ser una caja. Nos va a llevar al ordenamiento de capas porque he dibujado una caja, y por defecto, todas las cajas tienen un relleno blanco y este borde gris. Puedes apagar el relleno para ver el texto, pero lo que queremos aprender es cómo jugar con el orden de capas. Aquí, es que voy a agarrar mi herramienta de selección, y quiero moverla detrás del texto. Hay alrededor de mil formas de hacerlo. Te voy a mostrar las formas comunes. Sólo tienes que saber que a lo largo de este curso, te voy a dar ya sea lo más apropiado a tu nivel o de la forma más común. Va a haber cuatro o cinco [Risas] otras formas de hacer las cosas en las divisiones del software. Si descubres de alguna otra manera y estás como, “¿Por qué Dan no me mostró así?” Mi mal. [ Risas] Voy a tratar de darte la mejor manera, y/o la forma en que sea apropiado en este nivel del curso, y nos vamos a avanzar más a medida que avanzamos. Quiero trasladar esto a la parte de atrás. Probablemente la forma más fácil es hacer clic derecho en él y decir, Enviar hacia atrás, y está detrás de este texto. Te voy a enseñar un par de otras formas. Simplemente haznos trabajar y hacer cosas en XD, así que voy a deshacer. Lo que también puedes hacer es esta la forma de formato largo. Aquí arriba puedo ir a objetar, creo que lo es, y luego ir a Organizar, y enviarlo de vuelta. Es lo mismo, hace el mismo trabajo. La otra forma es que voy a deshacer está por aquí en mi panel de capas. Se puede ver ahí está mi homepage, y esa es la página en la que estoy trabajando aquí. Se puede ver que hay un rectángulo, y está encima de mi toma de producto. Si hago clic en Hold and Drag debajo de mi toma de producto, ¿ya lo estás? Mira eso, está debajo como funciona Photoshop. El modo que siempre uso es una forma de atajo. Vamos a deshacer eso, es que lo selecciono, y se pueden decir los atajos. Si hago clic con el botón derecho, ves que lo mandas de vuelta. Ahí está él. Cualquier cosa que estés usando con bastante frecuencia, lo conocerás. Nunca uso el Ocultar lo suficiente para saber que el atajo es. Necesito hacer clic derecho en ella. Pero uso Send To Back todo el tiempo, y Enviar Al Frente. En mi caso, este jeroglíficos aquí es Shift Command y el corchete, y es el corchete abajo por tu tecla P. En un PC, será Cuadro Cuadrado de Cambio de Control. Eso es lo que hago [RUIDO]. Vamos a deshacer eso. Comando Shift corchete cuadrado. Adelante atrás, adelante atrás, adelante atrás. Estoy usando esa llave cuadrada. [ RUIDO] Muchas formas de hacer lo mismo. Vamos a meter eso ahí. Vamos a conseguir esto. Puedes alinear las cosas de manera oficial, pero puedes verlo realmente solo quiere estar en el medio. Es realmente útil de esa manera. Pero puedes alinearlos correctamente, por lo que seleccionas ambos y dices por aquí, Alinear Centro, Align This Way. [ Risas] No funciona si ya está ahí. Se puede ver que puedo alinear a estos tipos con el centro. Depende de ti, pero encontrarás que, en realidad, es bastante dulce en Adobe XD. Solo quiere encontrar el medio de todo sin preguntar. Siguiente paso, Esquinas redondeadas. Estoy usando mi herramienta de selección, haciendo clic en este cuadro. Es posible que tengas que acercar porque no podremos ver estos. Si acercas lejos, esos pequeños círculos, todavía están ahí. [ Risas] Se vuelven más difíciles si es un objeto realmente pequeño en la página. Estoy acercando lo suficiente para ver estas cosas. Estos, si hago clic en “Hold” y los arrastro esquinas redondeadas a la derecha, mira eso. Puedes decidir. Puedes escribirlas manualmente, así que voy a deshacer eso. ¿ Dónde está? [Risas] ¿Ves lo que estaba haciendo ahí? Estaba arrastrando esto y viendo dónde estaba en el panel Propiedades. Ahí está. [ Risas] Si lo necesitas para ser exacto, estás usando 15, solo puedes escribirlo, pulsa “Enter”, [RUIDO] y será 15 para todos ellos. Es bueno cuando se quiere emparejarlos a través de diferentes documentos. Otra cosa que puedes hacer solo porque es interesante, si mantiene pulsada la tecla Opción en un Mac, tecla Alt en un PC, y haces clic y arrastra una de ellas, y puedes hacer clic y arrastrar una de ellas a la vez. [ RUIDO] Puedo decidir éste y éste. Mira esto. [ Risas] Voy a restablecerlos todos de nuevo a cero. puede ver aquí, lo ha desglosado en diferente, para que uno se ajuste a 29. Vamos a moverlo por aquí, para que podamos editarlo muy bien. Mira esto. Si arrastro esto, [RUIDO] está haciendo todos ellos. Mantenga pulsada la tecla Opción en un Mac, tecla Alt en un PC. ¿ Puedes ver que sólo está afectando esto? Da la vuelta arriba a la izquierda, arriba a la derecha, abajo a la derecha, [Risas] abajo a la izquierda. Yo puedo hacer eso. Eso es eso. Restablecer. Voy a volver a todos y decir que están todos en cero. Muchas gracias. ¿ Quiero esquinas redondeadas en el escenario? Yo sí quiero un poquito. [ RUIDO] Sólo una pequeña pista ahí. Quiero dos de estos para los botones, así que en lugar de dibujar un rectángulo y luego escribir en cinco después, voy a usar que mantenga pulsada la tecla Opción, tecla Alt en un PC, sólo para que seamos consistentes. Ya ves, incluso cuando lo cambio de tamaño usando mi herramienta de selección y simplemente arrastrando una de las esquinas, todavía se pega a esos cinco. No escala con él. Estoy haciendo muchas de mis dulces habilidades de duplicación. Ahora en este caso, ¿ están en el centro? Probablemente. Vamos a revisar. Tal vez no. Ahí vas. [Risas] Esquinas redondeadas. Veamos el último, el círculo, que no se llama círculo. Se llama elipse. Voy a seleccionar todo esto usando mi herramienta de selección, y solo te mueva hacia abajo, así que tengo un poco de espacio. Voy a agarrar la herramienta elipse, E para elipse. Tiene que traerme un punto donde si hago clic y arrastre, obtiene un óvalo o una elipse. Si quieres que sea un círculo perfecto, mantén pulsada la tecla Mayús mientras arrastra, y se bloqueará en la altura y el ancho. Eso es lo mismo para la herramienta rectángulo. Para la herramienta rectángulo, mantenga pulsada la tecla Mayús, cuadrado perfecto. [ RUIDO] Tengo un círculo perfecto. Lo necesito para mudarme ahí. Quiero que sea por ahí. Quiero un pequeño símbolo más en ella. No vamos a dibujar un plus. Vamos a simplemente escribir un plus, así que Type Tool, plus. Eso es [Risas] claramente un signo igual. Voy a escoger un peso apropiado para ello. Ahí vamos. En cuanto al tamaño, tal vez puedas arrastrar la parte inferior de la misma. Parece raro, pero en realidad sí usas esa pequeña cosa más, el pequeño punto blanco, bastante, para que, creo que eso es un buen peso, [RUIDO] luego ve ahí. Otro buen punto es porque es bastante broche feliz, estás como, “Deja de encajar a todo”. Puedes acercarlo, y luego utilizarlo con tu herramienta de selección. Sólo tiene que utilizar las teclas de flecha. Abajo en el teclado, tienes el arriba-abajo, izquierda-derecha, justo arriba-abajo, izquierda-derecha, y lo acercas lo suficientemente. Zoom todo el camino hacia fuera. No iba a hacer atajos. Sólo vamos a presentarlos. Haré entonces cargas para que los recuerdes. Si estás como, “Hombre, ese tipo me está asustando con los atajos”, no te preocupes. [ Risas] Sólo voy a seguir diciéndoles cargas. Ellos, eventualmente, se meterán en tu cerebro. Uno realmente práctico para ir todo el camino, hay un par de atajos. El comando 1, va al 100 por ciento. El comando 2, nunca uso, va al 200 por ciento. comando 0, manteniendo pulsado Comando en un Mac, es Control en un PC, y pulsa 0 te muestra todo, que probablemente sea el más práctico. Comando 1 y Comando 0, uso mucho porque te saca de una normalidad. Si realmente estás escribiendo aquí, trabajando en algo, puedes ir al Comando 0 o al Comando 1 para salir al 100 por ciento o al Comando 0 para ver todo. Vamos a tener alguna organización relativa en este curso. Sería muy común aunque [Risas] como diseñador tener todas las cosas pasando por todo el lugar. Estoy copiando y pegando estos. Acabas con basura por todas partes. Si estoy por aquí, [RUIDO] asumiendo que son el bit equivocado, si golpeo Comando o Control en un PC 0, puedes ver que me muestra todo, y es simplemente súper práctico. Adiós a todas esas mesas de trabajo, y de nuevo Comando 0. Ahí vas. Esa es una práctica. Un poco más de navegación para ti. Eso es todo. Hemos dibujado un par de rectángulos. Dibujamos un círculo. Se acabó la emoción. Pasemos al siguiente video. 12. Cómo usar el color en Adobe XD: Hola a todos. En este video, vamos a ver el uso del color en Adobe XD. Vamos a terminar con solo simples cuadros verdes, pero hablaremos un poco de lo que está pasando aquí y cosas diferentes para Adobe XD en términos de color, además comenzaremos con uno de los atajos que yo totalmente se olvidó de mostrarte en el último video. Empezaremos con eso y luego nos sumergiremos en color. Vamos a empezar con nada sobre el color. Vamos a hacer un atajo que olvidé antes. Recordamos que si mantiene pulsado Comando en Mac, Control en un PC y toca “1", va al 100 por ciento. Se puede ver aquí arriba. Recuerda esa misma clave en “2", 200 por ciento. ¿ Quién recuerda cómo vemos todo el asunto? Es una prueba. Eso es correcto. Mantén presionada la tecla Comando en un Mac, Tecla Control en un PC y pulsa “0". Me muestra todo. Hay una cosa que no compartí contigo, que uso cargas. Voy a fingir que lo dejé hasta ahora, pero acabo de olvidar. Voy a hacer clic en el nombre de un documento, luego golpear “Comando” o “Control 3". Eso pone esa cosa que has seleccionado a la vista completa. Eso es sólo otro pequeño atajo que voy a terminar usando y te vas a ir, ¿cómo haces eso? Aquí vamos, Comando o Control 3. Estamos adentro. Vamos a añadir un poco de color. Voy a hacer click en esto, por defecto todo es blanco con un borde gris. En primer lugar, voy a convencerte de que no uses ningún color, pero podías ver desde la intro que terminamos usándolo. Cuando se trata de marcos de alambre, desea mantener cosas como color fuera de la conversación también. El alambre es como fuentes. Si escoges una gama de colores, puedes terminar con discusiones no sobre la funcionalidad de nuestro flujo de tareas y cómo funciona, pero la gente escogiendo cosas como, hey, eso es el verde equivocado para tu empresa o no me gusta el rojo. ¿ El rojo realmente se comunica, verdad? Esa es una discusión para más adelante, después de los marcos de cables. Mantenga los marcos de alambre súper simples. Lo tengo seleccionado por aquí, voy a hacer click sobre esto. Ahora, probablemente hayas usado uno de estos antes. Si no, tienes tu slider de tonalidad por aquí para conseguir tu color en el rango. Digamos que quieres azul, obtienes este pequeño punto en el rango azulado. Entonces haces click por aquí. Puedes hacer clic una vez o muchas veces solo hago clic y arrastrarlo alrededor. Se puede ver ajustándose por aquí. Esto consigue que tu tonalidad sea correcta, y luego dentro de este matiz puedes escoger cosas como realmente saturadas, azules súper duper, o desaturadas, que está todo el camino por aquí, blanco y variaciones de luz, oscuro, saturado, no saturado. Trabaja dentro de aquí, consigue algo para tu particular. Mi consejo es que debas usar gris. grises están por aquí. Puede estar en cualquier slider de tonalidad, no importa si lo has arrastrado todo el camino, y no tienes que conseguirlo perfecto. Sólo lo llevas ahí, en realidad, tiene un poco de verde en ella. Pero si lo arrastras más allá y estoy sosteniendo la tecla del ratón hacia abajo y a los golpes en el costado ahí, entonces lo dejo ir, entonces está completamente desaturado y es un gris que puedo usar a lo largo de aquí. Si quieres blanco completo, haz clic en “Hold” y arrástralo a la parte superior izquierda hasta que vayas más allá de donde necesitas estar. Eso es blanco completo lo mismo con negro allá abajo. En realidad, el negro tiene dos manchas. Escoge un color, solo uno. Trata de no usar más de uno. Usa gris. El gris es el oficial sin color, pero sería común agregar solo un color. Podría ser el color de la marca en el que estás trabajando, solo uno. Voy a escoger un color. Escogeré naranja. [ Risas] Ha sido demasiado tiempo recogiendo naranja. Ahí vas. Ese es el color que voy a escoger. [ Risas] No pases edades recogiendo colores. Tenemos nuestro color. La otra cosa es la transparencia. Esto es lo transparente que es, cuán transparente es en él. Si quieres escribirlo manualmente entonces puedes hacerlo abajo aquí. Ahora si no estás acostumbrado a usar tonalidad, saturación y brillo, eso es este HSB, podrías usar el RGB. El color real es exactamente el mismo. No hay nada diferente en ello. Depende de lo último que te hayas ido. Podrías usar el número hexadecimal. Si eres desarrollador web o diseñador web, podrías conocer estos colores y poder trabajar mejor con estos o podrías estar copiándolos y pegando desde un manual de especificaciones corporativas, lo que funcione aquí abajo. Puedes escribir tus valores RGB. Termino simplemente arrastrando esto por ahí en esta etapa. Si es un color que vas a reutilizar, probablemente presiones este pequeño botón más porque entonces se queda aquí abajo y podrás reutilizarlo más adelante. El otro es el cuentagotas. Vamos a usar la herramienta cuentagotas correctamente. Dale clic, da click en este tipo y estás como, no quiero que sea blanco. Hay un par de formas de conseguir la herramienta cuentagotas. Puedes entrar aquí, pincha en esta versión y luego puedes verlo hace zoom para que puedas conseguir bastante preciso? Es bastante fácil conseguir aquí una plaza grande, pero puedes hacerlo de esa manera. Puedes cerrarlo y en realidad, esto simplemente va recto. Cortar a la persecución, dame la herramienta cuentagotas. Boom. Lo que podrías encontrar con el tiempo porque voy a deshacer eso, es el I en tu teclado, no el cuentagotas como E-Y-E, la letra I. Si has click en esto primero, tengo que seleccionarlo, pulsa el “yo” herramienta y luego haga clic en esto, es una forma bastante común de hacer las cosas. Muchas formas de hacer exactamente lo mismo. Ahora antes de irnos, no sé que XD realmente quiere eso. [ Risas] Para estar un poco metido ahí, sigue incumpliéndose con ello. Para el interno aquí, puede hacer clic en exactamente las mismas características. De nuevo, se puede ver ahí está mi cosa reutilizable, el color. Podría hacerlo verde para que coincida o probablemente podría simplemente apagarlo. Cómo apagar el borde, puedes hacerlo completamente invisible. Esa es una forma, probablemente no la mejor manera, es solo es reducir el tamaño a cero. No, esa es una mala manera también, solo desmarcarlo ahí. No tiene frontera. Tú, yo voy a hacer lo mismo por este de aquí. Ahora, ¿cómo selecciono dos de ellos al mismo tiempo? Mantenga pulsada la tecla Mayús. Tengo mi herramienta de selección, te tengo seleccionada, mantén pulsada “Shift”, haz click en esta otra, y ambas están seleccionadas. Ahora puedo decir que ambos no tienen fronteras. Agradable. Nos meteremos en trazos un poco más adelante y nos meteremos en cosas de color más elegante más adelante, gradientes, y veremos estilos de color y esas cosas más adelante en el curso. Pero por ahora, esos son los colores 101. No uses colores [Risas] tal vez solo uno, pero no dejes que te atrape usando dos. Habrá problemas. Eso es todo. Te veré en el siguiente video. 13. Los pegues y copia y peguen en Adobe XD: Hola a todos. En este video, te voy a mostrar cómo hacer líneas y todas las diferentes cosas que necesitas saber sobre uso de estos bordes o trazos o líneas, quieras llamarlas. Además, también te mostraré cómo cambiarlo todo a la vez porque por el momento, todo pasa por defecto a esta línea blanca con el borde gris. Te voy a mostrar cómo hacer algunos atajos geniales para copiar la apariencia de esto y igualarlo por aquí. Vamos a saltar. Agregar un trazo es fácil. Bueno, básicamente todo viene con un derrame cerebral. Dibuja un rectángulo, y mira, te da un trazo por el exterior. Para ajustar el tamaño del trazo, comencemos con algo simple, en realidad. Volvamos a este rectángulo aquí, [RUIDO] Comando 3. Acercar la cosa que has seleccionado, tal vez retroceda a una sola. Con ella seleccionada, se puede ver que tengo una frontera. Enciéndalo. El borde de color aquí, normalmente se conoce como un trazo, pero lo voy a llamar un trazo porque por eso lo conozco. Vamos a escoger un color para ello que podamos ver. El tamaño está ahí. Podemos cambiarlo a cero o podemos empujarlo. Ahora, solo puedes escribirlo aquí. Si quiero 10 puntos, puedo golpear 10 y golpear Enter. A menudo, es útil para cualquiera de estos pequeños campos que tienen tecleando es, puedo hacer click aquí. Ves que mi pequeño cursor está parpadeando, y luego puedo usar las flechas arriba y abajo, así que arriba para sumar. Porque muchas veces en esta etapa de diseño, no sabes lo que necesitas. Ya sabes si sabes que necesita ser cinco después, genial. Escribelo, pero muchas veces al principio estás como por ahí. Ahí vas. Voy a usar dos. Puedes igual que otro poco interesante tidbit es si sostienes Shift y usas arriba, va en trozos de 10. Ve si mantiene presionada Mayús y usa la flecha hacia arriba, [RUIDO] 32, [RUIDO] 42, y [RUIDO] que funciona en todo. Si tengo esto y estoy como, “solo quiero que sea un poco más grande,16 , elige mi flecha arriba, [RUIDO] arriba, arriba, arriba, arriba, arriba, arriba, arriba, aguanta Shift, y voy de 22 a [RUIDO] 32, [RUIDO] 42. [ RUIDO] Eso es en cualquiera de estos. ¿ Quieres moverlo sobre un píxel? [RUIDO] Arriba. [ RUIDO] Toma mucho tiempo. Hold Turno. [RUIDO] Bam, se mueve a través de cargas. Totalmente lo destrozó. No tengo ni idea lo que se supone que debe ser o de dónde se supone que está, pero se obtiene la idea. Nuestra frontera/trazo, obviamente puedes hacer guión, así que quiero espacio de cinco píxeles [RUIDO], y es por defecto cinco del guión, y luego un hueco de cinco, pero puedes ajustar eso. Podrías poner eso como 15 o solo uno, [Risas] cinco. Eso son guiones. Voy a ir a cero, [RUIDO] y un hueco de cero. [ RUIDO] Ahí vas. Adición de trazos. Agreguemos una línea al medio. Ahora, vamos a usar esto, la herramienta de línea. Voy a hacer click en esto, y voy a hacer clic en mantener y arrastrar desde este lado. Quiero, de nuevo, ir a negro, así que voy a hacer click sobre el color. Ve así. Recuerda, sólo arrastra más allá de esa esquina. Entonces el tamaño, voy a subir uno, y esa va a ser mi línea negra a través de ella. Ahora, es muy común quizás no escribir Disparo de Producto. Voy a eliminar eso, y sólo dibuje una línea a través de este cuadro aquí. Una línea a través de una caja es código de diseñador secreto para imagen de marcador de posición que va a ir la imagen. Somos reacios a poner imágenes en este modo wireframe. El motivo por el que no queremos usar colores y fuentes es que terminamos en una conversación sobre qué imagen deberíamos estar usando. ¿ Son los portadores de imágenes correctos? Solo queremos que el wireframe realmente áspero, muy rápido, ya sea para que el cliente firme o para hacer algunas pruebas con solo algunas pruebas rápidas básicas reales, por lo que pondremos una imagen de placeholder aquí. Ahora, una cosa por la que te vas a enloquecer es que cada vez que trates una línea, el momento, no puedes cambiar los valores predeterminados. Hombre, me mata sobre XD, pero oye, eso es lo que tenemos. Podrías en el futuro, ver si hay una forma de cambiar los impagos, pero por el momento, la forma fácil de redondearse es hacer una de un par de cosas. Uno es sólo para duplicar. Sólo mira esta línea aquí. Podría agarrarlo, duplicarlo, y puedo rotarlo. Ahora, mira este pequeño punto aquí. ¿Dónde está? Vamos allá. No hace nada. Puedes arrastrarlo, e intentar alinearlo o puedes ver por aquí? Es un reflejo. Hay un reflejo horizontal y vertical, y se puede hacer eso para duplicarlo. Otra forma agradable es algo que se llama Copiar y Pegar Propiedades. Voy a eliminar esa. Esta de aquí, esta línea aquí, [RUIDO] tiene lo que necesito. Puedo ir a solo usar mi atajo, Comando C en un Mac, Control C en un PC, solo copia antigua regular. En lugar de simplemente pegar, [RUIDO] y luego moverlo y voltearlo, [RUIDO] lo que vamos a hacer es que voy a eliminar eso, es que lo hemos copiado. Genial ir a hacer click en esta otra cosa. Ese es éste que está mal, tamaño incorrecto, color equivocado, y hay una opción aquí, dice, Editar, Pegar Apariencia. Aprenderás ese atajo eventualmente, y solo significa que puedes Copiar y Pegar Apariencia. [ RUIDO] Todavía lo tenemos copiado. Puedo hacer click sobre ti. ¿ Cómo selecciono más de uno? Así es, mantenga el turno, y haga clic en ambos. Entonces usando mi dulce atajo en un Mac, es Command Option V, en un PC, es Control Alt V, o puedes subir al menú Editar, [RUIDO] y mira eso. Realmente no importa se recuerde que el trazo era negro, y realmente no importa si el trazo estaba en esto o si está en los botones. Puedes seleccionar un montón grande de cosas y aplicar esa apariencia. ¿ Eso tiene sentido? [ RUIDO] ¿Estoy recibiendo demasiado detalle demasiado temprano en el curso? Oh, bueno. La otra cosa es que estamos aquí ahora, así que lo que puedes hacer es que puedas decir: “En realidad, me gustó esto, pero he terminado recogiendo negro porque se me permite usar un color”. Pero digamos que tengo algo por aquí, escriba herramienta otra cosa, y es alguna otra fuente. Es esto, y son 10 puntos, y es el color equivocado. Puedes hacer lo mismo. Selecciónelo, vaya a copiar, [RUIDO] sólo copia antigua regular, y luego seleccione éste. Puedes ir a editar o usar el atajo o hacer clic derecho en él. Recuerde, un montón de caminos al mismo lugar. Mira eso. Lo hace para fuentes así como rectángulos, rellenos, bordes alrededor de las fuentes externas, copia y pega apariencia. Esas son mis líneas ahí. Tengo algunos golpes ahí. Veamos algunos otros golpes. Vamos a poner ese pequeño menú de hamburguesas en la esquina superior derecha. Voy a acercar un poco, [RUIDO] para que podamos ver lo que estoy haciendo. [ RUIDO] Recuerda que es Command Plus o Control Plus en un PC. Voy a agarrar mi pequeña herramienta de línea, y dibujo una línea, maldita cosa gris [Risas] que es un píxel. No importa. Voy a volver a mi herramienta de selección, y necesito tres de estos. Una cosa que acabo de glosar por ahí sin embargo es, agarro la herramienta de línea. Si haces clic y arrastra hacia fuera, probablemente se acercará a ser recto. No es [Risas]. Como lo hicimos antes, recuerda con la herramienta rectángulo o la herramienta elipse, si mantengo presionada Mayús, la pone en una altura y anchura perfectos. [ RUIDO] E para la herramienta elipse, mantenga pulsada la tecla Mayús, altura y anchura perfectos. Esa misma herramienta [RUIDO] al dibujar una línea la hará recta. Eliminemos toda esa basura, mantengamos la herramienta de línea, [RUIDO] y luego haga clic en mantener presionado y arrastrar. Si mantengo presionada Shift, mira, chasqueo, quiere ir recto bien. Una vez que se bloquea en diferentes grados como diferentes. ¿ Son 90 grados? Cuarenta y cinco grados. Ahí, ahí, allá, ahí, ahí. Estoy sosteniendo el turno todo el tiempo. No voy a dejar ir mi ratón, y puedo conseguir algo recto. Ahí vas. Voy a ponerlos en posición. Voy a decir duplicado U. Estoy usando mi Alt en un arrastre de PC u Opción en un arrastre de PC. Voy a hacer otra. Lo que notarás es que puedes ver todo lo que dice, “¿Quieres que esto sea exactamente 11 pixeles como el que está arriba?” Yo estoy como, “Sí, lo hago. Buen trabajo.” Este va a ser mi pequeño menú de hamburguesas o sándwich nav o no sé, ícono de navegación móvil. Como sea que quieras llamarlo, esta es esta pequeña línea de rayas. Me va a permitir hacer un par de cosas. En primer lugar, voy a usar mi tamaño sabio. Para mí, era alrededor del 75 por ciento era aproximadamente el tamaño correcto en mi teléfono en comparación con mi pantalla. La mayoría de la gente lo llama el menú de hamburguesas. Yo lo llamo sándwich de nav. Escuché eso antes y se pegó conmigo. [ Risas] Yo podría ser el único que lo llama sándwich de nav, pero aquí tienes. Estás mirando este tamaño, estás como, “Este trazo, bueno, es demasiado bajo. Puedo ir aquí. Voy a acariciar tamaño. ¿ Eso es correcto? Sí. Cocuerda con todo lo demás que estoy haciendo. Tal vez arriba uno más. Eso es demasiado grande, pero de nuevo, recuerda, deberías estar probando en tu teléfono. Pero voy a acercar, Comando o Control 3 para estar en lo que has seleccionado. Acercar a la derecha, pero demasiado cerca. Voy a hacer zoom un poco atrás porque quiero mostrarte algunas otras cosas. Vamos a escoger el negro, y también seleccionamos a estos chicos y estas opciones aquí. Esto sucede. Tenemos esto lamentablemente llamado primero. Ese es el defecto. termina la línea y colillas hasta el final. El siguiente es el gorro redondo. Mira eso. Tu línea es tan larga pero circula al final. Se puede ver lo que está pasando. [ Risas] Ahí está el extremo cuadrado también. Hay momentos en los que se utilizan todos ellos, principalmente solo usa los dos primeros. Voy a usar gorras redondeadas porque se ve bonita, y coincide con mis esquinas redondeadas. Estoy empezando a arrastrarme en el diseño de adición donde deberíamos estar realmente simplemente manteniéndolo simple para nuestra navegación. [ RUIDO] Pero oye, no eres el jefe de mí. Yo soy el jefe, y puedo decidir ponerme esquinas redondeadas si me gusta. puede ver ahí parece demasiado grueso, pero volvamos a ir a 75, y mi computadora parece del tamaño correcto. El tuyo podría ser del 100 por ciento, así que todavía se siente un poco grande. Ahora, puedes ajustarlos todos. [ RUIDO] Puedo seleccionarlos a todos, y simplemente ir como algo así. [ RUIDO] No hay tamaño oficial, [RUIDO] pero podrías ir a revisar iconos de otra persona si estás [Risas] encontrando realmente difícil dibujar tres líneas que parezcan un verdadero menú de nav normal. Ve y revisa en línea de otras personas lo que han usado. Otra cosa mientras estamos aquí es que me apego a las líneas. El paso de líneas es bastante común, pero en realidad, sería común poner un icono aquí en lugar de estas líneas. Haremos iconos más adelante en el curso, pero yo quería, mientras estamos aquí hablando líneas e imágenes de marcador de posición, lo busqué en Google, ahí está ahí. Sería común poner un ícono como este. No tienes que dibujarlo. Te mostraré más adelante cómo sacar la mayor parte de estos gratis de lugares, [RUIDO] pero podrías deshacerte de esas líneas y tirar ese ícono ahí. Eso es todo lo que tengo para hablar de golpes. Sí, voy a conseguir que estos textos coincidan. Voy a seleccionar a todos ellos sosteniendo mi tecla Shift, y decir: “Tú, mi amigo, otra vez, en negro”. Porque voy a arreglar eso. En realidad, voy a seleccionar esto, retroceder, copiar, U Command Option V en un Mac, Opción de Control V en un PC. Lo que en realidad podría hacer es llevarlo al frente. Hay muchas maneras, usas la forma que te gusta. Soy un nerd atajo, así que Comando Shift corchetes al frente. Oh, no. [Risas] El texto está detrás de él. Tú al frente. Tú detrás de ahí. Ahí vamos. Ese es un punto interesante. Digamos que quiero mover este hacia atrás, quería moverlo detrás de esto, pero no eso. Podrías haber visto ahí dentro. Puedo tener esto seleccionado en lugar de decir clic derecho, Enviar a la espalda, que va detrás de todo. Estás como, “No, justo detrás de este círculo”. [ RUIDO] Se puede decir enviarlo hacia atrás. Ahí vas. Volveremos solo un nivel. Puedes retroceder unas cuantas veces diferentes dependiendo de [RUIDO] donde necesites tu orden de capas. Nuevamente, negro, [RUIDO] y en algún lugar así. [ RUIDO] Eso es. Pasemos al siguiente video. 14. Proyecto de clase 02: Wireframe: Hola a todos, es tiempo de proyecto de clase, un poco más grande que hacer. En realidad antes de que sigas adelante, si eres como que no estoy haciendo la tarea, y me estoy saltando. Antes de que hagas eso, antes de meterme en mi spiel sobre por qué debes hacer tu tarea, en realidad hay algunas cosas útiles hacia el final del video, así que si vas a saltarte traviesa, pero no se puede saltar hasta el final porque hablaremos de cómo voy a hacer las páginas más largas y triángulos y demás. Pero para aquellos de ustedes que están pensando, voy a hacer la tarea más adelante después de ver los videos, hey, no lo harás porque nadie lo hace, y es genial practicar lo que has aprendido y realmente ayuda, se queda contigo por más de un día después de este video. Haz estos y lo que me encantaría ver es tu proyecto al final de esto, lo que haces de él porque estamos usando nuestro propio generador de proyectos aleatorios, será único para ti, así que ese es mi spiel. Vamos. Deberías poder hacer todo aquí. Hay un par de similares, eso es sólo un rectángulo con un relleno blanco y mirada y nada elegante pasando. Estas cosas, estos botones de radio, no son botones de radio, son sólo dos círculos. No tiene que lucir exactamente igual a la mía, pero conseguir la estructura ruda igual, porque a lo largo de este curso quiero poder llevarte a lo largo en este viaje, pero me gustaría que construyeras algo es único para tu propio portafolio. Entonces, en lugar de hacer Scott Green Tea, usa lo que haya en ese breve que obtuviste del randomprojectgenerator.com, en caso de que el tuyo pudiera ser miel Smith, o té burbujeante, o lo que sea fue. Victoria me dijo que el té burbujeante era fresco y de moda. Por eso está ahí como opción. No sé qué es eso, pero estoy tratando de ser cool y a la cadera. Usa tu propio nombre. Puedes escoger tu propio color, puedes escoger tu propia fuente, pero mantenerla realmente simple y ver si puedes construir esta cosa. Hay cuatro páginas. Estos son sus requisitos reales. Quiero que construyas ese wireframe. Si no lo puedes ver, ya sea puedes pausar el video hace un segundo, pausar esto aquí, o en tus archivos de ejercicio, he hecho un PDF de ahí dentro del que puedes copiar de si no puedes del todo ver la versión pequeña. Se llama ejemplo de wireframe, por lo que cuatro páginas. Esas son las cuatro páginas, su propio color, su propia fuente. Cuando termines, toma una captura de pantalla de lo que estás haciendo y súbalo aquí a los comentarios, o a las asignaciones de los proyectos dependiendo de dónde nos estés viendo. Si nunca has hecho una captura de pantalla antes, en un Mac, sé lo que es. Golpeé Command Shift 4 y luego puedo arrastrar un cuadro alrededor de esto, y en tu escritorio con esa captura de pantalla que puedes subir. Si estás en un PC, no estoy seguro. Creo que haces una pantalla de impresión y luego la pegas en algo, pero Google cómo hacer una captura de pantalla. Puedes tomar una foto con tu teléfono de tu pantalla, eso está bien. Hacen esas cosas, hay dos cosas que podrían darte un pequeño hipo, es como dibujas una flecha? No puedes dibujar flechas en XD. Me avergüenza decirlo en este momento. Es sólo el, ver por aquí, la herramienta polígono y dibujé un triángulo, lo roté alrededor. ¿ Cómo lo roté? Puedes usar esta cosa o puedes puntero por las esquinas y simplemente arrastrarla por ahí y eso es algo bastante bueno que probablemente debería mencionar. Simplemente puedes pasar el cursor alrededor de las cosas alrededor los bordes y rotarlas o escribirlas ahí. La otra cosa, lo realmente importante, la razón por la que escuchas todo este video, aunque no estés haciendo la tarea traviesa, es esto, aquí hay una página extra larga. Si tienes una página que no encaja del todo como mi no, puedes hacer clic en el nombre de la página y simplemente puedes arrastrarla más grande. Entonces obtienes esta línea punteada. Ignorar eso por el momento. No lo muevas, puedes moverlo, pero aún no lo muevas. Hablaremos de eso en un curso posterior, pero en realidad puedes hacer clic en el nombre de la página o el tablero de arte y simplemente hacerlo más largo como necesites, y te mostraremos cómo hacerlo desplazamientos y cosas más adelante. Podrías apretar todo ahí arriba. No sé por qué hice eso. Mira hay mucho espacio. [ Risas] Pero eso es. Esa es tu tarea. No lo llamemos tarea, ejercicios divertidos para ayudar a practicar y aprender cosas. Pero de todos modos, eso es. Te veré en el siguiente video después de que hayas hecho esto. 15. Iconos gratuitos para proyectos UX y UI en Adobe XD: Hola ahí. Este video vamos a ver dónde conseguir iconos gratis para tu maqueta de alambre-frame, cómo elegirlos, alguna introducción a algunas de las licencias en torno a algunas de las gratuitas, y en cuanto qué formato deberías estar encontrando tus iconos. En este caso, PNG frente a SVGs. Muy bien, vamos a saltar . Encontrar iconos gratis. Sobre todo en esta etapa de marco de cables, no queremos estar sentados aquí diseñando nuestros propios iconos que puedes hacer totalmente. Lo que queremos hacer es salir y conseguir unos menos placeholders. Hay muchos lugares para encontrar iconos gratis en línea. Te voy a mostrar iconfinder.com, me gusta mucho. Pero si esto ya no está aquí o la calidad no está a la altura de tus estándares, puedes usar lo que estamos aprendiendo aquí sobre encontrar íconos gratis para cualquier sitio web. En este caso, voy a estar buscando un ícono de cuenta. Quiero esa pequeña cosa de muchas personas que haces clic cuando quieres entrar en tus detalles. En esta etapa estoy buscando cosas gratis. Tienen increíbles cosas pagadas también que vale la pena totalmente. Pero por el momento estoy buscando gratis porque solo estoy subiendo y saliendo esta maqueta. Lo que también busco como licencia. Esta es la parte importante. Hay uso comercial, algo llamado la licencia Creative Commons. Tendrás que revisar lo que estás usando. En este caso, quiero utilizar no sólo el uso comercial porque este uso comercial requiere un back-link. Yo quiero el que diga que no se requiere ningún enlace de retroceso. Puedes ver aquí, uso comercial y no requiere ningún tipo de back-link al creador original. Dicho pero no es para lo que estoy listo en este momento. Solo necesito algunas cosas rápidas para una maqueta o al menos mi marco de cables. Pero sí corta lo que está disponible. En este caso, hay mucho para mí para empezar. Algo que parece una cosa personnie por la que voy a ir. Ahora, [Risas] sólo yo y la nota editada que estuve mirando a la pantalla durante unos dos minutos. Ojalá el editor recorte esa sección [Risas]. Realmente estoy eligiendo uno rápidamente pero no lo hice. Pasé edades recogiendo uno. Obviamente, estamos tratando de evitar cosas con estilo muy alto porque eso va a empezar una conversación sobre qué colores, es eso realmente lo que queremos? Queremos algo genérico, pero quería que fuera agradable. Esto nos lleva a una de las grandes partes. Aparte de licencias, lo que hay que hacer es formatear. PNG es algo que la gente conoce y ama ya, y SVG es posible que o no sepas ya. Los veremos a ambos. Voy a descargar este tamaño apropiadamente 48 pixel PNG y descargaré esta versión SVG y te mostraré la diferencia ahí mismo. Muy bien, así que he descargado la versión PNG y la versión SVG. ¿ Cómo los metemos? Ese es un buen punto. En XD, ahí está la importación de archivos de largo camino o el atajo. Puedes ir a buscarlos. Ahí están ahí. Puedes traer más de uno sosteniendo “Turno” y haciendo clic en dos de ellos. Voy a traer a los dos. Ahí están. Aquí están nuestros dos niñitos. Lo que queremos hacer ahora es echarles un poco de mirada. Comando tres para acercarlas. Entonces estoy de vuelta en ese poquito porque eso está un poco cerca. Se puede ver la diferencia. PNG malo, SVG bueno. PNGs no son necesariamente malos, he exagerado esto descargando uno pequeño, pero está compuesto por estos pequeños cubos llamados píxeles mientras que SVG significa Gráfico vectorial escalable. Es posible que conozcas la palabra vector. Lo bueno del vector es cuando trato de escalarlo, sostén “Shift” para bloquear la proporción. Puedo hacerlo agradable y grande y no pierde calidad. Es realmente grande, podría ser tan grande como un autobús, como una montaña. En el tamaño del archivo seguirá siendo relativamente pequeño y seguirá teniendo grandes bordes nítidos. Considerando que esto, aunque descargues uno más grande, así que vamos a saltar de nuevo al sitio. Descargué el bajo. Vamos a descargar el realmente grande. Vamos a echar un vistazo a eso. Acabo descargar la versión grande. La diferencia es que se verá genial y te mostraré la forma que importo cosas a XD. Es la forma no oficial. Lo que hago es, no uso todos los atajos. Soy perezoso, no lo sé. Yo lo arrastro. Eso funciona [Risas]. Wow es grande. Eso es. He descargado la versión realmente grande y estarías como, sí, eso es de buena calidad. El problema es que el intercambio es el tamaño del archivo. Puedo revisar esto en mis archivos de ejercicio y ahí usamos esto. Se trata de los dos PNGs, este es el pequeño y es de dos kilobytes, del mismo tamaño que el SVG. Considerando que la versión grande, mira lo grande que es, muy grande en cuanto a tamaños web. Múltiples más grandes que el PNG más pequeño. PNG no está bien, no escalable. La otra gran cosa que no puedes hacer con PNG es que no puedes colorearlo. Volvamos a entrar aquí. “Comando” o “Ctrl+3" [RUIDO] alejar un poco. Parece raro, así es como lo hago de todos modos. Acercas cómo te gusta. Esta cosa de aquí no puede ser coloreada. Puedes llevarlo a Photoshop y colorearlo. Considerando que esto puedes hacer click sobre él y decir, quiero que seas de cualquier color que me guste. SVGs son buenos. Asegúrate de tener la licencia para usarlos. No tengas miedo de pagar por ellos. No quiero decir que no debas pagar por ellos, pero en esta etapa, por este alambre-marco, no estoy en esa etapa, no nos estamos comprometiendo con ninguno de ellos. Sólo los necesitamos aquí para algunas pruebas básicas y para la aprobación del cliente, ese tipo de cosas. Lo último mientras estamos agrupando en SVG versus iconos PNG es, esto es editable. Este de aquí no se puede cambiar. No se puede mover por ahí. Haremos esto en nuestro video posterior en solo uno o dos de ellos. Pero quiero tirarlo aquí también. He hecho doble clic en él y puedes moverlo por ahí. Oye, esa es la otra ventaja para los SVGs. Corte de salto. Volviendo aquí porque hay otra cosa importante encontrar para tus íconos que olvidé mencionar cuando estaba aquí. Hemos encontrado este ícono de cuenta como. Bueno, muchas veces, cada vez que vas a necesitar más de un solo ícono. Si estás buscando iconos gratis, antes de comprometerte, en realidad echa un vistazo a ellos. En este sitio web en particular, puede hacer clic en el icono real y entrar en él. Puedes encontrar aquí abajo, mira, es parte de un paquete más grande. Lo bueno es que, entonces puedo ir a buscar porque voy a necesitar, no me gusta el menú grande pero el carrito de compras me gusta. Hay una alternativa para la cuenta. Hay un plus y todo el otro tipo de iconos que probablemente voy a necesitar en el mismo tipo. Eso es bastante práctico cuando estás haciendo una elección es encontrar uno que no sea solo un guardabosques solitarios por sí mismo. Necesita ser parte de un grupo más grande para hacer su vida más fácil. Pero también prepárate para que haya iconos que no sean parte de cada pack que vas a necesitar para hacerte y a veces terminas simplemente recabando todo el conjunto eventualmente porque quieres un cambio de estilo y no hay suficiente en ese estilo o es fuera de marca. [ Risas] Empieza con iconos gratis en esta etapa de encuadre de cables, pero prepárate para hacer los tuyos más adelante. Lo haremos también en este curso. Te mostraré cómo. Eso es todo para iconos gratis. Lo último que quiero tirar ahí es que no tienen que ser libres. Puedes estar pagando totalmente por estos especialmente si estás trabajando en una empresa, el dinero que estás pagando por los iconos es bastante bajo y apoya a la gente que lo haga. Lo que tiendo a hacer es que tengo una suscripción a algunos sitios de acciones. Stock es lo que está prefabricado que se paga. Pago una suscripción mensual a dos lugares, extrañamente, Adobe Stock y Envato Elements. Ambos lugares tienen diferentes sabores de cosas buenas. Puedo entrar ahí y comprobar y en lugar de tener que garabatear porque estás mirando cosas gratis y no conseguir el ícono que realmente quieres. Tengo suscripciones a esos sitios. Yo pago mensualmente y significa que ya no me cuesta conseguir un gran conjunto de iconos que tal vez deportes, los artistas/diseñadores que los hacen [inaudible] Eso es todo para iconos gratis. Te veré en el siguiente video. 16. Cómo encontrar y encontrar y usar kits de UI existentes en Adobe XD: Hola ahí. Este video, vamos a ver algo llamado kits de interfaz de usuario. Tienen otros nombres y los describiré en un segundo, pero básicamente en lugar de buscar conjuntos de iconos individuales es mirar los archivos XD de otras personas existentes que puedes abrir y pedir prestados iconos de. Tengo una pareja aquí que vamos a mirar, y te mostraré qué buscar, cómo conseguirlos y podemos usarlos para nuestro proyecto. Probablemente el término más fácil de Google es los kits de interfaz de usuario XD. Kits es la palabra que queremos, el kit prefabricado y va a tener iconos en él. Pero también va a tener otros elementos que podríamos necesitar. Echemos un vistazo rápido a los que he descargado. Este de aquí, se puede ver que tiene botones todo listo para ir. Hay un poco demasiado estilizado, pero podríamos bajar estilo estos. Pero hay un gran kit y esta descarga más. Todo tipo de cosas que te gustan. Sí, necesito algo de carga y necesito un marcador de posición de imagen. No me gusta esa. Necesito un corazón. Ahí vas. Todas las casillas de verificación, todas estas, adónde irías, mis botones de radio con los que [Risas] podrías necesitar ayuda. Es difícil saber cómo debería ser exactamente. Los kits de interfaz de usuario es una palabra. Otra palabra que podrías estar buscando es hoja de pegatinas. Eso es lo que la gente a veces lo llama también, a eso le llaman una hoja de pegatinas. Es así. Esta es una hoja de pegatinas. Todo tipo de cosas por todo el lugar para ayudarte a construir cosas. Otro es un sistema de diseño. Ahora el sistema de diseño es bastante grande. Hablaremos de sistemas de diseño hacia el final del curso. Es lo que producirá una empresa más grande para ayudar a describir lo que están construyendo cuando es enorme, gran empresa. Pero también puedes usar ese término para encontrar cosas, incluso si solo quieres robar iconos de ella. Robar es la palabra equivocada, apropiado, pedir prestado. Al igual que este aquí está el kit de interfaz de usuario de Google, y Google Android para ser específico. Si estás tratando de burlarse de un teléfono y usar todos los botones que están naturalmente en un teléfono, es bueno usar esto porque parece que en lugar de intentar copiar lo que podría parecer en términos de la interfaz de usuario, se pueden utilizar estos diálogos y coincidirá con las fuentes y el posicionamiento y estilo correctos. Olvida que dije la palabra robar, apropiación es mejor. Kits de interfaz de usuario, hojas de pegatinas , sistemas de diseño, eso es lo que estamos buscando. Lo que terminamos consiguiendo es, hice esta búsqueda aquí y terminé con estos resultados. Pueden ser difíciles. ¿ Por qué son difíciles? Encontrar cosas gratis en línea y mucha gente está haciendo cosas buenas y malas. A veces terminas yendo y encontrando esta pepita. Genial, encontré este sitio. Me gusta XD Guru, son realmente buenos y tienen kits de interfaz de usuario gratuitos. Genial, este que estamos buscando y probablemente va a ser XD porque se llama XD Guru. Pero algunos de los enlaces ya no funcionan. Ese ahí dice libre, pero acabo de perseguir a ese hacia abajo [Risas] y ya no es gratis, son $5. No creo que esta persona deba estar vendiendo de forma gratuita, dice libre y entonces no es lo que es decepcionante. Además, muchos de ellos tienen inscribirse para cosas de correo electrónico. Estas son personas pagadas por eso. Eso es lo que quiero que digas es que a veces es un poco spammy esa manera donde tienes una descarga e inicia sesión y inscribes gratis algo o mejor dicho, todo es gratis pero vas para entrar a [Risas] una gran cantidad de datos personales. Algunos de estos funcionan, algunos de ellos no. Lo que tiendo a hacer es Adobe. Tengo esto aquí. Esto cambiará. Parecen cambiarlo. Podrían actualizarlo. Adobe.com/Productos/XD/características/UI-Kits.html. En realidad voy a publicar este enlace ahora en los archivos de ejercicio. Lo llamaré XD UI kit link [Risas]. Busca ese expediente. A lo mejor terminas aquí y es genial porque tiene el kit para Apple. Te he mostrado el kit que tenemos para, lo llaman Google Material. Google Material es el nombre de todo el sistema de diseño para dispositivos Android. Soy una persona Android por eso tenemos esta. Si eres una persona de Apple, descarga el kit de Apple, terminarás con un estilo similar aquí, las cosas se dispusieron muy bien que puedes ir y agarrar. También aquí abajo abajo, hay un montón de otros, estos. Los kits son sólo enlace directo. Para firmar tu privacidad, solo tienes que descargarlos. He descargado uno de ellos. ¿Cuál? Creo que descargué el kit de UI dibujado a mano en tus archivos de ejercicios para que puedas echarle un vistazo. ¿Dónde está? En nuestros expedientes de ejercicio. Tengo estos dos kits de interfaz solo para ahorrarte algo de tiempo si quieres mirar uno. Pero este es el material de Google, recuerda Android, y ahí está la interfaz de usuario dibujada a mano. En un archivo, basta con hacer doble clic en ellos y abrirlo, se abren en Adobe XD. Veamos el otro dibujado a mano. Eso es lo que es este. Mira, es un montón de iconos. Es solo una buena manera de empezar a encontrar los kits de interfaz de usuario de otras personas. Ya es una XD. No solo son iconos, pueden ser cosas como botones y puedes construir tu wireframe completo con todas estas cosas. ¿ Cómo se alejan para ver en absoluto? ¿ Alguien se acuerda? Te acuerdas. Comando o control cero. Mira eso, es bastante completo y luego, ¿cómo lo usas? Lo copias y pegas. En ocasiones podrían agruparse. Vamos a ver la agrupación y algunos otros bits en un segundo. Pero digamos que realmente quieres esa cosa. Ese es el ícono en el medio. Se puede ver que es parte de todo esto. Puedo hacer clic con el botón derecho y decir, vamos a desagruparnos. Aún agrupados. [Risas] Desagruparlo de nuevo. Ahora todo está en pedazos. Voy a seleccionar estos dos, mantenga pulsada turno y haga clic en estos dos. [ Risas] Yo dejo esto ahí porque eso es lo que pasa. Están agrupados y a veces para separarlos, hay que desagruparlos unas cuantas veces, shift-click en ellos, únete a ellos de nuevo hacia arriba. Voy a seleccionar ambos, agruparlos de nuevo, y copiarlo. Cambia a mi otro proyecto y pegarlo. Ahí está ahí. Podrías usar esto en lugar de mi pequeña cruz y voy a decir que eres negra y me voy a deshacer de estas líneas. Ahí vamos. Efectos de sonido durables. Los kits de interfaz de usuario son útiles. Construye cosas rápido con un cierto estilo, estas cosas incompletas, dibujadas a mano, me renuente a usar el estilo dibujado a mano. ¿ Por qué? Porque está obligado a haber un ícono que no tengo, eso no está aquí que vaya a tener que hacer y voy a tener que tratar de hacer que se vea todo dibujado a mano. Terminaré gastando edades por algo que no va a ayudar a mi proceso de prueba de experiencia de usuario cuando la gente esté revisando esto y asegurándome de que mi wireframe funcione. A ellos no les importa que sea a mano sketchy wrigley, pero me va a causar problemas en realidad lograrlo. Cuando digo eso, probablemente lo haría , lo he hecho antes, porque se ve genial, insignificante. Eso es todo. Está buscando kits de interfaz de usuario, hojas de pegatinas o sistemas de diseño particularmente para Adobe XD. Ábrelos y empieza a apropiarse de piezas. Eso es todo. Te veré en el siguiente video. 17. editing de edición de grupos y problemas en Adobe XD: Hola a todos. Este video es todo sobre las cosas raras que suceden en Adobe XD. El problema es cuando eres autodidacta o esta parte del curso, es que hay algunas cosas que van a tener sentido más tarde al final cuando somos impresionantes y lo sabemos todo, pero eso nos atrapará muy temprano. Quiero describirlos aquí ahora y si llegas al final de este video y estás como, entendí pero no realmente, eso es a propósito, preséntalo temprano y lo cubriremos una y otra vez a lo largo del curso y será súper fácil al final. Primero lo primero, es este pequeño panel de aquí. Tenemos 1, 2 y 3. Cubriremos plugins en un poco. Vamos a mirar ya que está un poquito aquí mismo porque nos va a mostrar algunos otros temas y luego está este panel de capas en el que pasaremos la mayor parte de nuestro tiempo. Tenemos una confirmación. Ver estas son mesas de trabajo, páginas AKA. Ahí está nuestra página de marketing que me gusta en la parte superior y detalles del producto que me gusta en orden cronológico, arriba también. No hay drama real ahí, así que esas son las páginas. ¿ Qué es esta pastelera? Es porque quizá no lo tengas. Mira esto. Si elimino esto, vuelvo a mis mesas de trabajo. Bueno, no tengo nada seleccionado. Mira, no hay pastelera. Si lo deshago, mira, tenemos esta tabla de pasta. Es como su propia página, todo por aquí. Siempre tendrás pastelera. Nadie está tan ordenado. Las cosas terminan en una página incluso con estos locas funcionamientos por todo el lugar. Si haces eso, no te preocupes, yo también lo hago. Esa es esta cosa rara de la pasta. Nada demasiado raro al respecto. Se pone raro cuando haces esto, medio encendido, medio apagado. Mira eso. A veces se puede tener algo que está en él. Hagámoslo aquí. ¿ Puedes ver eso? ¿ A dónde fue? Esa es la pastelera. Es sólo ese tipo. Dicen que no hay pasta, esa cosa está ahí abajo. Sólo se aferra por la pequeña lista visible más joven la pequeña lista visible más joven un poco en esta página aquí. Eso sucede. A veces terminas yendo, solo estoy trabajando en este proyecto y lo consigues. Ese es uno de los temas. Ni siquiera es un tema. Es justo ahora lo que sabes y eso es lo que es la pasta. Lo siguiente que quiero mostrarte es cuando estás copiando y pegando de un documento a otro, en realidad, termino haciendo esto bastante y estás como, ¿cómo está saltando entre documentos? En un Mac, es “Comando” y la clave de la tumba, o “Control” y la clave de la tumba. Eres como, la percha es la llave “Grave”. Es la clave “Tilde” y tú eres como, eso no es más útil, es esta clave aquí. Creo que es éste aquí pero a menudo se combinan con esto. Creo que esa es la “Tilde” y esa es la clave “Tumba”. No estoy seguro, pero lo estás buscando en tu teclado. Si mantiene pulsado “Comando” y lo golpeas en un Mac cambiará entre documentos abiertos y pulsa “Control” y lo golpeas en un PC y lo hará. Así es como alternar entre y copiar y pegar rápidamente. De todos modos, eso es un poco de una pista lateral. Volvamos a la rareza. Voy a necesitar intercambiar. Vamos a decir esto aquí y digamos que quieres agarrar esto y quieres copiarlo y pegarlo y usarlo en tu documento. Eres como, genial, sólo voy a agarrarlo y vas a ignorar ese pequeño diamante en la esquina superior izquierda porque eres como, no sé qué es eso. Eso va a causar problemas. Vamos a saltar a nuestro documento. Voy a pegarlo y mirar abajo aquí dice, bueno si estás pegando enlaces a través de documentos, puedes publicar biblioteca. Eso está muy por encima de lo que necesitamos en este momento. Demasiado hardcore, así que vamos a cerrarlo. Veremos bibliotecas y componentes más adelante. Lo que hay que hacer realmente es si traes cosas a través y esa advertencia aparece y/o vas a esta pequeña opción aquí, ¿ puedes ver que dice bibliotecas? Si hago clic en eso, tienes estos componentes aquí. Aprenderemos componentes más adelante y será fácil pero por ahora necesitamos simplemente desarmarlo para poder trabajar con él y no nos vamos a dar problemas. El problema es, si copio y pego esto y tengo dos de ellos, si actualizo uno, ambos se actualizan. Lo cual es genial más adelante cuando somos más experimentados pero por ahora nos causa solo problemas. Lo que hacemos es traer componentes que entran en nuestra biblioteca de componentes o en nuestras capas. Echemos un vistazo ahora si lo selecciono. Ya ves ahí tiene el ícono del diamante, está haciendo algunas cosas divertidas. Todo lo que tenemos que hacer es hacer clic derecho en él y decir desagrupar componente y luego hacer clic derecho y usted dice, todavía hay otro, hay componentes dentro de los componentes aquí. El diseñador que hizo el otro kit de interfaz de usuario hizo esto. En ocasiones hay que seguir adelante hasta que no haya componentes de desagrupación. Ahora es solo un círculo viejo regular con un rectángulo y te causará menos problemas. Si ignoras que sea un componente, probablemente siga funcionando pero terminarás cambiando un ícono y todos se actualizarán además hay esa advertencia la parte inferior ahí así que supongo que te lo dije esto antes en el curso porque podría ser preocupante. Porque voy a conseguir que hagas algunos iconos en un segundo, te vas a encontrar con ese problema. Por eso lo he hecho aquí. Si no entiendes qué componentes son todavía, no te preocupes, los vamos a cubrir más adelante en el curso. Lo que voy a hacer ahora es que lo tengo aquí abajo, voy a decir en realidad sólo agruparlos de nuevo juntos. Ahora es sólo un viejo interruptor tonto. No hace nada elegante. Voy a darle un nombre. Por aquí voy a llamar a este interruptor de alternancia y la otra cosa es, esto depende de tu nivel de OCD. Voy a hacer click en mi panel “Activos” y esto lo vamos a cubrir más adelante también pero hay estos pequeños componentes. No los necesitamos. Hemos convertido eso en solo su propio pequeño grupo, no están conectados. Sé que no están conectados porque no hay pequeño diamante en la esquina y si hago clic con ellos no dice desagrupar componente, sólo regular viejo desagrupar y se puede ver todas estas cosas, he seleccionado a todos con la tecla “Shift”, y te voy a librar. Súper ordenado. Mira lo ordenado que estamos. ¿ Fue útil? Tal vez no lo fue. Si no lo fuera, seguir adelante. Continúa con el curso, aprenderás componentes más adelante y probablemente no te encontrarás con demasiados problemas pero ese es el problema de componentes que podrías tener. Encontrarás así aquí, si copio esto de la interfaz de usuario de esta persona, es quien hizo el kit de interfaz de usuario, ¿los convirtieron a todos en componentes? El pueblo de Google lo hizo. Éste si lo copio y pego encima, en primer lugar, sé que no es porque no tenga el pequeño diamante en la esquina y si lo pego por aquí, dónde está, ahí está, pongo mi pasta, se puede ver que no apareció en mis componentes y en mi panel de capas. Es sólo un grupo, no tiene ese pequeño diamante. Sé que es un grupo. ¿ Puedes ver ese ícono de carpeta? Esa es la señal de ser grupo. Puedes hacer doble clic en él para mirar dentro del grupo. Es un grupo en grupo y luego hay algunos caminos que conforman esto. Eso es correcto. Pero sé que no es un componente. No me va a dar ningún problema. Vamos a entrar en alguna edición. Voy a ignorar los que hay. Voy a traer algunos iconos. Entonces, depende de ti cómo los traes, archivar la importación o usar el atajo. Haré lo que hago y sólo voy, ¿qué queremos? En tus archivos de ejercicio quiero que traigas en la cuenta 1 y tal vez el carrito 1, esos dos y solo los arrastra antes de que yo lo haga. Cuando traigas iconos de diferentes lugares, habrá diferentes tamaños. Esa es una cosa, son colores diferentes. El siguiente paso es tratar de conseguir que estas cosas coincidan, y algunos de los temas que podrías encontrar porque te voy a pedir que hagas algunos iconos y que hagas un pequeño conjunto de emparejamiento. Lo que quiero es, antes que nada consíguelos del tamaño adecuado. Ahora, confía en mí cuando digo que es más fácil trabajar en ellos cuando son realmente grandes. Si son realmente pequeños, digamos que son realmente pequeños así. Echemos un vistazo a ellos. Siguen siendo vector, así que es genial, estoy acercando. Digamos que quiero mover aquí este pequeño círculo porque eso me molesta. Para meterme en ello, puedo hacer una de dos cosas. Puedo hacer clic con el botón derecho y decir desagrupar, y desagrupar, desagrupar, desagrupar hasta que esté en pujas, o puedo hacer edición de objetos. Puedo entrar en ella haciendo doble clic en él. Puedo hacer doble clic en él, hacer doble clic en él de nuevo. Ahí vas. Es una forma de ir dentro de un grupo sin tener que desagruparlo porque puedo moverlo ahora y luego hacer doble clic en el fondo y salir. Depende de ti si te gusta desagrupar cosas o hacer doble clic en ellas para entrar. Lo puedes ver aquí. Entré dentro de ella haciendo doble clic en él, he hecho doble clic en esto otra vez, y tengo esta cosa aquí. Llenar 112, es esta rueda, y tenemos que correr al problema con que sea muy pequeña. Lo he exagerado para ser muy pequeño para exacerbar el problema , creo que esa es la palabra que quiero. Mira esto, si voy muévete un poco por arriba [inaudible] ¿lo consigues? Es tan pequeño que en realidad está tratando de alinearse con los píxeles, si sabes cuáles son esos. No tiene a dónde ir. Necesita alinearse con uno de los píxeles de aquí abajo. No se pueden ver, son pequeñas plazas con las que está tratando de alinearse, así que no es realmente divertido de todos modos. Lo que puedes hacer es agarrar ambos porque son SVGs. Recuerde comando menos para alejar o controlar menos en un PC. Voy a arrastrarlos bonitos y grandes, sosteniendo turno, para que se pongan bonitos y grandes. Otro truco mientras estamos aquí, mantenga turno y opción en un Mac o turno y alt en un PC, en lugar de ir de arriba a la derecha, irá desde el centro. Esa es la opción de turno en un Mac y cambia alt en un PC mientras la arrastra. Yo hago esas cargas y lo haré cargas más en el curso. Hagámoslo bonito y grande. Vamos a conseguirte agradable y grande también. Consíguelos aproximadamente del tamaño adecuado para tratar de conseguir que estas cosas coincidan. Se ve bien para mí. Ahora cuando hago doble clic en él para entrar, haga doble clic en él de nuevo, mira, puedo tener mucho ajuste. Vamos a entrar ahí. Cargas de ajuste. Podemos moverlo en pequeñas y bonitas piezas y hacerlo más grande y más grande y para conseguir este ajuste que necesites, puedes usar tu tecla de flecha, tocar, tocar, tocar, tocar, tocar, tocar, moverá un píxel a la vez. Voy a hacer el mío un poco más grande, íconos gigantescos, vale, los haremos más pequeños en un segundo. Vamos a meternos en el dibujo más adelante en el curso mucho más, pero por el momento estamos haciendo lo suficiente para llegar a hacer nuestros wireframes utilizables y más al cliente y al cliente para las pruebas. Escalarlos hacia arriba. La otra cosa que vamos a hacer es que vamos a intentar y así, esto un poco sobresaliendo ahora. Para editarlo, voy a hacer doble clic en él, hacer doble clic en él de nuevo, este bit y voy a hacer clic una vez más. Voy a ir dentro de la forma real. En este caso, hay un grupo, ahí está ahí. Este es mi carrito. Si hago doble clic en él, me meto dentro de este otro grupo. Yo no lo logré, alguien lo hizo. Grupo al interior de un grupo. Entonces dentro de eso está esta parte aquí, que es llenar 110. Si voy el último poquito, puedo empezar a ver todos los puntos de anclaje y puedo hacer algunos ajustes. Esto es lo que puedes hacer. Éste tiene dos puntos ahí, lo cual es raro. Nuevamente, no lo logré. Estas son las cosas con las que te vas a encontrar. Este de aquí. Mira, su escondida detrás, y es genial. Así es como haces tus ajustes. Podrías decidir que, en realidad este sosteniendo turno, puedo hacer clic en todos estos y tal vez, ahí vas. Mueve esto un poco hacia abajo. Violínalo y muévelo y consíguelo como quieras intentar igualar estos dos. La otra cosa que podrías hacer es subir el peso del trazo o al menos igualar. ¿ Puedes ver que éste es un poco más grueso que éste? No es realmente, pero me voy a imaginar que lo es. Te voy a mostrar qué hacer. Un par de cosas que quiero hacer es que quiero conseguir que estos colores coincidan. Doy click en “Nuevo”, uso mi cuentagotas. Sabemos cómo hacer eso. Excelente. Están emparejando el mismo color. Digamos que quiero que esto sea un poco más grueso. Es un poco delgado y espigado para lo que necesito o al menos éste necesita ser más grueso, hagámoslo por éste. Por el momento, es este relleno lo que puedo ajustar, pero puedo añadir una pequeña línea alrededor del exterior. Mira esto. He hecho clic fuera en segundo plano, lo desseleccioné, clic en él una vez, y digamos, agreguemos un gran borde. Tiene que ser del color correcto, así que voy a hacer click sobre él y decirte. En mi trazo o el borde coincide con el relleno, así que realmente no puedo verlo, pero mira esto, puedo hacer clic aquí y usar mi flecha hacia arriba. Se puede ver que lo hago más lleno o más ligero. Podría decidir que eso es lo que necesito para el tamaño o la forma en que se está viendo. Lo mismo con éste voy a decir, y agrego una frontera. Voy a, en este caso, copiar las propiedades porque es básicamente lo mismo, editar, copiar, editar aspecto de pegado, y podrías decidir que en realidad éste necesita ser un pequeño cuadrado, ese es 11, y voy a bajar el uno a 10, y ahora son perfecto-ish. Así es como conseguir el emparejamiento. Veamos la última pequeña rareza que ocurre en Adobe XD cuando estoy escalando. Ahora son masivos. Voy a acercar todo el camino hacia arriba, recordar comando cero o control cero, todo. Mira estos se unen en la escala. Quiero escalarlos, así que agarremos dos de ellos. Los he duplicado, y voy a hacerte amable y pequeña. Mira esto. Bájalo al tamaño del icono. Mira lo que está pasando. Lo estoy exagerando para mostrarte lo que está pasando. A menudo lo que hace la gente, simplemente van a ir y no se dan cuenta de que en realidad han hecho lo que voy a explicar ahora. Vámonos muy pequeños. Porque lo que termina pasando es el derrame cerebral o la frontera sigue siendo 11. Ese tipo tiene 11 años, y ese tipo tiene 11 años, así que no baja proporcionalmente. Hay una forma de moverse por eso. Dejemos a ese tipo donde estaba. Este tipo de aquí, vamos a hacer clic derecho él y vamos a decir algo llamado trazo de contorno. Va a dejar de ser este ajuste, no podemos ajustar el tamaño de nuevo fácilmente, lo vas a hacer una vez que hayas terminado en conseguir que todos emparejados. Pero si delineo el trazo, nada parece suceder de manera diferente, pero excepto que cuando lo escala hacia abajo, se puede ver ahí se escala proporcionalmente, y ese es un tamaño más apropiado. Difícil de hacer clic, pero esa es la diferencia. Los golpes no escalan, se quedan exactamente como los pones. Eso es cierto de estos botones aquí también. Eso es por defecto realmente práctico porque significa que puedo hacer un botón grande y no es proporcionalmente más grueso que este botón, es del mismo tamaño. Ese fue un video que tuvo que hacerse con algunas cosas extrañas que suceden. ¿ Cuáles fueron? Cuando copias y pegas, a veces pasan como componentes. Haga clic con el botón derecho en ellos y desagrupe el componente hasta que se hayan ido, y si realmente estás ordenado, elimínalos de los componentes. No tienes que hacerlo, sólo si quieres ser amable y ordenado. La otra cosa es el tablero de arte. Esa es esta página aquí en nuestro panel de capas. Se considera una página por sí sola, y ahí es donde viven estos chicos cuando no están en una página y a veces pueden estar accidentalmente en una página y no te estás dando cuenta y desaparecen, se han ido. ¿ Qué más aprendimos? Aprendimos que podemos desagrupar o simplemente hacer doble clic en un icono para meternos dentro de él para hacer ajustes, y si seguimos haciendo clic, eventualmente podemos empezar a editar formas. El último fue que los trazos no escalan, se mantienen iguales y podemos hacer clic derecho y delinear trazo si necesitamos que se mantengan fijos. Espero que haya sido de ayuda, si es un poco turbia y tú eres como, ¿lo tengo? medida que pasamos por este curso, serás como, ¿ y por qué incluso tuvimos ese video antes? Será así de claro. Ojalá, si hago bien mi trabajo. Eso es todo. Te veré en el siguiente video. 18. Proyecto de clase 03: Iconos: Hola a todos. Es tiempo de proyecto de clase. Este viene con algunos consejos y trucos de bonificación también, así que no te saltes este. Hablemos de lo que tienes que hacer. Necesitamos cuatro iconos a lo largo de la parte superior y tres abajo abajo. Probablemente termines usando estos en casa. Un usuario puede iniciar sesión y cambiar la contraseña y esas cosas. Un carrito que los lleva a la página de compra o lo que tienen en su carrito y voy a sacar el menú cosa que ya hemos diseñado. Lo que quiero que hagas es conseguir que coincidan con cada uno, usando las técnicas que hemos aprendido hasta ahora, acertando los trazos. Incluso podría obtenerlos todos del mismo lugar. Puedo encontrar un buen set. Estoy de acuerdo con eso, lo mismo con los iconos de las redes sociales. Elige los iconos de las redes sociales que sean apropiados para tu público objetivo. Echa un vistazo a tu perfil de usuario y di, ¿son una persona de Linkedln, persona de Twitter, o van a estar compartiendo en Tiktok o lo que sea que sea? Agrega un poco de texto sobre para que compartan su compra y luego añada los iconos de redes sociales apropiados. Entonces quiero que tomes una captura de pantalla y la subas a la sección de comentarios o a las asignaciones en esta página o en la siguiente sección dependiendo de dónde estés haciendo esto, y esto es solo un ejemplo. No tiene que ser así, sino algo como esto. Te prometí algunas cosas bonitas y huescas. Veamos eso. Mientras trabajas en ello, una de las cosas que puedes hacer es que necesitaba encontrar un ícono de casa. No era parte de ese grupo que encontré en. Puedo encontrar que es forma de obtenerlo de uno diferente. Tuve que añadir un trazo por el exterior. Voy a traerlo en Command Shift I es el atajo en un Mac y Control Shift I en un PC para importar o puedes arrastrarte como he estado haciendo un poco de tarea. La diferencia entre éste es que no era lo suficientemente gruesa. ¿ Puedes ver que era bastante delgado? Ya sabes cómo dije escalarlo y empezar a trabajar. No quería molestarme porque todo lo que tenía que hacer es agregar un pequeño trazo por el exterior y quería compartir contigo, yo era como, oh, eso es realmente práctico. Es que cuando sí agregas un borde y sí escoges el color correcto, es que uno no es del tamaño más pequeño. Puedes bajar a 0.5. Por eso quiero hablar, puedes bajar a 0.1. En este caso, creo que cogí 0.25, y trato de escalarlo y coincidir estos son los iconos aquí. Ese es justo el punto que quería hacer. Puedes usar pequeñitos tamaños fraccionales pequeñitos para el trazo. Siguiente en mis consejos y trucos es que probablemente quieras agrupar cosas. Sobre todo si quieres usar estos próximos trucos de, puedes ver que no están del todo alineados. Es difícil tenerlos alineados visualmente. Los seleccionas todos y dices en realidad los quiero por todos aquí están tus herramientas de alineación alineadas a la parte superior, alinearlas al medio. Se puede ver porque esto no está agrupado, los está destrozando por completo. Voy a decir que la navegación es o bien hacer clic derecho e ir al grupo. Es una de esas cosas. Probablemente lo uses lo suficiente como para obtener el atajo Comando G en un Mac, Control G en un PC. Ahora cuando están agrupados, puedo seleccionarlos a todos. Solo estoy usando mi herramienta de selección y solo arrastrando una caja sobre todos ellos. Voy a decir alinearlos por el medio, por favor. Ahora eso no siempre es visualmente cierto. A veces te gusta que esté funcionando, pero este tipo tiene que subir una pareja. Eso está totalmente permitido también. No tiene por qué ser matemáticamente correcto. Tiene que estar lo suficientemente cerca visualmente correcto. El otro es ¿se distribuyen? No lo son. Este está un poco más cerca que éste. Nuevamente, puedes hacerlo si todos están agrupados individualmente, agrupados separadamente unos de otros. Puedo seleccionarlos, y ahí está esta opción. Esto será distribución horizontal. Hay un atajo que nunca aprenderás. ¿ Qué es eso? Opción Comando H. Nunca recordaré esa. No uso lo suficiente. Yo puedo hacer eso y trataremos separarlos todos individualmente. Pero porque a veces que hay estos espacios negativos aquí, a veces en realidad este tipo sólo tiene que ir un poco de esa manera. Eso está permitido. Te doy permiso para arrancar cosas pero eso tiene que volver a subir. Esa es la alineación y distribución. También lo que puedes hacer es seleccionarlos todos y copiarlos. Porque lo que necesito hacer es que necesito acercar todo el camino hacia arriba. ¿ Quién recuerda qué es eso? Comando Z o Control Z en un PC. he copiado a todos. Lo que puedes hacer es que puedas decir en realidad, quiero deshacerme de ti, este tipo se ha ido. Te vas a es que puedo decir que puedes hacer click en el nombre de la misma y golpear Pegar. Lo pondrá exactamente en el lugar correcto al que necesita en la página, siempre y cuando sean páginas del mismo tamaño. Eso es práctico para actualizar las páginas en lugar de tratar de alinearlas. La otra cosa que puedes hacer es que puedas hacer más de una. Voy a deshacer eso. Puedo decir que mantenga pulsada Mayús en mi teclado y haga clic en los nombres de estos tres y luego presione Pegar. Ése son tus bonos. Ahora, ve a hacer tu tarea y ponte esos iconos. Te veré en el siguiente video. 19. Cómo añadir la interacción a tu prototipo en Adobe XD: Hola a todos. En este video, vamos a ver el prototipado nuestro pequeño sitio web móvil y todos estos pequeños cables aquí cuando todos están conectados como están. Puedo pasar y decir, aprender más, volver a la página de inicio, ir a la página del carrito. Agregar un poco de navegación al prototipo de nuestro diseño es lo que vamos a hacer. Vamos a saltar. Para sumar la interacción, vamos a cambiar de diseño, que sería hasta el momento de prototipo. Nada realmente parece que cambia a excepción este pequeño panel cambia un poco. Ahora, para activarlo todo, click en el nombre de una de las mesas de trabajo. Hagamos la primera página, la página principal. Lo que vamos a hacer es cuando se haga clic en esta página, vamos a conseguir que vaya a esta mesa de trabajo aquí. Simplemente haz clic y arrastra esa pequeña cosa azul y para que puedas verlo dice ésta. Entonces le vamos a dar una vista previa, así que vamos a prever aquí arriba, pulsando ese pequeño botón “Jugar”, y hacer clic en él y su mesa de trabajo se cargará. Genial. Lo que hacemos es en este momento solo pinchar en cualquier parte y se va a pasar a la siguiente mesa de trabajo. Ahí a ahí. Sencillo. Vuelve a hacer clic y no va a ninguna parte porque sólo hemos arreglado una mesa de trabajo. Lo que podemos hacer es que en realidad no tienes que cerrar esto. Esto puede permanecer abierto. Para mí a menudo lo mantengo en mi otra pantalla de aquí que no se puede ver, o simplemente podemos guardarlo aquí en esta instancia y solo se cierne por encima de todo. Puedes cerrarla de nuevo y abrirla de nuevo, no hay problema, pero eso es todo. La otra cosa a tener en cuenta es que podría estar empezando en la página equivocada. Podrías ser como, esa no es la página de inicio. No supone que quieras empezar el extremo izquierdo porque puedes tener uno por aquí. Realmente no sabe con cuál empezar. Lo que haces es iniciarlo, si quiero empezar en la página Checkout para previsualizar esto, solo tienes que seleccionar esa página o la mesa de trabajo seleccionada. Puedes dejar esto abierto, no tienes que restablecerlo. Simplemente puedes hacer click por aquí. [ Risas] Ves que esto se ajusta dependiendo de la mesa de trabajo que hayas seleccionado, por lo que esta cosa no necesita ser cerrada. Lo que vamos a hacer en la página Detalles del producto es que vamos a decir que vas ahí, y luego en la página Checkout vas a ir ahí, tan real aparejo básico. Para empezar de nuevo al principio, voy a hacer click en esta “Página principal” y decir click. Mira esto. Fancish. [Risas] Pero por el momento aunque eso es usar todo el asunto, hacer clic en cualquier parte. Lo que queremos hacer es tener estos botones para ir a lugares. Lo que haremos es cerrar esto para que no sea confuso. Para deshacerse de estos, hay un par de maneras. La forma en que lo hago de todos modos es click en homepage. Para eliminar esta conexión es simplemente hacer clic en mantener presionado y arrastrarla a ninguna parte. No ahí, sólo por aquí. Puedes volver a casa, justo a cualquier lugar por aquí, y soltarte, y rompe ese enlace. Esa es una forma de hacerlo. La forma más oficial es que tengo seleccionado Checkout, y por aquí se agrega un disparador de toque. arrastrando esta cosita a través de ella es asumir algunas cosas; que vas a hacer clic en algún lugar o tocar, en un teléfono obviamente es un toque, para hacer clic en un escritorio. Se va a agregar una transición a la página Confirmación y va a usar el valor predeterminado para disolver. Se puede decir ir a ninguna parte. Se puede ver simplemente va a ninguna parte ahora. Ahí vas. Hemos roto todo eso porque lo que queremos hacer es trabajar en objetos reales. Lo que queremos hacer es en vez de click en toda la página, llegar a la página Detalles del Producto va a ser mi botón Saber más, y lo que voy a hacer es no voy a tener el texto seleccionado, vamos a acercar. Pulsemos el botón seleccionado, solo para que haya un poco más de un área que se puede hacer clic y luego puedes arrastrarlo aquí. Vamos. Página principal de marketing, vamos a hacer clic en “Jugar” y nada se puede hacer clic excepto este tipo. Esos son los fundamentos de la creación de prototipos. Ahora, lo que podríamos hacer es que quiero volver a esa homepage, voy a ir tú mi amigo vuelve aquí. Ahí vas. Estamos aceptando todos los predeterminados, hablaremos de flexibilización y cosas en un video futuro pero por el momento, esto es lo que terminas haciendo; homepage, Aprende más. Página principal, y simplemente aparejando esta cosa con todos tus cables musicales, y están conectados a diferentes páginas. Otra cosa que puedes hacer en esa vista previa es en lugar de intentar conectarlo todo solo para tu propia navegación, puedes usar flechas izquierda y derecha para moverte a través de ellas. Si solo quieres ver cómo se ve la página Checkout, no quieres usar todas las interacciones, solo puedes usar izquierda y derecha y solo va a recorrer todas ellas. Ahora lo realmente limpio de esto es porque siempre está abierto, mira esto, el diseño realmente puede cambiar. Ya ves, puedes prototipo, estar trabajando en esto, y estando viendo cómo se ve en este diseño sin tener que cerrarlo y reiniciarlo o actualizarlo. No hay un botón de actualización real, ojalá hubiera un volver a la página de inicio [Risas] pero no lo hay. Da click en esto para volver al principio, usaremos estas teclas de flecha. Mientras estoy trabajando, siempre tendré esta pantalla abierta y la tendré aquí en mi otro monitor y estaré funcionando. Simplemente me muestra cómo se ve ahí todo el tiempo. Un último pequeño consejo para la creación de prototipos es que hicimos la homepage, ¿ dónde lo hicimos? Bueno, dos pequeños consejos ahora que lo pienso, voy a seleccionar todos; así que comando A en un mac, control A en un PC, ¿dónde está? Selecciona todo, si estás en modo prototipo, seleccionará todos y te mostrará todos los cables que pueden ser útiles solo para saber lo que tienes y no has hecho. Será como, yo he hecho ese hogar, pero se puede ver que éste no se ha conectado. Eso sucede mucho con la navegación. Digamos que no tenemos una página de cuentas, así que no vamos a usar esta. No es parte de nuestro flujo de tareas, pero éste de aquí sí. Te vamos a decir, vas a la página Checkout. Podrías ir, vas a Homepage y eso está bien con sólo cuatro mesas de trabajo. Pero lo que puedes hacer es sólo si estás en modo prototipo, si seleccionas todos estos cuatro nuestros y los copias. Eliminamos esta tira antes, y las eliminamos, click en el título y las pegamos. Se puede ver que trae de vuelta los enlaces, no trae de vuelta éste porque ya estamos en la página de inicio. Si voy a éste, borra esos chicos, pegarlos, éste no pagó porque estamos en la página Checkout. Obviamente no puede mostrar que el cable entre en sí mismo, pero la página de inicio uno funciona. Este me va a mostrar cargas. ¿Conseguiste lo que quiero decir? Consulta la página de inicio y la página del carrito está ahí. Si estás haciendo muchas cosas repetitivas, asegúrate de que estás copiando pegando en prototipo. El motivo por el que te muestro eso es vamos a hacerlo de la otra manera para que uno no lo tenga. Si lo hago en vista de diseño y voy aquí y voy, dónde está uno, éste aquí, copia. No traerá a través de todos esos cables. Si voy aquí, borra pegar. Si tengo un modo prototipo, ¿ puedes ver que no copió y pegó estos cables? Tienes que estar en modo prototipo para estar copiando y pegando cables. Te atraparás eventualmente y te preguntarás por qué la interacción no está llegando, solo tienes que estar en modo prototipo cuando estás copiando y pegando. En este caso, nos estamos burlando de un teléfono móvil. No importa si te estás burlando de un teléfono móvil o un diseño de sitio web o un diseño de tableta, esta pequeña cosa aparece igual. Acabamos de tomar en el móvil ahora porque se está convirtiendo en el más popular para muchas cosas sobre todo este comercio electrónico. Termino empezando mucho más en el móvil, pero eso no quiere decir una versión de escritorio o una versión horizontal rectangular no es donde deberías estar iniciando y prototipando. Los consejos y trucos que estamos aprendiendo aquí todos funcionan igual. Muy bien, eso es, vamos a subir al siguiente video. 20. Animación y alijo de prototipo en Adobe XD: Hola a todos. En este video, vamos a llevar un poco más allá el prototipado. Vamos a ver los diferentes tipos de animación, qué es la flexibilización, y vamos a hacer algo como esto. Mira estas cosas empujar a través en lugar solo disolver si vuelvo usando mis flechas. También vamos a crear esta monstruosidad. ¿ Listo? [Risas] Malo malo. Es genial, es malo. Déjame mostrarte cómo hacer estos en Adobe XD. Para crear esa increíble animación, sólo vamos a profundizar un poco más en la creación de prototipos. Ahora, notarás que este se llama Nivel 1 de prototipado este video porque hay Nivel 2 más adelante en el curso porque tiramos el fregadero de la cocina ahí ahora. Me gustaría llevarte a un poco de competencia al principio del curso, y luego podemos profundizar en algunas de estas cosas, como prototipos más adelante. Es un poco más ahora. Lo primero es que esta es una cantidad bastante pequeña de mesas de trabajo, pero digamos que para ahora la página podría ser de 30 páginas o 50 páginas. En lugar de tratar de arrastrarlos y llegar a todos los diferentes lugares, lo que puedes hacer es simplemente hacer click en el botón y por aquí, bueno, vamos a hacer click sobre él y decir, me gustaría el transición para ir a la mesa llamada la página muy bien nombrada Mesa de Trabajo, también checkout y irá ahí. Si no nombra sus páginas, se llama Artboard 1-52, lo que sucederá. Estoy nombrando el mío aquí principalmente porque estás viendo. Pero eso lo hace fácil. Si los haces el nombre, en realidad puedes elegirlos desde el destino. Eso es una cosa. La otra cosa que quiero explicar en ésta es que por aquí, el defecto es una transición de disolver. Cambiemos el nuestro a Slide Left. No vamos a pasar por todas ellas, pero veamos Slide Left versus Push Left porque parecen muy similares. Quiero que el botón Compra vaya aquí. Te das cuenta de que recuerda lo último que has hecho. Si cambias algo y sigues agregándolo, va a seguir yendo a deslizarte hacia la izquierda. Eso es bueno en realidad. Si obtienes algo que te guste, puedes seguir agregándolo y recordará lo último que has aplicado. Voy a cambiar el mío a Push Left. Echemos un poco de mirada y veamos porque parecen lo mismo. Juegas, echemos un vistazo a Buy Now, Slide left, ¿dónde estás? Deslízate por encima y Compra es un empujón a la izquierda, no hay solapamiento solo empuja la izquierda para que decidas lo que quieres. También comprueba dos veces que no estás diseñando algo que en realidad no puede ser hecho por lo menos fácilmente por tu desarrollador. Si lo vendes en tu rebote de cliente y lo viste al principio y los desarrolladores son como que no podemos hacer eso, y el cliente se ha puesto corazón en él rebotando en, vas a tener problemas. Habla con tu desarrollador. Ten un buen diálogo desde el principio sobre lo que puedes y no puedes hacer. Dejemos eso aquí. Lo dejaremos ahí. Echemos un vistazo a la otra cosa llamada flexibilización. Te dejaré jugar con las otras animaciones. No es muy emocionante. Disolver o Ninguno, ninguno solo significa que va a saltar a él como un corte de salto y se puede jugar con estos diferentes. Echemos un vistazo a la flexibilización porque sin aliviarse es rígida. Vamos a prever. Mira esto por ahora, no hay finura a ello. La flexibilización lo está ralentizando en este caso, ralentizar la flexibilización significa que cuando se acerca al final se va a ralentizar un poco porque como una sensación natural, incluso aunque es digital. Podemos exagerarlo, subamos hasta dos segundos, lo cual es demasiado largo, pero ayudará a entender que se alivia un poco mejor. Vamos a jugar a este tipo, vamos a comprar ahora. ¿ Se puede ver que se ralentiza a medida que se acerca al final? Justo cómo funciona la gravedad real [Risas] si la gravedad pudiera deslizarla hacia los lados. De todos modos, eso se está relajando y puedes meterte con lo que sientes, se ve bien. Una cosa de la que estás prohibido sin embargo, es que puedes probarlo una vez en este curso, y luego ya no se te permite usarlo, es el rebote. [ Risas] El rebote es el peor. rebote de dos segundos es aún peor. Vamos a echar un vistazo. las puertas encuadernadas si has hecho mi curso de edición de video Premier Pro o qué es puertas encuadernadas, otra mala transición? Peel de página. Este es el equivalente para Adobe XD. ¿ Listo? [Risas] Es genial por unos tres o cuatro clics el botón y luego se cansa. No estoy juzgando, puedes usar Bounce. Otros ahí dentro. Te dejaré pasar por todas ellas. Sólo voy a hacer uno más contigo, interesantes. ¿ Listo? Eso tiene, ¿cómo llaman eso? Déjame pensar. Pensé en ello. [ Risas] Estuve pensando en ello desde hace años. Tuve que Google reglas de animación anticipación. Si no conoces las reglas de la animación, es algo útil saber como diseñador, especialmente un diseñador de UX. Ve a ver a Lucas Ridley, tiene un gran curso sobre los fundamentos de la animación. La anticipación es cuando te inclinas hacia atrás sobre tus talones antes de avanzar, pones tu peso hacia atrás para seguir adelante. Es ayudar a la gente a anticipar lo que está a punto de suceder porque nadie acaba de lanzar hacia adelante. Pones tu peso en el pie trasero antes de empujarte hacia adelante. Eso es lo que está pasando aquí. Vamos a echar un vistazo ya, terminar. Hagámoslo un segundo, y luego eso ya está listo, avanza antes de que vaya hacia atrás o viceversa. ¿ Ves eso? Es bonito. Eso va a ser por éste yo creo. Juega con las diferentes animaciones, juega con los diferentes tipos de flexibilización y cuánto tiempo tardan, encuentra un poco de algo que te guste. Haremos más prototipado más adelante en el curso, algunas cosas más hardcore. Pero por el momento creo que tenemos suficiente para seguir adelante. Hagamos eso. Vamos a seguir adelante. 21. Cómo ver tu diseño en la aplicación XD en iPhone y Android: Hola a todos. Soy yo en la naturaleza. Este es un video sobre mostrarte cómo obtener una estadística en un árbol en tu dispositivo móvil. Porque, bueno, necesitamos ver cómo se ve en el dispositivo para escoger cosas como fuentes y en realidad hacer las pruebas lugar de tratar de usar la cosa en la pantalla. Esta es mi configuración, es como se ve desde el otro lado. Normalmente, esto es en parte desordenado, sin embargo, no demasiado desordenado, empeora. Lo que tenemos que hacer, te voy a mostrar dos formas diferentes de hacerlo. Esa forma de actualización en vivo con el cable USB. ¿Sabes cuál es el cable USB? [ Risas] Hacemos así y luego te mostraré una forma de hacerlo a través de la Nube. Ambos tienen sus pros y sus contras. Esta es la forma más emocionante. Te lo voy a mostrar. Es fácil. Independientemente de la forma en que lo hagamos, es necesario descargar la aplicación para su teléfono. Si estás en Android o Apple, no importa, ve a tu tienda de aplicaciones o a tu Play Store dependiendo de tu sabor de teléfono, y descarga la aplicación Adobe XD. Para descargar eso, deberás iniciar sesión con tu Adobe ID y contraseña, que siempre habrás olvidado, y necesitas una contraseña de restablecimiento. Una vez que hayas hecho eso, [Risas] y realmente estás conectado a ella. Es bastante fácil. Necesitas encontrar un cable USB. Ya sabes cuáles son esos, luego lo enchufa. En realidad, lo que voy a hacer es configurar esto, para que la cámara pueda verlos a ambos, ojalá. Espera ahí. De vuelta dentro de la computadora aquí por un segundo. Una vez que hayas conectado tu cable USB a tu teléfono, sube por la parte superior aquí, ¿ puedes ver estos pequeños dispositivos? Esperemos que vea su pequeño dispositivo aquí y haga clic en esto. Este es mi Pixel 4, haga clic en eso, y luego saltemos de nuevo a la otra cámara. Esta es mi pequeña configuración aquí. [ Risas] He abierto la app en mi teléfono. Tengo mi Adobe XD abierto, hice clic en el pequeño icono que acabas de ver en la esquina superior. Dependiendo de algunas veces solo salta a ella pero veces ver abajo abajo aquí hay este pequeño ícono. Es dispositivo conectado. Mira eso. Coinciden. Lo hacen, coinciden exactamente. Lo que es realmente bonito de eso es ver esto. Es actualización en vivo. Manera fresca. Puedes tener esto enchufado y estar realmente trabajando en cosas como tamaños de fuente. Se puede decir, eso no está funcionando del todo bien. A lo mejor el tamaño de la fuente es demasiado grande aquí, así que voy a bajar a 30. Es mucho más fácil diseñar iconos ahora porque en realidad puedes empezar a tocarlos e ir, ¿es eso lo suficientemente grande para tocar? Haga clic en él. Demos clic en el “Carrito de compras”. Oh, fue al carrito de compras. ¿ Qué tan guay es eso? Me encanta. Esto es como que hice algo y miré, está funcionando, y está ahí fuera. Página principal, conozca más. [ Risas] Incluso un efecto de rebote. [ Risas] Eso es prototipado en vivo en tu dispositivo. Obviamente puedes actualizarlo y saltará a las páginas en las que también estás trabajando. ¿ Se puede ver en los nombres de las páginas aquí? No sé por qué he hecho esto cargas, pero es sólo algo mágico al actualizarlo muy bien. La otra cosa a tener en cuenta es que tenemos nuestra etiqueta bien. Puedes tener tu versión tablet sentada ahí, horizontal, vertical. Puedes conectar más de un dispositivo y conectarte a todos ellos. Impresionante. Una cosa es que hay un par de cosas. Una es si, digamos, porque para lo que estamos usando esto es para que puedas diseñar con él. Esto es como esta función aquí. Podrías tener al cliente sentado contigo y usarlo en su teléfono también. Podrías hacerlo con las pruebas de usuario, para que puedas tener a tu gente usándola y enchufada a la computadora. Te mostraré otra forma en un segundo, eso probablemente sea mejor para eso. Pero hay cosas como pistas. Que es si hago clic en alguna parte, ¿ puedes ver arriba ahí arriba? Va a ser un poco duro. No estoy seguro si el editor puede acercar. Pero ahí tiene un poco de destaque. Volvamos a la página de inicio en realidad. Está poco alto porque no estoy sosteniendo mi teléfono. No quiero destrozar el tiro. Pero se puede ver si hago clic sobre, ver estas cosas resaltan para dar un poco de una señal visual de lo que se puede hacer clic porque no vamos a armar todo. No quiero crear una página de cuenta. No se les ha pedido que haga uno. a ayudar a la gente a saber a dónde se les permite ir dentro de esta maqueta y cómo salir de ella. Estás como, mi teléfono estaba atrapado aquí. Puedes hacer triple clic, listo, uno, dos, tres. Te da cosas. Se puede decir esas pistas de hotspot, que acabo de mostrarte, puedes apagarlas. Desliza la navegación, aún no hemos conseguido ninguna navegación de golpe. Nosotros lo hacemos. Por defecto, encontrarás que se moverá de la siguiente página a siguiente página sin que tengas que arreglarlo con los cables. Eso es una cosa. Pero los tres clics te meten en esto. Te da algunos controles más, no vamos a pasar por todos ellos. Son relativamente autoexplicativos, toman una captura de pantalla, que es genial, y un prototipo de salida. Esa es la manera de salir de aquí. Lo que es bastante bueno de esto es que en realidad puedo desenchufar esto ahora. Curiosamente, a pesar de que no éramos actualización en vivo ahora, no puedo actualizarlo en vivo. ¿ Me ves moviéndola? Probablemente no pueda, pero no va a vivir la actualización, pero puedo reanudar la vista previa y la almacenará en caché y lo recordará. Puedo llevar esto ahora a mi reunión y seguirá ahí. Si se trata de un documento muy grande, digamos que es un montón de imágenes y tiene 100 páginas de largo o 100 cargas de largo. Conéctalo y espera mucho tiempo y recorre las diferentes páginas, así que asegúrate de que todo esté cargado antes desconectarlo, eventualmente se cargará. Para esto porque es bastante simple, cargó súper rápido. Pero sí, todo funciona incluso con que esté desenchufado. [ Risas] Esa es la única versión, de enchufarla. Déjame mostrarte la otra versión. Volvemos a entrar. Déjame mostrarte al revés. Es bastante similar, pero hay que hacer un par de cosas. El inconveniente es que no hay actualización en vivo. Significa que no vas a estar moviendo las cosas y es totalmente actualizando, pero eso es útil cuando estás diseñando. Pero digamos que lo estás llevando a la reunión de clientes o a uno de tus usuarios potenciales para hacer algunas pruebas. Lo que primero debes hacer es asegurarte de que este pequeño ícono aquí podría no estar actualizando como el mío, son poco ícono de Cloud. Podrán quitar eso. Pero estoy salvado a la Nube en este momento. Ese es el valor predeterminado para Adobe XD. Podrías ser una de las personas que lo están peleando va eres Archivo Guardar Como mi documento local. Esta actualización en particular no va a funcionar. Necesitas guardarlo en la nube porque eso lo va a subir a tu biblioteca de Creative Cloud o a tu panel de activos en la nube, mágicamente, la aplicación Adobe XD que acabamos de descargar. Aún necesitas descargar esa app, tendrás acceso a ella dondequiera que estés. Simplemente no vivirás actualización. Echemos un vistazo. Si los tienes guardados en tu computadora. Echemos un vistazo. Tengo una versión de escritorio que hice. Mira, no hay nube. Lo que hay que hacer para que esto funcione, necesario guardarlo en la Nube. Archivo, Guardar como. Al hacer eso, va a por defecto a la Creative Cloud y va a ir con todos los demás documentos. Hará esto. Lo bueno del ahorro en la nube es que siempre es ahorro automático. Nunca salvo en XD. Simplemente ahorra mágicamente todo por sí solo sin tener que hacerlo. Puedes hacerlo. Bueno, si está gris, significa que ya lo ha hecho por ti. Pero mira esto, si muevo eso, te darás cuenta de que de vez en cuando se irá e intentará actualizarse. Siempre hay una actualización en vivo en Adobe Cloud. Puedes golpear, “Guardar manualmente”. Si todavía estás en el hábito de ello, puedes verlo haciéndolo ahí. Significa ahora que saltemos a la app y a la otra cámara. Estamos fuera y porque esto ya no vive actualización. Es como una desconexión. Lo que pasa es que lo guardes como acabamos de hacer en la nube y luego abrir tu aplicación Adobe XD, la misma. Pero en lugar de este tercer ícono utilizas este primero, que es tus documentos de Cloud. Ahí está mi pequeño chico actualizado. Mira, está actualizado hace dos minutos. Ábrelo. Ojalá, ahí vamos. Tenemos nuestra pequeña animación en marcha. Tenemos nuestro pequeño prototipo en marcha. Todavía se puede interactuar con él como el otro. Ahí está ahí. [Risas] Sigue ahí. La única diferencia es que no se actualiza en vivo, pero también significa que no necesitas un cable USB, tú decides qué quieres hacer. Esto puede cambiar en el futuro. Podría usar tecnología inalámbrica en el momento en que utilice conexión USB por cable para hacer esa actualización en vivo. Pero oye, esto está totalmente bien. A menudo lo hago de esta manera porque no estoy diseñando. Al mismo tiempo, solo quiero darle una mirada sobre una prueba en etapas en lugar de vivir. Lo mismo, triple clic para salir. Vamos a actualizarlo. Porque no se actualiza en vivo, ¿qué haces? Lo que puedes hacer es incluso si estás aquí, lo que voy a hacer es digamos que queremos cambiar. Voy a decir hasta lo obvio, voy a leer que vaya a mi computadora aquí y voy a cambiar el color de esto. No puedes verme haciéndolo, pero voy a escoger este color de búsqueda. Ahí vamos. Voy a golpear “Guardar” en mi computadora, solo para forzarla a actualizar a la Nube. Ya lo he hecho ahora. Lo he cambiado en mi escritorio, triple clic luego salir y simplemente cargarlo de nuevo. Irá a buscar la correcta. Oye, es rosa. Me parece que es una buena manera de hacerlo. La otra cosa es cada vez que comienza, comienza en esta página. ¿ Por qué? Déjame saltar de nuevo a la computadora ahora y te mostraré cómo forzarla a comenzar en una página en particular. Para que empiece en una página particular, lo que tenemos que hacer es que tengas que estar en modo prototipo. Entonces si haces click en estas páginas, lo que termina pasando es, ¿puedes ver aquí? Mira este pequeño ícono aquí, eso solo va a indicar a la app, pero esta es la forma de empezar. Ignorar el flujo, hablaremos de eso más adelante. Pero lo básico es aquí es donde comienza el flujo. Puedes tener múltiples flujos al tener dos de ellos clicados. Entonces puedes decidir qué flujo seguir. Haremos lo más tarde probablemente. Pero por ahora, solo tienes un flujo. Puedes encender y apagar. Tan solo tenerlo en la página que quieres mostrar primero en tu prototipo. Así es como asegurarse de que eso suceda. derecho está probando en un dispositivo. No tiene que ser un teléfono móvil, podría ser una tableta, obviamente probando en una computadora, solo puedes hacerlo en tu computadora. Estás ejecutando Adobe XD encendido. Eso es. Te veré en el siguiente video. 22. Proyecto de clase 04: Pruebas en tu teléfono: Hola a todos, tiempo de proyecto de clase. Vamos a probar en tu teléfono. Nosotros, tú lo eres. Supongo, quiero que descargues la app y pruebes tu prototipo en ella y cuando termines, quiero que te hagas una foto de tu teléfono con ella puesta. Puede ser complicado porque probablemente la única cámara que tienes es en tu teléfono, así que toma prestado el teléfono de otra persona o mira si puedes hacer algo de magia con la cámara de tu laptop. Si nada de eso funciona, solo puedes hacer una captura de pantalla, solo una captura de pantalla plana de tu pantalla que también está bien. Quiero que lo pongas a prueba en tu teléfono. Haz tus propias pruebas, asegúrate de que todo hace clic y quiero que te entusiasmes con lo que hiciste en un teléfono trabajando. Es tan genial cuando sale de la computadora y en realidad empieza a ser, no sé real. De todos modos me emociono. Ahora hay un par de cosas con las que podrías encontrarte cuando estás haciendo tus pruebas y las cubriremos ahora. Echemos un vistazo a Adobe XD. Podrías haber notado en el último video que algunos de los botones que estaba haciendo clic, tuve que hacer click un par de veces, lo cual no es bueno. [ Risas] Hay un par de cosas que puedes hacer dependiendo de tu ícono. Este de aquí es relativamente fácil de hacer clic porque es bastante grande cosa cuadrada pero hay mucho espacio desperdiciado por aquí. Lo que puedes hacer es, esto aquí, se llama hogar. Está en grupo. ¿ Qué hay en este grupo? Nada, no mucho. Lo que voy a hacer es ir a la herramienta rectángulo y sólo voy a dibujar un área más grande clicable. Ahí está esto, puedo quitar la frontera. En realidad voy a quitar el relleno también para que no haya relleno, ni borde. Todavía está aquí, sólo que realmente no puedo verlo. Esa va a ser mi área que se puede hacer clic. Voy a seleccionar ambos, voy a agruparlos golpeando Comando G o Control G en un PC o puedes hacer clic derecho en él. Vamos a darle un nombre porque ¿por qué no? Seamos lujosos. Yo llamo a mi Icon-Home. Primero utilicé el nombre genérico y luego las cosas más identificativas, así que entonces éste aquí es mi Icon-Cart. Simplemente es una forma más agradable de hacer esto. Se puede ver claramente dónde están los iconos y lo mismo que mi botón de vista por ahora o botón primario o algo así. De todas formas, pasa por, agrega un poco más a los botones si necesitas probar al principio, podría funcionar perfecto. También podrías decidir que, no sé, están demasiado unidos o tienes dedos gordos. [ Risas] No puedes evitar hacer clic en dos de ellos. Haz algunas pruebas por tu cuenta en tu teléfono. Ahora, hay una app involucrada y no estoy seguro si el teléfono de todos puede hacerlo, así que obtienes una parte entera como si simplemente no funciona, pero me gustaría que lo intentaras. La otra cosa que quiero que cuides es tamaños de fuente porque, voy a ir al Comando al 100%. Sé que para mi pantalla particular no es del tamaño correcto. Lo he diseñado en este tamaño, podrías mirar en tu teléfono ir, demasiado grande, es realmente fácil de ver y eres como “demasiado pequeño”. Es muy común tener 16 como tamaño de copia corporal, pero podrías decidir en realidad que necesita ser más grande para esa cosa en particular o más pequeña. Echa un poco de mirada en tu teléfono, haz algunas pruebas, ajusta los tamaños de fuente. No estamos haciendo demasiado en términos de estilismo sino darle una prueba. Asegúrate de que todos los botones funcionen. ¿Van a los pedacitos? A menudo haces clic, lo arreglarás y luego comenzarás a probar y te das cuenta de que puedes quedar atrapado en una página. Te olvidaste de armar el checkout, hacías todas las demás páginas, pero no hay salida de esta página. Dale una prueba, toma una captura de pantalla, subirla a los comentarios o las asignaciones o proyectos dependiendo de dónde estés haciendo esto. La otra cosa que podrías hacer es que, he hecho tamaño para mi teléfono que es un teléfono genérico de tamaño android, podrías estar usando un plus size o no sé, los iPhones son mucho más largos, así que se le permite. Haz que sea perfecto para tu teléfono. Puedes hacer click sobre él y cambiar la altura y el ancho. Puedes Google cuál es el ancho y la altura del pixel para tu teléfono. Se puede ver el valor predeterminado. Con esto seleccionado, puedes ir a la herramienta Apple, y en realidad, no actualiza pero no puedes ver aquí. Si sabes que tienes un iPhone 13, aquí tienes, podrías escribir estos en. Bueno, no tienes que recordar, solo puedes empezar a escribirlas aquí arriba. ¿ Qué es? Tallas un poco más anchas, 390 y simplemente haz eso por cada uno de ellos. Reajustarlo para que se vea bien en su teléfono. Lo único que podrías tener que hacer es echarle un poco de mirada. Lo vamos a hacer correctamente más adelante. Pero una cosa que podría encontrarse con un problema. Echemos un vistazo lo alto que es esto, 844 es mucho más largo. [ Risas] Wow, mucho más grande. Ese teléfono. Ni siquiera estoy seguro de cuál escogí. iPhone 13. Esta cosa aquí, esta es tu vista abajo abajo. Puedes ver aquí tu viewport coincidir con donde sea que esté la altura de tu teléfono. Si es 844, hazlo 844, de lo contrario lo recortará un poco. Simplemente haz lo que sea la altura y te explicaré viewport. Simplemente puedes saltar adelante a viewport si eres total bamboozled por ella. Se acerca un video, pero esa es una cosa que podrías cambiar. Prueba en tu teléfono. Esté entusiasmado con tu diseño, estar en el mundo, probarlo, haz ajustes, toma una captura de pantalla, y te veré en el siguiente video. 23. Primeros pasos con animaciones automáticas en Adobe XD: Hola gente. ¿Estás listo para tu primer pedacito de animación? Hemos estado haciendo animación. Más transiciones, hemos estado haciendo esto. Se acabó toda la transición de la página. Ahora lo que queremos hacer; eso es animación de página entera, son objetos individuales. ¿ Estás listo? ¿ Cómo llego ahí? [ Risas] Aquí vamos. Ahora estás listo? Bueno, mira eso. Eso cae, la flecha se mueve a través, se desvanece. Eso es animación en Adobe XD, y tú y yo vamos a hacer eso ahora mismo. Vamos a saltar. Hagamos esa animación. Así que veamos esta pequeña flecha aquí, así que nuestra página de Confirmación. La forma en que esto funciona es raro, no es como la animación normal si eres de Adobe Flash days o, Adobe Animate, o After Effects, o cualquier cosa [Risas] que tenga una animación. Esta es una animación no temporal, duplicamos mesas de trabajo y las conectamos. Si parece raro es un poco raro; un poco torpe, pero funciona. Lo que vamos a hacer es en esta primera página voy a tener esta flecha. El mío está en dos piezas. Voy a tenerlo por este lado, mantenerlo en la mesa de trabajo por el momento. Uno de los conceptos básicos en este video y luego en el siguiente video vamos a ir un poco más extremos, o principalmente mostrarte que podría atraparte. Vamos a tener esta flecha a un costado y duplicamos esta mesa de trabajo. Puede seleccionar el nombre, puede hacer clic derecho en él, y duplicarlo, copiar, pegar. Simplemente uso el comando C o Control Z en un PC y V. Copiar, pegar. Entonces los dos. Guión 1, probablemente deberíamos llamarlo algo mejor, pero hey hyphen been está funcionando para mí. Lo que tenemos que hacer con si esto funciona, hay un par de cosas que tienen que pasar. Oye, necesitas más de una mesa de trabajo y la otra es lo que quieres animar necesita ser nombrado igual en ambos lados. En nuestro caso quiero la mía agrupada porque no quiero animar la flecha por separado de la broca de acecho; eso depende de ti, así que voy a seleccionar a ambos sosteniendo “Shift”. Bueno, golpeó. Voy a golpear “Grupo” que puedas hacer clic derecho o ir Comando G, Control G en un PC para agruparlos. Por aquí este se llama Grupo 13 y éste se llama Polígono 1, y Camino 1, y Camino 2. Eso no va a funcionar. Busca los nombres, así es como hace su magia cuando usas algo llamado auto animate y no funcionará sin él. Por lo que nuevamente agruparlos por aquí. Uno se llama 13 y éste se llama 14, por lo que eso no va a funcionar. Llamémoslos a ambos 13. Es útil si los nombras antes de duplicar la mesa de trabajo, pero quiero mostrarte de la manera difícil [Risas] para que puedas hacerlo de la manera más fácil después. Estos son los mismos. Algo tiene que ser diferente, estoy moviendo éste a través. Si mantiene “Shift” mientras lo arrastra, lo hará en línea recta. Ahora no va a pasar nada, necesitamos sumar la animación. Demos clic en la flecha, pasemos al modo Prototipo. No quiero ponerme demasiado difícil a los atajos, pero puedes ver aquí arriba si pongo el cursor por encima de él en mi Mac es la opción 1, opción 2. Hay mucho de cuando estás haciendo cosas. En un PC es Alt 1 y 2, por lo que 1, 2, 1, 2, 1, 2, 1, 2. Cambiar entre diseño y prototipo, o simplemente haga clic en el botón. Prototipo, voy a decir que vas por aquí. Por defecto está en transición, y eso es lo que hicimos en los últimos videos. Transicionamos toda la página y dividimos y agregamos flexibilización. En este caso, vamos a pasar de tipo a orden animate. Esto simplemente busca bien el mismo nombre y llena todos los vacíos para nosotros. Fue en el grupo 13 y busca el grupo 13, y solo intenta combinar los dos. Sólo vamos a prever. Demos clic en el nombre “Conformación” y vamos a golpear “Play”. Vamos a hacer esto unas cuantas veces, así que voy a dejar esto abierto permanentemente aquí. Vamos a darle un grifo. Estamos ahí, lo hicimos [Risas]. Primera parte de la animación. Enhorabuena, le das una oportunidad. Hay animación, eso es lo básico de todos modos. Usaré mis teclas de flecha para volver atrás. Puedes bajar aquí y comprar. Haga clic, [RUIDO] se mueve a través. Está funcionando. No es lo que quiero, quiero que se cruce automáticamente. Hagamos esa cosa al lado. En el momento tenemos esto cuando se toca, haz este auto animate a esta otra página llamada Conformación también. No es lo que quiero. Lo que voy a hacer es romper ese vínculo. Recuerdas arrastrarlo hacia atrás, y por eso lo hago yo. Lo que vamos a hacer es toda la página en lugar de sólo la flecha, porque quiero hacer clic en eso. Quiero que toda la página vaya aquí. Debe recordar lo último que has hecho. Va a decir toda la página Auto- Animate cuando esté tocado, y funcionará. Vayamos por aquí, así que vamos a hacer clic en éste hacia abajo para pagar. Cuando hago clic en cualquier parte, se mueve a través. Todavía no es del todo correcto. Lo que quiero hacer en esta página es que quería animar auto-, pero no quiero que toque. Solo quiero configurarlo después de una cierta cantidad de tiempo, y en mi caso cero segundos. De esta página a esta página después de cero segundos, animate automáticamente a esta otra página. Eso tiene sentido, así que checkout. Haga clic. Oye, míranos. Lo hicimos, y lo animamos automáticamente. Para el usuario si retrocedemos un par de flechas, solo ven una flecha moviéndose a través. No es realmente un problema, es solo la forma que XD ha decidido hacerlo; es que han decidido que cada marco clave es una mesa de trabajo real y así es como lo animas. animación compleja dentro de XD es problemática. He hecho animaciones donde pueden ser 10 o 20 de estas mesas de trabajo, y no es genial. Existen otras herramientas para hacer animación para la web. Cosas como Adobe Animate es una buena, pero ¿has escuchado ese lugar prototipo? Además, debo señalar que estamos haciendo animación aquí. Realmente no deberíamos hacerlo en el marco de alambre, pero esto es un curso y es divertido. No estaría haciendo animación en esta etapa solo porque no es el momento de estar deleitando a los clientes. Este tipo de animaciones, o micro-interacciones, o poco éxito cosas deberían suceder más adelante en los desarrollos finales. Es la guinda del pastel; no el wireframe, pero necesitamos aprender estas cosas para este curso. Por lo que la flecha en movimiento es. Hemos hecho movimiento, puedes hacer muchas cosas. Voy a volver a cambiar al modo Diseño, y voy a hacer eso más pequeño. Bueno, eso no funcionó porque está tratando de mantener nuestro tamaño de trazo y alinearlo todo y ser elegante. Por defecto veremos esto de nuevo más adelante. Responsive Resize, eso es de lujo. Es tratar de hacer algunas cosas que no queremos hacer en este momento. Con esto seleccionado voy a decir apaga eso, así que te voy a decir ahí. Va a estar en un tamaño más grande por aquí, vamos a darle una oportunidad a eso. Demos clic en esta mesa de trabajo aquí. Haga clic en “Compra”. Hurra. Se hace más grande y se mueve a través. Puedes hacer otras cosas, puedes decidir sobre la rotación. Voy a decidir hacerlo. Va a arrancar 180 desde donde está, va a dar la vuelta. Echemos un poco de mirada. ¿ Qué verías ahí? Me lo perdí. Haga clic en uno, haga clic en uno más. Hurra. [Risas] Se obtiene la idea así. Recuerda rotar las cosas. Tengo mi herramienta de selección. Pase el puntero justo fuera de aquí, puede hacerlo manualmente. Voy a apagar el mío porque no parecía deseable. Las otras cosas. Tamaño, se puede hacer. Puedes hacer rotación, y puedes hacer opacidad. Lo que no puedo hacer es que no puedo eliminarlo desde aquí. Si lo elimino de un lado con la esperanza de que se haya ido de aquí y que aparezca por aquí y tal vez mágicamente se desvanezca, no va a hacerlo. Vamos Compra, y solo aparece. No sabe qué hacer, porque no sé dónde está el original. Sólo voy a desvanecerme como el predeterminado. Lo que tenemos que hacer; es deshacer eso, es que no lo eliminamos. Simplemente volteamos la apariencia; esta opacidad aquí, gire a la derecha hacia abajo o tanto como o un poco como quieras. Va a empezar ahí y pasar a éste. Vamos a darle una vuelta ahora, checkout. Listo. Se desvanece y se mueve a través. Ahora no hemos jugado por ahí con flexibilización, así que echemos un poco de mirada. La página de confirmación va a cambiar al prototipo, y va a facilitar el entrada y salida. ¿Qué se ve eso? Se ve bastante bonito, puedes aliviar tal vez fuera. Facilitar fuera es como imaginar añadiendo un poco de pegamento pegajoso a la entrada o al exterior. El out es este lado; la parte terminada de la animación y la facilidad en es el otro lado. Si alivio si hago clic en éste y solo voy aquí. Cuídalo. Va a empezar rápido y luego pegajoso pegajoso hacia fuera. ¿ Listo? Podría ser difícil ver tu flexibilización porque la duración es bastante corta, así que subamos a un segundo. Nosotros lo vimos, no escucharon. Se puede ver que empieza rápido y se va más lento al final. Odio mi animación, pero [Risas] las cosas de tamaño me están matando. Vamos a Diseñar y deshacer ese tamaño. Es difícil verlo, sólo lo estoy adivinando del tamaño. Sí, parece menor. Ten una jugada con la flexibilización por tu cuenta. Echemos un vistazo al prototipo, así que nos relajaremos. Tener una jugada alrededor con ellos. Ya sabes lo que hace un rebote. Echa un vistazo a snap and wind up, y la mayoría de las veces si no estás seguro solo para facilitar dentro y fuera. Pone pegamento en ambos extremos, por lo que es lento en ambos extremos y va más rápido en el medio y muchas veces se ve realmente bonito. Eso suele ser un bonito movimiento natural y luego digital [inaudible]. Las reglas para la animación, se necesitan al menos dos mesas de trabajo. En esas mesas de trabajo se necesita algo que cambie que tenga el mismo nombre. Sólo hagamos un pequeño ejemplo. Tenemos dos mesas de trabajo. Esta cosa de aquí se llama. Por aquí este se llama Icon-Twitter. Genial, así que no tuve que cambiarlo. Si en realidad has nombrado cosas manualmente, recuerda eso y dice : “Probablemente quiera mantener ese nombre”. Mientras que si eso fuera un grupo aleatorio o una línea aleatoria, simplemente lo duplica y terminas con el grupo 10, 11, 12, esas cosas. Mismo nombre, esa es la flecha; dos mesas de trabajo. Algo entre los dos. En nuestro caso vamos a hacer el rebote aquí abajo, así que sólo va a moverse hacia abajo. Eso es sólo la diferencia. ¿ Estás listo para ello? Ambos vamos a deleitarte y traeremos otro problema que no quiero cubrir intencionalmente. Equilibrio, ¿así que estás listo? Genial. Mira eso. Ya ves, estás como, “Oh, eso es bueno para eso aunque pero la flecha es rara”. ¿ Puedo hacerlo por separado? No. Es bastante rudimentario como en la animación o todo el tablero de arte tiene que hacer lo suyo. No se pueden aplicar bits separados de flexibilización y animación a partes individuales en su mayoría. Te mostraré en el siguiente video. Vamos a conseguir una inmersión un poco más profunda, pero dos mesas de trabajo tienen que ser nombradas igual, algo de tamaño diferente. Puedes usar color, puedes usar rotación, puedes usar opacidad, y tienen que ser nombrados igual. ¿ Los veo? De todos modos. Eso es todo por este video, vamos a saltar al siguiente. 24. Comprender más sobre la animación en Adobe XD: Hola a todos. Vamos a llevar nuestra animación al siguiente nivel. No te emociones demasiado. Pero vamos a ir “Compra” diapositivas desde fuera de la pantalla y luego aparece check. Es para mostrarte el siguiente paso. Hicimos algo bastante sencillo en el último video, y esto nos va a mostrar cómo hacer algún tiempo extra diferente, cómo arrancarlo fuera de la mesa de trabajo, y un par de problemas con los que te vas a encontrar. Quizás esté un poco avanzado para esta etapa del curso, pero necesitamos cubrir estas cosas lo suficientemente temprano para que podamos repetirlas unas cuantas veces, y voy a establecer algunos proyectos de clase y probablemente te vas a un par de los temas que voy a aclarar lo mejor que pueda en este video. Si estás listo, estoy listo. Hagamos esto. Para hacer esa animación y veamos eso. Entonces si quieres que las cosas sucedan como en este momento, todo sucede al mismo tiempo, que es como esas cosas que suceden y todas pasan al mismo tiempo; misma flexibilización, mismo momento. Lo que quiero hacer es en realidad quiero que sucedan cosas. Quiero que esa pequeña marca de verificación entre solo después de que la flecha se haya ido. Lo que voy a hacer es ordenar las cosas y mostrarte cómo arreglar las cosas. No quiero que rebote para Twitter porque es sólo un poco distraente para este tutorial. Lo que voy a hacer es quitarle eso, acabo de borrarlo, así que notarás que ya se ha ido. Volvamos uno. Está ahí y no sabe qué hacer con él, así que lo he borrado. Simplemente se desvanece. Lo que voy a hacer es en realidad agarrarlo, copiarlo, pegarlo aquí, comprobar que tiene el mismo nombre, a veces se le agrega un pequeño número después. Pero no, no lo mismo. Vamos a prever de nuevo. Sí, vete. Apenas funcionan las flechas, pero lo que quiero hacer es que aparezca la casilla de verificación. Lo que voy a hacer es terminar de lado, voy a volver al diseño. Voy a hacer, mientras que mi pequeña flecha? La flecha va a ser al revés. Quiero que entre y luego se desvanezca. Vamos a probar eso. Siempre estar probando. Siento que soy super bueno en estas cosas. Si trato de hacer cinco pasos pensando que va a ser genial, lo voy a previsualizar y darme cuenta de que algo salió mal. Así que solo prueba después de cada pequeño cambio que has hecho solo para asegurarte no has ido corrigiendo todo. Porque no es divertido golpear deshacer 10 veces para empezar de nuevo por algo simple que podría haber corregido al principio. Tenemos esa animación. A continuación queremos que aparezca la casilla de verificación. Lo que terminamos haciendo es copiar y pegar y tener otro. Va aquí, se desvanece. Se queda desvanecido y lo que quiero es que aparezca la garrapata. Lo que necesito hacer es tener garrapata en éste y en éste. Vamos a traerlo en nuestra importación de archivos, Comando Shift I. Supongo que es Cambio de Comando I, y sus archivos de ejercicio, ¿dónde están esos? Hay una llamada garrapata de Icon. Puedes conseguir la tuya propia. Garrapata ginormosa. Mantén presionada Shift, escala hacia abajo, así que va a empezar aquí. Voy a copiarlo, pegarlo aquí, así que está exactamente en la misma posición, y ésta, quiero que la opacidad esté abajo. Mira eso. Vamos a darle una oportunidad, así que tenemos 1, 2, 3 de estos. Por ahora casilla de verificación y no pasa nada. ¿ Sabes por qué? [Risas] Voy a fingir que hice eso a propósito para enseñarte una lección. Pero no, lo olvidé. Ahí está esta página. Si vamos al modo prototipo, dice ir allá después de algún tiempo, exactamente cero segundos van allí. Éste no sabía lo mismo, sólo llega hasta aquí y va, no sé qué hacer. [ Risas] En realidad podemos ir aquí después de que recordara lo último que hice tiempo cero segundos y no voy a conseguir que rebote. Voy a hacer que empiece. Cuando las cosas se desvanecen, aparte de rebotar, realmente no importa si te relajas, te facilitas o ninguna. Es tan difícil contar una flexibilización con solo cosas que se están desvaneciendo. No lo sudas, así que empecemos en esta página. Vamos a jugar. Vamos a comprar esta cosa, desliza a través, y luego eso se desvanece. Mira eso. Si eres como todo lo que pasó, quería que la flecha se fuera por un rato antes de que apareciera la garrapata. Puedes hacer cositas así. Entonces éste de aquí, decimos, cuando llegue a esta página, empiece a moverse de forma inmediata, se puede decir en realidad solo espera dos segundos, hombre, chill out. Espera ahí. Vamos. Por ahora esta página juega los dos primeros, espera un poco, juega el segundo. Dos segundos es demasiado largo que se siente. [ Risas] Tienes la sensación, no lo sé. Lo llevamos a otro nivel. Agregamos tres. Puedes tener 15 si quieres intentar conseguir que XD haga tu animación, dobla a tu voluntad. Sin embargo, sí se complica mucho, pero tómelo paso a paso. Eso está bien. Lo último que quiero mostrarte , es razonablemente complicado. Me encantaría que fuera más tarde en el curso, pero sé que voy a establecer un proyecto de clase y vas a salir a correr con este problema. Entonces vamos a identificarlo y entrar ahí ahora. Nuevamente, si se siente como si fuera un poco demasiado duro, es un poco demasiado duro antes en este curso. Lo haremos de nuevo más adelante y se volverá más fácil y más fácil. Estoy fingiendo que soy tú, yo soy tú mismo tus manos y voy a ir Diseño, voy a ir a mi mesa de trabajo. Entonces dije que tengo que hacer animación, voy a coger este teléfono. Voy a mover mi aquí abajo sin ninguna buena razón sólo para mantenerlo separado. Sé que voy a agarrar un círculo, sacarlo. Voy a escoger un color de relleno y va a ser mi animación. Voy a escoger, no lo sé. Wow, ¿cuál es ese color? Ese es el color. Las reglas eran que necesitabas dos de ellas. Voy a copiar y pegar dos de ellas y lo que voy a hacer es necesito asegurarme de que sea del mismo nombre, por lo que éste se llama Elipse 6. Llamaremos a ésta Animación 1 y llamaré a ésta Animación 2. No hay que nombrarlos, sólo para dejarlo claro en este curso. En Animation 1, hay algo llamado Elipse 6. Esto se llama Elipse 6, genial. Eso va a funcionar. Lo que voy a hacer es que quiero arrancarte fuera de la pantalla y ahí es donde pasa el gran problema. Aquí es donde hemos cometido un error porque te gusta, los voy a empezar fuera de la pantalla y luego voy a moverlos a través. Empieza aquí, recuerda dijo Dan, quiero cambiar a prototipo. Quiero conectar estas dos páginas hacia arriba. Quiero que el gatillo sea justo después de algún tiempo, tal vez después de cero segundos para ordenar animate por aquí. Porque el nombre es el mismo, va a funcionar. Cuando golpeo “Play”, solo se está desvaneciendo en lugar de mudarme. El problema es que esto no está en realidad en Animación 1. Está encendido, ¿recuerdas la pasta? Recuerda que tengo todas mis páginas y luego hay al azar Pasteboard 1. Ese es el problema. ¿ Cómo lo arreglas? Se trata de cronometraje. Si deshago esto, así que vuelvo a aquí. No he agregado mi gatillo y no he movido esto fuera de la pantalla. Antes de hacer nada, es toda esta animación. Si digo ahora antes de que lo mueva fuera de pantalla, si agrego esta animación que dice tiempo de activación, he hecho todo eso, y si lo muevo ahora, se va , “Oye, va a intentar mover esto fuera de la pasta, pero va a romper mi animación auto. Así que no lo voy a dejar, está fuera de la pantalla, pero ya no está en la pasta. Todavía está encendido. Mi nomenclatura ha ido [inaudible] demasiado, pero se obtiene la idea. Recuerda Guión 1, Guión 2. Todavía está en el guión 1, pesar de que he empujado eso por aquí. Así que asegúrate de agregar el auto animate antes de empezar a moverte a través y tratará de mantenerlo conectado para ti. El único otro problema es cómo es eso, ha desaparecido en la tabla de pasta de aquí. Puedes seleccionarlo. Es un poco complicado. Por aquí, como dije, hay algunas peculiaridades divertidas para el XD y la animación, pero lo tengo seleccionado. Vamos a jugar ahora. Se mueve adelante. Se necesita alguna flexibilización. Vamos a relajar el chasquido. Vamos a ver ese. ¿Listo? Juega. Tiene esta facilidad de broche. Se avanza un poco y retrocede un poco, retrocediendo un poco y un poco, se ve bastante bonito. Eso es. Si estás haciendo animación, llévate a las páginas y simplemente agrega auto animate desde el principio, y significa que si terminas arrastrando algo del borde a la tabla de pasta, lo mantendrá conectado. ¿ Puedes arrastrarlo a la página correcta después? No puedo trabajar de una manera. Podrías salir de una manera, pero hay que romperlo aparte y empezar de nuevo, sumar el orden animar temprano. Ahora, esta versión de aquí arriba va a funcionar totalmente principalmente porque agregué el auto animate primero antes de que voy a arrastrarlo . Déjame mostrarte. Voy a agregar algo de espaciado aquí en realidad pueda moverlo fuera de la pantalla. Recuerda que empieza por aquí y mira, sigue siendo parte de esta página de confirmación porque auto animate ya se aplica antes de que lo arrastre. ¿Esto es útil? Siento que esto es bastante complicado hasta ahora en el curso, pero estamos llegando allí. ¿ Dónde estás otra vez? Oye, empieza fuera de la pantalla, hace un pequeño rebote, se desvanece y esperaremos a que aparezca nuestra pequeña garrapata. Eso lleva demasiado tiempo. Esa es la animación de siguiente nivel. Tenemos una mesa de trabajo extra para jugar con el tiempo porque sabemos que tenemos que hacer la misma flexibilización y el mismo tipo de animación entre toda la mesa de trabajo, no individuales, pero podemos fingiéndola por tener más de una mesa de trabajo, y podrías tener problemas si estás tratando de sacar algo de un lado y arrastrarlo si no agregas primero el auto animate. Termina en la tabla de pasta, lo cual es malo. Esto va a ser cada vez más útil cuando hacemos cosas como la navegación. Posteriormente en el curso, vamos a hacer click en esto, y toda la navegación se va a deslizar adentro, no sólo una flecha coja, y tenemos que hacer ese truco, lo contrario, terminará en la tabla de pasta. Eso es. Te veré en el siguiente video. 25. Proyecto de clase 05: Mi primera animación: De acuerdo, tiempo de proyecto de clase. Vas a crear tu primera animación. Si eres nuevo en la animación y estás encontrando este poco complicado, simplemente recrea lo que hicimos en el video y sube eso. Si te sientes valiente y confiado y vas a hacer algo, quiero que hagas algo ligeramente diferente. Conseguir que las flechas se deslizen y no hay diversión. Piensa en lo que podrías hacer. Podrías conseguir que venga desde una dirección diferente. Podría ser una forma diferente, tal vez un ícono diferente. Ten un poco de pensar en cómo transmitirías la orden recibida idea y me gustaría verla. Dependiendo de tu computadora, Mac y PC, lo que puedes hacer es que realmente puedas grabar tu animación y subir eso. Te mostraré cómo hacerlo. En XD, puedes previsualizar tu animación, así que te voy a dar. Lo que puedes hacer. Se puede ver este pequeño botón de grabación en un PC, está sobre este lado izquierdo. En un Mac es relativamente simple, se hace clic en él. Me va a pedir que sobrepase las preferencias de mi sistema. Deja que haga la grabación, está bien. Los arreglas. Abrir la configuración bajo mi uno XD necesita permiso, salir y volver a abrir más tarde. Parece que sólo funciona cuando lo haces después. Ahora si golpeo la grabación, ¿ puedes configurar un pequeño temporizador yendo? Voy a ir a esto y esa es mi animación. Voy a detenerlo. Me va a preguntar dónde guardarlo. Déjame poner el mío en mi escritorio por el momento. Vamos a ver qué tenemos. Entonces escritorio, tienes un pequeño MP4 mostrándome mi pequeña animación y esa es la que quiero que subas ambos a tu [inaudible]. Es un círculo ahora porque está destinado a representar un dedo usando tu touchpad o al menos tocar tu pantalla. Entonces en un Mac, eso es relativamente fácil. En un PC, no es tan fácil. Creo que los botones de grabación de la izquierda y podría pedirte que uses el software de alguien. Creo que usa el software de registros de Microsoft Xbox y ver hasta dónde llegas. Si eres como, necesito instalar cosas que sean demasiado difíciles. Si todo el mundo está en la canasta demasiado dura, me encanta que lo intentes porque me gustaría ver tu animación. Pero lo que puedes hacer es en realidad solo captura de pantalla todos estos tres de tu animación o dos si ya has hecho dos. Si tienes tiempo y querrás practicar, haz 10 tipos diferentes de cosas pasando. Pero si solo quieres lo básico, solo haz eso una animación simple y toma una captura de pantalla de ella, súbalo. Me encantaría ver esta. Por lo que hasta ahora, lo has estado subiendo en los comentarios y todas las funciones de asignaciones en la página web. Lo que puedes hacer ahora es que realmente me gustaría empezar a ver cosas en las redes sociales. En tus archivos de ejercicio, hay una página de grupo llamada Bring Your Own Laptop Online. Es un grupo de Facebook. Hay un grupo de LinkedIn llamado similar. Se llama el grupo Bring Your Own Laptop LinkedIn. Todas estas son mis asas para Instagram y Twitter, etiquetarme en esas y en realidad me gusta verlo. También puedes ir a echar un vistazo y ver lo que otras personas han hecho. Usa el hashtag XD, te ayuda a buscar cosas y ver el trabajo de otras personas. Pero sí, hazlo, subirlo al lugar habitual, pero también mira para subirlo a las redes sociales, y cuando estés subiendo a las redes sociales, pusiste ahí arriba como, oye, esta es mi primera animación . Me encantaría algunos comentarios y somos un grupo realmente amistoso. Si te preocupa un poco, no sabemos que lo pones. Nos aseguramos de moderar nuestro grupo. Sé que establecemos algunos grandes valores ahí que esto es para gente nueva, si eres una persona nueva subirlo, obtén algunos comentarios. Cuéntanos qué problemas tuviste, qué cosas te gustaría hacer. ¿ Cómo hizo esa persona esa? ¿ Puedes mostrarme o qué me puedes decir? Es ese tipo de grupo de Facebook. Es menos de show de glamour de Instagram y más de, mira lo que hice. Estoy emocionado, aunque tal vez en el gran mundo de la animación, puede que no sea el mejor del mundo, pero eso está bien. Estamos aquí para aprender, pedir crítica si lo quieres, lo contrario publicarlo y decir que esto es lo que hice pulgares arriba. Háganos saber cómo está encontrando el curso. Una cosa es cuando lo estás subiendo a los diversos lugares, algunas redes sociales te permitirán simplemente tirar el video directamente en ellos y hacer que funcione. Pero algunos de los comentarios y algunas de las subidas de tareas, tendrás que subirlo a algo como YouTube o Behance o Vimeo o algo más primero y luego pegar el enlace en. Se verá a través del enlace en lugar del video en sí mismo. Si eso suena demasiado duro para ti, solo haz capturas de pantalla. Eso está bien. Pero me encantaría verlo recordar y publicarlo en una gratuita de YouTube o cuenta de Vimeo o en Behance o lo que sea que puedas hacer para alojarlo en algún lugar, tu video, y luego solo publicar el enlace. Entonces eso es todo. Haz tu primera animación, simple o avanzada, subirla, me encantaría verla. Eso es todo. Ve a tu tarea y te veré en el siguiente video. 26. Compartir esquemas de página para comentarios en Adobe XD: Hola a todos. En este video, vamos a compartir nuestro wireframe con nuestro cliente en este caso. Vamos a enviárselos. Van a poder expresar su nombre, Neil y van a sumar comentarios y diferentes pines. Éste de aquí, pueden agregar alfileres para burlarse de cosas específicas para decirme, sí, para darme retroalimentación. Como diseñadora, te voy a mostrar cómo crear el enlace, enviárselos, y cómo trabajas con estos comentarios entre tú y tu cliente. Vamos a saltar para ponernos en marcha. Vamos a esta tercera pestaña aquí. Opiniones de diseño, reseñas de prototipos, ahora veamos share. Compartir nos permite de este lado aquí mandar un enlace a, llamémoslo Neil. Neil es un personaje ficticio. Es una criatura simple. Yo lo uso como ejemplo porque quiero mantener esto sencillo para quien lo esté enviando. Porque no conozco su nivel de experiencia en una computadora, ese tipo de cosas, así que eso es un Neil. Lo primero que tenemos que hacer es que tengamos que poner raro que esta animación empiece. De vuelta aquí en prototipo, haz click en donde quieres que vaya esta cosa. Si tienes dos como acabo de hacer, apaga uno, y solo tienes uno encendido. Puedes tener múltiples flujos. Eso es demasiado para lo que estamos en ahora, pero sólo vamos a tener un flujo, al menos en una de estas páginas. Aquí es donde va a empezar. Puedo llegar a compartir, voy a elegir flow 1, y el más común es la revisión de diseño. Va a permitir comentar, que es lo grande. Depende de ti y lo seguro que necesitas estar, ya sea que esté protegido con contraseña,solo le das una contraseña o personas a solo le das una contraseña las que has enviado por correo electrónico, aún no protegido con contraseña pero no cualquiera que tenga el enlace puede acceder a ella. Quiero que cualquiera con un enlace acceda. Todo lo que haces es hacer clic en “Crear Enlace ”, piensa en ello por un segundo y debes conseguir un poco de URL. Eso es lo que quieres compartir. Puedes enviarlo a Behance, puedes incrustarlo en un sitio web si lo deseas. Sólo vamos a enviar un enlace. Vamos a copiar el enlace, y voy a abrirlo y fingir ser Neil. Espera ahí, voy a ponerme mi sombrero Neil. Soy Neil y tengo el enlace en un correo electrónico o DM o algo así, se lo has mandado. Lo abro para él y esto es lo que ve Neil. Lo bueno de ello es que Neil no tiene que iniciar sesión, que es probablemente una de las realmente grandes prestaciones aquí. Se cae un poco cuando tienes que inscribirte un Adobe ID solo para revisar tu trabajo. Éste de aquí, pueden hacer todo como invitado. Pueden empezar a interactuar con él. Soy Neal, pasando y me voy como, esto parece bueno. [ Risas] Volvamos. No tengo ninguno de mis enlaces resueltos. Malo, malo, malo. No tengo mis enlaces funcionando, lo cual es malo, debería arreglarlos para Neil pero hay alguna navegación básica. Es posible que tengas que educar un poco a tu cliente sobre cómo funciona esto. Página principal, en bicicleta a través de ella. Pueden usar las flechas y donde se pone agradable es que digamos que sí deciden que esto es, vamos a aprender más, este rebote, y me gusta el hombre, quieren agregar un comentario. Pueden agregar dos tipos de comentarios, solo genéricos, golpear “Enviar”, y pueden decidir si van a iniciar sesión con tu Adobe ID para ser un poco más oficiales. Es gratis inscribirse en un Adobe ID. No tienes que tener una licencia creativa de Cloud, una pagada puedes usar solo una identificación gratuita o pueden hacer esto. Haremos eso por Neil. Lo bueno de ello es que Neil llega a interactuar, agregar comentarios sin bajar por el agujero del conejo de inscribirse y contraseñas y esas cosas. Eso es realmente genial. hacer uno genérico para esta página en particular, pero también puedes hacer una más específica. Consulte esta página, coloque el pin, aquí es donde la educación podría tener que estar con el cliente. Explica que puedes hacer alfileres y comentarios genéricos. Dependiendo aquí, puedes decidir sobre éste aquí. Van a decir algo como esto no es nuestro logo ¿verdad? Presentar. Eso es un poco más específico con un alfiler. En realidad está apuntando a algo, mientras que éste es solo un poco más en todo el lugar como comentarios genéricos. ¿ Cómo accedes a él en tu sitio como diseñador? Ya no Neil, adiós Neil. Voy a ser Dan el diseñador. No por el momento. Seguimos hablando de ello, pero potencialmente van a traer los comentarios dentro de la app que te gustaría, ¿por qué es eso ahí? Simplemente no es por el momento. Lo que haces como diseñador es, recibes un correo electrónico explicando que alguien ha agregado un comentario a tu enlace. Recibirás un correo electrónico notificándolo. O simplemente puedes ir a la versión basada en web. A pesar de que este enlace aquí es para Neil, en realidad puedes usarlo solo para ti mismo. Voy a copiar el enlace. Ahí vas. Soy el mismo enlace que Neil, pero debido a que estoy conectado con mi Adobe ID, llego a hacer algunas cosas extra. Puedo ver los comentarios de los huéspedes de Neil, que es genial. Echemos un vistazo. Esto está en nuestro logo. Si hago clic en él, ves que me llevó a la página y tiene como pequeño pin que se alinea. Más de un pin tendrás diferentes números. Genial. Puedo volver y decir que no. Preséntelo, y eso se sumará a esta historia aquí. Ahora, Neil puede volver como invitado y seguir agregando comentarios también y comprobarlo también. Bueno, podría decidir que lo he hecho todo y realidad voy a entrar aquí y resolver éste, así que se ha ido de esa lista. Atrás, ya está hecho, he comprobado eso de mi lista. Así es como lo haces comentando. Puedes decidir hacerlo como invitado o conseguir que la persona inicie sesión, un poco más de detalles extra para ellos porque se les notificará cuando haya habido una actualización o solicites para ti. Digamos que sí aunque decido que lo que sea que esté rebotando aquí, voy a ir a arreglar eso. Volviendo a ser Dan el diseñador, voy a entrar aquí y es esta página aquí. Voy a volver al prototipo. Esta página aquí tiene este botón aquí, ¿no? Acerquemos. Es este botón aquí. Tiene rebote izquierdo push. Sólo vamos a hacer una fácil salida, y vamos a salvarla. ¿ Cómo lo actualizamos? No se actualiza automáticamente. Tienes que decírselo para actualizar. Vas a compartir y vas a éste. ¿ Se puede ver el enlace de actualización? Todo lo que hace es que mira tu documento y actualiza cualquier cosa. El enlace sigue siendo el mismo. No tienes que mandar uno nuevo , y puedes decir: “Oye, Neil, echa un vistazo , y puedes decir: “Oye, Neil, de nuevo ese enlace”, o envíelo de nuevo y dile: “Oye, compruébalo. ¿ Qué opinas de esto?” Vuelvo siendo Neil, y volví al enlace. Todavía puedo ver mi comentario porque el diseñador estándar no le ha respondido, pero echemos un poco de mirada. Página de inicio, vamos a hacer clic en esto y más de un poco a gusto. ¿ Qué pensamos de eso? Yo digo: “Buen trabajo Dan”. [ Risas] Eso es comentar o lo básico de comentar en Adobe XD. Lo único que hay que mantener un ojo fuera es, que pueden en alguna etapa traerla a la aplicación. Realmente quiero que lo hagan, aunque no lo hacen en este momento. Estoy dentro de Adobe XD en lugar de un navegador, quiero poder verlos aquí abajo. Vamos, chicos. Pero hasta eso, solo usa ese enlace web para ver los comentarios. te notificarán por correo electrónico cuando se Sin embargo,te notificarán por correo electrónico cuando se publiquen allí. Eso es compartir tus wireframes con Neil. Adiós, tú. Adiós Neil, y adiós de mí. Te veré en el siguiente video. 27. Tableros de inspiración y recursos para el diseño de UI de alta fidelidad en Adobe XD: Hola a todos. En este video vamos a hablar de inspirarnos sobre tu trabajo de alta fidelidad. Hasta ahora hemos estado buscando en baja fidelidad. Hablamos de eso antes. Recuerda, wireframes de baja fidelidad y palabra de lujo de alta fidelidad para todas las imágenes, colores y fuentes, buscando y sintiéndote como una app terminada. Antes de subir y empezar realmente a diseñar cualquier cosa que me guste para conseguir un poco de una tabla de humor por un par de razones. Uno para conseguir mis propias ideas de como cómo van a verse esas cosas , el sentimiento por ello, pero también para enviar al cliente. Antes de empezar a diseñar, me gusta compartir un tablero de humor para asegurarme de que estoy en buen camino. Ambos alineamos y ambos estamos remando en la misma dirección. Compartiendo un tablero de humor temprano en la pieza con su cliente o Gerente de Producto, quienquiera que sea, para que puedan decir, sí, eso es lo que siento. tanto que podrías bajar todo este, indie rock, patinador marcas estilo de té. Porque eso es lo que sientes al Zoe Owl, persona le gustaría, pero el cliente está completamente en desacuerdo con eso y puede que no sea que tengas razón y estén equivocadas, es más que tú necesitan por lo menos entenderse unos a otros o al menos entender la persona juntos. Conseguir un tablero de humor hecho rápidamente y salir temprano al cliente te dejará de gastar para siempre haciendo 10 versiones de ella y enviándolas por todas partes al cliente y ojalá [RIAS] una de ellas sea buena . Conseguir inspiración, todo este tablero de humor, ¿de dónde lo sacas? Hay un montón de lugares. Sin embargo, cada vez que sugiero uno en uno de estos videos, van y lo cierran o agregan un paywall o algo así. Voy a apegarme a los dos grandes principales. Si tienes uno que te gusta, para el que te inspires, especialmente alrededor de UX o UI, pon un comentario abajo con una URL para que otras personas puedan echar un vistazo. Si eres tú, ve a echar un vistazo ahora y mira qué hay ahí abajo. Aquí están los dos principales grupos de comida son Dribbble y Behance y voy a tirar en premios porque lleva mucho tiempo allí. Dribbble especialmente se ha convertido en un estilo muy UI donde la gente comparte su trabajo. Simplemente echa un vistazo, encuentra cosas que te gustan y te gustan, oh, eso es genial. Me gusta ese avatar, me gusta cómo se dobla esto por aquí. No estamos aquí para robar ideas, estamos aquí para inspirarnos y aunque nos guste esta cosa bendy up, somos como, no esta persona va a ser el logo ahí dentro. El logotipo significa un color diferente y terminas utilizándolo como post inicial. Pero lo que podrías hacer es entrar en ella y decir captura de pantalla. Recuerda en mi Mac es Comando, Shift 4 y solo bebe tanto detalle como puedas. Para mí personalmente, porque quieres poder volver a esa URL. En este caso, quiero que mi tablero de humor sea muy bonita, así que solo voy a hacer capturas de pantalla este trozo de aquí. Acabas de reunir capturas de pantalla para tu tablero de humor. Si estás en un PC, tendrás que comprobar cómo hacer una captura de pantalla. Pero sí, así es como comienzas. Ahora, todos estos son muy diferentes pero similares. Si has estado a ambos de estos, tienen un sabor diferente y así utilizo las dos. lo que se vuelve más emocionante Sin embargo,lo que se vuelve más emocionantees cuando te pones un poco más específico. Digamos aquí, estoy buscando té. Tal vez el té incluso en la interfaz de usuario, así que lo hacen las búsquedas específicamente en torno a lo que estás haciendo y lo corta a cosas que te gustan. Oh sí, me encanta esta idea de que los granos de café se derramen sobre el tipo, pero tal vez lo haga con hojas de té. Esta es otra forma de obtener tableros de humor un poco más específicos, capturas de pantalla, en el siguiente video, los arrojaremos en una página de aspecto de tablero de humor. Exactamente lo mismo para Behance, haz búsquedas específicas. Lo hicimos en Dribbble cuando miramos categoría en cuanto a comida y té. Este de aquí podrías estar haciendo tu flujo de tareas es mucho alrededor del checkout, así que lo que podríamos ir y decir carrito UI, solo para ver un poco más específico. Carros, probablemente la palabra equivocada en este caso, hay un poco de carro pasando, pero probablemente, echemos un vistazo a la interfaz de usuario de pago o la página de pago. Es posible que tengas que encontrar el idioma adecuado para conseguir el correcto y luego empezar a pasar y ir, genial, eso está ahí. Podrías notar cosas que has olvidado agregar, eres como, oh, sí, necesitamos esa recaptura o el subtotal. Se puede conseguir bastante específico en estos y por eso incluyo premios. Los premios son con tres ws y lo genial de esto es que es realmente divertido navegar, pero una vez que te metes en él, en realidad es realmente práctico. En el menú aquí, voy a ir a ver a todos los nominados. Esto es algo de premios. Nominados, echemos un vistazo, y puedes ir a categorías. Se puede decir, quiero ver cosas que tiene, se puede ver, no lo veo, comida y bebida. Eso va a bucle, y está clavado. Lo trajo hasta aquí y lo bueno de esto es que está muy comisariado, cosas tan hermosas. También podrías entrar más lejos y mirar las etiquetas e ir en realidad, quiero encontrar cosas que tenga página de contacto porque eso es en lo que estoy trabajando. Podrías obtener algunas ideas sobre cosas específicas. Nuevamente, cuando pegué una copia solo para conseguir ideas, consiga fluir nuestros jugos creativos. Muchas capturas de pantalla, volcadelas en una carpeta, y luego te veremos en el siguiente video. Oh, no, no lo haremos. Una cosa que olvidé mencionar es que buscamos cosas en un sitio web y es muy importante estar mirando en tu teléfono también, porque lo que hago a menudo en mi teléfono y tomo capturas de pantalla no es tanto buscar inspiración, pero en realidad mirar a los competidores. Ya hice algunos. Déjame mostrarte. He creado esta carpeta llamada Mood Board, y solo iba por teléfono y escribiendo comprar té verde. Tomé capturas de pantalla de lugares que podrías comprar té verde. Ahora el problema y el mal. [ Risas] Algunos de ellos buenos, algunos malos. Solo para echar un vistazo e inspirarse en ella. Lo que sí encuentro sin embargo, es que muchas veces lo que voy a tener que hacer es si compro té verde en línea, me va a dar un resultado muy localizado y no vivo en la parte más de moda, más de moda del mundo. Vivo en Limerick, Irlanda, que no es moderno y de moda, pero no lo sé. Algunos de los diseños pueden ser, no lo sé. Vamos a llamarlos predecibles, aburridos, predecibles aunque es una palabra mejor. A menudo lo que voy a hacer es, con estas otras capturas de pantalla, ver estas aquí, no sé. ¿ Tienes sentido para que sean un poco más emocionantes? Escribí comprar té verde de Nueva York en línea. Escogí Nueva York. No lo sé. Para mí, [Risas] París, Nueva York, solo escojo lugares que parecen lujosos, y probablemente voy a tener la vibra correcta que quiero. Zoe, la persona para la que estoy diseñando desde mi persona, está buscando ese estilo. Busca París y Los Ángeles y si estás viviendo en algún lugar que tal vez sea un poco no la altura del diseño internacional, ponlo en algunos otros términos, toma capturas de pantalla, incluso si no son buenas, sólo las cosas para evitar colores que te puedan gustar porque tal vez tengamos que hacer este logo como parte de nuestro diseño. A lo mejor nos encanta este carretes de Instagram atascados, cosa de Pinterest, para que te pongas la idea. Mirando también a los competidores porque están teniendo que lidiar con muchos de los mismos problemas que tú, las mismas cosas. Ve por el carrito, toma capturas de pantalla, mira el menú. Menú de la izquierda, no estoy seguro. Eso va a ser. ¿ Es eso? No. Hay una última cosa. Lo último que lo prometo, es Instagram. Incluso si no eres persona de Instagram, eres como, hey, yo no hago Instagram. Podrías intentarlo. Haz algunas búsquedas de algunas etiquetas para UX, diseño de interfaz de usuario, y es increíble. Empezará a entregarte cosas realmente geniales así. El buen material burbujea al servicio, me encontré tomando muchas capturas de pantalla para trabajos que tal vez ni siquiera lo esté haciendo. Solo estoy mirando Instagram, el hombre es una fuente genial, hay que averiguar qué es eso. Captura de pantalla, envíame a mí mismo. Simplemente pasa algún tiempo en un lugar como ese aunque ya estés ahí, obviamente es perfecto. Pero es un lugar bastante visual. Buen lugar, encuentra bonitos diseños, sigue un par de hashtags como diseño de interfaz de usuario, diseño UX, inspiración diaria de UX, cosas así, y potencialmente te encontrarás cosas que te inspirarán. Muy bien, eso es por cómo me inspiro antes de empezar a hacer mis maquetas de alta fidelidad, lo compartiré con el cliente para asegurarme de que estamos en el buen camino juntos. Muy bien, eso es. Vamos a saltar y construir un tablero de humor. 28. Cómo crear un tablero de inspiración en Adobe XD: Hola a todos. Vamos a hacer un par de tableros de humor en Adobe XD. Este primero aquí, realmente simple, básicamente solo imágenes arrojadas en una página para tu propia referencia, y luego te mostraremos cómo y por qué podrías hacer este tablero de humor más curado que sale a un cliente. Vamos a saltar. Cómo hacer un tablero de humor. Hay dos versiones que voy a compartir contigo. Va a haber el cavernícola haciéndolo por mí misma manera, y luego voy a hacer una forma un poco más reflexiva que podría salir a nuestros clientes o partes interesadas. He pasado y hecho en mis capturas de pantalla. tengo sentados en mis expedientes de ejercicios. he dejado ahí para ti también por si acaso quisieras tener. Echa un vistazo a mis, asignados a los expedientes de ejercicio. Hay uno que llaman tablero de humor. Esto es justo lo que pasé por Internet y tenía una mirada y cosas que tenía un buen presentimiento. Algunos competidores ahí también. Lo que quiero hacer, te mostraré el camino cavernícola. Selecciona todo, agarralo, arrástralo a XD, déjalo ir. [ Risas] Eso es, tablero de humor hecho. Yo uso esto. A menudo, lo escalaré hacia abajo así que voy a acercar todo el camino hacia fuera. Recuerda el Comando 0, y agarra todo esto, y luego voy a moverlo a través y escalarlo hacia abajo. Esto es lo suficientemente bueno para cuando estoy trabajando solo para mi propio tablero de humor personal. Tablero de humor hecho. Command Plus o Control Plus para acercar, y eso es lo que uso cuando empiezo a hacer mis diseños. Yo soy como, sí, pero en eso pero como lo hice. No fue a ninguna parte, tablero de humor hecho. Si lo vas a hacer de esta manera, traes todas esas imágenes, hay un pequeño problema. Por aquí, ¿notaste entonces que estaba todo el camino hasta el borde? En realidad se ha ido de la pasta. El tablero de pasta no es infinito. Si estás como, “Oye, hay muchos, pero mira a todos estos”. Los he seleccionado a todos. puede ver que están en mi tabla de pasta, no están en ningún tablero de arte, pero son una de mis pasteleras. Pero hay todo esto como a dónde van estos tipos. Estaban justo fuera de la página, no sabían qué hacer con ellos. Puedes hacer una de dos cosas. Si este próximo bit es realmente duro, solo arrastra en pareja a la vez, entonces no van a aparecer fuera de la página y ahí vas. Sé que todos estos son seleccionados, por lo que puedo ver estos gabinetes. Doy clic en esto, mantenga pulsada Mayús, haga clic en esta parte superior , y luego debería poder hacer clic en O. [Risas] ¿Cómo lo hago? [ Risas] U, U, U. ¿Puedo alejar aún más? No puedo, ¿cómo te cruzamos? [ Risas] Espera ahí. No puedo pensar en ello. Tengo de esta manera, mantén pulsado Mayús y usa la flecha izquierda. Eso funcionó muy bien. [Risas] Cómo lo hago en el pasado, no puedo recordar. Todo lo que hice fue usar para deshacer es que en realidad acabo de golpear la flecha izquierda y acaba de ir, estoy todo el camino por aquí y voy a saltar todo el camino. Lo haces de la misma manera, así que solo selecciónalos todos aquí. Usa tu cualquiera de tus teclas de flecha y simplemente se lanzan de nuevo a la almohadilla aquí. Escalar estos hacia abajo y agregarlos a mi mezcla. Eso es lo que hago cuando estoy haciendo mi propio tablero de arte personal y es suficiente para ponerme en marcha. Cuando estoy escalando esto, un buen punto es que he seleccionado muchas de ellas y si agarro el borde, hacen algunas cosas raras de redimensionamiento. Lo que quiero hacer es mantener pulsada Shift y agarrar la esquina y los redimensionará todos juntos de la manera que podamos desear. Eso es tablero de humor cavernícola. Digamos que ahora aunque quiero enviar esto a mi cliente porque es importante para conseguir mis propias ideas, un tablero de humor, pero también es realmente importante transmitir a dónde vas en un dirección a tu como la palabra stakeholders se acostumbra mucho en diseño de UX y el stakeholders es cualquiera que sea el cliente, clientes, cualquiera que tenga participación en esto. Podría ser tu jefe, tu gerente de producto, podría ser otros miembros del equipo, tendrán una participación en este proyecto. Esa es la parte interesada, una palabra que odio. Pero sí, así que digamos que lo estamos enviando al cliente en este caso. Esto no va a hacer, A porque les estamos cobrando. [ Risas] Quieren ver mejor que solo cosas arrojadas a nuestra página. También tiene que ser más considerado porque esto de aquí es muy confuso para las partes interesadas o cliente porque son como, no quiero lucir así. Es difícil decir que esta es la dirección cuando están comparando estos dos. Vamos a tener que pasar y decir, esto es en realidad sólo para mí y no para el cliente. Lo que quiero hacer es impartir al cliente la dirección que me dirijo, y en mi caso, son principalmente estos de arriba aquí, además los voy a sentar un poco más agradable. Vamos a cubrir imágenes y recortarlas más adelante en el curso. Estamos haciendo tablero de humor, así que te mostraré lo que haré. Voy a añadir una página. Voy a mi nueva herramienta de página. Voy a agregar solo este sitio web de escritorio uno, y lo voy a llamar tablero de humor. Lo que voy a hacer es que voy a crear algunos rectángulos y tú esperas ahí. Sólo voy a dibujar algunos rectángulos con la herramienta rectángulo. Tú las escribes. ¿ Para qué sirve toda esa basura? Sólo algunos rectángulos y lo que podemos hacer es con él, me gusta usar este método de arrastre. Hay enmascaramiento y cosas en un video posterior, pero si quieres hacer de la manera rápida y fácil, encuentra los que realmente te gustan y simplemente arrástralos desde tu buscador en Mac o PC y simplemente arrástralos directamente a una caja. Nos permite escoger los que realmente nos gustan y hace que se vean un poco más agradables. Voy a arrastrar algunos de estos adentro. Lo que estoy haciendo aquí es que me estoy asegurando porque para mí me gusta, me gusta este, me gustan los colores aquí, pero va a ser muy difícil comunicar al cliente que esta es una dirección cuando también esto es dirección. Voy a ser un poco más claro sobre lo que pongo aquí porque quiero probar y titular juntos para que se sienta como si estuviera golpeando de cierta manera. Lo que quieres hacer es encontrar el que esté más cerca la dirección y que sea el más grande , algunos bits más pequeños, personal de apoyo más pequeño solo para tener una idea de todo, tratar de comunicar tu a través de imágenes de la dirección que estás golpeando. Para estos, estas pequeñas cosas aquí podrías pasar y usar la herramienta cuentagotas y en realidad ir. Quiero sacar algunos colores de ella. Haremos colores de nuevo más adelante también, pero podrías sacar algunos colores de muestra de esto solo para tener una sensación de un sabor de colores que podrías estar usando en esto. Este documento lo estaría enviando al cliente. Podrías tener más de uno. Podría haber una dirección aquí que sientas que el cliente ha pedido y tal vez otra que hagas, otro tablero de humor con algo que podrías ser más apropiado para el usuario, y enviar un par de diferentes opciones de tablero de humor creativo más. Ahora, algunas de las habilidades aquí en cuanto a hacer este tablero de humor y contigo todavía para recortar imágenes y moverlas , trabajando en colores. Haremos eso a medida que pasemos por el curso. Pero quería mostrarte en esta etapa de mi proceso, mi tablero de humor cavernícola y el tablero de humor un poco más comisariado que compartiré con el cliente que es formas aleatorias, pero [Risas] muy bien alineado . Eso es todo para mis tableros de humor en esta etapa. Vamos a subir al siguiente video. 29. Proyecto de clase: tablero de inspiración: Hola a todos, es hora del proyecto de clase. Quiero que construyas un tablero de humor. Se puede hacer uno elegante como este ejemplo de partes interesadas que hicimos en el último video, pero sepan que nos faltan algunas de las habilidades con el cultivo y la recolección de colores. Haremos eso más adelante. En esta etapa podríamos simplemente hacer el viejo grande los abarrotó a todos ahí. Ahora tiré el mío todo adentro. Simplemente puedes ir a Importar archivos y traerlos de una manera más sensata. Pero una vez que los tengas a todos dentro, toma una captura de pantalla y subirla a comentarios o a las asignaciones dependiendo de dónde estés haciendo esto. Eso es todo. Crea un tablero de humor. Una cosa que no he cubierto es con todo este flujo de tareas en todo este proyecto que estamos haciendo, estamos asumiendo una nueva empresa que ya no tiene una marca realmente fuerte. Si hay una marca existente, lo que podrías hacer es que no saltes el tablero de humor, pero podría ser mucho más restrictivo. Podrían ser ejemplos de tal vez material impreso que tengo, su sitio web existente con el que tienes un empate. El tablero de humor podría no ser tan emocionante o tan diferente como esto es. La otra cosa que podrías tener son las tomas de producto. Voy a usar imágenes de stock para un té verde, pero si esto es un cliente real, podrían ya tener las fotografías. Podrían ser filmados de una manera específica para ayudar a impulsar el diseño. Tal vez ya tengan un logotipo que no tenemos. Tirar de un logotipo en tu tablero de humor y tirar de colores de eso también va a ser útil. Pero por el momento tenemos una empresa completamente nueva. No tiene logo así que podemos ir un poco más emocionante y amplio con nuestro tablero de humor. Haz eso y te veré en el siguiente video. 30. Cómo trabajar con columnas y cuadrículas en Adobe XD: Hola a todos. En este video, vamos a hablar de columnas, estas cosas tealy. Por qué hay 12 de ellos. Por qué a veces usas seis. Por qué usas una cuadrícula en lugar de columnas. Todo tiene que ver con el diseño web receptivo y cosas como puntos de ruptura. Ahora, si eso es, si quieres, soy diseñador web, entiendo que este video va a ser rápido y fácil. Si eres nuevo en el diseño web y el diseño UX, y no has experimentado diseño web responsive y estas columnas antes, voy a hacer todo lo posible para intentar explicarlo todo en un solo video. Es por eso que éste es un poco más largo que los otros porque hay un poco de teoría que continúa aquí. Voy a hacer todo lo posible para tratar de explicarlo todo. Ojalá haga un buen trabajo. Empecemos. Ve a por una taza de té, siéntate. Es posible que tengas que ver este dos veces. Espero que no. Vámonos. Hablemos de columnas, y es más fácil empezar. Estamos hablando de columnas en escritorio, y luego trabajaremos en el móvil. Me resulta más fácil de entender de todos modos. Vamos a hacer herramienta ascendente por aquí. Vamos a escoger tamaño para nuestra página web. Estos son realmente comunes en términos del tamaño para un sitio web de escritorio. Google el tamaño más común de escritorio o navegador web, en el año en que estás, y se va a subir, voy a recoger 1920 aquí. Éste también es otro común. 1920 me va a dar suficiente espacio para hacer mi página web. Voy a arrastrarlo aquí abajo, y voy a llamar a ésta mi página de inicio. Vamos a tener que desarrollar nuestra página web o nuestra versión de escritorio de nuestra página web móvil también porque se va a ver en ambos. Probablemente vamos a empezar primero con el móvil y diseñar para eso y luego buscar hacer una versión de escritorio después. Pero en cuanto a las columnas, empecemos con esto. Tengo mi escritorio. Voy a hacer click en el nombre aquí. Si no estás seguro de cómo estoy moviendo estos por ahí, estoy haciendo clic en el nombre y arrastrándolos solo con la herramienta de selección. Ahora, para agregar las columnas con ella seleccionada por aquí hay esta cosa llamada grid. ¿ Puedes encender esta pequeña garrapata? Hay ya sea cuadrado o disposición. El diseño es lo que queremos, y utiliza columnas. Debe por defecto a 12 si no usa 12. En primer lugar, ¿por qué estamos usando 12? El primer motivo es porque todos lo usan y esto es lo suficientemente bueno por una razón como cualquiera. Si decidieras que quieres hacer columnas de, no sé, 13, estarías en problemas con un par de personas, y principalmente tu desarrollador, porque 13 es un número raro por el que dividir las cosas. Es difícil dividir por la mitad a medida que van las columnas. Tampoco es divisible por lotes. Es un viejo número gracioso. El otro motivo es que tu desarrollador se va a enfadar. Principalmente porque un desarrollador a menudo no va a estar codificando tu sitio web o tu app completamente desde cero. Van a usar algunos atajos o frameworks que ya existen para acelerar el flujo de trabajo. Muchos de esos marcos vamos a usar cosas como un sistema de columnas preexistente, y probablemente va a ser 12. Habla primero con tu desarrollador, asegúrate de que estás en el camino correcto. Digamos, soy nuevo en esto. Si uso una cuadrícula de 12 columnas, ¿eso va a estar bien? Probablemente, sí. La otra razón por la que es realmente bueno es la misma razón es que es para cuando lo estás haciendo decir, diseño de revista. Te da consistencia a través de páginas. Significa que las cosas colocadas en esta página cuando salté a, di mi página de contacto con nosotros, todo está remodelando. Hay un poco de consistencia de diseño, un poco de flujo a través en absoluto. Otra razón es 12 es buena y divisible. Voy a hacer esta página un poco más larga. Digamos que voy a la herramienta rectángulo. Voy a burlarme de un sitio web realmente rudimentario. Tengo mi barra de navegación por la parte superior. Tengo mi caja de héroes a lo largo de la cima. Tenemos espacio desde donde trabajar. Esta es una gran llamada a la acción,ahora en venta, ahora en venta vistazo a nuestra última caja de héroe de producto aquí. Entonces abajo abajo aquí tenemos nuestra caja de características, y voy a diseñar uno que tenga. Ahora a estas muchas veces se llaman tarjetas como pequeñas unidades repetibles que puedes usar para diferentes productos, tal vez servicios diferentes. Lo que voy a hacer es que los voy a duplicar, así que tengo 1, 2, 3. Se puede ver cómo 12 es un tamaño práctico porque significa que puedo ir ancho completo. Puedo tener tres abajo abajo aquí. Digamos que si necesito cuatro, lo que puedo hacer es en realidad ir simplemente dividir este 12, aquí vamos, y puedo hacer uno, seleccionando ambos manteniendo pulsada mi tecla Alt u Option en un PC. En realidad, eso es lo contrario. Alt en un PC y opción en el Mac. Se puede ver cómo 12 es útil para esto. Puedo decir aquí vamos. Podrías hacer dos, puedes hacer uno, no puedes hacer cinco. Ese es uno de los inconvenientes aquí. Como quiero cinco cajas entonces puedes. Por eso tenemos 12. Se pone aún mejor cuando estamos haciendo lo que se llama diseño web responsive. Porque vamos a tener que averiguar cómo se ve esto en digamos móvil. Digamos que trazamos esto en el móvil. Sólo vamos a hacer uno nuevo. Hagamos uno nuevo. Vamos. Una nueva mesa de trabajo. Vamos a hacerlo del tamaño para el que estás diseñando. En éste. Digamos que también estoy usando 12 porque usa el mismo framework, no importa si se trata de tablet o un móvil o de escritorio. Es el mismo sitio web que solo responde al tamaño del dispositivo, diseño receptivo. Echemos un vistazo a las 12. Voy a deshacerme de mis márgenes. Esa es la materia en los bordes aquí, cero y el mismo diseño para ello. He diseñado este sitio. ¿ Qué aspecto tiene? Un móvil, básicamente lo mismo. Tengo mi navbar en la parte superior aquí. Tengo mi cuadro héroe que ligeramente diferente porque tenemos tanto espacio en la versión de escritorio, tengo este enorme, gran columna relleno blanco, mientras que esta tengo que ir llena a los bordes porque simplemente no tenemos el tamaño para jugar alrededor con en el móvil. Cuando bajamos a estos tipos, abajo aquí abajo, no hay manera de que pueda poner cuatro a lo largo del fondo. Yo podría. El problema es que sólo van a ser demasiado pequeños, difíciles de leer. Ahí vamos. Eso no va a funcionar. Lo que a menudo vas a hacer es que vayas realmente en el móvil, vamos a conseguir esta caja solo para hacer algo diferente en lugar de esta caja tratando de ir a través de las tres columnas, lo decimos en código para decir, no tienes que preocuparte por esto, pero es una idea para el desarrollador. Es posible que ya sepas mejor codificación, por lo que esto podría ser fácil para ti, pero si no, tu desarrollador va a ir a esa caja en lugar de ser tres columnas en realidad va a ser, digamos seis columnas. Solo hay que cambiar eso en el código del dispositivo llamado B6 móvil en lugar de tres. Significa que es súper fácil de implementar diferentes diseños en diferentes tamaños. Has decidido que en lugar de cuatro a través, has decidido hacer esto como cuatro cajas pero apiladas una encima de la otra. O podrías decidir que en realidad, quieres que lo masivo en un dispositivo móvil es que te vas a apilar todos uno encima del otro, cuatro de ellos. El codificador puede pasar y decir en realidad esa primera caja, en realidad eres el ancho completo de 12. Sin embargo, lo que termina pasando, donde estás diseñando, si esta cuadrícula de 12 columnas, pesar de que se está utilizando, a pesar de que se está utilizando,es difícil diseñar encima de porque estas columnas son realmente pequeñas, y puede ser realmente común sólo para decir, voy a fingir y apenas escribir seis. A pesar de que se podrían usar 12, sigue siendo seis entra en 12 dos veces, o puede ser a veces cuatro como lo que se usa, nuevo cuatro es divisible por 12. Podrías simplemente diseñar para cuatro solo para hacer cosas porque no necesitas tanto detalle cuando llegue a eso. A menudo lo hago a seis. Es realmente común hacerlo a cuatro también, depende de ti. No podemos profundizar demasiado en lo que es el diseño receptivo, pero déjame darte una pequeña demo aquí. Este sitio aquí, HubSpot, tienen algunos recursos realmente buenos aquí para el diseño web y el diseño de UX. Pero esta es su gran versión de sitio web. Te darás cuenta de que por aquí a los lados, hay esta gran área vacía, por lo que el sitio web en realidad solo ocupa este bit medio. Cuando estamos diseñando en una versión de escritorio, muchas veces se puede ver aquí por defecto me está dando estos márgenes extra aquí. Podrías decidir que también tienes estos márgenes, o podrías decidir que estás diseñando para una pantalla realmente grande. Voy a duplicar esto, y voy a decir que quiero que el ancho sea mucho más grande, así que en lugar de mil 920, voy a hacer esto 2 mil. Eso no es realmente más grande. Trescientos. Es un mal día. Vamos. Podemos hacer esto entonces. Vamos. Aquí vamos. Tres mil. Podrías decidir diseñar para esta pantalla realmente grande porque tienes una pantalla realmente grande y sabes que tu cliente lo hace. Pero dentro de aquí, vas a tener algunos márgenes realmente grandes a cada lado. En realidad se puede diseñar este sitio web aquí. En realidad se queda dentro de este poquito, y haces que todo encaje dentro de tus 12 columnas. Pero en realidad puedes agregar algunas cosas en el fondo aquí. En este caso, no tienen nada mucho. Esto se extiende, hay color, hay caja de color, podrías agregar algunos gráficos diferentes aquí atrás, pero sé que en algunos dispositivos, solo van a ver esta versión. Podrías diseñar para esta versión pero mantén esta versión aquí. Por eso tienes esos márgenes en los bordes aquí. Estos márgenes aquí, podrías simplemente hacer un sitio realmente grande, diseñar dentro de tus columnas aquí, pero ten en cuenta que algo tiene que aparecer por aquí en pantallas realmente grandes y podría simplemente ser una extensión probablemente, o color de fondo o algún patrón de repetición o algo así. Eso es una cosa. Cuando estés diseñando, diseña con un poco de margen ahí. Cuando estás diseñando para tablets, digamos que el diseñador de esta página de inicio de HubSpot aquí, ha tenido que diseñar en XD, la versión de la página web, la versión grande, la versión pequeña, y luego mira lo que pasa cuando lleguemos aquí abajo. Mira eso. La versión de diseño donde en esta pantalla de tamaño, ese gráfico simplemente se hace más pequeño y se empuja hacia la derecha. Abajo más, mira eso. Pasó de ser un sitio web a asumir que estás en alguna tableta o dispositivo móvil. ¿ Se puede ver el gran cambio? El menú fue un gran cambio. Mira eso. Realmente común diseñar una versión móvil, una versión de tableta, y una versión de escritorio. Si estás trabajando en una empresa más grande, llaman puntos de ruptura. Podrían estar diseñando para cinco tamaños diferentes: tinny mobile, big mobile, tablet, pantalla pequeña, pantalla grande. Es posible que tengas que hablar con ellos sobre eso, lo que el desarrollador quiere de ti. Básicamente es solo móvil y de escritorio y dejar la tableta fuera y dejar que solo asuma que va a ser la versión del sitio web, pero eso es para trabajos más pequeños. Pero si estás haciendo un cliente más grande con un sitio web más exigente, es posible que tengas que terminar haciendo cinco puntos de ruptura, siete. Ojalá no pronto. Pero para que lo sepas, estamos diseñando para en este curso. Solo vamos a hacer escritorio y móvil, pero podría haber una expectativa para tablet en bits entre sí también. Otras cosas que necesitamos saber sobre estas columnas es el espacio entre ellas. Este espacio entre aquí depende de ti solo para que conozcas uno realmente común. Estas son las canaletas, estos son tus márgenes, y estas son tus columnas. El ancho de columna en este momento solo se expande para adaptarse al espacio proporcionado. Controlas el canalón y los márgenes, solo dejas que la columna llene el espacio que queda atrás. Sería realmente común tener un ancho de canalón de 18. En un dispositivo móvil, podría ser algo más como si tuviera un ancho de ocho. En un escritorio, podría ser 16, podría ser 24. Estás trabajando en incrementos de ocho. Acabas de ver que mucho en diseño web, hay muchos incrementos de ocho. Entonces 8, 16, 24, así sucede. Ocho es otro número fácilmente divisible. Cuando nos metemos en el diseño de aplicaciones en lugar del diseño de sitios web móviles, también es un tamaño de cuadrícula bastante común. Hablemos de eso en realidad. Antes de hablar de tamaños de diseño de aplicaciones, sólo voy a simplemente, no lo sé. Tengo una página de inicio, tiene 12 columnas. Estoy usando un ancho de canalón de 16 o 24 u ocho, lo que quieras usar, hazlo divisible por ocho para hacer las cosas más fáciles. En cuanto al margen, hay que recordar si estás usando 140 de ambos lados, así que eso es 280, te estás quitando esto porque realmente estás diseñando o no puedo hacer esas matemáticas. 1,920 menos 280. En realidad se puede hacer matemáticas en estos campos. En realidad estás diseñando un sitio web por 1,640. Voy a deshacer. Ese es ese espacio ahí dentro, mil 640. ¿ Lo dice en alguna parte? No lo hace. Pero tienes menos el margen de ambos lados, así que ese es el tamaño en el medio aquí. Pero no te pongas demasiado colgado sobre el ancho exacto porque todos sabemos que todos tienen pantallas de computadora de diferentes tamaños, pantallas de portátiles, dispositivos móviles, puedes girarlos en un costado, paisaje de retrato. Simplemente consíguelos genéricos y tu desarrollador te ayudará con toda la capacidad de respuesta o lo harás si entiendes el diseño web receptivo básico. Pero es CSS. Si te interesa hacer eso, tal vez te interesa, e incluso si no te vas a convertir en desarrollador web, entender algún diseño web front-end es realmente útil como diseñador de UX, especialmente al diseñar web y web móvil. Si te interesa eso, tal vez quieras consultar mis otros cursos sobre diseño web. Hay un curso de diseño web receptivo. Probablemente el mejor es Visual Studio Code. Hay un diseñador web esencial que te llevará a través en la comprensión de los conceptos básicos del diseño web a mano. El último del que quiero hablar es diseñar un teléfono móvil. En lugar de encontrar un diseño de sitio web móvil que tenemos, que es un sitio web que acaba de ver en escritorio, tableta o móvil, en realidad estamos diseñando una aplicación. Lo que queremos hacer aquí es en lugar de diseñar columnas, porque no va a ser receptivo, va a ser una medida bastante fija, ya sea Android o iPhone, y usan algo de manera diferente en lugar de que las cosas intentan responder, usan este sistema cuadrado muy bastante rígido, y usan ocho píxeles como el tamaño cuadrado. Usa esto para espaciar las cosas. Espacio lejos de los lados, mantén las cosas separadas unas de otras. Eso será lo que usará tu desarrollador cuando estés usando los frameworks que usarán para el diseño de su aplicación móvil. Columnas para sitios web y este sistema de cuadrícula para aplicaciones. Un poco más rígido y específico para el diseño de aplicaciones. Humo santo, ¿fue útil eso? Una última cosita es, digamos que sí hago una nueva. Tiene este tenedor y tú eres como, yo quiero éste. Lo que puedes hacer es que puedas seleccionar en éste y decir realmente, quiero que sea el predeterminado, y luego hacer clic en éste y decir, usa el valor predeterminado. Esa es una forma de ponerlo en múltiples mesas de trabajo diferentes para asegurarse de que sean todos iguales. Eso es todo. Eso fue largo y un doblador del cerebro, lo sé. Espero que haya sido útil. Vamos a subir al siguiente video. 31. Ver la línea de los puntos de la ya: Hola a todos. En este video, ¿qué es esta línea punteada que aparece a veces, pero luego no hay otras veces? ¿ Qué hace? Puedo moverlo, no parece hacer nada. El versión corta es, hay una versión de video más larga [Risas], pero la versión corta es, es como qué previsualizar cuando presiono este pequeño botón de vista previa, mi puerto de vista es lo que es llamado. Esa es una de mis opiniones, y gente puede desplazarse hacia abajo aquí. Pero si lo mueves aquí abajo, mira lo que pasa. Puedo decir que salgan de mi camino. Significa que cuando lo estás degradando, tu vista puertos enormes y está tratando de mostrarte en absoluto, lo cual es un poco raro. Eso es lo que hace. Déjame entrar un poco más de detalle en este video. Veamos esas líneas punteadas. En primer lugar, apaguemos las columnas. Son geniales cuando estás obteniendo el diseño, una vez que tienes una estructura básica ahí dentro, y quieres apagarlos. Ahí está esta [inaudible], click en el título y solo puedes apagar esta garrapata. Los apaga de todo. Había una vista de acceso directo, es ésta de aquí, mostrar cuadrícula de diseño y verás en un PC que es diferente y será Control Shift'. En un Mac es Command Shift'. Genial. Los tenemos fuera. Ahora, ¿qué es esa extraña línea punteada? Nos insinuamos antes, se llama el puerto de vista. Básicamente recuerda que arrastro esto hacia abajo, estaba aquí arriba y lo arrastré hacia abajo. Sólo aparece una vez que has arrastrado algo hacia abajo. Éste de aquí, no lo va a tener . ¿Dónde está mi línea punteada? Ahí está ahí. Porque lo que tiene que pasar es que necesita saber dos cosas. ¿ Cuánto dura tu página y qué quieres mostrar en tu vista previa? Te mostraré lo que quiero decir. Si tengo esto aquí arriba y voy a Preview, conseguí el nombre de la misma, previsualizar esta página. Mira eso, me muestra mi diseño móvil. Pero si arrastro esto más grande, y pongo algo aquí abajo que podamos ver, sólo voy a hacer una caja roja. Lo mismo. Previsualizar esto. Va a funcionar muy bien pero excepto que ahora hay algo de desplazamiento. Pero si soy como, hombre, estas líneas punteadas nos están molestando, sólo voy a moverla abajo abajo aquí. Deshazte de él. Ahí vas, ido. ¿ Qué va a pasar? Mira esto. [ Risas] Hilo de seto efecto visual. Le estás diciendo que el puerto de vista es realmente grande, así que voy a tratar de mostrarlo todo por ti. Eso es lo que es. Voy a deshacer eso. Puedes cambiarlo aquí para escribirlo. ¿ Se puede ver la altura del puerto? Podrías decidir que estás trabajando en un tamaño más grande y tiene que ser 750 o simplemente puedes arrastrarlo. Eso es lo que hace. Déjame abrir la vista previa constantemente así que no te vayas, mira esto. Eso es lo que está haciendo. Es raro si no sabes lo que hace. Lo mismo para escritorio. Si hago clic en esto, me está mostrando todo mi escritorio en esta pequeña pantalla, así que voy a cerrarlo, abrirlo de nuevo. Versión grande. Ahí está, ahí. Podrías decidir que tu puerto de vista va a ser un poco más grande. No cambia la salida del lado, es sólo la vista previa. Cuando creas vistas previas para que tus clientes lo verifiquen, va a tener el mismo tamaño de puerto de vista. Solo asegúrate de que si te has metido con él, previsualiza, comprueba para asegurarte de que realmente esté haciendo algunas cosas bien y no presumir. Sería complicado, como lo he hecho antes de donde obtienes una página muy larga, diseñas cargas porque hay montones de desplazamiento en el sitio y acabas de ir, saca el **** de aquí. Se lo mandas al cliente y su cara con esto cuando van a prever y son como, Dan, ¿qué pasa con esto? [ Risas] Tienes que entrar y decir, ¿cuál es un tamaño apropiado para mi puerto de vista? En este caso, va a ser 1080. Consulta qué es un tamaño estándar normal para altura de los sitios web más comunes y Google te dirá qué es, cambia todo el tiempo, pero eso es lo que hace esa pequeña línea punteada. No me gusta porque siempre está encendido cuando estás trabajando. Quiero deshacerme de él. Actualmente, no hay show view port line. Podría haber cuando estés más tarde en el futuro. A menudo lo diseñaré aquí abajo y solo lo moveré aquí abajo porque golpeé la pequeña línea punteada a mi manera. Tengo que tener en cuenta que cuando lo envío fuera por hacer un enlace, tengo que arrastrar su puerto de vista de nuevo hacia arriba, luego crear el enlace y compartirlo. ¿ Eso tiene sentido? Eso es lo que hace el puerto de visión. Eso es, te veré en el siguiente video. 32. Cómo añadir y eliminar guías a Adobe XD: Hola a todos. Si eres como, hombre, esas columnas, no quiero columnas solo dame unas simples guías básicas viejas. Al igual que estas guías, solo simples puedes arrastrar y moverte y simplemente hacer lo que quieras con. Si quieres no hacer columnas, eso está totalmente bien. No hay reglas que tengas que hacer columnas, sobre todo si estás haciendo un proyecto autodirigido o es un poco más artístico. No hay un sitio web estructurado enorme, grande que necesite todo este control rígido con columnas, necesitan algunas guías, este es el medio pesado. Déjame mostrarte cómo hacerlas. En realidad alerta de spoiler, sólo tienes que arrastrarlos desde el borde aquí. Ahí vas. ¿ Por qué este video es tan largo? Porque hay algunos consejos y trucos y otras cosas, pero así es como los consigues. Déjame mostrarte cómo. Para hacer algunas guías, he hecho una página en blanco solo para empezar. Es un iPhone 13, antes que nada, necesitas estar en tu herramienta Move, no funcionará si estás en otras herramientas, o herramienta Selección, la pequeña flecha en la parte superior más allá de esa, es posible que ya hayas tropezado a través de él. Acaba de aparecer un día en XD. Mira esto, si pasas cursor justo fuera de la página, están ahí. Haz clic en Hold, arrástralo, has hecho una guía. Eso es todo. Puedes seguir desde arriba, arrastrarte desde arriba. Estoy pegando a Enter para deshacerme de ellos. Si aún no van a aparecer, podrías estar bajo Vista, bajo Guías y podrías haber ido a mi caso puedo verlos para que pueda ir a vamos realmente arrastrando uno encendido. Entonces puedo decir a alguien que podrías haber usado accidentalmente el atajo para la altura o guías. Entonces no están trabajando, ni guías. Entra aquí y solo comprueba que diga la correcta. Show hide, te dan la idea. Asegúrate de poder verlos. Seamos un poco más específicos. Digamos que quieres deshacerte de ellos. ¿ Cómo te deshaces de ellos? Da click sobre ellos y pulsa Eliminar, no funciona. Haces clic en Mantener y simplemente arrastrarlos nuevo a esta área por aquí. Mira un pequeño ícono, bote de basura, ahí vas, es cómo deshacerse de ellos. Seamos un poco más precisos. Entonces digamos que quieres poner como un borde de 24 píxeles alrededor. Por lo que voy a hacer click y arrastrarlo hacia fuera, y se puede ver que puedo ser muy preciso y conseguí 24, perfecto. Yo también lo puedo hacer allí. Si tienes un touchpad ¿estás tratando de hacer tu trabajo de diseño? Lo hago todo el tiempo cuando estoy conduciendo. No puedes ser tan preciso. Entonces lo que puedes hacer es que puedas ser, solo es fácil a veces agarrar la herramienta cuadrada, arrastrar algo, teclearlo ahí, 24 y si tabulas, puedes bajar de ancho a alto 24. Eso no es esencial, sólo un truco práctico. Agarra la herramienta Selección, arrastra hacia la esquina y luego ve a ver esto. Supongamos acercar un poco, se ajustará a mi plaza. Tienes la idea, arrastra, chasquea, arriba uno, chasqueas, agarra a ese tipo, córtalas aquí abajo, pega a ese tipo, mete en la esquina. Es sólo una forma rápida ahora no puedes arrastrarlos desde abajo o por la parte superior. Entonces hay un poco de desplazamiento divertido pasando. Recuerda, mantén presionado la barra espaciadora, haz clic y mantén pulsado y arrastra o usas cualquiera de los métodos que estés usando [RIAS] hasta ahora en este curso. Tienes hasta aquí, has trabajado en una forma de moverte. Sostengo la barra espaciadora abajo. Esto es un poco de eso pasando, como moverlo hacia abajo, arrastrar un poco hacia arriba. Entonces ese tipo, lo siento amigo, te has ido. Ya no te necesites. Comando 0 para disparar, seleccionarlo, Comando o Control 3 clics en ese tablero de aplicaciones. Con eso, tenemos guías. Si no quieres usar las cuadrículas como lo hicimos en la última o las columnas. Solo quieres unas pequeñas guías, luego aquí vas, arrastrarlas, borrarlas, y arrastrarlas hacia atrás. Simplemente puedes apagarlos porque a veces son útiles para empezar y luego quieres apagarlos. Ve a Ver Guías y tienes Ocultar Guías. También puedes bloquearlos porque son móviles. Puedes hacer click sobre ellos y arrastrarlos. Podrías decidir que por favor deja de hacer eso. Ve a View y simplemente encerrarlos por el momento. Si tienes otro proyecto y necesitas copiar las guías a través, probablemente lo hayas visto allí. Vayamos a ti. Puedes ver que mis guías no se han encontrado. Ellos sí se encuentran si obviamente duplicas la mesa de trabajo, recuerda mantener pulsada la Opción en un Mac Alt en el PC. Solo quiero copiar estos a través para que puedas seleccionar en la mesa de trabajo, quieres llevarlos de ir a Ver Guías, Copiar Guías, dar click en ésta, ver guías, pegar guías. Guías, ahí van. Podrías apagarlos solo porque esto es un dolor en el trasero. Accidentalmente sigues arrastrando las cosas desde arriba y abajo y ahí vas. Eso es Guías en Adobe XD. 33. Inspiración del color y el garabato en XD: Hola a todos. Este video vamos a ver la inspiración del color. Vamos a trabajar sobre el color en esta siguiente sección. Aquí, ¿dónde empiezas? ¿Cómo eliges colores que van juntos? Sí, de eso es de lo que se trata. Puedes ir a cualquier parte en internet, inspiración de color, teclearla. Encontrarás cargas. Lugares a los que voy, Color Hunt. Me gusta para las muestras de color que coinciden. Lo que puedes hacer es ir a echar un vistazo y decir que esto es para mí. Se puede ver este pequeño código aquí. Es un número hexadecimal, un pequeño código hash para ello. Si hago clic en él, dice que está copiado. Agradable. Si ahora vuelvo a XD y agarro un rectángulo y lo dibujo y haga clic aquí mi relleno. Ya verás aquí abajo, estamos usando HSB para piezas. Ahí está este número hexadecimal y puedo pegarlo ahí, presionar “Enter” en mi teclado, y lo traje. Simplemente puedes seguir copiando y pegando y comenzarás a agregarlos a tu documento y comenzarás a usar eso, para la base de tus colores. Es posible que termines cambiándolos, por supuesto, pero es un lugar para empezar. Ahora, otro lugar que uso bastante es Adobe color o color.adobe.com. Es gratis. No necesitas una licencia pagada para esta. Lo que realmente me gusta es cosas como explorar, a lo largo de la parte superior ahí sí viajan este sitio web por lo que tal vez tengas que encontrar a dónde explora mudarse, pero puedes hacer búsquedas. Puedes decidir como, veamos el té, e inspirarteen e inspirarte los colores del té que otras personas han decidido. Podrías decidir eso, aquí vamos. Aquí hay algunos colores de té y colores de té cuestionables. Es para conseguir que los jugos creativos fluyan. Estas son de color té y, bueno, sí, algunas cosas que faltan. Digamos que sí decides que esto es todo, eres como, sí, me resulta bastante difícil escoger diferentes Browns que vayan juntos, miren esto, éste [Risas]. Éste, me gusta, lo hago. Puedes ir “Enter” y copiar y pegar los números hexadecimales como hicimos en el último. Simplemente haga clic en eso y cópielo y pegarlo. Lo que puedes hacer sin embargo, es que puedes usar la biblioteca de Adobe. Voy a cancelar fuera. Antes de decir “Agregar a la Biblioteca” solo necesitamos asegurarnos de que has iniciado sesión en tu cuenta de Adobe, adobe.com. Se puede ver mi pequeña cara por la parte superior ahí. Ahí está. Lo que debes hacer es asegurarte de que tienes las bibliotecas correctas seleccionadas. Crea una biblioteca, puedes agregar una. Tengo esta clase XD uno aquí, y significa que se va a agregar a esa biblioteca. De lo contrario, hay un poco de misterio sabiendo a qué biblioteca se va a sumar. Vamos “Agregar a la Biblioteca” y no hay mucho que pase [Risas]. Es sólo la biblioteca. ¿ Cómo se accede a la biblioteca en XD? Dentro de aquí, tenemos estos diferentes, hemos estado yendo entre capas y nuestro panel de activos, y todavía no hemos usado plug-ins. Pero esta de arriba aquí, que normalmente es activos, en realidad se puede retroceder uno de ella. Es un lugar extraño para ello. Si estás pensando que esto parece un lugar extraño para ello, lo es. Aquí tienes tus activos documentales, de vuelta a las bibliotecas. Activos documentales, de vuelta a las bibliotecas , sólo para que lo sepas, es fácil perderse aquí. Puedes ver todas las bibliotecas y si eres como yo, tienes un millón de bibliotecas. Aquí está mi clase XD y ahí está ese color, ese té uno que acabo de hacer. ¿ Cómo utilizarlo? Demos clic en un rectángulo. Simplemente puedes pasar el puntero por encima e ir a esa. Tú vas en esa. Podrías ir a agarrar un montón de diferentes y simplemente empezar a experimentar con el uso de estos colores. Lo único que dije fue que puedes copiar y pegar el número hexadecimal. Vamos a escoger totalmente al azar, nada de té relacionado con éste. Pero vamos a copiarlo y por aquí, cuando dije, sólo pegarlo como lo hicimos antes. Tienes que cambiarlo a, ya te lo he dicho, ¿no? [ Risas] Mi cerebro se está derritiendo. Ya te he enseñado cómo hacer hex. Te lo mostraré dos veces. Ahí vas. Eso es sacar cinco muestras fuera de contexto. Lo que me gusta hacer es usar ya sea nuestro tablero de humor o simplemente un sitio como dribble y solo buscas colores en lugar de estilo. Podrías ser como, realmente me encantan estos colores puramente negros, aunque su contenido no sea del todo correcto, podrías decidir que los colores son adecuados para ti. Simplemente toma una captura de pantalla y haz lo que hicimos con el tablero de humor y trae tu captura de pantalla a XD. Ya tengo algunas cosas. Lo que he hecho por mi uno es, sabemos lo que hay en mi tablero de humor. Me cautivaron un par de colores. Esto me gusta. Esto es de color verde azulado humo y hay un poco de color cálido café té ahí también, por lo que esos son los colores que quería robar, quiero decir, apropiado, pedir prestado. ¿ Se puede robar un color? Lo que puedes hacer es que puedas agarrar tu herramienta de rectángulo, dibujar algo. Entonces por aquí, puedes ver, voy a deshacerme de mi frontera. Ver el relleno tiene el cuentagotas click en la herramienta “Cuentagotas” y luego puedes simplemente moverlo y decir, te quiero [RIAS]. Parece negruzco. Pero si entras aquí, puedes ver que es parte de esa tonalidad y decides que en realidad quiero moverlo hasta aquí. Se puede ver que es ese color, sólo más saturado. El de arriba a la derecha está más saturado. Misma anchura. Hagamos otro. Déjame agarrar un par de colores de aquí. Voy a decidir herramienta cuentagotas. Voy a agarrar este marrón aquí. Puedes agarrarlo por el pixel, dos, uno se ve bien. Oh, dame el pixel [Risas]. Aquí vamos. Nuevamente, podrías decidir que me gusta ese color, pero también quiero una versión más ligera del mismo. Para ser honesto, es a menudo así como termino con mis ideas de color. No siempre es, pero a menudo me pongo, soy como, hombre, me encanta lo que han hecho aquí y voy a ir a tomar prestados los colores y terminé yendo, vale, me gusta este color, pero es demasiado cálido. Quiero moverlo de esta manera. Se puede ver se puede desaturarlo moviéndolo a la izquierda y simplemente ir a uno de ahí. Puedes terminar con esta paleta de colores totalmente disfrazada con la que podrías empezar. Vas a llegar a un punto donde estés, necesito una versión más oscura, necesito una versión más ligera. porque necesitas un botón o el contraste no es suficiente para un botón encima de aquí o el texto es demasiado claro o demasiado oscuro y terminas ajustándolo a medida que avanzas, pero es un buen lugar para empezar. Adobe Color, Color Hunt, y muchas capturas de pantalla y apropiación de colores de otras personas. Ahora la otra cosa a considerar es que podría ser impulsado por la fotografía de producto existente, los colores de marca existentes, por lo que su color de marca o su viaje de inspiración de color podría ser bastante atrofiado. Es posible que tengas que escoger los colores que la empresa ya usa aquí. Podrías ser capaz de colarse en un color complementario o un color secundario a su existente. Si están usando rojo, es posible que puedas colarte en algo más que apoye ese rojo para darte un poco de contraste en el sitio, especialmente si antes no han hecho muchas cosas webby. Sólo hay tantos elementos que necesitan diferentes colores para mostrar una jerarquía de necesidades como lo importante, que no es importante, cuál podría ser el siguiente paso, botones, a menudo en diferentes colores de otros elementos no clicables, por lo que indica a las personas, les ayuda a navegar por el sitio. Estoy balbuceando ahora, eso es todo. Te veré en el siguiente video. 34. Cómo crear una paleta de colores en Adobe XD: Hola a todos. En este video, vamos a construir este sistema de muestras de color, el primario, secundario, y nuestros colores de acento, además construiremos muestras grises. Probablemente puedas decir a lo mejor que este es un conjunto más fresco de grises que voy a usar y blancos. Déjame mostrarte por qué los hacemos y cómo hacerlos. Vayamos. Para empezar, tengo un montón de cosas que estamos usando en los últimos videos que son placeholders y simplemente haciendo de este lugar un desastre, aún más desordenado de lo que es actualmente. Solo estoy usando mi herramienta de selección, arrastra una caja alrededor de todas ellas, pulsando “Eliminar” en mi teclado. Lo que vamos a hacer es que me guste este color, del último video, lo robé de ahí, no en este marrón por el momento, así que me gusta este color bronceado que está ahí dentro. Déjame agarrar eso. Espera ahí. Está agarrando la herramienta cuentagotas y yo voy a agarrar algo ahí dentro. Me gusta esa pequeña combinación. Ese tobogán también está ahí dentro, pero estoy cavando esta cosa, tal vez. Cuando estamos tratando con colores para el proyecto UI/UX, muchas veces se necesita un color primario y un secundario, que tengo aquí. A menudo necesitarás un color de acento también. Echemos un vistazo. Digamos que el color primario es esta pizarra oscura en el fondo aquí, negra, no del todo y este es el color secundario. Ahí está gris, se acostumbra ahí, llega allí, y luego el color de acento es este amarillo aquí. Así es como rompen información, cosas a granel, cosas importantes, cosas que se pueden hacer clic, o pequeñas cosas actualizables. Hay otros, este verde es gris en el fondo, primario, secundario. ¿ Tienen un color de acento a este azul? El color de acento a menudo puede ser una versión bastante fuerte bastante un color distintivo y se acostumbra bastante, sólo se usa un poco. Realmente ayuda a cosas importantes, poco color de acento. Ahora te estoy dando pistas sobre cómo hacer esto. No hay razón para que no puedas usar un millón de colores, dos colores, un color blanco y negro. No hay policías de color. Nadie me ha arrestado todavía [Risas] a pesar de que he cometido muchos crímenes contra el color. Sólo te estoy dando mi forma de hacerlo. Si quieres hacer la teoría del color una manera un poco más científica y reflexiva, echa un vistazo a Sarah Parkinson, ella tiene un curso de teoría del color, Google it donde lo estás viendo ahora y encontrarás su curso sobre eso. Ella es brillante en ello y mejor en eso que yo. Simplemente dándote mis consejos y trucos sobre cómo trabajo. Tengo estos dos colores, quiero un tercer color de acento. Todavía no sé qué es. Yo jugué con esta [risa] amarillo débil aquí dentro, y tú eres como, sí, eso es bueno. A mí también me gusta este. Es amarillo que probablemente no escogería esto como color canario amarillo limón. Me gusta el chiquita. Todavía no estoy seguro. No hay razón para que tengas que escogerlo y no cambiarlo. Sólo nos va a dar un punto de partida. Ya no me gusta. [ Risas] Son dos en ese verde. Sólo voy a bajarlo sólo a los amarillos un poco más. Voy a incluso arrastrarlo un poco. Ahí vas. Simplemente no estoy segura. De todos modos. A menudo una vez que tengas tus colores, vas a necesitar uno más oscuro y otro más claro como vimos al principio ahí. Lo que voy a hacer es que voy a hacer una pequeña rejilla de nueve columnas. Éste ya es bastante ligero, por lo que probablemente sólo voy a ir más oscuro con él. Probablemente voy a ir, recuerda antes de HSB, me gusta este, brillo de saturación de tonalidad. En cuanto al brillo, voy a usar mi flecha arriba y abajo. Sólo puedo usar mi flecha hacia abajo, en este caso, para oscurecerla. Podría encontrar que en realidad no uso el color de acento aparte de su explosión completa porque eso se ve un poco minky. Pero vamos a darnos algunas opciones. Nuevamente, usa la herramienta cuentagotas y luego ve de esto y ve un poco más oscuro también. Lo que podría encontrar también cuando oscurece es que podría tener que aumentar la saturación ya sea arrastrándola de esta manera o usando mi pequeña saturación, subir un poco solo para agregar un poco más de volumen al color. No me gusta. Echemos un vistazo a este de aquí. Vamos. Sólo vas a saturar mi brillo hacia arriba o hacia abajo, así. Éste es probablemente demasiado oscuro como para empezar quizá desde el tono medio, y este de aquí va a ir siempre por el camino equivocado. Esto me gusta. Bueno. Lo mismo con éste. Veamos cómo se ve cuando es más ligero. Creo que todo este grupo está cerca, pero es demasiado bluey. Quiero ir un poco más allá en los greens con solo arrastrar esto un poco hacia abajo. Aquí tienes. Me gustó esa pizarra. Voy [Risas] diluir de la manera equivocada con él. Tu idea, voy a encontrar algo que me guste. Me gusta esa excavación en un poco. Por eso eres como, estoy robando colores, y luego dos segundos después, los has personalizado para que sean lo que quieres. En realidad, por qué diablos está haciendo siempre diferentes muestras de color. Solo hay momentos en los que quieres usar este color y no puedes usarlo encima de esto puede ser porque el contraste no es suficiente. En realidad necesitas ir a una versión más oscura, o eso no funciona o una versión más ligera o esto sube a esa para un contraste realmente bueno, es una forma de hacer algunas combinaciones. Color primario, color secundario, color acento, en mi caso. Nuevamente, no hay policías de fuentes que te arresten. Simplemente haz lo que quieras. lo otro de lo que vamos a hablar es hacer con negros y blancos. Los negros y los blancos son relativamente fáciles. Supongo que vas aquí y si quieres un blanco todo soplado, sólo tienes que arrastrarlo hasta el miembro de la esquina hasta el borde aquí. Pero, ¿qué termina pasando aquí? Obviamente, un blanco es, realmente no necesito una muestra de color. ¿ Por qué? Porque es fácil de encontrar. Pero lo que podría hacer es que puedas tener blancos fuera de blanco. Es como que aquí está demasiado lejos, pero sólo un poquito. Tengo este blanco que es un poco más cálido. Podría hacer un blanco frío. Echemos un vistazo a éste. En lugar de un blanco cálido, que está en mis tonalidades amarillas, voy a ir al color azul-verdoso. He exagerado un poco para mostrarte, pero puedes ver cómo ese blanco, son el mismo brillo, pero éste es más cálido y éste es más fresco. Ambos sin embargo, probablemente sean un poco demasiado, por lo que en términos de brillo, probablemente 98. Cien es blanco lleno de ráfaga, y esto son solo pequeños indicios. No estoy seguro exactamente lo que quiero hacer aquí por éste. El otro motivo para tener un blanquecino es digamos que tienes una interfaz, digamos que tienes tu iPhone, y quieres tener un pop-up. Voy a llevarlo al frente. Recuerda hacer clic derecho, puedes enviarlo de vuelta, llevar al frente. Se puede decir, todo esto, y al menos ahora si agrego algo así como una sombra paralela, no estamos haciendo sombra paralela probablemente en este video, pero se puede ver que ya tiene este pop-up, es suficiente de un contraste con te mantendrás solo yendo y la sombra paralela realmente ayuda a empujarla. Lo haces al revés. Esto puede ser eso y ese podría ser tu ventana emergente de interfaz. Sólo para darle un poco de contraste cuando lo haga aquí arriba. ¿ Obtienes lo que quiero decir? Voy a bajar por la versión ligeramente más azulada, y voy a hacer el resto de los colores. Vayamos aquí, vamos aquí. Tengo cinco de ellos. Empecemos con los negros. El negro dice lo mismo. Puedes ir completamente negro abajo por el fondo aquí, o un negro rico. Digamos regular viejo negro, y estos dos aquí. Este de aquí, puedes agregar un poco más de un personaje genial. Lo mismo en los blues y greens, sigue siendo negro, pero sólo hay un poquito de algo pasando. ¿ Está ahí? Sólo un poquito. Igual con éste, puedes hacerlo en los calentamientos, vete, quiero que éste sea un poco más cálido. Es difícil ver ahí, pero cuando empiezan a iluminarse, digamos que vamos aquí, y vamos éste aquí, arrastramos la ligereza hacia abajo o hacia arriba. ¿ Puedes ver que es más de un color gris cobalto nato? Entonces por aquí, si alinea éste arriba, lo que se puede ver empieza a aparecer aquí afuera, sobre todo en este marrón a medida que se pone más ligero, probablemente voy a tener que quitar no sólo hacerla más liviana, sino también eliminar parte de la saturación, por lo que todavía está caliente pero sólo de una manera menos obvia. Puedes decidir a dónde quieres ir. Podrías ir simplemente normal en blanco y negro viejo. O en mi caso, voy a bajar por este gris de la OTAN azul, acerado, tormentoso. Hay tantos nombres de gris. Si alguna vez has intentado escoger gris de una muestra de pintura o papel tapiz o algo así, sabrás que los grises están pintados en negro. Sólo voy a trabajar mi camino abajo a versiones más bajas yendo aquí e yendo aquí y yendo más arriba, por favor. Probablemente a medida que se vuelve más ligero, eliminando también parte de la saturación. Eso es saturación ahí, simplemente lo arrastramos a la izquierda. Mostraré por qué me encanta hacer clic en el teclado [Risas]. Ahí vamos. Sólo va a ser mi esquema de color. Simplemente te da un lugar para empezar. Puedes ajustar esto después, pero más adelante, cuando hayas escogido 40 tipos diferentes de gris porque no has tenido muestras de color para elegir, eso va a ser un problema para actualizar. Pero ahora si solo tienes suficiente para escoger con un poco de variación, que puedes actualizarlos todos más adelante cuando nos metamos en cosas como estilos de color. Esa es mi muestra de color para empezar. No está engarzado en piedra, no me gusta ese todavía. Probablemente lo veas cambiado en el siguiente video. Pero eso es todo por el momento, voy a jugar con esto un poco más y te veo en el siguiente video. Eso es todo, acabo de quitar algo de saturación. Eso es suficiente. De hecho, vamos ahora. 35. Cómo crear gradientes en Adobe XD: Hola a todos, su tiempo de gradiente. Vamos a hacer algunos gradientes dulces aquí en Adobe XD. Ahora déjame mostrarte cómo. Para hacer un degradado, empecemos de nuevo aquí, seleccionándolo Comando 3 o Control 3 en un PC para acercar. Entonces tengo que retroceder un poco [Risas] Vamos a agarrar cualquier plaza vieja. Puede ser un círculo, puede ser cualquier forma antigua que hayas dibujado. Con ella seleccionada, los cambias por aquí bajo Rellenar. Da click en Rellenar, y en la parte superior aquí tenemos Sólido y puedes escoger ese diverso tipo de gradientes por lo Gradiente Angular. Empezaremos con ese porque no se te permite usarlo. No sé [Risas] Espera, se evade todo gradiente. Lineal es probablemente el más común. Para cambiar los colores de los extremos, basta con hacer clic en cualquiera de ellos. lo puedes ver actualizaciones por aquí así que arriba, voy a decir, eres verde. Está lleno más tiempo. Vamos por el, en mi opinión, el peor gradiente en todo el mundo. Haga clic en la parte inferior, ajuste el tono, vaya azul. No, rojo, ¿dónde está? Eso es lo peor. Ese podría ser el gradiente más feo del mundo. Puede que te guste. Eso está bien. Estoy cambiando la dirección. Acaba de agarrar cualquiera de estos pequeños tiradores aquí o estos pequeños puntos al final y arrastrarlos hacia fuera. Puedes decidir en qué camino quieren ir. Se puede hacer que pase la pantalla. Puedes tenerlo bastante apretado en el medio. Dependiendo de lo que quieras hacer. Se ve genial. Ahora si quieres un tercer color, puedes hacerlo fácilmente ya sea haciendo clic aquí en medio de la línea. ¿ Ves ahí la flecha? Tiene un pequeño plus al lado dice hue. Voy a sumar gradientes aún más excepcionales. Oh, está mal o puedes hacerlo aquí arriba en esta línea de aquí, no importa. Puedes hacer click en esto para añadir una pequeña muestra extra para la que puedes ajustar el color. Vamos a conseguir esto bien. Amarillo. Eso es lo que necesitamos. eliminarlos haciendo clic en uno de ellos aquí. Digamos que queremos deshacernos del azul, solo presiona Eliminar en tu teclado. Esto es gradiente lineal. El gradiente radial funciona muy igual. Son bastante fáciles de autoenseñar. El centro se mueve alrededor. Hay dos de éstos, lo cual es raro. Esto fuera de uno, es la medida como grande y wofty fuera de los bordes. Yo uso esto bastante para este gradiente que no es todo un gradiente. puede ver que es como si estuviera ahí. Está dando un poco de plenitud al color sin que sea un gradiente muy fuerte en rojo. Este de aquí abajo lo distorsiona. Depende de lo que quieras hacer. De nuevo, puedes añadir más de estos pequeños puntos aquí, ajustarlos hacia arriba o hacer clic en ellos para eliminarlos. Ahora, para inspirarme en gradientes, hay un sitio genial que uso. Siempre vuelvo a aquí. Grabient, grabient.com y encontrarás solo gradientes interesantes que quizá no hayas explorado. Digamos que quieres este de aquí. Puedes hacer click en este pequeño punto y ves que hay un pequeño número hexadecimal. Haga clic en eso. Puedes copiar eso y en Adobe XD, encuentra la muestra inicial. Luego abajo por la parte inferior en lugar de HSB, saturación de tono y brillo, solo escribe en el número hexadecimal. Regresa, copia, pega esta y encuentra esta muestra final, reemplácelos y nos libraremos de la aleatoria en el medio aquí. Adiós. Ahí tienes un gradiente. Por supuesto, puedes hacer exactamente lo mismo con tu herramienta cuentagotas desde cualquiera de tus Comando 0 o Control 0 para conseguir todo, es ir a escoger estos colores. Podrías decidir que yo quiero esto. Yo quiero que el interior, que eres tú seas este otro color. Usted Comando 3, Control 3 en un PC y Gradiente. Una última cosa que quiero mostrarles es que hemos hecho gradientes bastante deliberados, lo cual es genial y los usaré en mis diseños. A menudo, no lo sé, se pueden usar gradientes realmente sutiles. Digamos que esta va a ser mi maqueta de mi forma de alta fidelidad. Voy a meter todo lo que hay en él. Esta va a ser mi homepage y esta va a ser mi Hi-Fi por alta fidelidad. Quiero empezar con un fondo, muy ligero gradiente, y puedes hacerlo por tu tablero de arte también. Puedes seleccionar tu tablero de arte haciendo clic en el nombre en la parte superior y básicamente tratarlo como hicimos ese rectángulo. Haga clic en Relleno y simplemente vaya Degradado lineal. En este caso, lo que quiero hacer es que quiera que tal vez solo use un ligero blanquecino. En realidad, esto no es lo que quiero hacer. Quiero ir por aquí y encontrar mis pequeñas muestras de color. Da click en ti, vuelve a esto, escoge este primer color, usa la herramienta cuentagotas y voy a ir por algo como esto. ¿ Qué tan bueno va a ser esto? [ Risas] ¿Lo veremos en un segundo? Algo así en el fondo o tal vez algo así a esa [Risas] Indeciso pero puedes agregar un degradado a la parte posterior de tu tablero de arte para que lo sepas. Podría ser sólo un poco gradiente de color blanco en esta cosa. A veces encuentro en lugar de ser bastante deliberado como en comenzar y parar a cada lado, es que voy a extender estos pasado donde necesito que sean solo porque quiero el toque del color. Quiero que lo ate, pero sin que sea tan obvio. Al igual que a primera vista, es solo una versión lechosa de esos dos colores. Pero de todos modos, eso son gradientes en Adobe XD. 36. Cómo guardar y guardar las muestras de colores reusadas en Adobe XD: Hola a todos. En lugar de usar la herramienta Cuentagotas una y otra vez, tratando de reutilizar los colores, te voy a mostrar cómo agregarlos abajo abajo aquí para muestras guardadas. La versión simple es hacer clic luego golpear Plus. [ Risas] Hay un par de cositas que te voy a mostrar para que puedas ser maestro de las muestras de color. Vamos. En lugar de usar esa herramienta Ojo Cuentagotas, lo que vamos a hacer es que los vamos a agregar en un lugar agradable y práctico, agreguemos este primero a muestras guardadas, esa es esta pequeña lista de aquí abajo. Es posible que ya tengas algunos por accidente. Si no te va bien, de cualquier manera golpeó Plus. Con esto seleccionado, va a decir agregar esto a esta lista, mismo con esta de aquí, y simplemente trabajar su camino y agregarlos. Vamos a añadir estos tres y luego te daré algunos otros consejos, los agregaremos todos. Si los consigues ordenar mezclado. Como en realidad quiero eso ahí, es todo. Se puede hacer eso y solo significa ahora en lugar de, digamos, estoy todo el camino aquí abajo, y necesito esta garrapata ahora para no ser así de verde, necesito que sea el nuevo verde, mira eso oh, solo práctico para reutilizar esas cosas. Si tienes algo ahí, quieres quitarte. Con lo seleccionado, en realidad, para eliminar las cosas realmente no importa lo que hayas seleccionado, solo tienes que arrastrarlo a tierra de nadie. Ahí vas. Voy a pasar por ahora, usar mi técnica de edición de velocidad rápida y añadir todas mis muestras solo para que las tengamos ahí, así que esperas ahí. Fue doloroso mirar y fue doloroso hacerlo. [ Risas] Click, click, click, click, click. tengo agregados y una cosa a tener en cuenta es que gradiente, algunos los mezclan entre un video, k es que no aplicarán gradientes por alguna razón en este momento. Inténtalo ahora, podrías estar en el futuro y podría funcionar, pero si editas, solo arroja en un color sólido y necesito deshacerme de ese. [ inaudible]. Déjame intentarlo de nuevo. Eso fue interesante, no me di cuenta de eso. Lo que se hace es, ¿ puedes ver al que se enjuaga ahí abajo? Dice, oye, ya tengo ese gradiente de color. Eres como si lo haces. Se intentará editar como muestra completa y si ya la tienes, no volverá a editar lo cual es genial. Espera ahí mezclaré otro gradiente. Mi favorito en todo el mundo, si intentas agregar un degradado, solo escogerá uno de los colores. ¿ Lo puedes ver ahí? Correcto. ¿Deshazte de él? Agradable. Muy bien. Eso es práctico, ten tus colores listos al principio solo para que sepas, mi proceso no es así sistemático cuando estoy en el asquero, no sé realmente lo que estoy haciendo días del diseño donde solo estoy trabajando a través de las cosas. No voy a ser tan bueno con estos porque realmente no sé de qué color necesito aquí, voy a estar probando todo tipo, pero no toma mucho tiempo antes de que te metas en tu proceso. tenemos un color comprometido o tienes un color de cliente que no puedes cambiar, es parte de sus pautas de marca. Está atascado ahí, puedes agregarlos aquí para que no estés tratando de mezclarlo cada vez o cuentagotas utillándolo. Esas son muestras guardadas en Adobe XD, subamos al siguiente video. Di adiós pequeña radio. 37. Proyecto de clase 07: colores y columnas: Hola a todos, es hora de un proyecto de clase creativo-ish. Vamos a hacer algunas aburridas todas las páginas y columnas, luego mezclaremos algunos colores. Lo primero es que quiero que creas tus páginas HiFidelity. Lo que vamos a hacer en este curso es, porque sólo tenemos un par de páginas con las que trabajar, vamos a dejar nuestros wireframes aquí arriba. Muchas veces las haré en un documento separado, pero para éste, porque sí tenemos una cantidad bastante pequeña en este flujo de tareas, cuatro páginas más algo extra para animación, mantengamos el hi-fi encendido lo mismo que el low-fi con wireframes. Simplemente crea cuatro páginas que son exactamente el mismo nombre excepto que he agregado equipo de alta fidelidad al final de ellas. Página principal, producto, checkout y confirmación hi-fi. Ahora en este caso, escoge el teléfono que vas a estar probando. Averigua qué teléfono tienes y qué píxel, altura y ancho es y puedes escoger eso de cuando hagas tus nuevas páginas. Tener cuatro de esos en lo mismo para la versión de escritorio. No me importa qué tamaño estás usando, tú decides lo que te sientes cómodo, y para la página de diseño de sitios web. Estoy usando los 1920 píxeles a través, pero lo estoy metiendo en el borde, y pongo en sus columnas. Nuevamente, podrías decidir que hagan 12 por el escritorio para mí y para el teléfono, ya sea seis o cuatro donde quieras. Lo que encontrarás cuando lo estás haciendo aunque [RUIDO] es que XD, porque usa pixeles, a veces no puede dividir todo, como el tamaño de mi teléfono aquí, que es 375 es [ RIAS] un número divisible que es bastante duro porque son cinco píxeles o es un número impar, eso es lo que es. Hace algunas cosas blandas alrededor los bordes que va a hacer que todo esto sea congruente canaletas porque eso es realmente importante para XD. Se, ajusta los bordes para que todo se ajuste. Si encuentras que está cerca pero estás un poco fuera, no te preocupes. En este caso, sólo tiene que ir con el flujo. Es sólo parte de usar esta medición absoluta y diseñar para algo que va a ser responsivo más adelante. Hay un poco de desconexión así que solo ignora el bit de borde ahí. Si lo consigues. Ojalá termines con dondequiera que el tamaño del teléfono con el que estés trabajando pase a ser un número fácilmente divisible y XD se verá genial una vez que hayas hecho eso; Cuatro páginas, tanto de escritorio, móvil como la columnas, borrador de su paleta de colores. Hay cuatro partes que necesitas. [ RUIDO] Dónde está. Voy a alejar el zoom. Ese es un atajo que no he mostrado. Puedes usar esto o puedes mantener presionado la tecla Comando y Barra espaciadora, simplemente di aleatoriamente si estás haciendo algo, puedes mantener presionado Comando y Barra espaciadora y [RUIDO] simplemente arrastra una caja alrededor. ¿ Viste que hay pop-up en mi pantalla? Eso es Llamaron a las cámaras Mission Control de lanzamiento rápido. En un PC que es Control Space bar y solo puedes arrastrar alrededor, acercar. Ese atajo también se podría tomar en PC. De todos modos, digresión. Quiero que hagas un color primario, un color secundario, un color de acento, tus grises, y al menos un degradado. No me importa lo que sea. No te comprometas demasiado ahora solo, es parte del curso. Escoge algunos colores, mira esos colores de inspiración, cógelo de tus tablas de humor y podrás cambiarla más adelante, no te preocupes. Toma una captura de pantalla y sube tus páginas, tus colores y luego quiero que las guardes todas en tus muestras guardadas, [RUIDO] que está al fondo de ahí. Entonces si puedes conseguir eso en algún orden, toma una captura de pantalla para eso para tu tarea y hazlo. Te veré en el siguiente video. 38. Qué fuentes puedo usar en el diseño de mi web o de la aplicación en Adobe XD: Hola a todos. En este video, vamos a ver qué fuentes se le permite usar en su diseño web o diseño de aplicaciones. Te mostraré un par de buenos lugares para sacarlos y cómo quizá emparejarlos para que tengas algunas bonitas fuentes coincidentes. Vamos. ¿ Por qué no puedes usar alguna fuente antigua que esté en tu máquina? Porque necesita ser una versión web especial o versión de aplicación. No todos están construidos igual. A menudo hay una versión. Incluso si lo encuentras en tu disco duro y te encanta, o tal vez el cliente lo tiene y tienen una fuente que usan, posible que puedas encontrar una versión web del mismo. Si no lo hacen, vas a tener que charlar sobre algo que esté lo suficientemente cerca de lo que están usando y que esté disponible en línea. Basta con averiguar qué es y ver si hay una versión web disponible y si tienen que licenciarla o si es gratuita. Es algo raro que haya pasado en los diseñadores web que haya un montón de fuentes gratuitas, casi gratuitas y económicas. Adobe Fonts es el lugar donde vamos a empezar porque este es el libre. Estás pagando una licencia a Adobe para usar estas fuentes en tus diseños. No estás pagando nada extra por ellos, pero estás pagando esa licencia. Fonts.adobe.com es un gran lugar para empezar. Es un sitio web realmente genial. Esto cambia todo el tiempo, por lo que tus diseños no van a parecerse a los míos. Pero encuentra que todas las fuentes o navega por todas las fuentes, terminas en algo como esto. Lo que me gusta hacer es que me gusta pegar en el material en el que estoy trabajando, que es hermoso té verde. Ese es su mensaje de marketing que va a estar en medio de aquí. Este es mi mensaje de marketing. Lo que buscaba era realmente me encanta esta combinación aquí. Este texto coloquial realmente grande, estrecho, grueso, audaz con este texto coloquial más dibujado a mano o un poco más amigable. Eso es lo que buscaba de todos modos. Eso es lo que fui y hice. Lo bueno de esto es que puedes escribir tu mensaje de marketing. Puedes trabajar con las letras reales, y luego por aquí puedes decidir que quiero que esté limpia o voy a verlas todas. Quiero que mi sea ninguno de esos. Hay dos partes. Ahí están estas etiquetas y luego hay como clasificaciones oficiales de fuentes. Quiero san serif, que es fuente que no tienen estos piecitos que se asoman de los bordes. Se trata de serifs. San serif está sin esos serifs, así que quiero san serif. Se va a deshacer de todos esos. Genial. ¿Ves estos aquí? No quiero eso. Quiero sólo los que son, en mi caso, quiero el peso realmente grueso. Quiero una fuente que sea san serif que tenga un peso bonito, grueso, tan audaz básicamente, y quiero que sea estrecha. Puedes decidir por aquí, quiero que sea una fuente estrecha o comprimida, o hay diferentes versiones de la misma. Pero se puede ver aquí, al menos lo estrecha rápidamente a las cosas. Interesante, me gusta esa. Entonces solo trabajas tu camino por aquí, decidimos cuál quieres, y luego haz click en digamos que sí queremos Interestatal. Estoy bastante seguro de que tengo eso en mi máquina. No, no lo hacemos. Ves a la familia. Son bastante fáciles de instalar, y luego golpeas “Activar fuentes”. Hay una versión comprimida y una versión condensada. Sólo hay diferentes niveles de lo apurados que son. Se puede ver esto parcialmente apurado, súper apurado, y regular. Puedes activar parte de ellos o de todos ellos y empezar a trabajar en tu diseño. Lo que tienes que comprobar cuando estás descargando esto es que están disponibles para licencias web. En mi caso, estos pueden ser utilizados en un sitio web. Perfecto. Así que solo revisa dos veces. Si lo estás obteniendo de un sitio donde algunos de esos sitios gratuitos como 1001 Free Fonts o DaFont o uno de esos Font Squirrel, comprueba que en realidad son capaces de ser utilizados en un sitio web. Algunos de ellos no lo son. Una cosa puedes hacer creo que en esto es que puedo volver una y puedo decir en realidad pensé que había una forma de elegir solo muéstrame las web, pero puedes verla aquí abajo. Eso me muestra que está disponible para ser utilizado en un sitio web y solía ser algo que tenías que tener en cuenta, pero tanto de ella en realidad está disponible para uso en línea ahora. Véalos, actívalos, solo se detienen aquí, y al día siguiente es sólo magia. Utilizan el Adobe Creative Cloud y puedes empezar a trabajar con ellos. Déjame mostrarte otro sitio con el que puedes trabajar es Google Fonts. Fonts.google.com es un sitio realmente común, incluso más común que el sitio de Adobe Fonts. Todos estos son de uso gratuito, no necesitas ninguna licencia. Sólo son limitados. Adobe Fonts tiene más fuentes, pero Google Fonts también tiene una cantidad brillante. Aquí, lo mismo. Voy a escribir mi hermoso té verde y simplemente trabajar de la misma manera. Su búsqueda de categoría no es tan divertido. Apenas tienen las categorías básicas aquí sin todas las etiquetas. Un poco de opciones, puedes entrar en esto. Voy a entrar en éste y buscar escritura a mano y estaba buscando algo no exactamente lo que había en esa maqueta, sino algo así. Aquí es un poco diferente a la descarga. Digamos que te gusta Pacifico. Lo abres, descargas la familia. Todas estas Fuentes de Google van a estar disponibles para su uso vía web o app. Consulta la licencia, pero encontrarás que funcionarán. Entonces descargues la familia, terminarás con este archivo zip que baja. Si estás en Mac y PC, son bastante fáciles, solo haz doble clic en ellos. Sigue haciendo doble clic en ellos hasta que se instalen. Instalar fuentes es bastante fácil. Si no, Google y descubre cómo instalar fuentes en tu máquina, pero no deberías encontrarte con un problema. Tipo de gratis, totalmente gratis, y luego pagar por fuentes. No tengas miedo de pagar una fuente. Solo hay algunos trabajos donde no puedes y no tienes los recursos para y luego hay trabajos donde tienes un poco más de tiempo y un poco más pensado. No quiero desalentar a la gente de comprar fuentes. Hago todo el tiempo para proyectos. Echemos un vistazo a esto. No importa qué fundición sea. Estoy mirando klim.co.nz. Es una fundición increíble. Hacen sus propias fuentes. Están radicados en Nueva Zelanda de donde soy. Simplemente me gustan. Siento una buena conexión con la fuente cuando estoy descargando. En lugar de solo decir que escogí una fuente, soy capaz de discutir cómo se inspiró la fuente, qué significa para mí personalmente, lo que significa para el cliente. Pero sí hay que pagar por ellos. Así que no tengas miedo de pagar las fuentes. Compré éste el otro día. Cuando se trata de comprar fuentes, digamos que queremos comprar esta. Tienes que decidir para qué lo necesitas. El escritorio es un diseño gráfico tradicional, y para eso lo compré. Sí, yo compré esa allí. Echemos un vistazo a nuestra versión web. Cuando compras una versión web, tienes que decirles como si estuviera yendo a un sitio web. ¿ Cuáles son los visitantes únicos mensuales? mi lado, estoy cerca de 10 mil, así que eso es lo que va a cuesta dependiendo de cuántos visitantes únicos haya y se puede decidir en realidad esa versión web. ¿ Te da a todos ellos o solo a uno de ellos? La versión web, si solo quieres una, solo vas a usar una delgada y media. Me va a costar 100 dólares. Trabaja eso en tu presupuesto cuando estás vendiendo en conceptos. Si tu empresa para la que estás trabajando ya tiene una fuente y hay una versión web, vas a tener que salir y averiguar, es una fuente gratuita que están usando? ¿ Están utilizando Roboto, que es de uso gratuito, o están utilizando algo más que necesita tener licencia? Solo revisa eso. Si no quieren, van a tener que encontrar algo más gratis que sea similar. Cómo termino recogiendo fuentes es decir aquí en Adobe Fonts, es realmente genial verlas en texto de muestra. Simplemente puedes acercarte bastante y luego descargas un montón de cosas que no vas a usar. Vas a usar uno de ellos y luego paso mi tiempo en XD. ¿Dónde estamos? Aquí vamos. Termino teniendo copia tras copia tras copia, todo en diferentes fuentes, jugando con diferentes y tú eres como, jeez, lleva medio día haciéndolo. Si eres tú también, no te preocupes. Nos pasa a todos. Lo otro lindo y bit útil es el emparejamiento de fuentes. Si estás en algo como Adobe Fonts y eres como, tengo que usar este para mis encabezados, pero ¿qué voy a usar para mi copia corporal? El emparejamiento de fuentes es una palabra realmente buena. He escrito eso aquí. Hice emparejamiento fuentes Adobe Fonts o emparejamiento de fuentes Google Fonts. Abrí un montón de estos al azar para echar un vistazo y encontré a otras personas que han hecho emparejamiento de fuentes. Se puede decir, eso me gusta. Puedes decidir sobre estos, y estos están disponibles en Adobe Fonts. Se puede decir, estoy vendido el. Estoy tratando de pensar en uno. No me gusta ninguna de esas combinaciones. [ Risas] Lo mismo aquí, yo solo lo busqué en Google. Adobe Fonts apareció del blog de Adobe y hay algunos recursos geniales sobre qué elegir. Es agradable verlos en contexto porque a veces verlos a todos solos aquí no es súper útil. Algunos de ellos sí lo tienen. Digamos que queremos mirar a la Interestatal. Si miramos a esta familia, a veces no todas ellas, tendrán un caso de uso. No pasa mucho aquí, pero pueden tener un montón de estas cosas aquí. Ojalá Adobe pusiera más ahí. Pero sí, echa un vistazo a tu alrededor, mira qué podría funcionar. Podría ser como, me encantan estos dos juntos. Emparejamiento de fuentes, descargando fuentes. Creo que incluso Adobe internamente Interstate tiene recomendaciones para emparejar pares. Alguien lo ha hecho, pero está pasando un poco demasiado. Lo recuperaré, pero sí me gusta verlos en un poco más contextos que en un sitio web. ¿ Qué fuentes escogí? Déjame mostrarte. Voy a descargarlos a velocidad y conseguir que se instalen. Éstas son las. Este es mi primer concepto de todos modos. Esta me gustó, esta Bernina Sans. Me gusta porque funciona como un rumbo porque se pone como un completo audaz y estrechez. Narrow también es muy útil en los teléfonos. Mira esto, la versión no estrecha. Mira, se hizo más ancho. Es más amplio. Simplemente significa que puedes caber más cosas en un tamaño más grande en un teléfono, lo cual es bastante estrecho. Para que eso pueda ser útil. También aunque tiene un tamaño de copia corporal realmente agradable, simple, fácilmente legible, por lo que puedo bajar a algo como 16. Es bonito y legible. Voy a deshacerme del líder, solo un espacio entre las líneas, y eso va a funcionar muy bien como copia corporal también. Puedo usar esa versión y esa versión. Misma fuente, copia corporal, rumbo, y esta va a ser mi pequeña fuente de acento. Mi único problema con éste es, primer lugar, era demasiado ligero, pero afortunadamente hay una versión más gruesa y el otro problema es que son sólo gorras. Si te quedas atascado en esto, el cliente va a decir, ¿ podemos hacerlo de alguna otra manera? ¿ Podemos hacer una minúscula? Eres como, no con esa fuente. Porque Ametic no tiene minúsculas. Me gusta lo suficiente, lo voy a hacer. Pero esas son mis fuentes. En realidad, antes de irnos, quería tirar esto aquí. No quiero que pienses al día siguiente como, hombre, solo entra y recoge una fuente, elige una fuente de subtítulo, y luego se va. No. Si eres como yo y te estás riendo porque tu documento XD se parece más a esto, esto es Illustrator, lo sé. Pero voy a armar una camiseta rápida y 100 revisiones después. Todas las variaciones de lo mismo, muchas fuentes diferentes. Si eres así, no te preocupes, yo también soy así. Mis archivos XD se vuelven todos desordenados antes de que se pongan ordenados. Quería poseer hasta eso en caso sintieras que lo estabas haciendo mal. Sí, las cosas se ponen desordenadas. Esa es la selección de fuentes en Adobe XD. Te veré en el siguiente video. Mira eso, pasé años tratando de conseguir esa mirada. Ahí es donde terminé, pero me estaba esforzando tanto por esto como indie, Japanesey, cosa de skate. Me encanta XD, tú lo consigues. Eso es. Te veré en el siguiente video. 39. Consulta el de lo que las personas de otras fuentes han usado: Hola a todos. En este video, quiero mostrarte formas de comprobar cuáles son las fuentes de otras personas. Digamos que este lado aquí, competidor potencial, quieres saber qué fuente están usando. Me gusta este porque está claro y está ligeramente condensada para que pueda caber mucho en estas categorías. Digamos que quieres saber de qué se trata. Estoy usando Chrome, potencialmente el más común de los navegadores. posible que no lo estés usando, por lo que tendrás que averiguarlo para tu propio o instalar Chrome. Digamos este de aquí, sólo tienes que hacer clic derecho en él y puedes ir a éste llamado Inspeccionar. En un Mac, es posible que tenga que opción-hacer clic en él. Esta cosa aparece y es posible que tengas que arrastrarla y moverlo un poco. Lo que buscas es de este lado aquí es esta cosa llamada Computed. Computed te diría, eventualmente, podrías desplazarte un poco hacia abajo lo que es la familia de fuentes y puedes ver en este caso es Roboto Condensed y eres como, “Impresionante”, así que sé qué fuente es. Entonces puedes ir a algo como Adobe Fonts o Google Fonts o buscar en Internet y simplemente ir, “quiero encontrar a Roboto”. Fuente de copia de cuerpo súper común. Se puede ver que hay una pareja. Ahí hay una losa de Roboto. Esto se parece más a él. Aquí, hay una tonelada de pesos diferentes y lo que es. Eso parece que hay Roboto Condensed. Eso se ve así. Entonces puedes activarlo ya. Estoy usando Roboto para otro proyecto, pero aquí tienes. Es una fuente de Google, por lo que la encontrarás ahí también. Sí, así es como potencialmente puedes hacerlo desde sitios web. Digamos que solo tienes una captura o PDF o algo así. Lo que puedes hacer es que necesites una versión JPEG o PNG del mismo. Estos son de nuestros tableros de humor y realmente me gustó esa fuente allí. Me pregunto qué es. Lo que puedes hacer es extrañamente en Adobe, no importa dónde estés, parece que solo puedes arrastrar algo. Hay una forma oficial y se llama no seguro [Risas] esperar a que se cargue. Búsqueda visual. Mencioné que está bajo fuentes y está ahí en alguna parte. Lo encontrarás. Acabo de tirarlo ahí. Dice, ¿es esta la fuente que quieres? Puedes mover esto a las cosas que quieras. Yo soy como, no, era bueno. Voy a erigirlo. Siguiente paso, se va a tratar de adivinar el texto. [ Risas] Lo he movido. Le resulta difícil con estas partes realmente delgadas de estos serifs. Voy a teclear, TIENDA DE TEA. Aquí tienes. Lo consigue normalmente. Entonces me va a dar algunas fuentes. Mira eso. Está bastante cerca. No es exacto. ¿ Puedes ver este pequeño oído aquí y ese pequeño pokey fuera un poco? Eso es diferente. ¿ Puedo ver a alguno de ellos que tenga ese ? Depende también. Podrías ser como, en realidad, me gustó esa oreja, son mejores. Eso tiene el pequeño extremo plano o te gusta el que tiene este poquito? Simplemente te acerca y luego puedes activarlos y empezar a trabajar en ellos. No siempre va a conseguir que hagan que puedan hacer. Hay otros servicios. WhatTheFont! Es una genial que solía usar, pero he empezado a usar fuentes de adobe porque es bueno encontrar algo losuficientemente cerca y activarlo y empezar a suficientemente cerca y activarlo y trabajar en mis conceptos de diseño. Eso es explorar fuentes que ya están ahí fuera línea o en lanzamientos y agarrarlas y usarlas en tu diseño. Una pequeña nota al margen, Adobe tiene una aplicación llamada Adobe Capture. Está en Android y iPhone. En realidad puedes hacer eso sobre la marcha mientras te estás moviendo. Es genial. Si estás fuera y estás como, oh, eso es genial, realidad puedes intentar capturar la fuente en vivo en tu teléfono y la descargará e instalará para ti. Eso es todo. Pasemos al siguiente video. 40. ¿Qué tamaños de letra debo elegir en el diseño web?: Hola usted. Este video vamos a explorar qué tamaños de fuente debe usar. La respuesta corta es que puedes usar lo que quieras. Pero hay algunas reglas para usar fuentes en dispositivos y en sitios web que exploraré y te daré algunos de los valores predeterminados para empezar para que puedas romper las reglas, pero tienes que conocer el reglas para romper las reglas. [ Risas] Empecemos. Entonces tamaños de fuente, puedes hacer cualquier cosa. No hay reglas oficiales, solo hay algunos valores predeterminados de los que debes tener en cuenta porque las verás cargas, y mucho desarrollo web se construye sobre frameworks, básicamente con plantillajes cosas, y tienen algunos tamaños que son por defecto y se acostumbran mucho, entonces ¿qué son? Echemos un vistazo a esto, llamemos, este de Encabezamiento. Para un rubro, el título de mayor tamaño que probablemente puedas usar, bueno, el más grande normalmente es 72, 72 es un rumbo masivo. Bajan ahí, abajo de ahí, por lo que el 48 es el siguiente. Hagamos que esta izquierda se alinea, todos se alinean un poco mejor y me dejan pasar por ellos. Estos son los 72, luego baja a 48, luego bajamos a 32, luego hay 24, y luego hay 18, y esos son tus encabezados normales. Permítanme realmente escribir estos aquí para que puedas verlos mejor. Esos son los tamaños típicamente para los encabezados. También llamarán a este rumbo 0 porque es masivo y éste es Rúbrica 1. En el diseño web, esta es una forma estándar bastante común de llamar a las cosas, y el dimensionamiento estándar, puedes usarlas o no usarlas, depende de ti. La otra cosa es, es que los llamas Rúbrica 0. Tu codificador o desarrollador probablemente lo llamará H0 y aquí, lo llamarán H1 y así sucesivamente y así sucesivamente. A menudo cuando estoy hablando con mi desarrollador o hago un poco de diseño web, estaré trabajando con H1s en lugar de Encabezado 1 es igual a 48, el valor predeterminado va a ser H1, y será por defecto 48 cuando Lo estoy codificando a menos que lo cambie, y ese es un buen punto, puedes cambiarlo. Simplemente significa que el desarrollador tiene pasar y tal vez hacerlo 1.5 del tamaño original, por lo que esos son los valores predeterminados, al menos para los encabezados. El siguiente es su párrafo para el texto de copia de su cuerpo. Eso se conoce como su texto de párrafo, o su texto P, y a menudo eso es 16 y muchas veces no es negrita. Es una fuente regular y eso es lo que voy a usar en este caso. Pero de nuevo, dependerá tu tipo de fuente porque algunas fuentes simplemente se ven más pequeñas aunque sean de 16 puntos. Podrían tener su línea de base en el mismo punto y la altura x en el mismo pero podría ser realmente delgada, por lo que necesita ser más grande para ser visto. Para que puedas romper estas reglas, sólo un buen punto de partida. La otra cosa que hay que hacer es que cuando estás escogiendo un texto de párrafo, eres como 16 puntos, ¿eso es lo suficientemente grande? Tienes que asegurarte de que cuando estamos haciendo algo así como algún texto corporal shuffle, es que cuando lo estás haciendo, lo estás viendo un tamaño. Ahora sabemos que mi 100 por ciento en mi pantalla en realidad no es apropiado para mi dispositivo. O puedo hacer algunas cosas astudas, 75 parece ser una buena otra vez, estoy sosteniendo mi teléfono que es aproximadamente del tamaño correcto de mi pantalla, tuya podría ser 100 por ciento perfecta. Pruébalo 100 por ciento, pruébalo más bajo, es un buen medidor pero no olvides estar probando en tus dispositivos, sobre todo si estás construyendo primero un móvil o una app, hazlo ahí con esa aplicación Adobe XD y estar previsualizando ahí para que en realidad te pueda gustar eso es realmente factible porque te encuentras con problemas si quieres ser como, yo no sería super cool y bajarlo a 12. Podría parecer interesante, pero cosas como los motores de búsqueda, no es 100 por ciento, pero van a mirar tu sitio y decir, oye, este sitio no es accesible para alguien en un móvil teléfono. Cuando alguien busca en un teléfono móvil, potencialmente tu sitio no va a ser completamente negro marcado, pero se ubicará más bajo que un sitio de igual calidad que usa fuente tamaños que se consideren accesibles o del tamaño adecuado. Para tener un poco de mirada a través, es una de tus tareas después de este curso es echar un vistazo a término de accesibilidad y tamaños de fuente. Entonces para mí son dos cosas que necesitas que sean del tamaño correcto, así que 16 es perfecto, realmente no puede ir mal con él y tiene que ser un alto contraste. Google tampoco le gustará si estás tratando de hacer esto, porque es spammy, está agregando muchas palabras clave y la gente usa para intentar hacerlo para engañar a Google. Pero Google lo cifra como muy bajo contraste, así que vamos a lastimar tus rankings porque no es tan útil para la gente que lo ve así que ¿por qué mostrárselo a la gente? Google es inteligente de esa manera. ¿ Tengo mi texto de párrafo, es del tamaño correcto? Son 18, ahí vamos. Prueba en tu dispositivo, puedes comenzar con estos. No tienes que hacerlo, porque tengo otra fuente que voy a agarrar a todos estos tipos. voy a duplicar y voy a ir a alinear a la derecha y voy a alinearlos aquí arriba. Por lo que estas son tus herramientas de alineación. ¿Ya lo hemos hecho? No lo sé. No tan caliente. Voltea la línea, línea roja. Voy a ir a esa otra fuente que tengo, que no puedo recordar el nombre. Se llama, algo, y creo que eso es todo. Esta es mis fuentes, mi fuente de marketing más juguetona y coloquial. No tan fácil de leer, no es bueno para copia corporal porque se ve demasiado pequeño así que voy a deshacerme de eso, probablemente ese también y ese es probablemente el más pequeño que necesito usar esto en un Encabezado también. Pero ¿puedes ver la elegibilidad de la rúbrica 2 en esta fuente? He escogido a Bernina. Bernina sans versus esta de aquí. Éste tiene que ser bastante grande y no esencial para el uso de sus diapositivas. Entonces no usaría esto como navegación porque es demasiado difícil de leer. Pero para nuestras pequeñas cosas de mensajería de marketing cool a lo largo, siempre y cuando lo usemos agradable y grande, creo que va a estar bien. Esa es mi Font 101, puedes ignorarla totalmente o llevarla a bordo, hasta ti, pero ahora ya lo sabes. Entrémonos en el siguiente video. 41. Cómo hacer estilos de personajes en Adobe XD: Hola a todos. Este video es todo sobre estilos de personajes, cosas reutilizables que podemos hacer click en bits e ir, hey ahora eres eso y eso, bueno, eso es un blanco. [ Risas] Usaremos la versión negra. Puedes pasar, tener algunos estilos predefinidos que puedes usar y reutilizar. Te voy a mostrar cómo hacer esos. También haremos algunas versiones blancas del texto. Después al final ahí, vamos a hacer una pequeña parte de producción del video donde no tanto aprendiendo más solo tener que hacer algunas cosas y te mostraré algunos de los temas con los que me encuentro mientras estoy trabajando. Por eso este video es un poco extra especial largo. Sí. Entrémonos en ello, estilos de personajes. Para crear nuestros estilos de personaje , lo dejaré ahí dentro. [ Risas] He cerrado esto abajo. Ciro esto a menudo para tomar capturas de pantalla para ti por diferentes cosas para los cursos. Simplemente puedes hacer click sobre ellos. Es posible que accidentalmente se cierre, simplemente haga clic de nuevo, se abre de nuevo para arriba. Hemos mirado las capas en su mayoría. Hemos mirado un poco de este panel de Activos. Básicamente [Risas] borramos todo fuera de ella. Pero puedes ver aquí algunos de nuestros estilos predefinidos. Ahí está nuestro estilo de personaje. Digamos que hemos decidido que estos son nuestros encabezados y cosas podemos simplemente seleccionarlos todos usando nuestra herramienta de selección y simplemente ir, boom. Simplemente significa más tarde cuando estamos escribiendo, y estoy escribiendo, se puede decir en realidad quiero que sea éste, o aquel, o éste. Esos son tus estilos de párrafo. Puedes agregarlos uno a la vez o como un grupo grande como acabo de hacer. Es posible que quieras sumar a ti. Podrías decidir que en realidad en lugar de llamarlo así, vamos a llamar tal vez rumbo, lo que era ese, cero, guion de rumbo [Risas] Encabezando cero, podrías pasar por y nombrar todos esos. Voy a dejar el mío como estaban. Lo bueno de usar estilos es obviamente que podemos simplemente hacer clic y escribirlos, tocarlos aquí y escoger un tamaño diferente. También significa que va a ser genial más adelante cuando actualicemos. El cliente vuelve y dice, de ninguna manera, hombre. No me gusta totalmente Bernina. Necesito que sea algo más aquí está. mandan un correo electrónico y te vas, está bien. Entonces lo que haces es hacer clic con el botón derecho y dices Editar. Se puede decir bien que el cliente lo quiere, se lo vamos a dar a ellos. Aquí vamos. Broma clásica, broma papá. Lo bueno de ello es que se actualiza por aquí y se actualizó todas las veces que se usó. Debí haber hecho eso un poco más excitante. Nosotros deshacemos. Si tienes todo el camino a través, todas las aplicaciones diferentes, través de todo tipo de páginas diferentes, entonces ve y actualízalo. [ inaudible] broma, o al menos la parte emocionante de todo. Los estilos se pueden actualizar fácilmente, agregar fácilmente y renombrar fácilmente. Voy a hacer lo mismo por estos tipos y sumar estos tres. Depende de ti lo desordenado que quieras entrar en esto. Podrías decidir que en realidad voy a tener otro grupo separado de estos y todos van a ser blancos. Porque va a haber mucha de esta app que en realidad va a estar en versión blanca. Lo mismo con esto. Va a haber una versión en blanco. Dependiendo si crees que va a ser poderoso o simplemente desordenado aquí. Dependiendo de lo nuevo que seas y cómo puedas cerrarlo, entra en el desorden. Ahora lo extraño de esto es que si has venido de otros productos de Adobe, usamos estilos de caracteres y hay que aplicarlos , no aplicarlos, eso no se aplica InDesign, Illustrator, Photoshop. No es así en éste. Digamos que esto es Amatic audaz 48. Si acabo de escribir aquí, no están conectados con el estilo y yo tecleo [RUIDO] y lo hago Amatic, y lo hago 48 y lo hago atrevido y probablemente sea menos ser ese color negro, pesar de que no está conectado a un estilo no es así fue lo que estaba haciendo. Yo estaba como, ¿cómo aplico el estilo ahora que he hecho? Simplemente va, si quieres cambiar algo en este documento que pase a ser la fuente correcta, o el color correcto, o el tamaño adecuado, puedo ir y simplemente decir editarlo y ves, los va a ajustar a todos. Ves solo el color de éste y éste, no hay reconectarlo. Simplemente mira a través del documento para cualquier cosa que pase a ser el tamaño de fuente correcto y el color de fuente correcto, etcétera Se puede ver que no tocó ese ahí arriba porque es el color equivocado. No tenía sentido. Solo para aquellas personas que sí usan estilos de personaje en otras aplicaciones, es posible que estés buscando algunos, no sé, un poco más de detalle donde no hay ninguno. Es inteligente. Ahora la otra cosa que no hemos hecho para la que hemos hecho un estilo es este estilo de párrafo aquí abajo. Hemos estado en esta caja aquí, esta anchura apenas expandiéndose. Recuerda que lo miramos antes en la clase. Para un párrafo, probablemente lo que quiero es este cuadro aquí porque lo que quiero poder hacer es, vamos a pegar esto en unas cuantas veces, es la altura de la línea. Mira, esto no es lo que quiero. Mi estilo en este momento tiene una altura de línea de 45, ginormosa. El tuyo podría estar ajustado a algo más apropiado. He terminado metiendo con la mía en alguna etapa. Puedes darle la vuelta a esto. Ahora en cuanto a qué tamaño debería ser, de nuevo no hay tamaño exacto, pero cerca de la mitad del tamaño de fuente, los tamaños más pequeños funciona bien [Risas] 1.5 luego di 20. No es una regla científica. [ Risas] Lo tomo de vuelta. [ Risas] Esa regla funciona bien cuando estás trabajando con tamaños de 8, 9, 10 puntos. No parece funcionar tan bien a los 16 años. De todos modos, decidir sobre un tamaño de fuente. Recuerda, solo estoy usando mi flecha arriba y abajo, consigue algo así como mi espaciado de líneas está ahí perfecto. Lo que también vas a tener que decidir son los descansos de párrafo. Realmente no hemos mirado esto. Si pongo un retorno , por el momento, hay una vuelta ahí acabo de presionar Enter en mi teclado, pero no hay espacio, ni espaciamiento de párrafos. Lo que voy a hacer, seleccionarlo todo y esta es opción aquí. Por el momento, hay cero espacios entre nuestros párrafos. Tendrías que hacer esto, el viejo truco de doble retorno. Eso es demasiado grande. Entonces estás tratando de resaltar ese texto y estás como, si lo hago hasta cierto punto, ¿funcionará eso? No. [Risas] Lo que vamos a hacer es seleccionarlo todo y usar esto para espaciar párrafos hacia fuera. Vamos a hacer esta mitad del tamaño de la fuente. Esa es mi pequeña regla. Es la mitad del tamaño [Risas] de la fuente es bueno para el espacio entre párrafos, no el espacio entre líneas. Voy a fingir que eso es lo que era de todos modos, lo es. [ Risas] Ahora lo que tenemos que hacer es, necesitamos actualizar nuestro estilo de párrafo. Probablemente vamos a tener que eliminarlo y volver a iniciarlo. No creo que no hayamos podido limitar esto. Vamos a revisar juntos. Podrías simplemente editarlo y estar haciéndolo así, pero lo que voy a hacer es simplemente eliminarlo y luego agregarlo de nuevo. Eso trae un buen punto. Es editar de nuevo. En lugar de esto, voy a llamar a esta copia de un cuerpo. Puedes moverlos en orden dependiendo tu nivel de OCD de donde necesiten estar. Se pone realmente confuso si todos están mezclados, te da un pequeño adelanto que te acerca. Podrías decidir en realidad que es más fácil en lugar de tratar de leer todo esto, puedes llamar a éste H1. Hablamos de esto antes. En realidad, eso es teorema de H. Vas a llamar a este H2. Puede contar. [Risas] Este de aquí va a ser h. ¿Qué fue eso? Cuatro es el más bajo. Voy a dividir la siguiente. Podrías decidir que [Risas]. No estoy seguro por qué los había empapado a todos para probarlo. Pero ya está hecho. Nuevamente, no hay reglas exactas , pero esto es útil, sobre todo cuando hay que actualizarlo más adelante, aunque no pongas oficialmente todo esto aquí y solo necesitas actualizar un montón de fuentes para guardar éste necesita ser actualizado. Podrías simplemente editar. Se agrega sólo para entrar aquí para editarlo. Puedes ver todas las cosas que lo usas están actualizadas. Podrías usarlo para eso y que sin duda puedes eliminar tus cosas y no eliminar la fuente real, eliminar el estilo real. Ahora, solo vas a usarlo para pasar y cambiar toda tu copia de cuerpo a lo largo de un documento sin usar estilos. Muy bien. Otra cosa que podrías hacer es que también puedas agregar una copia corporal para negrita. Este de aquí, voy a añadir una versión. Este tipo de aquí es copia del cuerpo. Voy a crear otra versión que sea la versión audaz de mi. En lugar de angosto, irregular, voy a ir angosto negrita, y voy a añadir éste, y le voy a dar un nombre de Body Copy Bold. Es muy común llamarlo de párrafo también. Esta copia del cuerpo, no lo sé. Cuerpo Copia Cuerpo, negrita incluso, saber [Risas]. Muy bien. Tengo esas dos versiones. ¿ Algo más que quiera compartir? Sí, hay, he comprobado mis notas. Quiero hacerte saber que no puedes agregarlo dos veces. Este ya es este Body Copy Bold [Risas]. Si vuelvo a editar, mira, poca advertencia sería útil, pero solo significa, ya estoy ahí no me vuelvas a agregar. Si paso y hago de este un número raro como 17 y puedo editar ahora ver [RUIDO] ahí está . Adorando efectos de sonido. ¿ Puedes arrastrarlos? No puedes. Haga clic derecho, elimínelos. Voy a deshacer en realidad eso, así que vuelvo a mi normal. Otra cosa que quería compartir contigo es, si eres de otros programas de Adobe, eres parte de la tierra de Adobe, podrías haber venido algo de Illustrator o InDesign, Premiere Pro, cualquiera de ellos. Lo bueno de Adobe y su sistema de biblioteca es que, digamos que ya tienes algunas fuentes en otra, esto pasa a ser Adobe Illustrator. Podría ser cualquier cosa que tenga estilos de carácter, InDesign, Photoshop, ese tipo de cosas. Lo que puedes hacer es abrir tus bibliotecas en cualquier programa que estés usando. Selecciona la cosa, pulsa el pequeño “Plus” en la parte inferior aquí y di, sí, agreguemos este estilo de personaje a mi biblioteca. Lo estoy agregando a esta llamada clase XD, y no funciona con estilos de párrafo en este momento, XD, no sé, creo que ahí hay demasiada complejidad. Esa es mi conjetura de todos modos. Eso podría cambiar en el futuro, pero por el momento, los estilos de personaje vienen a través. Ahí está, se llama nuevo estilo de personaje. Si entro en XD, y quién recuerda lo que es la biblioteca? Está en un lugar realmente extraño. Se solía abrir en su propio pequeño panel. Ahora sin embargo, recuerdas, vas a hacer click en esta pequeña flecha de vuelta aquí y terminas de nuevo en tu biblioteca. Ahí están mis bibliotecas, ahí están mis bienes. Agrega activos a mis bibliotecas y voy a encontrar mi clase XD1, XD. Estos son estilo de personaje, tú, ahora vamos a ser cualquier estilo que fuera, que pasó a ser Museo Sans Rodeado talla 10, no un tamaño apropiado, pero podría ahorrarte algún tiempo si ya tienes bibliotecas, tienes algunas pautas de marca a través algunas buenas bibliotecas CC ya. Este material puede ser accesible en lugar de volver a crearlo. Ahora, tal vez te estés preguntando, ¿ hace esto cada vez que inicia un nuevo trabajo? Obtiene los colores oficiales y todas las fuentes y agrega estilos? No, no lo hacemos. Puede ser útil estar actualizando cosas a medida que avanza. Es posible que ya tengas unas pautas de marca que tienes que seguir, así que sí, ¿por qué no? Pero a menudo esto sucede después de que te pongas un poco de una idea por el diseño. crean retrospectivamente estos para que estés siendo consistente pero la etapa conceptual pura cuando todo es un lío, no, no estoy usando demasiados estilos de personaje, pero no toma mucho tiempo antes eres como, oh, puedo usar un estilo de personaje y eso te sucederá eventualmente también. Este poquito siguiente es más de, solo necesito hacer algún trabajo para este curso para que podamos avanzar porque por el momento ha sido mucha teoría. Necesito atravesar algunas cosas en la página. Se te permite saltarte. Estas cosas pueden ser prácticas. Esto también, digo que salte todo el tiempo y siempre hay alguna información negativa si quieres pasar el rato. Voy a empezar a diseñar lo que se llama tarjeta. Viste al principio que son sólo un poco razonable de mis detalles de producto. Voy a poner en práctica algo de lo que he aprendido. Eso es lo que voy a hacer. Quiero encender mis columnas. Voy a encender mis columnas haciendo clic en el nombre de la misma en la parte superior de la tecla de flecha. Vamos a la rejilla de diseño. Ahora, dependiendo de lo que empezaste con, estaba mirando mi diseño y quiero un poco de relleno por fuera. He decidido que no tengo que encajar mucha información en mi diseño. Voy a cambiar a esta opción de cuatro columnas. Lo que voy a hacer es, supongo que quiero mantener esto aquí y no solo mostrarte que debes suplicar. Que sea fluido en cuanto cuán grande debe ser ese custodiado, ¿qué margen quieres? Se está bajando a tu diseño. Quería estas columnas porque realmente las encuentro útiles para la consistencia a través de páginas. Podrías decidir que en realidad sólo voy a colocarlo en cualquier lugar que me guste [Risas]. Eso está bien. Va a ser un poco complicado para tu desarrollador. Lo que voy a ir a la columna cuatro. Quiero cuanto de lado. Cuando empecé este curso o este diseño, lo iba a empujar todo a los bordes. Por eso puedo añadir cero relleno en el margen en los bordes. Pero ahora estoy pensando en realidad quiero algún margen a la izquierda y a la derecha. Voy a usar esto. No lo cubrí porque no lo hice, pero pones margen a lo largo de la parte superior, a lo largo de la parte inferior, o simplemente a la izquierda y a la derecha, depende de ti o quieres hacer. Ahí está ese bit negativo de información por la que te quedas por ahí. Nuevamente, múltiplos de ocho es realmente útil aquí, así que 16 cuánto hago en realidad, 22 múltiplos de ocho, 24 en los bordes y podría abrir el ancho, el canalón también decir 16. Sólo estoy mirando de nuevo. ¿ Podemos vivir con 24? Le daremos una oportunidad. Recuerda que puedo convertirlo en mi defecto. Selecciona a todos estos chicos y ve a usar default y probablemente cambiarlo 20 veces más a medida que avanzamos. Está bien. Lo que quiero es que quiero un rectángulo que muestre mi producto y hasta dónde lo quiero a través? Voy a romper totalmente mis reglas en cualquier momento ahora. Yo lo sé [Risas]. Va a ser un placeholder para la imagen. Voy a agarrar mi herramienta tipo. Voy a teclear el producto golpeando. Estas van a ser mis diferentes características de este té verde. Haga clic una vez. ¿ En qué estoy? Estaba en una herramienta circular por alguna razón. Vamos a agarrar la herramienta de tipo. Da click una vez, y esta va a ser Tencha Mimoto [Risas]. Algo que ver con el té verde. Ahí vamos. Tenemos tamaño dulce ahí dentro. De nuevo, eso funciona para mí. Copia del cuerpo. Voy a agarrar mi herramienta tipo. Voy a hacer clic y arrastrar hacia fuera una caja. Voy a ponerlo en copia corporal. Podría repetir eso más de un par de veces. En realidad podría hacerlo todo el camino a través de esto, conseguir que esto se alinee e vaya copia del cuerpo donde usted, está bien, estilos haciéndote empezar a usar nuestras columnas. Estamos obteniendo cierta consistencia a través del relleno. Esto está comenzando en el espacio correcto usando algunas de nuestras muestras de color. Déjame ir. Aquí vamos. Apaga las columnas ahora. Recuerda que hay atajos para que las columnas estén encendidas y apagadas. Yo lo llamo columnas. Se llama la cuadrícula de diseño. Hicimos las plazas o las columnas. Ese es ese atajo loco ahí. El tuyo será diferente en un PC. Turno, Comando, Apostrofo. Ahí vamos. Lo que quiero hacer es tener múltiplos de esto, ahí vamos. Vamos a ver el espaciado. Sólo voy a ajustar esto. Hagámoslo en modo súper rápido. Muy bien, tropezate con mi primer problema. Se ajusta sólo pero probablemente voy a encontrar algo más largo. Voy a ignorar ese problema en este momento. Podría tener que en esta fuente en particular, bajar a algo más como 44 o algo más adelante, pero veremos en qué nos encontramos entonces. Por el momento, estoy feliz. No recuerdo por qué empezamos este video. ¿ Qué estábamos haciendo? Estábamos haciendo estilos de personaje. Por eso [Risas] me tomó un tiempo. Terminamos haciendo un poco de material de video de producción donde en realidad tenemos que hacer algunas cosas y espero mostrarte algunas ideas en realidad, mientras estás trabajando, cosas puede adaptarse y cambiar a medida que avanza. Muy bien, eso es todo para este video muy largo, y te veré en el siguiente. 42. Plugin : añadiendo nuestro primer clen el primer clen en el cl.: Hola a todos. En este video, vamos a instalar nuestro primer plugin en Adobe XD. ¿Qué son los plugins? Los plugins son cosas que Adobe XD no hace por sí solo, alguien más que Adobe los ha creado, y hacen cosas como en este caso, trayendo iconos, trayendo caras de interfaz de usuario, texto de marcador de posición. Hay muchos plugins diferentes para extender Adobe XD más allá de lo que hay en el sistema. Te voy a mostrar cómo instalarlos. Vamos a trabajar con este Lorem ipsum one, que es texto de marcador de posición. Para nosotros en este caso vamos a poner una copia del cuerpo de escritura una y otra vez. Vamos a poner algunas palabras latinas mezcladas que parecen buenas frases sin que en realidad sean oraciones reales. Vamos a instalar nuestro primer plugin. Para conseguir que los plugins vayan en Adobe XD, aquí abajo hemos mirado capas, hemos mirado nuestros activos, panel con un estilo de personaje diferente. Mira este último aquí abajo, plugins. En realidad no pasa nada. O bien golpear “Plus” o golpear “Discover Plugins”. Se va a abrir esta cosa. Esta es la aplicación Creative Cloud. Si aún no lo tienes instalado o no está abierto, dale un segundo. Se podría pensar, ¿ está haciendo algo? Sólo está tomando un poco de tiempo cargar. Esta cosa cambia. Reorganizan esto un poco. Entonces, he terminado en este stock y marketplace y plugins. Se puede hacer búsquedas para ello. Por el momento, tiene los destacados. Quiero mirar todos los plugins. Ahora si no puedes encontrar la pantalla de Creative Cloud, no tienes instalada la app, necesitas la aplicación Creative Cloud instalada, pero puedes llegar a esto a través del navegador web. Ve a exchange.adobe.com, y estamos tratando con Creative Cloud. Aquí puedes encontrar cosas como, aquí abajo, vamos a encontrar cosas para XD. Puedes encontrar diferentes extensiones o plugins para esto aquí. Vamos a ir por el camino correcto a través de la aplicación Creative Cloud. Es ordenarlo por lo más popular que es práctico. Las que tienen buenas estrellas y luego se descargan cargas, muchas veces son las mejores. Pero hay cientos de diferentes por recorrer. Entonces, pasar un poco de tiempo, echar un poco de mirada y podrías ser como, yo uso eso o yo uso ese. Puedes conectar otros flujos de trabajo tal vez que estés haciendo con lo que estás haciendo aquí en XD para ahorrar tiempo como si hubiera un espejo uno. Yo uso bastante las tablas de espejo para el trabajo. El que vamos a usar es este Lorem ipsum. Lorem ipsum, si no lo has oído antes, es solo texto de marcador de posición. Ahí vas. Haga clic en “Instalar”, acepte sus términos y condiciones y eventualmente te lo dirá, mira eso. Eso ya está instalado. Si vuelves a XD, ahí está él. Ahí está. Para que funcione, hay que establecer y escribir primero porque he usado copia corporal, copia corporal. Eso no es divertido. Si le pegas a esto y acaba de golpear este de aquí dice, “Quick Lorem ipsum”, y simplemente tirará algunas cosas básicas. ¿ Está de acuerdo con esto? Usted está de acuerdo. No tienes opción [Risas]. Entonces, se agrega. Estas son palabras latinas, palabras reales simplemente mezcladas para que no tengan sentido. Es simplemente fácil cuando estás diseñando tener estos como marcador de posición en lugar de texto real porque es posible que no tengas texto del cliente o terminas en discusiones con el cliente sobre, no puedes escribir eso aquí y eres como, no te preocupes por los textos, es solo texto marcador de posición justo ahí para darte una idea de diseño. Podrías pasar y te vayas, solo conviértete en esto. puede ver que está usando mi estilo. Ni siquiera tiene que ser un estilo. Es solo usar lo que había en esa caja para que funcionara. Si no tienes nada seleccionado, obtendrás éste o aquel. Sí, no hay texto seleccionado. Tener algo seleccionado primero. No voy a pasar por todo esto. Bueno, voy a pasar por sólo un poquito de éste. Este “Rápido”, sólo va a volcar lo que sea y tratar de igualarlo. Ahí está este primero aquí. Puedes hacer algunas cosas más fantasiosas como, ¿quieres que sea Lorem ipsum? Hay otros textos diferentes de marcador y puedes decidir, quiero terminarlo con la puntuación de full stop. ¿ Quieres algunos saltos de línea ahí también? ¿ Quieres recortar el área de texto para que quepa? Recuerda que tenemos esta altura auto. Podría recortarlo para encajarlo perfectamente. Acaba de agregar una parada completa. Conocerás diferentes plugins como este de aquí podrían no estar ahí cuando vengas a comprobar, o podría ser alguna otra aplicación de texto de marcador de posición impresionante que elijas, o es el parte superior de lo popular? Ahí están aquí, todos funcionan ligeramente de manera diferente. Éste incluso tiene un atajo. Mira eso. Eso es todo por este plugin en particular. Haremos unos cuantos más a lo largo del curso. Si necesitas deshacerte de ellos, puedes hacer clic con el botón derecho en ellos y administrarlo y se abrirá tu Creative Cloud. En mi caso, está ahí. Puedo desactivarlo o desinstalarlo y/o eliminarlo. Así es como agregar uno y así es como eliminarlo. Pero son divertidos. Encontrarás cosas ahí que tengan algunas conexiones con otras aplicaciones, haciendo cosas que Adobe XD no hace todavía. Algunos de estos que he tenido al principio, había muchos plugins que usé que simplemente ya no necesito porque Adobe XD, estoy asumiendo, mira algunos de esos plugins y va, hombre, eso es siendo descargado un billón de veces. gente le gusta, probablemente deberíamos traer eso a la app y eso sucede. Pero vamos a hacer unos cuantos más a lo largo del curso. Pero por el momento, eso es todo. Eso es instalar nuestro primer plug-in. Siguiente video. 43. Proyecto de clase 08: Texto: Es tiempo del proyecto. Voy a conseguir que te pongas en esta etapa. En tus proyectos de clase, verás Clase Proyecto 8. Voy a necesitar crear un logo. Depende de ti. Puedes hacerlo súper simple como yo. Acabo de usar mi fuente y uso una versión negrita y una versión ligera. Esa es la más bonita que voy a ir. Pero si quieres pasar un poco más de tiempo haciendo un logo genial para tu marca, por favor hazlo. Entonces quiero que creas en tu página de inicio. Quiero que tu página de inicio solo tenga tu mensaje de marketing. Vas a tener que pensar en esto para tu empresa. El que obtuviste antes de ese generador de proyectos aleatorios, dale un mensaje de marketing. Puedes copiar el de otra persona. Es sólo un relleno. Por el momento, no lo vas a creer. Hice el mío propio en un hermoso té verde a tu puerta. Único para mí, lo sé. Crea algo aquí. Intenta usar un par de fuentes diferentes porque lo que quiero que hagas es parte de ella es enviarme esta pila aquí arriba. A pesar de que para que no tengas que hacer esta etapa del proyecto, lo que quiero hacer es sólo conseguir que hagas estas cosas y quiero que ustedes dos se aseguren de que estén en su biblioteca de activos y tus estilos también. Practica eso, agrégalos ahí. Toma una captura de pantalla de eso y una captura de pantalla de estas dos páginas. Esta página aquí es ligeramente diferente. Lo vamos a ver un poco de tarea fuera de esta tarea, un proyecto de investigación. Ya he hablado de cartas antes. Quiero que investigues qué es la tarjeta UI? Simplemente echa un poco de mirada y tu tarea es de 10 minutos. Ve a pasar y leer un poco al respecto. Va a haber muchos términos que utilicé en este curso que vas a ir eso es nuevo para mí, nuevo x, y está fuera de este curso pasar por cada término. Entonces sal a investigarlo. Quiero que sepas qué es una tarjeta, para qué se utiliza. El versión corta es que son estas pepitas reutilizables de información. Tengo algunos ejemplos en tus archivos de ejercicios. Están ahí. Los ejemplos de la tarjeta UI. He agarrado unos cuantos. Tienes una sensación de lo que son. Estos repetibles y puedes hacerlos únicos. Simplemente significa que caben en un sitio web. Se pueden estructurar y desglosar responsivamente para diferentes dispositivos. Pero tener un poco de investigación sobre para qué es una tarjeta de interfaz de usuario. Echa un vistazo a algunos de mis ejemplos. Quiero que te acerques con la tuya propia para tu marca. He ido por algo sencillo. He tirado la mirada, no siguiendo mis guías, sacé esto desde los bordes de ahí. He añadido una sombra paralela. No quiero que hagas demasiado trabajo de diseño todavía. Pero sombra paralela es fácil de encender y apagar. Vamos a ver más efectos más adelante en el curso, pero tener algo, tener al menos tres cosas diferentes para tu producto. No tienes que pensar en estos también. Les pedí prestados a un competidor solo para tener algo que usar. Estas van a ser imágenes cuando nos metamos en esa parte del curso. Usted hace lo mismo en círculos o cuadrados de placeholder. Quiero que vayas a instalar tu primer plug-in también. Hay mucho que hacer por éste. Página de inicio en el placeholder del mensaje de marketing, crea tus propios estilos de texto de los que hemos hablado , instala un plugin. El Loren Ipsum placeholder uno. No tiene que ser el ganado que yo uso, sino algo que se puede utilizar para llenar estos vacíos. Incluso usó estos títulos de productos como específicos, como go y encontró algunas características que tiene tu producto solo para que tengas algo de contenido en marcha e investiga las tarjetas de interfaz de usuario, crea esas pequeñas tarjetas de características y captura de pantalla de eso, captura de pantalla de eso. Eso es lo que realmente necesitas hacer para enviar. Finalmente nos estamos moviendo de ser como todas estas cosas hasta ahora son solo proyectos de investigación y no muy visualmente estimulantes. Ahora, estamos visualmente estimulantes y quiero que lo compartan ahora a través de las redes sociales. Hay una cuenta de Instagram, una cuenta de Twitter, un grupo de Facebook y LinkedIn. Hasta ti cómo quieres hacerlo y etiquetarme en Instagram o Twitter. El grupo de Facebook es bastante increíble, y también lo es el grupo de LinkedIn sobre compartir tus diseños y pidió comentarios si querías decir paga, esta es mi primera cosa y nunca en UX o Adobe XD ¿qué opinan ustedes? Prepárate para ser criticado un cómodo como estos lugares aquí, siento que tenemos un muy bonito sentido de como, sí, no es un estilo Reddit despiadado, crueldad. Es un buen grupo lleno de personas como tú que están empezando. También mientras estás ahí, asegúrate de comentar sobre la de otra persona porque parte de ella, convirtiéndote en un buen diseñador, diseñador de UX es poder identificar el trabajo de otras personas, cosas que realmente te gustan de ello, que podrías quitarte por tu propia cosa o poder entregar críticas de una manera que no haga llorar a la gente. Eso es algo que puedes practicar allí también. Acerca de alimentarse de nuevo a otras personas como lo que sí oíste. Si fuera yo, probablemente miraría haciendo X, Y, y Z. esa es la vibra que tenemos en estos grupos. Así que dale una oportunidad tanto subir tu trabajo como también entregado a otros, porque eso es una gran parte de ser diseñador. Es poder entregar y tomar críticas sin llorar demasiado. Todavía lloro, no te preocupes. Ve a hacer tu tarea, mucho que hacer. Te veré en el siguiente video. 44. Dibujo y edición de formas y ediciones en Adobe XD: Hola a todos. Este video vamos a hacer algunas formas simples usando las herramientas de forma en Adobe XD. Te mostraré algunos de los secretos dentro de la herramienta polígono y cómo meterte en algo llamado modo de edición de objetos para personalizar algunas de estas formas. Vamos a saltar. Hagamos algún dibujo. Sólo estoy trabajando en esta mesa de trabajo vacía aquí. Empezaremos con la herramienta rectángulo. Ya hemos hecho un poco con esto, así que tengo este rectángulo. Quién recuerda lo que sostengo en mi teclado para hacerlo directo a lo que al menos el cuadrado. Lo tienes presionado “Shift”, antes de que empiece a arrastrar, arrastra hacia fuera y obtienes un cuadrado perfecto. No quiero una plaza [Risas]. Quiero algo que se vea así, va a ser ese pequeño ícono de cosa taggy de precio. Ahora, una de las cosas geniales de las formas en Adobe XD es que puedes hacer cosas como las esquinas redondeadas, simplemente arrastrarlas hacia fuera. Pero si terminas en algo llamado modo de edición de objetos, ni siquiera sé si tiene nombre. Es lo que yo lo llamo de todos modos. Si agarro mi herramienta Selección y hago doble clic en ella, es posible que estés aquí todo el tiempo por accidente porque eres un doble clicker. Te encanta hacer doble clic cosas, eres así cambiado, haz clic atrás hacia fuera, sal del modo de edición de objetos, vuelve a entrar. Mientras estoy fuera. Tengo todo este control encantador porque se llama forma primitiva, lo sabe. El ordenador sabe que, eso es un rectángulo, y como tal, puedo hacerle cosas frescas de esquina redondeada. Pero si entras aquí y editas esto, mira esto. Cuando estoy en este modo de edición de objetos, que dice que estas cosas van puntos de anclaje y puedo moverme. Oye, arrastra estos pequeños tiradores para cambiar el tipo de curva. Puedes entrar en cualquier forma, hacer doble clic en ella, y empezar a meterte aquí y contarlo totalmente. El problema es, es si salgo solo pinchar en el fondo y ahora hago clic en él, esas esquinas redondeadas, sabes que no me he perdido esta arriba. El XD va, ya no sé lo que eres. [ Risas] ¿Es eso? Lo sé, lo llamamos bolsita de té. Parece bolsita de té, pero ya no tengo ese control. Entonces ese es el único inconveniente de entrar en modo de edición de objetos y faltar, pero necesitamos hacer nuestros propios iconos y formas personalizadas, y voy a deshacer esto hasta que vuelva. Sé que está de vuelta porque estas cosas vuelven a aparecer. Voy a deshacerme de esos, porque lo que quiero hacer es hacer doble clic en él y ir por aquí y añadir un punto. Estoy en esto, puedo editarlo, editar puntos existentes, pero mira esto. Si pongo el cursor por encima de este pequeño ícono, es la herramienta pluma en la que puedo hacer clic una vez, y me está dando un punto, mira que puedo arrastrarlo hacia arriba. Aquí vamos. Mi casita recorta precio etiqueta cosa. Eso es el modo de edición de objetos, para volver a salir de él, basta con hacer clic en cualquier parte del fondo y ahora es solo una forma antigua regular que más difícil de destruir. Un pequeño círculo aquí, ¿qué sostenemos para que sea perfectamente redondo? Así es, “Turno”. Voy a la herramienta Selección, que es la clave V. Selecciona “V”, selecciona ambos, voy a decir asegúrate de que estás alineado verticalmente. Lo dibujé perfecto, agradable. La otra cosa a saber de los objetos ya que puedes rotarlos. He seleccionado de nuevo a los dos, recuerda, va a cambiar el tamaño y justo afuera de aquí, ahí está ahí, es como tierra de nadie, no ahí, no ahí, para esto como pequeño redondo , puedes hacer click y arrastrarlo. Voy a escalar el mío hacia abajo sosteniendo “Shift” y arrastrándolo. ¿ Recuerdas el derrame cerebral? Eso está bien. Estoy de acuerdo con ese tamaño. Lo siguiente que quería hacer es que quiero ir a mirar algunas de estas otras herramientas. Entonces cuadrado, círculo, éste de aquí tiene algunas habilidades especiales. Dibujamos una punta de flecha antes en el curso. Lo mismo, sostenga “Shift” para conseguir un equilátero perfecto. No sé cómo se llama. [ Risas] mismos tamaños. Se obtiene un triángulo, el triángulo sin embargo, tiene algunas habilidades secretas. Es esto como un pequeño grupo aquí. O si pasa el cursor por encima de él, se puede ver ese, ¿ves pequeño icono? Es una estrella. Echemos un vistazo, así que los lados sabios vamos 14, decágono. Ni siquiera voy a adivinar estos [Risas] Estoy tan mal en esto. Disfruté matemáticas, no muy bueno en eso, cinco es mi hexágono, pentágono. Voy a dejar de adivinar. Pero solo tocas por dentro y puedes conseguir diferentes lados. La otra cosa que puedes hacer es este inserto estrella aquí, éste de aquí. Si lo tecleas, vamos a ir lleno 10 por ciento cosa estrella puntiaguita. Voy a ir, digamos cinco, y voy a ir 50 por ciento te da, cinco lados, 50 por ciento inset estrella te da esa estrella tradicional que vamos a usar para nuestra pequeña cosa de votación cinco- reseñas de estrellas, que deberías estar dejando por cierto en este curso. Echemos un vistazo. Una de las opciones que tiene es esta esquina redondeada así que pongo en sus píxeles, es probablemente un poco mucho, muchos de estos controles en realidad están en él. ¿ Se puede ver si acerco? Ahí está este pedacito que es el inserto estrella, ya ves y éste de aquí, que es lo puntiagudo que es. Vete, tú, así que solo quieres un poco de ahí y empieza a lucir así. Voy a ir allí. Aquí vamos. Entonces esos son los secretos del triángulo, o creo que se llama la herramienta polígono. Es porque es todo polígonos. Último par de cosas con formas. Bueno, creo que uno más con él seleccionado, puedes ir al objeto y ahí está bajo Transformar, puedes voltear horizontalmente, verticalmente o no hace nada por una estrella porque es simétrica entonces, [ Risas] es como éste, y no está agrupado, y así se tiene Objeto, Transformar Voltear Horizontalmente. Ahí vamos. Hay un tirón verticalmente, pero se obtiene la idea. Así es como hacer eso si es necesario. Eso es lo básico de crear formas. Puedes hacer doble clic en ellos para ir dentro de ellos y ajustarlos. Pero sí pierdes algo de ese control como lo tenemos con cosas así con la estrella. Eso es crear cosas simples con algunas formas de dibujo. Hacia el siguiente video. 45. Extraña con formas de Adobe XD: Hola a todos. Este video es algo raro en Adobe XD. Va a estar básicamente alrededor de esto que es si escalo esto hacia abajo, se convierte en este blob. Anteriormente en el curso Dan nos mostró una manera haciendo clic derecho decir Esquema Stroke, eso te va a dar resultados aún más raros. Te voy a mostrar cómo moverte alrededor de ellos, alternativas para Esquema Stroke, y hacer mi mejor esfuerzo para explicarlo. Es complicado, pero empecemos a entrar . Toma el número 5. [ Risas] He grabado esto tantas veces. Es complicado de explicar; resulta, porque es algo raro por lo que es raro explicar. No sabes que he hecho cinco veces, pero [Risas] probablemente te salgas de mi comportamiento maníaco que ya lo he hecho unas cuantas veces. Vamos a concentrarlo, vamos a entrar ahí. ¿ Cuál es el problema? Olvidémonos de ti. Las cosas me dan un problema, [Risas] así que esperemos que esto lo arregle. Tengo una estrella, tiene que llenar un borde. Tengo esquinas redondeadas, puedes ver. ¿ Dónde está mi pequeño rincón redondeado? Está ahí. Ahí está ahí. Tiene cinco bordes, y tiene un conjunto estándar 47 por ciento y tiene esquinas redondeadas de dos. Quiero hacerlo más pequeño, así que voy a duplicarlo, hacerlo más pequeño. ¿ Qué está pasando? Nos topamos con esto antes en el curso. ¿ Recuerdas cuando tratamos de escalar cosas y el golpe no vino junto con él? Utilizamos el método que no va a funcionar en este momento, pero ese valor predeterminado de escala es realmente útil cuando estamos usando cosas como la herramienta rectángulo. Herramienta Rectángulo, agregamos unas esquinas redondeadas, y luego la usamos para nuestras tarjetas, o cajas, o botones y luego en adelante hacemos un tamaño diferente. Tamaño diferente; uno realmente grande, y se puede ver que conserva los tamaños de esquina redondeada. También le está pasando a nuestra estrella. Le pasa a algunas formas diferentes en XD, y eso puede ser un poco raro. Lo que no pasamos para encerrarlo y funciona ahora, es que lo hicimos clic derecho y dijimos esbozar el trazo, y luego lo que hicimos fue lo bajamos. Eso fue genial siempre y cuando no tuviera un relleno. ¿ Qué está pasando? Eso es algo de la rareza. Lo que sucede es cuando se delinea un trazo que tiene un relleno básicamente simplemente lo separa, así que tengo mi relleno separado del trazo alrededor del exterior o el borde en este caso. Esa es una cosa, tú dices, “puedo deshacerme de eso”. Sólo engancharlo y escalarlo , y tú estás como, “Genial”. Ahora sólo lo llenaré. ¿ Por qué no está llenando? Se ha convertido en un relleno. Todo ese proceso de esbozar el trazo básicamente lo que hace es convierte tu trazo en dos partes; ese relleno y luego esta cosa, y esto también es un relleno. Si hago doble clic en él para ir dentro del modo de edición es difícil de describir, pero esto ahora parece un trazo pero en realidad es un relleno. Es sólo un bonito relleno fino aquí. No puedo agregar un relleno, puedo agregarle un boarder. Mira eso. Puedo agregarle un borde lateral extraño. Hagámoslo aún más pequeño para que puedas ver. Puedo añadir un borde por fuera a mi relleno como puedo con todas las otras formas pero no es lo que quería aquí, así que, ¿cómo se mueve por ahí? Te voy a mostrar una forma diferente de acercarme a eso. Si eso no funciona y Outlines Stroke te consigue algún comportamiento extraño, volveré a hacer lo mismo. En lugar de hacer clic derecho en “ Trazo de contorno ” vamos a usar una forma diferente. Con ella seleccionada ve a Objeto y ve a Ruta. Ahí hay uno llamado Convert to Path. Demos clic en eso. Lo que termina pasando es que esta cosa aquí, básicamente acaba de romper toda la esquina redondeada. Si deshago, [RUIDO] Tengo todas esas cosas preciosas que dice que tengo cinco lados, tengo esquinas redondeadas, tengo set estándar. Si voy a Object, y voy a Path, y digo Convert to Path, simplemente rompe todas esas cosas como lo que hicimos cuando hicimos el modo de edición de objetos, cuando hicimos la etiqueta en el último video. Haga clic en eso, se ve igual. Todavía tiene un tamaño de tabla, pero significa que cuando lo escalo por las esquinas redondeadas voy a venir por el camino correcto. Todavía tengo el problema con el tamaño de la misma así que voy a tener que hacer un borde apropiado en él, pero al menos mis esquinas redondeadas no van a verse afectadas. Eso funciona de la misma manera si tienes un cuadrado que tiene una esquina redondeada. Todavía tiene estas esquinas redondeadas , quieres reventarlas. Ve a Object, y vas a Path, y dices Convert to Path en lugar de esta cosa encantadora llamada primitiva que es ajustable. Ahora si lo ajusto, mira, no es del todo lo que quiero con un rectángulo pero ojalá sobre todo porque vamos a dibujar cada vez más íconos va a haber momentos en los que estás, “ Oh, ¿por qué no harás lo que quería hacer?” Convertirlo en un camino primero puede ser agradable. En ocasiones esbozar el trazo puede ser bueno cuando se quiere separar el relleno del exterior, y luego el borde alrededor del exterior es editable y puedes tratarlo como un relleno. Voy a parar ahí. Siento que podría haber hecho éste. Siento que podría haberlo explicado, no voy a [Risas] a seguir hablando. Lo volveremos a hacer en el curso, no te preocupes. Pero sepan que hay algo más que solo Trazo de Esquema, también hay Convert to Path. Uno o dos de esos trabajarán para ti. Eso es una toma, eso es un rap gente. Necesitaba un descanso. Rarezas en Adobe XD, hecho por el momento. Eso podría ser yo hecho por el día. Te veré en el siguiente video. 46. Aprende a dibujar con la herramienta de pluma en Adobe XD: Agárrate a tus sombreros a todos, vamos a dibujar algunas formas increíbles usando la herramienta Pluma. Nos pondremos un poco mejor con este abajo abajo aquí pero supongo que quiero introducir la herramienta Pluma porque es una de las herramientas y realmente útil en Adobe XD. No va a ser un tutorial completo sobre todo lo que la herramienta Pluma puede o de una introducción para empezar. Es una herramienta útil si no sabes cómo usarla. Déjame mostrarte cómo. Empezaremos con la herramienta Pluma. Es esto como algo de la pluma estilográfica aquí. Tienes dos modos. Hay click una vez, te dará un punto de esquina. Eventualmente, quieres terminarlo completándolo y ver esto. Te acercas al borde y va pop [Risas] No estoy seguro de dónde viene ese efecto sonoro, eso es nuevo para este curso. [ Risas] Pero puedes ver ahí, se conecta y haces clic una vez y se unirá a todo. Entonces puedes agregar un relleno. Voy a acariciar. Simplemente puedes hacer click por todo el lugar. Ahora, el problema con ello es que hay líneas rectas pero no son muy paralelas, así que vamos a mover esto por aquí. Vamos a agarrar la herramienta Pluma de nuevo. Si sostengo “Shift” mientras hago clic, así que manteniendo pulsada la tecla “Mayús” hacia abajo, puedo hacer clic una vez y se puede ver que la bloquea en ángulos de 45 grados, por lo que significa que puedo ir tú, tú. Voy a dibujar una casita, 45 grados. Esta es mi casita. Ahí vas. Ahí está mi casita, escoge un color diferente. Algunas grandes opciones de color aquí entonces. Al hacer clic una vez te da un rincón. La otra cosa que hace es dejarte hacer curvas, así que voy a tratar de dibujar un círculo. Lo extraño de la herramienta Pluma, recuerda si quieres ir más allá con esta herramienta Pluma, esto es como una introducción básica rápida, y la herramienta se utiliza principalmente en algo como Adobe Illustrator. Es posible que quieras revisar mi curso sobre eso, lo esencial de Adobe Illustrator, o el curso de alguien más o aprender en línea cómo usar la herramienta Pluma pero esto es lo básico. Voy a dibujar un círculo. Voy a hacer clic, mantener y arrastrar. Al hacer clic una vez te da un rincón. Si haces clic en mantener y arrastrar te da esta cosa en las curvas. Haga clic en mantener presionado y arrastre, círculo tambaleante que viene. Haz clic en mantener y arrastrar, y puedes arrastrarlo accidentalmente de la manera equivocada y hace cosas raras. A veces hay que arrastrarlo y simplemente seguir moviéndolo alrededor. Ahí vamos. Entonces de vuelta aquí, lo que realmente quieres hacer es simplemente cliquearlo una vez. Pero, ¿qué pasa cuando haces clic una vez? Se obtiene este punto de esquina y eso no es lo que queremos. Se puede ver que va a ser un rincón feo. Nuevamente, incluso con el terminado, haga clic en mantener presionado y arrastre. Aquí vamos, un círculo wonky. [ Risas] ¿Qué más tenemos? No lo consiguió seleccionado. Selecciónalo todo, dale un relleno. Si quieres editar alguno de estos puntos, nada funciona. ¿ Por qué no vas a tener un relleno? Llena por favor, ahora tienes un relleno y ahí vamos. Oh, está por ahí. Mira, tenía un relleno de blanco. [ Risas]. Simplemente arrástralo por ahí, entonces probablemente estés gritando a la pantalla, lo está haciendo mal y ahí vamos. Todo está bien en el mundo otra vez. Si quieres editar alguno de estos, tenemos que ir dentro de ellas y editarlas porque con la flecha negra, si hago clic en el fondo, pincha en ellas una vez, solo llegamos a hacer redimensionar estas cosas. Mantenga pulsado “Shift” para escalar la altura y el ancho proporcionalmente para que escala hacia arriba y hacia abajo. Pero, ¿quién recuerda cómo entro ahí y empiezo a trabajar en esos puntos de anclaje? Lo hicimos antes, así que acabo de hacer doble clic en él. ¿ Puedes entrar en este modo de edición de objetos? Entonces puedes entrar aquí e ir en realidad eso. Es un poco así y eso necesita estar probablemente por ahí un poco. Si quieres que sea curvo pero afilado curvado, los acercas al punto de anclaje. Aún curvo, click off pero [Risas] No soy tan bueno. Esas son tres formas feas. Hagamos algo un poco más bonito. En mi caso, va a ser una hoja de té. Cuando estés dibujando tus propios iconos, va a ser relativo a tu empresa para la que estás trabajando. Pero vamos a combinar los dos, pero curva poco de esquinas finales. Herramienta Pluma otra vez. lo voy a hacer y luego lo haremos por segunda vez. Voy a hacer clic a todos una vez por una esquina porque quería tener una hoja de té puntiaguda en la parte superior. Entonces voy a hacer clic en mantener presionado y arrastrar por un poco redonda. Entonces aquí abajo, aunque no sea perfecto, soy como, eso no es perfecto. Voy a hacer clic una vez para una esquina. A menudo solo consigues los puntos y luego lo editas más tarde. Por aquí, quiero que sea otra curva. Haga clic, mantenga pulsado y arrastre, y luego de vuelta aquí, quiero que sea un bonito rincón puntiagudo. ¿ Haz clic y arrastra por una esquina o haces clic una vez para una esquina? Lo tienes. Se hace clic una vez. Ahí vamos. Hay una hoja de té wonky. Voy a ir a mi herramienta de selección y ya estoy en modo de edición de objetos. Pero si haces clic fuera y haces clic de nuevo en, obtienes doble clic en él. Ahí vamos. Entonces este tipo abajo de aquí abajo, vamos aquí. Puedo moverlo más pequeño. No tengas miedo de mover el punto de ancla real también aquí vas. Esa es mi pequeña cosa frondosa de té. Lo que podría hacer es tener un duplicado de ellos así copiar-pegar, por lo que los dos. Este va a ser verde porque es una hoja de té. Pero voy a usar mi no muy color de hoja de té. [ Risas] Más té frondoso. Mejorando. Este se va a llenar de blanco sin borde. No vas a tener frontera. ¿ A dónde fue ese tipo? Ahí está ahí. Hagámoslo más pequeño. No estoy sosteniendo turno en este caso porque quiero distorsionarlos, así que solo lo estoy arrastrando por ahí. No estoy sosteniendo miembros de turno y rotación justo en el exterior de ahí así que esa es mi pequeña cosa frondosa de té. ¿ Podrías hacerlo de una sola vez? Puedes, cuando te pongas mejor, solo para que lo sepas, la herramienta Pluma es probablemente la cosa más difícil de aprender en internet. Es complicado para aquellos de ustedes que lo saben y pueden usarlo, se sentarán ahí con esmero yendo. Sé utilizarlo [Risas] pero me tomó edades porque es llano. Si eres nuevo y te lo estás encontrando difícil. Eso es sólo parte de la herramienta Pluma. Se necesita mucha experiencia. Fuera de este ámbito de este curso, haz mucha práctica pero quería darte algunos conceptos básicos para que al menos puedas darle una oportunidad. Iba a hacer eso ahora, hago clic una vez por una esquina, clic y arrastra hacia fuera, bajar a aquí, haga clic una vez. Voy a hacer una curva aquí, click una vez, ir a cortar aquí así que en lugar de tener dos formas separadas, puedes ver que puedo empezar a hacer esto ahora. No es perfecto. No haga clic y arrastre, haga clic una vez. Si la línea no se conecta y estás como, ¿cómo te llevo allá? Selecciona en éste, el que quieres empezar a unirte, y agarra la herramienta Pluma, ahí está , y haz clic en este primero. En realidad no tienes que hacer clic en él primero. Simplemente agarra la herramienta Pluma, haz clic en el punto con el que quieres empezar, y eso vuelve a conectarlo. Ahí está. Los fundamentos están ahí. Yo voy a ti, voy a aquí. Esa es una mejor hoja de té. Hay otras formas de hacerlo. No quiero meterme en las malas hierbas con esto solo para que lo sepas, hay formas elegantes de usar la herramienta Pluma. Eso es lo suficientemente cerca para lo que necesito. Esa es la breve cobertura de la herramienta Pluma. Haga clic una vez para una esquina, haga clic y arrastre para una curva y prepárese para estar ajustándola después, y también prepárese para estar un poco frustrado. Es algo complicado aprender. Eso estaba destinado a ser el final del video. Fue el final del video. He vuelto del futuro porque hay un par de cosas que no mencioné hasta ahora sobre la herramienta Pluma. Es útil y se trata de cualquier forma que hayas creado en XD. Todos sabemos cómo entrar y editar esta cosa, así que haz doble clic en ella. Si quieres añadir un punto extra, solo flotando en el borde, ahí vas. Simplemente haga clic una vez y puede obtener un punto extra entonces puede arrastrar eso alrededor. Puedes añadir más puntos de anclaje si los necesitas. la misma manera, puedes quitarlos y decir que hay demasiado en éste. Al hacer clic una vez sonar como así, ya no quiero esa. No quiero éste o simplemente haga clic en él y presione “Eliminar” en su teclado. Así es como agregar y eliminar puntos de anclaje. Otra cosa que quería mostrarte era convertirlas. Digamos que éste de aquí comenzó la vida como un rincón. ¿ Te puede gustar? Eso fue bueno. Ya no quiero que sea un rincón. Quiero que seas curvo. Todo lo que tienes que hacer es recordar hacer doble clic para ir dentro del objeto y luego hacer doble clic en él y lo convierte de curva, esquina, curva, esquina. Estos van a ser un poquito, oh, solo haz doble clic en él, curva de esquina. Convirtiendo los puntos después del hecho, y luego no importa si los has dibujado con la herramienta Pluma o has empezado a destruir algunas de estas formas regulares que hicimos antes en el curso. Pero sí, esos son los extras que quería añadir a este video para darte una comprensión un poco más completa de algunos de estos caminos y cómo funcionan. Eso es definitivamente para este video, te veré en el siguiente. 47. Trabajar con trazos y líneas en Adobe XD: Hola a todos. Bienvenido a la Extravaganza Fronteriza. Vamos a mirar líneas, fronteras, trazos, como quieras llamarlos. Veremos líneas punteadas, veremos a estos chicos que algunos tienen extremos planos, extremos redondeados. Después veremos algunas formas y algunas de las rarezas que hace donde algunas de ellas dan vueltas y algunas de ellas se lopean y algunas de ellas son puntiagudas. Exploraremos todo eso en este video. Vamos a entrar. Sigo llamándolos golpes. XD los llama fronteras. Sólo para que lo sepas. Vamos a crear esa línea a través de la mitad de estos dos para separarlos un poco. No importa si usas la herramienta de línea o la herramienta pluma, en este caso, terminarás con el mismo resultado final exacto. Voy a usar la herramienta de línea y arrastrarla hacia fuera. ¿ Cómo consigo que vaya recto? Mantenga pulsado, “Turno”. En este caso, realmente quiere de todos modos, no tengo que aguantar nada, pero mantenga presionado “Shift” solo para asegurarme. Me da mi trazo de barra fronteriza. Ahora, podría, voy a eliminar eso. Usa la herramienta Pluma. Haga clic una vez, mantenga presionado “Shift”, haga clic dos veces. Termino con lo mismo. Regresar a mi herramienta de selección. No importa cómo quieras crear estas cosas. En primer lugar, lo que quiero hacer es que quiero que sea mi blanquecino. Acerquemos un poco. Barra espaciadora, arrástrela a través. Tengo mis lineas seleccionadas. Echemos un vistazo a la fácil. Veamos abajo aquí. Tienes que tener la frontera aplicada. De lo contrario, no va a funcionar. No verás ninguna de esta información aquí abajo y tienes algo seleccionado, en nuestro caso, nuestra línea. cuanto al tamaño, voy a ponerlo hasta dos para que puedas verlo más fácil, y la línea punteada o línea discontinua es solo ésta de aquí. Tú decides qué tan grande quieres los guiones. Escribí en cinco píxeles, asumirá que quieres que la brecha sea del mismo tamaño. Pero se puede ajustar eso, es posible que desee una brecha de 10. Puedes decidir qué tan grandes son los guiones versus cuán grande es la brecha intermedia. Esto ilustra un par de estos otros puntos. Principalmente este de aquí. Por defecto, tienes este primero llamado Butt Cap. Creo que hago una broma en cada curso que hago [Risas] sobre eso. De verdad quiero pero voy a tratar de no hacerlo. Pasemos al nombre más apropiado, Gorra Redondeada. Echemos un vistazo a la diferencia. Así es como se obtiene trazos que tienen este pequeño extremo redondeado. No importa si tienes un discontinuado o no. Si vuelvo el guion a 0 y la brecha a 0, ¿todavía puedes ver? Tiene ahí los extremos redondeados. No importa si es una línea discontinua, pero tienes la Gorra Butt, tienes la Gorra Redonda. Vamos a volver a poner nuestro discontinuado para mostrarte el siguiente. Éste de aquí, se puede ver desde el pequeño ícono, lo que hacen. El Butt Cap está justo contra el borde ahí, redondeado, va alrededor del final de ese punto angular. Este de aquí, se llama el Gorro Proyectante. Proyectos fuera pasados. Pasemos de Gorra a Tapa Proyectada. Éste, éste. ¿ Puedes ver lo que hace? Sigue siendo la misma línea pero sale y alrededor. Es posible que encuentres que tienes dos iconos y tienes el mismo golpe encendido. Eres como, ¿por qué este se ve diferente? posible que lo hayas importado del documento XD de otra persona y has creado uno, y simplemente no coinciden. Es tal vez que uno esté configurado en Butt Cap, y uno está configurado en Projecting Cap. Voy a dejar eso ahí, mi pequeña línea punteada. comando 0 no es realmente lo que quería, pero [Risas] hemos acercado todo el camino. Voy a dar click sobre éste e ir Comando 3. Puedes usar cualquier forma que hayas creado, o simplemente puedes dibujar un rectángulo, no importa. Voy a usar esta porque es una buena ilustración de lo siguiente que quiero mostrarte. Voy a sumar un borde. Ahora, voy a añadir un borde de tal vez cuatro píxeles solo para ilustrar nuestro tema aquí. Estos tres aquí son bastante importantes. Por defecto, ni siquiera puedo recordar cuál es el valor predeterminado. No recuerdo lo último que haces, pero la primera es la forma en que se le aplica el trazo. Éste de aquí, vamos a tratar de apretar por dentro. Vamos a tener dos versiones de esto, una sin trazo. No tendrás un derrame cerebral. Éste de aquí, aunque exactamente el mismo tamaño. ¿ Se puede ver? Lo llevaré al frente. Es exactamente del mismo tamaño. El trazo está tratando de estar en el interior de esto. Si haces este otro, trata de estar por fuera. Es un poco más ancho. Habrá momentos en los que necesites ambos. ¿ Puedes ver que el interior está haciendo algunas cosas raras aquí con el derrame cerebral? Es posible que encuentres que cuando intentas aplicar trazos que no está haciendo exactamente lo que quieras. Podrías ajustar estos fuera o este predeterminado que intenta abarcar el medio aquí. Ya puedes ver, ahí está mi pequeña línea azul, está un poco adentro, un poco fuera. Otra cosa que vamos a mirar es la forma en que se tratan los bordes. Se trata de Mitre Join, que es el defecto, que llega a un punto. Si el ángulo no es demasiado agudo, tiene este borde puntiagudo. Tienes que, supongo, mira. Déjame tratar de acercarlo para poder acercarnos. Se puede ver, estas son las diferentes. Basta con hacer click a través de él y tendrás una idea. Esta es la principal que podrías querer hacer son las esquinas redondeadas. Si quieres intentar igualar iconos, estás redondeando los bordes de ese borde. Este de aquí, nunca uso. Se corta las esquinas. Puede ser útil cuando estás haciendo cosas realmente puntiagudas a veces. Probablemente sea este primero o el segundo. Se puede ver aquí, ¿qué está haciendo? Básicamente, lo que está haciendo es que es un ángulo tan apretado ahí, no se puede poner el pequeño punto en él porque el punto terminaría siendo, ¿puedes seguir mi flecha? Sería tan fuera de aquí, por lo que el Mitre Join tiene un límite donde va demasiado puntiagudo. [ Risas] Este está empezando a alargarse mucho. Este de aquí es demasiado largo por lo que lo lopa fuera. Si tienes pedacitos que se han desplazado y estás como, “Oye, ¿por qué haces eso?” Es porque es demasiado agudo, por eso, se puede ver, eso sucede. Ahí vas. Esa es la descarga de trazos. Puede ser útil cuando estás tratando de mezclar en algunos otros iconos que podrías haber obtenido de otros lugares con tus propios iconos personalizados, y tratando de conseguir que sean iguales, usa el mismo trazo estilo para que coincidan. Eso es todo para trazo y líneas, también llamadas fronteras en XD. Pasemos al siguiente video. 48. Proyecto de clase 09: iconos y botones: Hola a todos. Tiempo de proyecto de clase. Eres como, boo, no más proyectos de clase. Vamos, lo estás disfrutando. Yo lo puedo ver, tú lo eres. Esta de aquí, hay que hacer algunas cosas. El primero es hacer dos botones con textos, eres como, botones. A lo mejor hemos estado haciendo botones. Nos vamos a hacer fantasía como conectarlo más tarde. Pero por el momento, todo lo que vamos a hacer es básicamente qué botón es un rectángulo. [ Risas] Vas a dibujar dos de ellos. Aprendí más y para ahora, he usado mis colores. No tienes que usar esquinas redondeadas, solo dos botones, todo lo que son es texto. Tengo uno con texto verde, en mi color de acento. Este de aquí se acaba de conseguir un esquema que tiene un borde y sin relleno. Éste de aquí con texto en blanco. Dos botones y dos rectángulos con texto en el medio, fácil. Éste de aquí, no tan fácil. Este de aquí va a ser un bonito reto. A es, es necesario crear tres iconos mínimo. Puedes hacerlas todas si estás listo para el reto. Hay tres esenciales que se requieren. El logotipo personalizado, quiero que pases algún tiempo tratando de dibujar algo relativamente conectado a su producto. Si es café, intenta dibujar una taza de café. Si es miel, intenta dibujar una abeja o un frasco de miel o lo que sea. Algún icono aquí arriba tu mensaje de marketing que quiero que veas si podrías dibujarlo. El objetivo aquí es no hacer algo hermoso, el objetivo aquí es solo hacer algo en la práctica. Aquí es donde estás ahora mismo, y comparte. Me encantaría ver lo que hacen ustedes, sobre todo a través de los comentarios de las redes sociales si lo quieren. Es que, sí, algunas personas van a tener muy bien. Vas a ver a otras personas fuera, entonces eres como si hubiera hecho grandes, no voy a publicar la mía. Porque algunas personas van a tener experiencia de otros programas con la herramienta pluma en diferentes formas y hacer cosas increíbles, pero no te preocupes, trae tu laptop. Lo que estamos haciendo aquí es todo acerca aprender y empezar. No tengas miedo de compartir tus cosas. Aunque creas que no es genial, va a ser un gran hito en dos años a partir de ahora cuando vuelvas y mires [Risas] al ícono que hice, pero sacarlo por ahí, se sienta bien. Dibuja algún ícono. Puede ser simple. No tienes que usar la herramienta pluma. Puedes usar cualquier forma que te guste, así dibujé este ícono aquí para mi ícono de búsqueda. Es un círculo, y luego dibujé un rectángulo. Entonces fui bloop. [ Risas] Ahí estaba mi bastón. Te vas a poner creativo de cómo vas a dibujar estas cosas. Lo mismo con este rectángulo. Había un triángulo, y un par de rectángulos. Realmente no me gusta mi casa, pero de todos modos se vuelve creativa. El que tengo que hacer es ese ícono personalizado. Quiero que hagas el menú de hamburguesas, si no lo has hecho ya. Esta es la línea. Solo asegúrate de que estás siendo consciente del estilo de frontera, que es cuando has seleccionado una herramienta de línea, son estos chicos de aquí abajo. ¿ Cómo se sienta en el trazo? ¿ Qué tapado tiene? Quiero que solo seas consciente cuando estás haciendo eso. He ido por una bonita gorra redondeada. Menú más grande, relativamente fácil. Un icono home porque lo vamos a necesitar para este curso. Intenta dibujar una casa mejor que yo. [ Risas] Google house iconos, y encuentra algo que, A, crees que representa un buen ícono de casa, y es algo que realmente puedes ser capaz de dibujar. El resto de ellos son opcionales. he puesto en el orden de lo que siento personalmente como profesor, ¿cuál es lo más fácil de dibujar? Bueno, [Risas] en realidad voy a mover éste al fondo. Éste podría ser potencialmente el más difícil. Eso no lo sé. El menú Bugger es sólo tres líneas. Icono de cuenta, has visto un ícono de cuenta ahí está ahí. Depende de cuál vayas. Pueden ser complicados. he puesto en orden de lo que creo que es lo más difícil. Haz los tres, haz cinco si te sientes Rey, intenta hacerlos todos. Si sientes que tienes un poco de tiempo quieres practicar. Lo que quiero que recuerdes es que en realidad puede ser útil comenzar con un cuadrado como guía. Cuando empecé a dibujar las mías las puse en plazas para que al menos fueran proporcionalmente las mismas. Terminé cambiando bastante, pero al menos te da algunas dimensiones a ella. De lo contrario, terminas tal vez haciéndolos todos tamaños raros. Empecé con un tamaño que es de 48 por 48 píxeles. Es un tamaño lo suficientemente bueno, es lo suficientemente grande como para que puedas conseguir algún detalle ahí sin ser demasiado grande, y volviéndote un poco loco porque va a ser un ícono. Déjame anotar. Apenas un par de rectángulos en los que empecé a dibujar son en realidad cuadrados que son 48 por 48. Es un buen punto de partida. Otras cosas, puedes usar la función de esquina redondeada. Recuerda si estás dibujando algo, y eres como la pluma herramienta me está matando. Puedes usar las esquinas redondas o quién recuerda cómo solo puedes conseguir una esquina trabajando con tu tormento tu cerebro eres como, Oh, lo recuerdo. Sostén pulsada la tecla de opción. O tecla Alt en un PC y puedes arrastrar uno de ellos. Estos podrían ser los inicios de la forma que necesitas. Podrías ser como, está bien aquí está. Ahora puedo hacer doble clic ir dentro de ella y hacer mis ajustes. Porque eso es más fácil que usar decir la herramienta pluma, o algunas de las otras herramientas. [ Risas] Se obtiene la idea. También cuando lo estés escalando hacia arriba y hacia abajo, recuerda delinear el trazo. Tuve que hacerlo con estos, porque recuerden cuando escalan ahí están manteniendo el tamaño de la frontera. No quería eso cuando se hacía más pequeño. Ves eso. Hice clic con el botón derecho y fui a delinear trazo. Recuerda antes en el curso, a veces eso no funciona para ti, prueba eso primero. Si eso no funciona para usted, existe la otra opción de ruta de objeto y convertir en ruta. Podría encontrarse con problemas con los que, quizá no. Además, puedes copiar y pegar apariencia. Cada vez que dibujas algo en Adobe XD, es dolor en el trasero. Eres como aburrido línea gris un trazo relleno blanco. Recuerda, puedes decir que lo golpeas, copias, editas, pegas apariencia, al menos empiezas en la zona correcta. La otra cosa es que quiero que lo pruebes en tu app XD en tu teléfono porque cuando estás poniendo estas cosas, pueden sentir el tamaño correcto, pero cuando realmente las ves en tu teléfono y tratar de hacer clic en ellos, y no puedes porque están demasiado cerca juntos o simplemente son masivos y eres así es algunos botones grandes. Siempre estar probando en tu teléfono solo para ver qué funciona. Sé que este tipo es un poco más pequeño. Estoy mirando mi teléfono aquí. Es un poco pequeño para lo que necesito. Eso es todo. Una vez que lo hayas hecho, toma una captura de pantalla de los iconos que has creado, pon aquí un par de ellos. Si solo haces una pareja, como 1, 2 y 3, solo toma una captura de pantalla de tu página. Probablemente la página de inicio sea la mejor, porque es junto con tus botones. Voy a ver todo esto. Si has hecho más, solo póngalas en una captura de pantalla de página y ponlas arriba. Me encantaría ver todos los que tú creas. ganas de ver lo que se te ocurre para esto. Va a ser interesante. Compártelo aquí, y luego subirlo a las redes sociales también, me encanta verlo. Instagram, Twitter, grupo de Facebook, LinkedIn, grupo, sea cual sea tu sabor, y me encantaría verlo. Eso es todo, en el siguiente video. En realidad, vas a hacer tu tarea. Te veré en el siguiente video una vez que hayas terminado. Nos vemos entonces. 49. ¿Necesito conocer Illustrator con Adobe XD: Porque te voy a mostrar, empezará con solo algunas cosas fáciles sobre las diferencias entre usar y dibujar en Adobe XD y Adobe Illustrator. Hacia el final, te voy a mostrar algunos de los temas que surgen cuando vas de uno a otro. Si no tienes idea de lo que es Adobe Illustrator, es solo otro programa que hace Adobe. Se especializa en dibujo e ilustración y realmente bueno en tipografía. Vamos a dibujar algunas formas como esta, traerla de Illustrator a XD. Pero sí, empecemos. Para responder a la primera pregunta, ¿necesitas conocer Adobe Illustrator para ser diseñador de UX? La respuesta es no. Es una herramienta útil y probablemente una siguiente etapa para ti después de este curso si realmente disfrutas de esta parte del proceso UX. Entonces el diseño real de la interfaz de usuario, el real haciendo cosas, botones de dibujo e iconos, hay alguna hasta ahora se puede obtener con Adobe XD. Ya tiene suficiente y puedes ponerte bien en ello, pero solo habrá momentos en los que no puedas hacer las cosas. XD está hecho para prototipado rápido, no para una ilustración completa. Ahí es donde Illustrator podría venir útil para ti. Lo uso todo el tiempo en mi proceso. Déjame darte un par de rápidos por ejemplo. Estoy en Adobe Illustrator, verás que tiene algunas de las herramientas como si hay herramienta de pluma. Hay una herramienta de rectángulo. Voy a dibujar esa taza de café como viste al principio. Hay muchas similitudes, lo cual es agradable. Tengo este rectángulo. Pues mira, los mismos puntitos . Mucho de ella es lo mismo. Voy a diseñar mi pequeña taza de café, redondeada en la parte superior y turno, haga clic en estas inferiores y arrástrelas hacia arriba. Ahí vas. Hay una taza de café. Donde se pone diferente es, en realidad donde es lo mismo, la herramienta pluma. Voy a hacer click y arrastrar hacia fuera curvas para un mango. [ Risas] Hay un mango. Quiero que tenga un relleno y no un trazo. Puedo agarrar el trazo, moverlo hacia arriba. Este no es un curso de Illustrator. Si quieres un curso de Illustrator, sé que un chico consiguió un curso básico y un curso avanzado. Pero donde difiere es digamos que quiero cambiar este trazo para que sea un ancho variable, no se puede hacer eso en Adobe XD. Puedes agarrar la herramienta de ancho aquí en Illustrator e ir [RUIDO] de nuevo con los efectos de sonido. Ya puedes ver que puedo hacer un ancho variable ahora. Podemos imaginarlo. Te voy a mostrar un par de las razones por las que podrías saltar y aprender Illustrator. Si ya tienes habilidades en esto, podrías ser como, puedo dibujar una taza de café. [ Risas] Puedes pasar el rato por este video si eres Maestro de Illustrator. Hay un par de pequeñas conexiones entre XD e Illustrator. Voy a agarrar mi herramienta pluma otra vez. Voy a dibujar mi pequeña cosa con curvas. Está destinado a ser vapor viniendo de mi té verde. Así que de nuevo, la herramienta de ancho, puedo hacer este poquito pequeño ahí abajo. Si no has usado la herramienta de ancho y eres una persona de Illustrator. Oh tan guay. Me encanta. Voy a cambiar mi trazo a no desde ese primero, esa segunda tapa redonda. Entonces la herramienta de ancho es una de las que me gusta de Illustrator. Hay muchos. Esto es solo un poco, por ejemplo, donde se vuelve realmente genial es diferentes trazos. Entonces voy a dibujar un waft, haciendo clic y arrastrando por una curva. Probablemente un poco demasiado alto y otra vez con los efectos de sonido. Entonces algo así. Lo que podemos hacer es en lugar de solo jugar en trazos, hay todo un subconjunto de cosas como pinceles. Voy a usar solo lápiz de carbón de tiza artística. Bueno, mira eso. Parece un lápiz de carbón de tiza. Por lo que estos son algunos de los beneficios de usar Illustrator. Otro beneficio es cuando se trata de fuentes. Así que déjame darte un rápido, por ejemplo, si hago click en esto, si escribo en café, voy a usar mi Amatic. Tengo una fuente llamada, tú la has visto, Amatic. Tengo esta fuente. Pero quiero que ese café que diga tiene un poco, no puedo recordar cómo se llama. La cosa fuera de lo alto de la E. Eso lo hace parecer elegante y francés. Los glifos. Se llaman glifos. Están bajo tipo. Muchas fuentes las tienen, no todas. Éste sí, pero no podemos acceder a todos esos glifos en XD. No está construido para una gran cantidad de tipografía. Illustrator ama la topografía. Como puedes ver aquí, mira a estos personajes extra que te estás perdiendo. En mi caso, si pongo el cursor selecciono E, aquí está ahí. En realidad, quiero la otra E, la E con el bit. Echemos un vistazo. ¿Dónde está la E con la broca? Espera ahí. Lo vi. Haga doble clic sobre él y me dieron la E con un pequeño guión en él. Entonces los glifos son otra cosa útil, se pone incluso de fantasía Me encantan los glifos. Los glifos son impresionantes. Se vuelven aún más sofisticados cuando miramos diferentes fuentes. Veamos otra fuente. Veamos este de aquí. Entonces Alicia, este aquí tiene un montón de glifos, así que voy a cerrarlo. ¿ Puedes ver eso? todos estos jugosos. Mira esto. Quiero esta e al final. Entonces vamos a destacar ahí. Pero mira, puedo cambiar el final, como ese tipo. Mira todos los remolinos y pedacitos y podrías decidir, oh sí quiero una diferente. no me gusta eso una. voy a ir por eso o así se conecta con un C. Tal vez ese. Puedes hacer algunas cosas divertidas. Bueno, esta es la razón por la cual Illustrator podría ser parte de tu conjunto de herramientas cuando estás diseñando en Adobe XD porque tienes acceso a todas estas cosas extra. Ahora, para traerlos a través de uno a otro, voy a hacerlo, está bien no tan bonita como esperaba. [ Risas] Mi copa no se ve tan delicada como pensaba. Está un poco aplastado. De todos modos, selecciónalos todos y cópialos y cuando los traigas a través a XD, algunas cosas van a ser todavía editables y algunas cosas no lo son. Bueno, vamos a traerlo. Voy a pegarlo y tengo esto. Voy a llenarlo con uno de mis colores. Sí, éste. Lo que encontrarás es que puedo hacer doble clic para entrar quieto. Estoy dentro de esta cosa. Puedo hacer doble clic en él de nuevo y mirar, hay parte de mi chico. Todavía puedes separarlos. Todavía se podría trabajar en ellos. Pero digamos este derrame cerebral aquí, mira lo que pasó con eso. Está aquí y puedo meterme con ella. Se acaba de hacer de todas estas pequeñas piezas, mientras que en Illustrator, es esta una pequeña línea que puedo usar, en mi caso, esta herramienta de selección directa, seleccionar el final, ir [RUIDO]. Para que puedas hacer mucho de tu edición en Illustrator y luego solo copiar y pegar el resultado final en XD. Puedes ajustarlo y jugar con ella. Pero ese sería el proceso, solo copiar y pegar. Puedes ser más elegante y aquí, ve a mis bibliotecas, encuentra tu clase XD y ve [inaudible] Bueno, solo copiaré y pegaré la fuente en realidad. ¿ Entró todo eso? Echemos un vistazo. Vamos a entrar. De hecho, vamos a arrastrarlo de nuevo. Tengo parte de mi chico ahí dentro. Entonces, ¿lo agarré todo? Voy a agruparlo, luego ponerlos. Eso es mejor. Ahora en Adobe XD. Voy a ir, recuerda quién sabe dónde están las bibliotecas en ese lugar extraño. Activos, aquí. Pueden moverse. ¿ Dónde está mi clase XD? Ahí está. Genial y puedo decir, ahí vas. Esa es la forma oficial de traerla. Mira eso. Perdió mi pequeño derrame cerebral. [ Risas] Eso te pasa, nos vamos un poco demasiado profundo en Illustrator. Podría encontrarse con este problema. Copiarlo y pegarlo, entonces está bien. Es la misma solución que teníamos en XD cuando nos encontramos con problemas. Aquí aunque está bajo objeto, camino y hay uno ahí llamado trazo de contorno. Corrige todos los problemas. Ahora, salta ahí. [ RUIDO] Ahora, vuelve en XD, yendo en una tangente y Artwork 3, pero funciona. Oye, nos encontramos con problemas. Nosotros los arreglamos. Veamos una última cosa. Es copiar y pegar fuentes. No recuerdo lo que hace. Tráelo a través , pega, creo que sólo va a delinear en una forma. Tiene. Haga doble clic en él. ¿Es un texto? Se trata de texto editable excepto ¿sabe qué hacer ese último? No lo hace. ¿Qué más termina en E? No puedo pensar en una sola palabra. [ Risas] No lo sé, ¿té? [ Risas] Me pusiste en el acto, y se pueden ver en este caso los bits que estaban bien, sólo textos viejos normales. Vinieron por multa. Esta cosa, que ha venido pasando como forma. Mira eso. Se ocupa de ella y funciona igual con éste apuesto. Vendrá la E? No, esta E es editable. Mira eso. Esa es una de tus E regulares. Para que pueda eliminar eso y seguir adelante. Por lo que encontrarás temas intermitentes. Este de aquí está, recuerda que no se puede pensar en una palabra. Vamos entonces. Tengo uno. [Risas] Así que está separado los glifos del texto viejo normal, pero eso está bien. Puedo trabajar con eso. Lo genial de ellos, aunque sea una forma, todavía es escalable y es encantador Victor. Bondad. Eso va a ser. No necesitas conocer Adobe Illustrator para ser diseñador de UX y Adobe XD, pero es útil y conozco a un tipo que te puede enseñar. Si eres un usuario experimentado de Illustrator, tal vez quieras consultar mi curso avanzado de Illustrator. Si acabas de empezar, echa un vistazo a los elementos esenciales. No tiene que ser mía, pero es una habilidad que probablemente quieras nutrir en el camino en tu viaje. Eso es. Te veré en el siguiente video. 50. Enmascar y recortar imágenes en Adobe XD: Hola usted. En este video, vamos a hacer enmascaramiento en Adobe XD. la versión corta se le pone una forma encima de una imagen, seleccionarlos ambos e ir máscara de objeto con forma. Hay algunas otras cosas para editar tanto la forma la imagen que quiero compartir contigo , así que sigue viendo. Pero si eso es todo lo que viniste, ya terminaste. Pero si todos los demás, vamos. Vamos a traer una imagen. No importa importar archivos o arrastrarlos desde el buscador a él como lo hago normalmente. Yo traeré este primero. Con las imágenes a menudo esto sucede, comentaron este tamaño gigantesco. Si mantiene turno en una de las esquinas y opción en un Mac, en un PC las escala a la idoneidad. Solo para que sepas si eres diseñador web o desarrollador, no es importante conseguir estas imágenes del tamaño correcto y ya sea la resolución correcta o la calidad crónica correcta antes de XD, lo haces exportando desde XD, que haremos más adelante en el curso. Está trayéndolos en su plenitud gloriosa yo y se pueden exportar a un tamaño de diseño web más apropiado más adelante. Ponte a enmascarar entonces. El modo oficial es tener una imagen luego dibujar una forma de ella, encima de ella. Puede ser cualquier forma dibujará un rectángulo. Voy a hacer un par de duplicados sobre estos sólo para poder mostrarte diferentes formas. Selecciónalos ambos. La cosa en parte superior que quieres enmascarar dentro de ella tiene que estar en la parte superior. Es posible que tenga que hacer clic derecho en él y decir traer al frente. Selecciónalos ambos, y luego di, el largo camino es objeto y ve a hacer con forma. No esto es máscara con forma incluso. Da click en eso y vas, nuestro primer paso. Cualquier sobre forma funciona. No importa mientras esté en la cima. El atajo es el comando shift m dependiendo de la cantidad de imágenes que termines haciendo. Atajo Recuerdo de alguna manera y eso es comando shift m en un mac y control shift m en un PC. Pueden ser de cualquier forma que ni siquiera tuvieras que dibujarla, puede ser algo que alguien más haya dibujado que has importado. Hagamos algo loco o llegamos ahí no dibujamos. No dibujé este logo de twitter. Siempre y cuando esté en la parte superior. Que la mía pasa a ser. Puedes seleccionarlo y decir cambio de comando m. puedes hacer tu propia costumbre con la herramienta pluma también. Podrías decidir que voy a seleccionar de todo, agarrar la herramienta pluma. Voy a hacer clic allí y recordar hacer clic y arrastrar por una curva, hacer clic una vez por una esquina, hacer clic y arrastrarlo es la peor máscara del mundo. Selecciónalos ambos y luego usa tu atajo. El mío no funcionó. ¿ Por qué el mío no funcionó? No creía que los hubiera seleccionado a ambos. Bueno, eso es todo. Asegúrate de que ambos estén seleccionados y la forma esté en la parte superior y puedas enmascarar. Esa es una forma de enmascarar. Tienes dos formas separadas y las aplastas juntas. A menudo lo que voy a hacer es que tengas formas existentes que quieras llenar. Digamos que aquí abajo tengo estos colores de placeholder y solo puedes arrastrarlos directamente a ellos. Requiere que seas capaz de obtener la ventana del buscador, ya sea Mac o PC y simplemente tener en la parte superior del borde XD, complicado para algunas personas. Simplemente puedes arrastrar directamente aquí al espacio y será tamaño adecuado y escalado y en la forma correcta. Puedes actualizar imágenes muy fácilmente simplemente arrastrando sobre la parte superior de ellas. Digamos que eres como, eso es genial, pero necesito cambiarlo por otra cosa. Simplemente haz clic en mantener presionado y simplemente arrastra sobre la parte superior y lo cambiará hacia fuera. Mascarillas de ajuste. Hagamos eso. [ Risas] Comienzo. Digamos que querías ajustar el posicionamiento de esto. Haz doble clic en él para entrar dentro de ella y terminarás accediendo a esta imagen. Puedes, en el medio aquí solo haz clic en mantener presionado y arrástralo. Puedes decidir en realidad este es el bit que quiero y luego dar click cuando hayas terminado. Lo mismo que nuestro modo de edición de objetos cuando estamos haciendo esos iconos y lo siguiente que tal vez quieras hacer es que quieras ajustar el borde. Así que haz doble clic en él para entrar, puedes, si agarras el borde de la misma, ajustar el borde o aplastarlo o doble clic en él y entrar en el modo de edición de objetos y hacer algunas cosas raras. [ inaudible] pequeño té feliz, cara sonriente [Risas]. No tan sonriente. Eso es editar tus máscaras. Es lo mismo con estos, ¿dónde está? Te desplazas. Este tipo de aquí, haz doble clic en él. Podrías decidir que es esto. Quieres escalarlo, solo usa tu tecla de turno, agarra una de las esquinas, decide si eso es lo que quieres hacer. Doble clic de y te vas, estamos enmascarando y editando nuestra máscara. Eso es hacer máscaras ya sea arrastrándolas a formas existentes o seleccionándolas ambas y entrar en máscara de objeto con forma. Te veré en el siguiente video. 51. Imágenes gratuitas para usar en tus maquetas XD: Unsplash, Pexels y Freeimage: Hola a todos. Vamos a hablar imágenes de stock gratis que podemos usar comercialmente dentro de nuestras maquetas XD, además voy a discutir algunos de los sitios de pago que uso. Vamos a saltar. Imágenes gratis, estás buscando aquellas que se puedan utilizar comercialmente, imágenes comerciales libres. Mis favoritos son unsplash.com, pixels.com, gratis images.com. Esos son los principales gratuitos que voy a ir a revisar buscando imágenes, tal vez ya sea para mis maquetas o tal vez tengo un cliente que no tiene el dinero para comprar imágenes. No tengas miedo de comprar imágenes. Hay sitios de biblioteca de acciones por ahí, los principales que uso y pago son stock.adobe.com. Este es alrededor de £20 y me dan 10 imágenes al mes. O también además, tengo una suscripción a Envato Elements la cual tiene una muy similar, probablemente no una profundidad de imágenes, por eso tengo ambas, pero también tiene otras cosas que yo utilizar muchas plantillas y efectos de sonido en la música. Termino teniendo ambos. Pero hay muchas ocasiones en las que el libre es bueno. La única cosa de la que solo tienes que tener cuidado, no con cuidado, pero cuando lo estés, como si quiero té verde, lo encontrarás. ¿ Ves esta cosa aquí? Este primer bit es un anuncio, iStock. Ese es otro sitio de la biblioteca de acciones. No mejores ni peores que los que expliqué, pero así es como ganan su dinero en Unsplash. Reciben comisiones basadas en estas. Podrías ser como, oh, ese es el que quiero, y no puedes usarlo porque está pagado, así que terminas bajando aquí y hay algunos grandes. Se pueden ver las que tengo aquí porque puedo compartirlas en el curso. Son geniales, pero solo hay mucha [Risas]. La calidad de las que están en las cosas de la biblioteca de acciones son tiro profesional sabiendo que se van a utilizar en anuncios y sitios web y esas cosas, por lo que a menudo pueden ser realmente buenas. Pero hay cosas gratis encantadoras alrededor también. Mantén un ojo hacia fuera para los anuncios. [ SOLUCIONAMIENTO] Para esos, no hay nada realmente demasiado en ellos. Es posible que desee revisar dos veces las licencias. Digamos que sí quiero usar, verdad quiero esa, pero estoy usando té verde. Eso no es té verde. Eso es un, ¿cómo se llama a esos? Chai latte. ¿Eso es lo que quiero? Digamos que quiero usar este. Solo debes estar revisando que te pongas libre de usar bajo la licencia Unsplash. Ten un pequeño cheque, asegúrate de que tenga todo lo que necesitas, hace por lo que necesito hacer, pero también revisa dos veces antes de venderlo al cliente. De igual forma, si empiezas a usar imágenes de stock, asegúrate de que el cliente sepa que hay un costo extra que vas a construir sobre ellas para imágenes, que no tiene por qué ser mucho. Al igual que estoy pagando 20£ por mis 10 imágenes, si uso cinco o seis de ellas, no un gran costo. Pero ahí vas, esas son mis cosas gratuitas favoritas y mis bibliotecas de imágenes de stock pagadas favoritas. Eso es todo. Continúe. 52. Imágenes de fondo en el osar con opacidad en XD: Hola a todos, en este video, vamos a hacer que esta imagen de fondo vaya así, oscura y de mal humor para que podamos leer texto en el fondo. alerón, es solo un rectángulo en la parte superior que le tiene cierta opacidad aplicada. Como siempre pasearse por ahí y te mostraré algunos otros consejos y trucos medida que avanzamos. Vámonos. Muy bien, para empezar, voy a duplicar esta página de inicio. Un par de cosas es que no puedes simplemente seleccionar la página e ir a agregar imagen de fondo. En realidad es sólo una imagen como hemos estado haciendo en los últimos videos que pasa a estar en la parte posterior, no hay opción aquí por el momento. Lo otro interesante es que quiero dibujar un rectángulo y cubrir el fondo. Pero si tienes la página seleccionada y luego tienes la herramienta rectángulo y vas como voy a empezar aquí y dibujar través, va a hacer esto. Se remonta a ser herramienta de agregar página. En ocasiones, o bien necesitas hacer una o dos cosas. Haga clic en el fondo y luego dibuje un rectángulo. Agradable, o muchas veces, mientras que a veces estaré en esto, voy a ir a la herramienta rectángulo y simplemente lo dibujaré un poco más pequeño. Ve a mi herramienta de selección y amplía eso . Eso te va a pasar a ti. Lo dejaré ahí dentro. Tenemos nuestro rectángulo, vamos a sumar nuestra imagen. ¿ Qué vamos a utilizar? Vamos a usar este, no. Muy bien, voy a usar esa. Ni siquiera estoy seguro si eso es té verde. De todos modos, tenemos esta imagen y simplemente la enviamos a la parte de atrás. Pero no oscureces la imagen real. No hay forma de hacerlo. Si cambias el relleno a negro, la caja real se vuelve negra, ya no hay imagen ahí. Lo que queremos hacer es que en realidad tenemos dos rectángulos. Voy a dibujar una segunda. Nuevamente, apenas más pequeño, agarra mi herramienta de selección y simplemente hazla más grande. Tengo dos cajas, una blanca, una con una imagen y esta de aquí en la parte superior, voy a decir que eres negra y voy a bajar un poco la opacidad. Entonces ahí vas, así es como lo haces. Tengo estos dos, voy a mandar a ambos a la parte de atrás. ¿Cómo hago eso? Voy a golpear “ Cuadros de Cambio de Comando ”, que enviará el negro a la parte de atrás. Entonces, lo voy a hacer para el segundo también y eso es “Control Shift square bracket” en un PC. Ambos están en la parte de atrás y puedo seleccionarlos así. Puedes hacer click en este top y luego decidir sobre la opacidad, qué tan oscuro necesitas que sea para el contraste aquí. Puedes usar pequeños accesos directos, con solo el rectángulo negro seleccionado. Puedes golpear todas las teclas numéricas justo encima de tus letras. No las teclas numéricas en el lateral, solo las que están por encima de las letras. Si pego a dos, es 20 por ciento. Ves que está por ahí. Vamos a acercarnos eso. Dos es 20 por ciento, si escribo en cinco es 50 por ciento, si escribo siete dos veces muy rápido, ves lo que pasa, es 77 por ciento. Termino haciendo mucho de esto, alrededor de su 60% me parece bien. Así es como oscureces un fondo, es solo una caja negra en la parte superior que es ligeramente transparente. También puedes teñir el fondo volviendo no negro, pero puedo usar el rojo o mi verde oscuro o mi verde oscuro. Podría seleccionarlo y en realidad jugar con la opacidad de mis atajos y tú serías como, eso es genial, pero quiero que en realidad sea más oscuro. Puedes teñirlo de esa manera. De cualquier manera son dos formas diferentes una encima de la otra. El de arriba es solo un poco transparente o la opacidad es menor. Eso es, te veré en el siguiente video. 53. Blurring fondos y objetos y borrosos en Adobe XD: Hola a todos. Vamos a tomar nuestro doc y antecedentes y difuminar el fondo y el documento. Te mostraremos cómo realmente difuminar objetos también, y haremos algo elegante donde esta interfaz de usuario en la parte superior y está difuminando el fondo para sobresalir, genial. Muy bien, así que difuminando cosas objetos y fondos en este video, vamos. Muy bien, ¿con qué empezamos? Empecemos con el mapa uno porque es genial y es lo más simple en realidad. Voy a acelerar esto. Sólo voy a importar una imagen de fondo. Muy bien, así que lo pondré en una imagen, dibujé un rectángulo blanco y luego editaré algún texto, y para que ese fondo sea borroso, todo lo que haces es seleccionar el objeto en la parte superior. Dices que me gustaría que el fondo se difuminara. Por el momento, probablemente sea un poco demasiado borroso, quiero que sea solo insinuando el fondo, aún haciendo esto legible, puedes jugar con lo claro u oscuro que sea dependiendo de lo que seas haciendo. Voy a ir un poco más blanco de lo que necesito. Este último aquí es como cuánto de la forma original se puede ver. Si tu forma pasó a ser como en este momento roja, no puedes ver nada, pero mira este archivo. Si subo esto, puedes empezar a ver ese rectángulo rojo. Quizás ocasiones en las que necesites ambos, tanto viendo un poco del objeto original tal vez aligerarlo y oscurecerlo. Así es como hacer eso. Veamos haciendo el desenfoque de fondo. Hicimos esta cosa y digamos que aún es demasiado detalle. Voy a seleccionar en esto. Veamos primero el glifo del objeto solo solo, para que te quedes ahí. Puedo hacer click en un objeto, digamos que ya está oscuro, no lo es, pero digamos que es lo suficientemente oscuro y podemos leer todo esto. Solo queremos una borrosa, fuera de foco. Puedes decir que tú, amigo mío, en lugar de desenfoque de fondo, dices que eres un objeto borroso, ahí vas. El único problema con el desenfoque de objetos es que se obtiene este borde difuso. Tal vez te guste eso. Podría ser perfecto. Si no te gusta el borde difuso, tienes un par de cosas que hacer y puedes asegurarte de que el fondo no sea de un color de alto contraste, así que puedo decir que estás lleno de blanco, para que cuando este tipo está aquí, simplemente no es tan notable. Pero tienes ese fantasma y realmente no te gusta. Lo que hago es, en realidad puedes enmascararlo de nuevo. Mira esto, tengo esta forma aquí. Voy a llevarlo al frente solo para que quede claro, voy a agarrar la herramienta rectángulo. Voy a dibujar un rectángulo dentro de él. Selecciona tanto la cosa borrosa como este nuevo cuadrado, y al igual que lo hicimos antes, vamos a usar la máscara de objeto con forma. Entonces ese objeto borroso, ¿ puedes verlo ahí dentro? Simplemente te gusta recortar el exterior. Esa es una forma de hacerlo y esa es la forma en que a menudo lo hago para deshacerme del borde borroso es enmascararlo después. Entonces puedes pegar esto de nuevo en la parte superior y usar eso para controlar qué tan oscuro es si lo necesitas. Porque notarás que el objeto se desenfoca en este momento, si entro de él para hacer click en él porque cliquea en máscara, recuerda, puedes ver que aunque tenga un desenfoque de objeto, no hay ninguno de esa materia extra que tenía el desenfoque de fondo, podíamos bajarla y oscurecerla. Tal vez eso venga por ahí. Tenemos a estos dos y lo voy a mandar a la parte de atrás, tú a la parte de atrás. Estoy usando mis atajos recuerda, Es éste de aquí. Enviar hacia atrás Shift Comando corchete cuadrado o Control Shift square bracket en un PC. Así es como fondo desenfocarlo y jugar con la opacidad. La otra cosa que podrías hacer es, lo que hicimos aquí arriba, pero no siempre funciona. Te lo voy a mostrar en caso de que funcione mejor en el futuro, o podría funcionar perfectamente para lo que necesites. ¿ Qué vamos a hacer? Deshaznos de ese tipo. En realidad, vamos a deshacernos de todo el asunto. Empezaremos con éste. La alternativa es, porque podrías ser por qué no solo usamos el desenfoque de fondo como lo hicimos? Se puede. Mira esto. Si digo desenfoque de fondo, el problema con ello es que no se pone lo suficientemente borroso y hace un desenfoque extraño. Parecen ser dos borrosas diferentes. Mira eso, eso es completo desenfoque. Eso también está en pleno desenfoque. Eso es tan diferente. Por eso no uso mucho este. Esto podría cambiar. Podría haber más control aquí. Porque sería perfecto porque se puede controlar la ligereza y la oscuridad de la misma. Pero no lo sé porque mira esto, como un resplandor celestial angelical a todo. Simplemente no me gusta cualquier método que estén usando para desenfocar el fondo detrás de él. Yo uso este método donde desenfoco el objeto, podría tener que recortarlo porque los bordes se ponen un poco borrosas y luego solo coloco eso en la parte superior. Sí, fácil y doloroso dependiendo de lo que quieras hacer, puedes hacer click en cualquier objeto viejo y simplemente decir, estás borroso. Ahí vas. Eso podría ser lo que quieres [Risas] de todo este video. Acaba de empezar con eso. No lo sé. Quería el desenfoque de fondo así que eso es lo que hemos hecho. Sí. Muy bien. Espero que hayan disfrutado el video. Te veré en la siguiente. Pero no será por un rato porque es viernes. hurra. Puede que no sea tu viernes, pero es mi viernes y es el último video del día. Golpeé a mis objetivos hoy, y los volveré a ver en el próximo video y será el lunes. Me pregunto si puedes decir la diferencia en mi voz. Estaré más emocionado? [ Risas] Probablemente menos emocionado, será el lunes [Risas] por la mañana. Muy bien, pero ese es el final de este video, desdibujando. Fantasticness. Te veré después del fin de semana. 54. ¿Necesito saber Photoshop con Adobe XD: Hola a todos. En este video, vamos a ver si necesitas habilidades de Photoshop como diseñador de UX. También te mostraré la interacción entre usar Photoshop, hay algunos pros y contras para eso, usando Photoshop con Adobe XD. También, al final del curso, te mostraré cómo tomar esta imagen, que es, no sé, alguna temporada media. Imagina si fue invierno, [RUIDO] mira que es invierno. ¿ Qué tal una puesta de sol? [ Risas] Es una conexión muy tenue con el curso, excepto que te estoy mostrando la conexión con Photoshop, y porque soy el jefe de este video y me gusta mostrarte una cosa genial. Eso será hacia el final del video. Pero por ahora, construyamos el suspenso, ¿necesito que Photoshop sea diseñador de UX? Tambor todo por favor? Sí es la respuesta corta. Probablemente necesites algunas habilidades de Photoshop principalmente para hacer con el enmascaramiento. Te puedes pasar sin Adobe Illustrator, que se reduce a este dibujo de formas, puedes hacer los fundamentos en XD, pero en cuanto a cualquier buen enmascaramiento, no puedes hacerlo, en XD y necesitas Photoshop. Ahora no vamos a cubrir cómo usar Photoshop obviamente en este curso, pero si sí tienes habilidades de Photoshop o probablemente terminarás trabajando con documentos de Photoshop en alguna etapa, Te mostraré los pros y los contras de trabajar con PSDs y cómo, si tienes algunas habilidades de Photoshop, mejor interactúa con XD. En primer lugar, hagamos un poco de promesa de importación de PSD. Si alguien más lo ha hecho, podría haberlo logrado. Hay algunos trucos y algunas rarezas. Esto puede en el futuro ión sí fuera. XD es un producto relativamente nuevo y la interacción con los PSDs en este momento no es un 100 por ciento, solo lo sabes. Vamos a traer un PSD, vamos a Importar archivos y traemos algo que funcione. Tengo en tus archivos de ejercicios, Photoshop 01, 02, 03, 04. Vamos a traer en 01, traerlo y aquí hay un PSD gigante. Eres como [RUIDO] por lo que trae en documentos PSD. Lo genial de ello, y uno de los pros es que si miras mi PSD, aquí está en Photoshop, puedes ver que te he enmascarado eso. Ahí está esta capa y el fondo que la llena. Lo que ha pasado en XD es que se trae en ambas capas y puedo verlas ambas. Pero mira esto, puedo ir dentro de él, recuerda, haz doble clic y mira, están separados. Puedo ir a esta capa de fondo y o bien eliminarla porque la trae adentro. Echemos un vistazo, vamos a traerlo en nuestro panel Capas, puedes ver aquí ahí está mi PSD, tengo la laptop, y puedo hacer clic en esta capa aquí o por aquí y pulsa Eliminar, consigue que funcione. Sólo tengo mi laptop o puedo ir por aquí, ves estos pequeños globos oculares, puedo decir que el fondo es ojo oculto u esconderse. Eso es lo genial de usar PSD, es que vas a mostrar un documento, encender y apagar las cosas como las necesites. Vamos a moverlo aquí o allá, es bastante grande. Vamos a traer otro archivo que tiene algunos problemas. Voy a ir al atajo Comando Shift I en un Mac, Control Shift I en PC. Vamos a traer este 02. Vamos a echarle un vistazo en Photoshop. abriré en Photoshop aquí. Aquí está en Photoshop, he enmascarado esta capa superior, y acabo de tener esta caja roja de fondo sin una buena razón. [ Risas] Solo para mostrarte que está enmascarado. Paredes sobre este fondo aquí y yo lo enmascaré muy rápido. Lo que termina sucediendo en XD es, actualmente mira esto. Si lo traigo y salgo, aquí tienes. ¿Qué ha pasado? Ya no está enmascarado. Por alguna razón, no sé por qué ignora esta máscara de capa. Puedo convertirlo en un objeto inteligente si sabes dónde está eso, eso no lo arregla. Lo que puedes hacer si consigues este punto, eres como partes de él no están enmascaradas, pero claramente hay una máscara pasando aquí en Photoshop. Lo que puedes hacer es que puedas hacer clic derecho en la máscara y simplemente decir aplicarla. Esto es malo y muy destructivo, pero lo arreglará. Voy a guardarlo ahora, no se actualiza automáticamente. Es una calle unidireccional así que voy a importarla de nuevo. Si no conoces Photoshop, eso es lo único que podrías tener que hacer. Entra a ver si puedes aplastar las capas y deshacerte de todas las máscaras no destructivas de lujo porque eso funciona. De nuevo, puedo ir al fondo aquí y mirar esto, realidad trajo a través del relleno de esto. Dónde está ahí, puedo ir [RUIDO] o [RUIDO]. Algunas cosas son realmente geniales y luego algo está un poco roto. Estas cosas se actualizarán en el futuro, por lo que algunas máscaras de capa no vienen a través. Otra forma de trabajar con Photoshop, es sólo puro viejo copiar y pegar. Estoy en Photoshop ahora, puedo hacer una selección. Solo voy a usar mi Herramienta de Marquesina Rectangular al ángulo de selección, copia y estoy usando edit, copy sale como atajo, ve a XD y puedes pegarlo. Siempre y cuando no sea demasiado complejo, con pequeñas máscaras y capas de ajuste y esas cosas, solo copia y pega. Esa es una buena manera fácil si podemos meternos en cosas de Photoshop a XD. Ahora hagamos de la manera oficial, al menos lo que creo que debería ser la forma oficial es usar las bibliotecas. Voy a hacer una máscara rápida aquí. Nuevamente, no espero que hagas esto o puedas hacer esto, si te entusiasmas con lo que hacemos aquí. Checkout, ya sea mío o el curso de Photoshop de otra persona, tengo un esencial y un curso avanzado si vino, pero voy a ir a Seleccionar tema que es una característica dulce cool, y hacer selección a su alrededor. Voy a añadir aquí una Máscara de Capa por el fondo. Recuerda que hablamos que esto es un poco de un tema, si vamos por las bibliotecas que parece arreglarlo. Las bibliotecas es una forma de compartir entre aplicaciones de Adobe, es como bibliotecas compartidas. Voy a ir a Mis Bibliotecas. Ahí está mi biblioteca para la clase Adobe XD. Voy a cerrar eso para hacerlo un poco más grande para todos. Lo que voy a hacer es agarrar mi herramienta de selección y simplemente clic en mantener presionado y arrástrela a cualquier parte y terminar aquí. Ahí va, vamos a darle un nombre, teléfono. Donde está, él está ahí. Ahora en XD, recuerda que nuestras bibliotecas están bajo el panel de Activos la parte superior aquí. Eso es por debajo, es posible que tengas que volver a recordar a una pareja en la parte superior hasta encontrar clase XD. Aquí está mi teléfono, aquí está amigo, voy a ponerlos aquí, podría ser un poco grande. [ RUIDO] Está aquí, la forma oficial. Hemos tocado un poco las bibliotecas CC, si no las has usado antes, son impresionantes. Son una forma de conectarme porque puedo usar el mismo teléfono y simplemente volcarlo en mi archivo Premiere Pro Video para cosas de redes sociales y ponerlo en InDesign para un diseño de revista, todos los activos compartidos diciendo con los colores. Esa es una forma fácil de hacerlo, y soluciona el problema con que nuestra capa sea así. Ahora un par de beneficios de usarlo de esta manera es, se puede ver como vinculado, que podría ser miope, está en atrás en Photoshop puedo entrar aquí y es una calle unidireccional. Si agregas algo de tu Photoshop a esto, este es su propio elemento separado. Si ajusto esto ahora, no va a ajustar el elemento de la biblioteca. Voy a terminar con esto, ya he terminado contigo no digas [RUIDO] No ahorres. Pero puedo abrir esta cosa, es mi teléfono, PSD, no están conectados al original y si hago algo así, sólo voy a invertirlo, mando yo, es realmente fácil uno y Controlar I en un PC y golpear Guardar. Fue muy visualmente claro. Puedo entrar en éste. Quiero ver este pequeño enlace aquí, puedo hacer doble clic en él, aquí en XD, lleva un poco de tiempo, no hizo nada. Un poco lento en la actualización, pero acaba de ir y cambió. Ese es uno de los beneficios y obviamente si estás usando un InDesign o Illustrator o algo más, Premiere Pro, también se actualizará. El último que quiero mostrarte, no tiene mucho [risas] ver con el diseño de experiencia de usuario. Es sólo algunos de los, supongo que quiero martillar sobre por qué es Photoshop, soy un poco fanático de Photoshop, por lo que hay alternativas para Photoshop. GIMP es desgraciadamente nombrado uno, ¿ y cuál es el otro? No Canva [RUIDO] no puede recordar a los otros. Pero solo hay algunas cosas que Photoshop hace una espectacularmente, es una de las nuevas. Puedes abrir esto si quieres hacerle una prueba tú mismo porque es bastante guay. Photoshop 04. Vamos a ir a filtrar, y vamos a ir a Filtros Neurales, podrían cambiar el nombre de esto. Lo han cambiado antes. Voy a usar este llamado Landscape Mixer. Tiene un nombre cojo, enciéndalo. posible que tenga que descargar, podría tomar un poco de tiempo descargar esta función. Podría haberse mudado de aquí, actualmente está en Beta. Es increíble, pero puede terminar justo en el filtro en algún lugar, pero busca mezclador de paisaje. Aquí, voy a decir que acaba de hacer éste, porque lo necesito ahora para ser invierno. Sólo voy a arrastrar el deslizador invernal, el retroceso, mira esto, aquí va, listo. [ RUIDO] Vamos, vamos. Vale la pena esperar más paralización. Corte editado a que se esté haciendo. Se hizo esto es de inmediato. Pero mira eso [RUIDO]. Simplemente lo hizo invierno. Ni siquiera estoy seguro de que sean hojas de té, pero hubo una vaga conexión con el curso. Pero mira eso, no puedo creer lo genial que es esta cosa. Hagamos uno más y luego te dejaré ir. Hagamos puesta de sol. Vamos a arrastrar hacia arriba la puesta de sol no al máximo máximo solo quiero ver algunas imágenes ajustando, como si estuvieras tratando de conectarlas juntas, es tal puesta de sol. Mírelo y miro este árbol. Se volvió veraniego y sun-setty. Lo miró, hay más follaje en los árboles. Tengo un juego con algunos de estos, abrir esa carpeta, ir a las imágenes, sitios de imágenes libres que te mostré, Unsplash y pixeles y echarle un vistazo. Es realmente bueno en los paisajes, no es tan bueno con cosas marinas como lo orgánico, o es realmente bueno con las cosas orgánicas, no es bueno para las cosas hechas por el hombre, sino para los hombres. Es por eso que probablemente siempre vas a necesitar Photoshop como opción si vas a ser diseñador de UX, especialmente si realmente quieres estar involucrado en el diseño en el lado de la interfaz de usuario. Me emocioné súper y quiero que vayas a hacer Photoshop. Recuerda que tengo un curso básico y avanzado si quieres echar un vistazo a esos, pero eso va a ser todo para este video. Te veré en la siguiente. 55. Barra de bocados de tostada con la imagen enmascarada en Adobe XD: Hola a todos. En este video, quiero presentarles a esta cosa, eso es un snack bar. Quiero presentarte el término y también mostrarte cuando estás trabajando con imágenes enmascaradas, cómo puedes conseguir fondos en ellas y cosas así. Vamos a salir en este video. Primer paso, snack bar. ¿ De qué está hablando? Los snack bars son los pequeños mensajes que aparecen en la parte inferior de un teléfono para darte un poco de información. Ya los has visto antes. Tal vez esta de aquí, es una versión para Android que acaba de aparecer en la parte inferior y simplemente explica lo que está pasando, como un pequeño refrigerio. También se les llama tostadas porque aparecen y vuelven a bajar como tostadas. Están ahí para darte información sin interrumpir el flujo de como tu, ya sabes. El operativo primario, lo que sea que estés haciendo, lo que estás en medio de estos, te dan pequeños bocadillos y pedacitos extra. Vamos a crear uno de esos, eso es lo que estamos haciendo. Voy a hacer el mío justo debajo la página de detalles del producto. Ahora, vamos a traer el archivo de Photoshop, el que hicimos antes. Si estás listo para ello, puedes pasar y usar Photoshop O3, enmascararlo, traerlo a través de tu biblioteca, o si quieres hacer trampa, cuando no tengas muchas habilidades de Photoshop, solo tráelo Photoshop O5, es uno que ya me enmascaré para nosotros. Es muy grande. Soy reacio a hacer que estos sean del tamaño correcto porque, no sé, los que traes van a ser del tamaño equivocado también. Voy a traerlo, bajarlo a un tamaño razonable que viste al principio de ella lo voy a cortar dentro de la pequeña caja de aperitivos. Mi snack box va a ser en este caso, como una atención al cliente. Va a ser sobre ese tamaño un poco más largo. Ahora lo que quiero hacer es en realidad vamos a conseguir el texto ellos primero, ¿ estás ahí? Esto es lo que voy a hacer. Voy a romperlo un poco. Algún texto informativo, no tiene que ser clicable. El mío va a ser. Pequeño truco para todo esto. Ahí hay un subyacente. Pero el Comando U en un Mac o Control U en un PC, hará subrayado y Comando B, negrita Control B, ahí algunos conceptos básicos allí. En realidad esos funcionan a través de cada programa jamás hecho. Voy a hacer éste, no quiero cortar esto en el fondo. Cosas raras que pasan, tengo una máscara. En primer lugar, quiero que esté en la cima, así que voy a hacer clic derecho en ella, llevar al frente. Voy a conseguirlo el tamaño apropiado. Recuerda, la rotación solo está rondando justo afuera, la cosa exterior. Algo así es lo que quiero , y cambiar el color de fondo. Me gusta este incoloro menos que esto. [ Risas] De todos modos, lo que quiero hacer es enmascararlo dentro de esto. Necesito dos cajas. Podrías simplemente usar este y éste, y usar la máscara make, Command Shift M o Control Shift M u objeto, o ¿es hacer máscara con forma? El problema es que la caja amarilla se ha ido, es hueca. No puedo colorearlo ahora, si trato de colorearlo, no va a hacer nada, [Risas] colorearlo. Lo que necesitamos son sólo dos cajas. Voy a deshacer y te mostraré qué hacer, voy a copiar este Comando C, Control C en un PC, después hago mi máscara. Déjame usar mi atajo. Entonces sólo voy a pegarlo de nuevo. Si acabo de golpear “Comando V, Control V” en un PC, voy a detener los atajos para las cosas fáciles como editar y copiar pegar, tratar. Tengo éste, está justo en la parte superior. Si lo muevo a atrás ahora, es sólo para copiarlo y porque lo pega de nuevo donde lo consiguió, terminas con una caja justo sentada encima de la otra. No es ideal, pero oye **, eso funciona. Voy a dibujar realmente rápidamente una caja cerrada. En realidad lo iba a acelerar. No lo estoy acelerando. Sólo algunas cosas. Voy a añadir esto. Recuerda sacar un círculo, solo un recordatorio, mantén pulsado Mayús mientras lo arrastra te da una completamente proporcional, creo que es la palabra, la altura y la anchura es la misma. Lo que voy a hacer una cruz. No intentes dibujar con la herramienta pluma, lleva una eternidad. Utilice la herramienta de tipo. Golpea tu “Plus”. Voy a usar uno blanco. Voy a escoger el tamaño y el peso adecuados. El mío ya tiene el tamaño correcto y el peso adecuado. Algo así. Lo que me gusta hacer es convertirlo de texto, es simplemente más fácil cuando es solo una forma. Recuerda cómo hicimos eso. Vamos a ir a Object y vamos a ir a Camino, convertirnos en camino y lo hemos hecho. No estoy seguro si lo tenemos. Ahí vamos. Así es como se convierte el texto en una forma. Voy a tomar ambos, ponerlos justo en el medio y luego voy a atravesarlo. Te voy a ir, recuerda que si sostienes Shift se romperá. Haz el mío un poco más grande. Si encuentras que eso no está absolutamente perfectamente en el medio, eso es solo un problema con tamaños de píxeles realmente pequeños en XD, esto se generará de una manera diferente en código. Ahí tienes, eso está bien. Voy a agrupar el mío. Echemos un vistazo allá arriba para que podamos cerrarla. Probablemente voy a sumarlo aquí arriba. Voy a añadir una sombra paralela probablemente. Ahí vamos. Sombra paralela. Uno más grande, 3 por 3 por 10, y que sea un poco más oscuro, sólo va. Aquí vamos, va a ser un pequeño pop-up, una pequeña cosa de brindis que aparece y luego vuelve a bajar, pero puedes apagarlo si necesario. Necesitamos esto para más adelante. Vamos a hacer un poco más de prototipos de fantasía y quería mostrarte máscaras dentro de máscaras con el fondo. Ahí vas. Eso es. Eres despedido. Te veré en el siguiente video. 56. Proyecto de clase: añade imágenes: Es esa vez otra vez. Es tiempo de proyecto de clase. Éste tiene que ver con las imágenes. Quiero que añadas imágenes al documento, o al menos a su diseño móvil. No me preocupa exactamente dónde y cómo y cuántos, es más que quiero controlar tu diseño aquí. Pero cuando buscas imágenes, ya sea a través de bibliotecas de acciones pagadas, si tienes acceso a ellas, o algunas de las cosas gratuitas como en píxeles especiales, pero ten en cuenta tu persona cuando estás recogiendo imágenes. Es esto correcto para esta persona, ¿está cumpliendo mi breve? Entonces quiero que añadas imágenes como aquí hay un buen lugar para las imágenes. Quiero que experimentes tal vez con la imagen de fondo aquí también. Aunque decidas tener una opción 1 y una opción 2, quiero que juegues con difuminar las imágenes y además quiero que construyas dos páginas para mí, la página de confirmación, que es sólo un mapa en el fondo, puedes tomar tu propia captura de pantalla. Esto está cerca de donde vivo. Pero podría decidir que podría tomar un mapa de dónde se establece usted o al menos su breve, y luego agregar esta confirmación borrosa de la parte superior. Exactamente cómo lo haces, no es importante. Es más sólo practicar con él. También quiero que añadas este snack bar. Quiero que lo hagas ya sea con las imágenes que te he dado o si te llenas para ello, encuentra tu propia imagen, enmascararla, ponla abajo aquí. No tiene que hacerse una pregunta, algo así, algunos como notificación pop-up, tal vez un lo sabías, o una venta que está en, algo así porque vamos a llevar a animar eso más adelante. Añade todas las imágenes, crea el snack bar y agrega el mapa y el cuadro de diálogo a tu página de confirmación y luego súbalo. Empiezo a llegar a un punto en el que no puedo esperar a ver lo que has hecho. Quiero verlo en Instagram, Twitter, y nuestro grupo de Facebook o nuestro grupo de LinkedIn. También subirlo a la sección de asignaciones de este sitio web también. Esa es tu tarea. Ve a hacerlo para encontrar algunas imágenes y deja que tu diseño cobre vida. Eso es. Te veré en el siguiente video. 57. Cómo hacer y usar los componentes en Adobe XD: Hola a todos. En este video, vamos a ver cómo hacer componentes en Adobe XD. Déjame mostrarte rápidamente lo que hacen. Puedo ajustar este llamado componente principal, y todos sus amigos de aquí vigilan. Todos están conectados, así que puedes hacer una cosa una vez y todos vienen para el paseo. Significa que puedes trabajar en muchas tablas de arte diferentes perfectas para este nav superior, ajustar uno y todos fluyen a lo largo y se ajustan también. Eso es básicamente lo que hace un componente. Déjame mostrarte cómo hacer uno. Hagamos un componente. En primer lugar, limpiemos todos los componentes que tienes. Vamos a nuestro panel de Activos y posible que tengas Estilos de Carácter Girar hacia abajo. Quiero que sólo haga clic en el chevron para ordenarlo. Debajo de Componentes, es posible que tengas un montón de basura ya. Si copias y pegas, lo hicimos antes en el curso. Recuerda que dije si copias y pegas cosas, podría traer a través de estos componentes aquí. Acabamos de desagruparlos y seguimos adelante. Ahora en realidad vamos a entender bien cuáles son, y si ya tienes cosas ahí dentro, solo significa que las has copiado y pegado de otros documentos, así que borra esos fuera. Simplemente haz clic con el botón derecho en ellos y elimínalos todos. Selecciónalos y presiona Eliminar en tu teclado, borra los componentes. Si tu vista se ve diferente a la mía, he estado en lista ver todo este curso. Podrías pasar por algunos estilos de personaje. Pudiste haber estado en este punto de vista y se veía muy diferente a la mía. Me gusta estar en la vista de lista por alguna razón. Depende de ti, pero voy a estar en la vista de lista, hace que sea más fácil cambiarles el nombre. Vamos a entender los componentes haciendo uno, seleccione todo este nav superior. Lo estoy haciendo en esta otra página. No importa lo que conviertas en componente. Voy a seleccionar todas estas pequeñas cosas aquí, y puedes hacer clic derecho en ellas, y decir Make Component, usa el atajo Comando K o Control K en un PC. Es algo realmente común, así que tiene un atajo realmente común. Bajo Objeto, mismo dicho, ¿dónde está? Ahí está ahí, Make componente. ¿ Cómo lo sé? Si lo deshago, ¿ pueden ver que tiene este borde azul y si golpeo mi Comando K o Control K en un PC, se vuelve verde? Por eso sé que es un componente. Esa es una de las indicaciones visuales. Apareció en mi biblioteca de componentes. Aparece en tus capas también. Se puede ver ahí, componente, por lo que aparece de algunas maneras diferentes. Vamos a cambiarle el nombre. Es mucho más fácil de hacer cuando estás en lista ver esta pequeña opción aquí arriba, y solo haces doble clic en la palabra, y vamos a llamar a esto Top Nav. Puedes dejarlo como componente 1. No hay nada de malo en ello excepto que serás juzgado por otros diseñadores que eres descuidado nomenclatura de capas. Pero si soy honesto y todos somos honestos, todos tienen el componente 57 en su lista. Pero por hoy, somos encantadores nombrados Top Nav. ¿ Qué es tan útil sobre los componentes? Déjame mostrarte. Tengo éste, voy a copiarlo y voy a pegarlo en éste y tal vez pegarlo en éste también. La diferencia entre este primero, en primer lugar, es, se puede ver aquí se llama el componente principal o nuestro primero, o el padre o el primario. El término técnico es el componente principal. ¿ Cuál es la diferencia entre él y éste? Son las diferencias visuales. ¿ Se puede ver el grueso diamante verde? ¿Ves a este tipo? Tiene un diamante vacío, así que este es el principal, esto se llama la instancia. Tú eres el jefe, sigues lo que dice el jefe, padre-hijo. Lo bueno de ello es que puedo agarrar este primero y voy a alejarme para que podamos ver los tres. Puedo entrar en ella. ¿ Recuerdas cómo voy dentro de estas cosas? Puedo hacer doble clic en él. Aquí vamos, y agarra esto y mira esto y vamos. ¿ Puedes verlos a todos en movimiento? Oye, vamos, esa es la razón por la que los componentes son realmente buenos, es que puedes hacer una cosa, puede atravesar 100 tableros de arte diferentes, y puedes controlarlo solo actualizando el componente principal. Aquí tienes, lo que mucha gente hará es que mantengan la principal por aquí en la tabla de pasta o en otro tablero de arte, solo algo fuera del flujo real, y mantener todos sus componentes principales juntos, y luego copiarán y pegarán la instancia. Si copias otra instancia de estos chicos, simplemente seguirá haciendo duplicados de esta principal. Simplemente significa que no estás tratando de averiguar dónde carajo fue el principal [risas] en qué tablero de arte lo creaste. Tienes un lugar central. Significa aquí arriba, se puede decir en realidad quiero que esto se mude. Mira eso. Así es como se hace un componente. Puede ser un poco de dolor a veces si quieres separarlo. Simplemente puedes hacer clic derecho y decir, eres Desagrupar Componente, y solo lo romperá ahora. Ahora cuando ajuste esto, el tipo es como si fuera su propio jefe otra vez, es un guardabosques solitario. Puede hacer lo que quiera. Así es como hacer un componente. He vuelto del futuro. Posteriormente en el curso, estoy como, oye, probablemente debería mencionar eso antes. Te voy a mostrar una pequeña cosa sobre los componentes es que dibujamos un interruptor de palanca más adelante en el curso, y aquí es donde estoy como, hey, probablemente debería decírselo. Hacemos este pequeño interruptor de alternancia. Es rectángulo, esquinas redondeadas. Se hace clic en él y se mueve por aquí. Va a ser divertido, mantente atento. Pero lo que pasa es que digamos que tengo esto, estoy obteniendo mi color en tu color. Si selecciono ambas, y sostengo Shift y lo escalo, escala muy bien. Si hago un duplicado sin embargo, y lo agrupo, y lo escalo, funciona perfectamente. Pero si lo hago un componente y hago exactamente lo mismo [Risas] así que lo que termina pasando es que aplica esta cosa llamada diseño sensible, y trata de ser todo muy inteligente. Porque es inteligente cuando haces esto, mira, eso es realmente genial cuando estás haciendo un botón, quieres hacerlo más largo, pero cuando quieres cambiar el tamaño de algo, eres como yo solo quiero hacerlo más pequeño, puede, no siempre, te causa problemas. Lo que puedes hacer es solo desactivar el redimensionamiento sensible, y luego trabajar tu magia. Simplemente no va a hacer todo eso como hicimos antes. Acaba de extenderse por sí sola. Sin embargo, puedes encenderlo y apagarlo, mira esto. Puedo hacerlo realmente pequeño. Enciende eso y haz esa cosa elegante. Esa es una palabra del futuro Dan. Déjame mostrarte lo que hacemos, se escondía aquí abajo, yo estaba como, vamos a mostrarte. Mira este interruptor de alternancia. Mira hasta dónde tenemos [Risas] Es tarde en el curso así que quédate. Mira este interruptor de alternancia. Mira eso. Está en el bit micro-interacciones en el curso. Eso es el futuro Dan regresando para ayudarte con el cambio de tamaño sensible. Ahora mismo, sin embargo, volveremos al componente creando. Hay más que mostrarte en el siguiente video, te veré ahí. PS, no le cuentes la próxima versión de Dan en el siguiente video que estuve aquí. Trato. Seguir adelante. 58. Diferencia entre los componentes principales e la instancia en Adobe XD: Hola a todos. En este video, vamos a llevar nuestros componentes al siguiente nivel. Claramente, el siguiente nivel es Brush Script [Risas] como fuente, pero también significa que puedo tener estas instancias únicas con lo que se llama anulaciones. Eso significa que pueden ser de diferentes colores, diferentes tamaños, tener texto diferente en ellos, y ver esto, puedo entrar aquí y decir que todavía quiero controlar algo usando mi componente principal. Estás listo para solo una fuente agradable. Ahí vamos. Todos se actualizan, pero se puede ver que el texto sigue siendo único. Éste dice Comprar Ahora, éste todavía dice Learn More, pero están algo controlados por este componente principal. Vamos a saltar para nuestra extravaganza Comic Sans. Vamos a empezar con este botón aquí. Sólo voy a copiarlos y pegarlos, y luego moverlos aquí abajo solo porque. Ahí va. Sólo quiero hacer un botón básico, ahí vamos. Voy a empezar con eso en realidad. [ Risas] Ahora es perfecto. Tengo este botón. Sería un gran contendiente por un componente. Sí, porque quiero usar eso varias veces. Voy a seleccionar tanto el texto como el fondo, bueno, mi pequeño rectángulo de botón. Estoy seleccionando a ambos. Tal vez un Comando K o control K, y ahora es un componente. Ahora debería nombrarlo. Cuando estás nombrando cosas como botones, sería realmente común. No quieres llamarlo botón Comprar Ahora [RUIDO] porque en realidad usaremos este botón para muchas palabras diferentes. Sería el Comprar Ahora, será el Más información, será el botón Eliminar Mi Cuenta. Lo que haría es decir que es botón, y este va a ser mi medio porque planeo más adelante tener un botón pequeño y un grande. Eso es todo. Verás esto mucho. Será BTN subrayado MED tal vez Primaria porque podría ser tu color primario. No hay regla oficial. No sé por qué. Me gusta el botón, y me gustan los guiones, y me gusta que me llamen medio. [ RUIDO] Pero puedes hacerlo todo el lenguaje cody, si lo prefieres de esa manera, y verás ambos. Voy a mantenerlo bastante vago en este momento y hablaremos de algunas de las otras cosas que puedes hacer. Tenemos un nombre, tenemos un botón. Hagamos dos de ellos. Recuerda, el de arriba aquí se llama nuestro principal y esta es una instancia de la principal. Hagamos en realidad tres de ellos. Todo el mundo tiene tres para mí. Este de aquí, sabemos que si ajusto este top haciendo doble clic en él, podemos ajustarlos todos. Si ajusto el texto en el maestro, por lo que este es ahora mi botón Aprender más. Probablemente debería centrar mi texto y moverlo hacia el medio. Cuando hago cambios de texto para mi Borrar, por lo que al menos se ajusta perfectamente a izquierda y derecha. Esa es la opción central para el texto. Lo que podemos hacer es que podamos dejar esto como Comprar Ahora. Ahora, lo dejaré como Learn More centrado. Lo que podemos hacer es que estas instancias realmente queremos cambiar. Estás como, “Bueno, no quiero que todos se llamen Saber más porque terminarás con un botón llamado botón Saber más, botón Comprar Ahora, botón todo, Ts & Cs.” Lo que puedes hacer es que estas instancias se puedan ajustar. El código anula. Eso significa que puedo decir que éste es mi Comprar Ahora. Éste puede ser mi botón Borrar o mi botón Eliminar, o algo más. Lo genial de ello es, mira esto, este maestro, puede controlar cualquier cosa que no se haya ajustado aquí abajo. Mira esto. Vamos a crear otro de estos. Ahí vamos. ¿ Esto va a tener sentido? Ojalá lo haga. Puedes ajustar los textos en estas instancias para hacerlos únicos. Se puede ver ahí nuestra pequeña opción, ajustar, ver la cosita? Tiene algunas anulaciones. Cualquier cosa que hayas cambiado se considera una anulación para el maestro. Cosas que no has cambiado como la posición o el color de fondo, no hemos cambiado eso en todas ellas. Mira esto. Si cambio el color de fondo haciendo doble clic en él para entrar, puedes decir en realidad eres este otro color y todos cambian. Pero si lo deshago, si digo este botón Comprar Ahora aunque es que voy dentro de él y lo anulo y digo: “Oye, tú no eres el jefe de mí, voy a ser de este color. No este color, voy a ser ese color”. [ Risas] Este tipo, nuestro pequeño guardabosques solitarios se ha anulado. Si voy a este maestro ahora y digo: “Oye, quiero que todos sean verdes”. Ahí está verde. ¿Lo ves? Todo se ajusta. No se ha cambiado. No cambiamos los antecedentes en éste o éste, pero este tipo, dijimos: “Oye, sé algo diferente”, no anulamos. Esas son algunas de las partes poderosas de la misma. Podemos tener un montón de botones que ven diferentes pero son controlados por este botón primario o principal. ¿Eso tiene sentido? Este texto, comenzó como Learn More, luego lo cambiamos a Comprar Ahora, y lo cambiamos a Clear. Esas son anulaciones. Pero este tipo llamado Learn More, ¿y si cambio esto a botón? ¿ Entiendes lo que quiero decir? Cualquier cosa que no se haya cambiado aún será anulada. Cualquier cosa que hayas cambiado como estos dos chicos intentará aguantar para siempre y su nuevo estilo. Puedes terminar sobrepasando todo, pero es una gran manera de tener un botón genérico que salga. En realidad puedes sacarlos de aquí en lugar de simplemente duplicar a su maestro y decir: “En realidad, maestro y decir: “En realidad, quiero que este tipo sea de otro color, y quiero que el texto sea algo más visible”. Pero tener algún control. Puedo entrar en esto y decir: “Ahora vas a tener 10 píxeles alrededor de las esquinas”. Todo lo que no se ha cambiado en términos de alrededor de las esquinas viene para el paseo. Esa es la diferencia entre principal y instancias. Se pueden ajustar ligeramente para hacerlos personalizados pero tienen algún control principal general. ¿ Eso funcionó? Si eso funcionó, está bien. [ Risas] Hagamos otro. En el momento también, si voy [RUIDO], mira eso. Si mantengo presionada Opción en mi Mac o en un PC, solo estoy agarrando el borde de esto, arrastrándolo, mira esto, podemos ajustar el tamaño. [ RUIDO] Pero, ¿y si voy con este tipo? Este es nuestro rebelde. Este es el tipo que quiere hacer todo por su cuenta. Si digo: “Voy a ser en realidad este botón gigante, no eres el jefe de mí”. Pero este maestro dice: “Oye, sé un tamaño diferente”. Mira? Anula el trabajo en todo tipo de cosas. Cualquier cosa que se te ocurra, puedes anular e ignorará los cambios que le sucedan al maestro. Sólo para probar el punto, voy a ir a éste y decir, eres Comic Sans, viviendo la vida al borde. Éste de aquí, yendo a éste, y voy a decir: “De ninguna manera, voy a ser Impacto”. [ Risas] Dos de mis odiadas fuentes. Esto, va a cambiar, excepto el que tiene la anulación, pero se pone a mano. Este es un gran ejemplo de todos los diferentes bits. Donde se pone bastante útil está aquí arriba. Mira esto. Tengo esta navegación. Esa fue la navegación que hice. Recuerda, si deshago o alejo, si cambio el maestro, que tengo aquí arriba, podrías tenerlo en otro lugar. Recuerda, si cambio el maestro, todos cambian. Pero éste no está cambiando. Estás como, “Bueno, ¿tengo que tener dos navegaciones?” No, porque estás pensando : “Podríamos hacer esa cosa que hiciste con el botón”, donde solo lo ajustaremos. Este de aquí voy a eliminar, te vas. Voy a usar una instancia. No importa si duplica éste, duplica éste, o lo arrastra fuera de aquí. Ese no, ¿dónde está? Top Nav, no importa. Es una instancia y nada ha cambiado al respecto porque tiene el diamante aburrido, viejo, blanco, pero es del color equivocado. Lo que puedo hacer ahora es cavar en ella y en realidad entrar en éste y decir: “Ahora eres un color de fuente de blanco, y vas a ser un color de relleno de blanco”. Espera ahí. Voy a acelerar esto. Ahí vas. Aquí hay una instancia de ello. Simplemente significa que todavía puedo entrar en nuestro maestro, ahí, y hacer ajustes y tener muchas versiones diferentes de esto, un modo claro y un modo oscuro. Es sólo un cambio simple, pero se puede ver el poder sobre ojalá ahora. Los componentes son impresionantes. Un par de cosas, podrías ser como, este tipo de aquí abajo tiene un poquito demasiado poder. Cree que no puede ser controlado por nadie y tenemos que devolverlo a meterlo. No estoy seguro a dónde [Risas] voy con mi jefe y analogía subordinada aquí, pero oye, hemos llegado tan lejos. Lo que puedes hacer es que puedas hacer clic derecho en ellos y decir: “En realidad, simplemente te restablecemos de nuevo al estado principal”. Ahora mira quién es el jefe? Puedes volver si es necesario. Podría estar haciendo algo raro y estás como, “¿Por qué no se ajusta en comparación con la principal?” Podrías hacer eso, reajustarlo de nuevo. Podrías decidir lo contrario y estás como, “No quiero”. Porque en el momento en que el posicionamiento de esto sigue cambiando, estás como , “No, ya no quiero que esto sea una instancia. No quiero que esté conectado en absoluto”. Tal vez sea el comienzo de un nuevo botón o algo más. Puedes hacer clic con el botón derecho aquí y decir, no dice desconectar ni nada, solo dice Desagrupar Componente. ¿ Recuerdas antes en el curso te conseguí que lo hicieras cuando copiamos y pegamos de los kits de interfaz de usuario de otras personas? Acabamos de hacer esto. Por eso. Acabamos de romperlo para que no esté conectado con documento de nadie más, el botón de nadie más. Esto ahora es solo un botón de rol regular por su cuenta, haciendo lo suyo. Ahora podría convertirse en su propio componente. Podemos hacer de él un componente y podría ser [RUIDO] Botón Grande y podría tener sus propias instancias o hijos. Ahí vas. Ahora es el jefe de su propio pequeño clan. Otras cosas que son útiles, por el momento, tenemos un pequeño grupo bastante pequeño de componentes. Más tarde, es posible que tengas cientos aquí, si es un gran proyecto de interfaz de usuario en el que estás trabajando. Pero habrá momentos en que en realidad estamos como, “Ese botón, ¿dónde está eso?” Puedes pasar el cursor por encima de ella. ¿ Puedes ver que hay tres instancias de esto? ¿ Hay cuatro instancias de ésta? ¿ Hay cinco de éste? Estás como, “¿Dónde se está utilizando este botón?” Ni siquiera estás seguro. Vamos por aquí. Haga clic derecho en él. Se puede decir Destacar sobre lienzo. Eso no funciona [Risas] a menos que estés alejado todo el camino. Lo ha destacado. ¿ Quién recuerda el atajo para hacer zoom para ver todos los tableros de arte, todo lo que está pasando? Eso es correcto. Comando 0 en un Mac, Control 0 en un PC. Ahí vas. Puedes verlo, está resaltado ahí abajo. No es súper útil, pero elegimos hacer el Button Large y mantener un ojo hacia fuera. Está por ahí. Vamos a Destacar en lienzo, está resaltado por ahí. Pero tú eres como, “Eso no es útil”. Pero recuerda que puedes acercar las cosas que has seleccionado. Estás como, “Eso es correcto. Mando o Control 3.” No, dos, no, tres. [ Risas] Eso no funciona si tienes más de uno seleccionado. ¿ Dónde está? Ahí vas. En realidad no los selecciona de esa manera. Yo miento. Yo tomo eso de vuelta. No se puede el Comando 3 para acercar. Me hiciste parecer un tonto, XD. Lo siguiente que quería mostrarte es éste de aquí, Editar Componente principal. Podría haber un momento en el que estés como, “He hecho esto aquí”, y no tienes idea de dónde está el componente principal. Sé que está ahí. Con el pequeño diamante, estarías como, “ sé que está ahí arriba”. Pero aquí abajo, semanas a partir de ahora trabajando en el proyecto de otra persona, estás como, “Es la instancia. Pero ¿dónde está el principal?” Puedo decir ya sea haga clic derecho aquí e ir Editar componente principal o por aquí, lo mismo, Editar componente principal y lo que va a hacer, debería saltar a él. Oye. ¿Qué pasa si lo elimino? Wow, [Risas] ¿qué pasaría si lo eliminaras? Eso parece irrecuperable. Pero XD hace algo elegante donde vas clic derecho, incluso si se ha ido y no está en tu documento en absoluto. Esa es una gran manera de mantener las cosas ordenadas. Aún se puede editar componente. Lo que hará es simplemente abrirlo y volcarlo en la página por ti. [ RUIDO] No estaba ahí abajo antes, solo fue aquí está el espacio y lo abrió y solo lo tiró ahí. Ahora tienes un componente principal. Cuando estás trabajando con documentos de otras personas, es posible que encuentres que no hay un componente principal. Este de aquí se elimina. Estarías como, “¿Dónde está esta cosa?” Ve a Editar Componente principal y solo lo tirará en algún lugar de tu documento y te llevará a él. Estarías como, “Sí, ahí está”. Ahora puedo pasar y hacer mis ajustes. Pero no necesita estar ahí, sólo para que lo sepas. Una última cosa es que podría ser como, “¿Cuál es esa en realidad en mi panel Componentes?” Voy a cerrarla, mientras que es bastante fácil porque tiene una visualmente bastante diferente, pero terminarás con un montón de botones que se ven igual desde la distancia y es difícil contar el tamaño de ellos en los componentes pequeñitos para ti. Puedes hacer clic derecho en cualquiera de estos tipos. A veces haces clic en el fondo con tu herramienta Selección. Selecciónelo una vez, haga clic derecho en él. Hay uno que dice Reveal Component en el panel Activos. Va a revelarlo, mirarlo. Lo abrió y lo resaltó. Ya sabes que es la persona que está controlando a ésta. Nos acercamos un poco más con los componentes, mirando las principales y las instancias. El verdadero gran ventaja es que se pueden hacer anulaciones o hacer pequeños cambios en las instancias mientras aún conserva mucho del control desde el componente principal. Eso es. Te veré en el siguiente video. 59. Cómo crear estados de la hover de componentes en XD: Hola amigo mío, mira esto. El botón tiene un estado de flotación. Mira eso. No estoy haciendo nada, sólo se da la vuelta. Es una de las otras bondades para los componentes. Déjame mostrarte una opción más aburrida. Aquí vamos, mira mis botones de radio. Mira eso, emocionante un continuo encendido y apagado en un avance. Se llaman componentes estados, y les mostraré cómo hacer los ahora en XD. Antes de empezar, sólo para que sepas, fui y limpié todos esos botones que tenía. Botones por todas partes. Lo que he hecho es que sólo he creado un nuevo botón. No es un componente, no es nada. Es sólo un rectángulo con algo de texto en el medio y yo escogeré mi fuente corporativa, trayéndolos, pero también vino la policía de fuentes y fueron palabras duras. Hemos escogido un poco de fuente. En primer lugar, para hacer nuestro estado, necesitamos seleccionarlo y convertirlo un componente igual que antes. A Comando K en Mac, Control K en un PC. Vamos a trabajar en nuestro maestro en este caso. No funcionará si estás tratando de hacer estados en la instancia. Recuerda que si has trabajado en la instancia, tienes que hacer clic derecho en ella y decir: “Editemos el componente principal”, y debería llevarte a ese componente principal. Voy a eliminar esa. Estoy en los principales, tiene el diamante. Por aquí, ahí está esta cosa. Una vez que lo creas en un componente, ahí está éste. Estoy en componente principal. Este es el estado predeterminado. Lo que podemos hacer es que podamos sumar un estado y vamos a añadir este hover uno para empezar. Pase el cursor. No vamos a hacer nada más y nada va a funcionar. Tenemos estado por defecto, estado estacionario. Es posible que tengas que hacer click , hacer clic de nuevo en. Esto sólo tiene que ser diferente. Si hago click en “Hover State” para que esté resaltado, puedo decir doble clic para ir dentro de él. Puedo decir que vas a ser mi versión más oscura de ella. Haga clic hacia atrás en el exterior, haga clic de nuevo en él. Ahora mira esto. Tengo un estado predeterminado y un estado estacionario. No tengo que hacer nada más. Empecemos a estar en un estado predeterminado y luego vamos a previsualizarlo. En realidad, esto tiene que estar en una de mis mesas de trabajo. Voy a ponerlos en cuál? Vamos a estar en mi página de inicio. Voy a moverlos aquí abajo. Voy a hacer click en el nombre. Vamos a prever éste y ahí está ahí. ¿Estás listo? Escogí un color que no se puede ver, funciona. Para golpearlo como estado, solo tienes que ir y hacer click en él una vez. Por aquí puedes decir: “No escojas ese color porque no lo puedes ver”. Voy a ir a hacer doble clic en él para ir dentro de ese pequeño grupo y voy a decir: “No escojas ese color. Usaremos esa. Vamos por un super negro”. Ahora volvamos a nuestro preestreno. Recuerda que va a por defecto a lo que sea el superior que esté en mi flujo, a menos que haga clic en el nombre sobre la parte superior aquí. Juguémoslo y miremos eso. No pasa nada. Más problemas. Este es un problema con el que te vas a encontrar. Voy a cerrar esto abajo. Lo que pasa es que recordará lo último que había hecho clic aquí. Tienes que estar en el estado predeterminado. Cualquiera que haya seleccionado será el que cambie o se previsualice en. Voy a estar en el estado predeterminado, luego previsualizarlo, y ahora el hover funcionará. Wow. Lo hice más difícil de lo que debería ser. Pero así es como hacer un estado de flotación. Es realmente fácil. estado Hover es uno de los predeterminados. Apenas tengo que recordar que cuando hayas terminado de trabajar en el estado de la libración, vuelve al default y luego da click off y eso lo mantendrá recordando ese estado ahí. El otro estado realmente común es el estado de alternancia. Lo voy a hacer por esta página aquí, haga click en el nombre Comando o Control 3 para acercar. Van a ser estos pequeños botones de radio aquí. Voy a acercar. Si no has hecho uno de estos, solo necesitas dibujar dos círculos. Voy a seleccionar ambos y voy a hacer el mío por aquí. Esto aquí es sólo un círculo con un relleno en un círculo con un trazo alrededor del exterior. Voy a seleccionar ambos. Podemos usar nuestro Comando K o Control K, o a veces aleatoriamente hago clic en este botón, hace lo mismo. Componente plus. Me ha dado lo mismo, tengo mi pequeño componente principal. Lo que quiero hacer es que quiero otro estado, y este es el otro estado predeterminado llamado toggle. En lugar de llamarlo toggle, voy a llamarlo un off porque toggle no tiene mucho sentido. Lo que quiero es en el estado predeterminado para que tal vez esté encendido y luego en el interruptor de apagado. Quiero entrar de aquí y puedes eliminarlo y funcionará en esta instancia pero en realidad también es poco práctica. En lugar de eliminarlo, solo baja la opacidad sobre lo que quieres que se vaya. Simplemente significa más adelante si te metes en estados más complejos, eliminarlo causa problemas futuros, mientras que bajar la opacidad significa más adelante puedes volverlo de nuevo si es necesario. Confía en mí, es más fácil solo bajar la opacidad. Tengo dos estados. Tengo el defecto y el fuera del estado. Tú decides de qué manera quieres que empiece a recordar eligiendo cuál, como en el estado de hover del botón. Este es el estado en el que quiero que esté incumpliendo. Voy a deshacerme de éste y reemplazarlo. Vamos a darle un adelanto. Está en la página. Necesitas hacer clic en la página para tener seleccionada la página o simplemente un objeto en la página y presionar “Jugar” y sabrá a qué página quieres decir. Se puede ver esto. Mira eso. Por defecto es esto. Ahí vas. Alternar por defecto, ¿puedes ver que se desvanecen? En realidad no es lo que quiero. Vamos a ajustar eso también. En realidad, antes de que hagamos eso, en realidad puedes simplemente usar esto para, puede que no sea para prototipado o animación, solo tienes un botón y lo usaste. Podría ser una marca de verificación como una casilla de verificación. Usas un montón de ellos. Entonces en lugar de animar o nada, sólo tienes que ir, en realidad, quiero que éste esté apagado y éste esté apagado y éste estará encendido. Eso es todo lo que lo usas por solo tener una unidad. Puedes copiar y pegar y luego encender y apagar y volver a cambiarlo. De vuelta a la animación, no nos gusta el pequeño desvanecedor. El motivo por el que cuando agregamos el estado de toggle, básicamente lo que está haciendo es que lo pongas para aparejar esto tú mismo y fue un poco de dolor en el botón. Pero ahora lo que hace es en realidad un montón de animación para ti. Puedes ajustarlo después si quieres. Puedes entrar en esto y decir que prototipo. Está editado esta cosa aquí. No va a ninguna parte, pero dice este estado predeterminado. Cuando se toca, se anima automáticamente usando una flexibilización de 0.3 segundos y ese es el desvanecimiento. Se va a aliviar. Lo que quiero hacer es decir tocarlo. No quiero que se auto-animen, quiero que hagan una transición y quiero que la animación sea nula y diga que se deshace de ella. Ahora va a la transición, pero no va a hacer ninguna animación. Vamos a darle una vista previa ahora, ir a seleccionado, presionar “Play” y ahora es sólo un aburrido botón de radio viejo. Lo hace de una manera pero mira esto, se desvanece de nuevo. Tienes que hacerlo en ambos lados. Lo he hecho por el estado predeterminado. Hagámoslo por el fuera del estado. Lo mismo, no se anima auto. Transición. Me gustaría que el no se disuelva ahora debería hacerlo ambas partes. Vamos a darle una obra de teatro. Animación aburrida, pero más cómo funciona nuestro botón de radio. En este caso, toda la animación, estas instancias recuerdan los desvanecimientos. ¿ Todos se actualizaron? Echemos un vistazo. Tal vez lo hicieron. Parece que no miraron eso. Todos se actualizan. La animación, si ajusta el maestro, todos se actualizan. Sin embargo, no parece un botón de radio regular. Si supieras de ellos normalmente solo puedes escoger uno. No se puede hacer que eso suceda y está fuera del lado del alcance de XD, pero se obtiene la idea. Ese es el estado de alternancia. Va a ir y venir. Hover es el hovery uno. Ya sabes a lo que me refiero. Ahí es donde voy a dejar éste. Hay un poco más que quiero mostrarte en el siguiente video. Pero oye, necesitamos un descanso. Necesito un descanso. Ve a buscar una taza de té. Te haces wee y te veré en el siguiente video y cubriremos un poco más de algunos estados en Adobe XD. De vuelta en un segundo. 60. Proyecto clase 11: Botones: Hola a todos. Es tiempo de proyecto de clase. Vamos a hacer algunos botones, también conocidos como componentes. Hay dos que hacer. Solo para establecer las reglas de fondo, esta va a ser la asignación de clase más caliente que hayas hecho. [ RUIDO] Va a ser duro. Entonces prepárate. [ Risas] No estoy seguro por qué me acerqué. [ Risas] Vas a hacer dos botones. Usar componentes y estados puede ser complicado, llegarás allí. Tengo estos dos ejemplos. Vas a hacer un botón viejo normal como lo tenemos aquí, el botón Comprar Ahora y Aprender Más, luego una marca de verificación, que es básicamente la misma el botón de Radio que hicimos antes. Entonces el botón, hablemos de éste primero. Lo que me gustaría que hicieras es previsualizarlo. Eso es lo que quiero. Quiero que puedas pasar puntero y luego cambiarte. El mío solo cambia ligeramente así que eso es una cosa. Una cosa que debo señalar ahora, tal vez estés pensando ya tal vez como, ¿sabe? Sé que no puedes pasar el cursor sobre un móvil. Puedes agitar el dedo por encima de él, pero en realidad no cambia. Supongo que este curso estamos aprendiendo tanto botones de escritorio como cosas de dispositivos móviles, pero solo enfocándonos en construir la versión móvil real. Haz los cierres a pesar de que es un poco raro en un dispositivo móvil. Lo que me gustaría que hicieras, la regla es que estos dos necesitan compartir el mismo componente principal. Mira esto, todos están compartiendo aunque sean visualmente bastante diferentes, quiero que veas si puedes hacerlo. En mi panel de activos. Vamos a cerrar eso abajo. Ahí está mi botón. Aquí está mi principal, y es solo un botón que he estilizado de manera diferente. Esto es bastante complicado a pesar de que los videos que he hecho, gente paga por engaño. Si quieres mantenerlo menos complicado, si te encuentras difícil este curso, no hagas una línea alrededor del exterior con diferentes rellenos y cosas, solo haz una ligera variación de color en este Botón Comprar Ahora para el saber más. Eso ahorrará tiempo/ para que sea más interesante es, cuando lo juegues, quiero que lo conectes. Así que cuando hago clic sobre el cursor por encima funciona pero cuando hago clic en él, salta a la página Checkout, y lo hago. Hay algo que no hemos hecho hemos sido lotes de diseño, si quieres página prototipo, se agrega automáticamente esta animación y aprendemos antes de que podríamos apagarla. Vamos. No queremos el fade, solo queríamos saltar. Se puede decir ir a la transición y no quiero un disolver, solo quería saltar recto al otro lado. Eso es lo que es esta cosa. Esto lo está diciendo, no va a ninguna parte. Sólo va a esta cosa eléctrica. Esto solo dice que la animación que ocurre aquí no va a nada. Pero también quiero que vaya a otro lugar. Puedes tener dos acciones en un componente. Entonces en este caso voy a decir que vas a esta cosa. ¿ Ves que puede tener más de uno? Ya puedes ver cuando toco éste va al predeterminado. Va a tocar, transición a esta animación de página, disolver o ninguno, déjame ir ninguno. También va a cuando está flotando, hacer una transición de ninguno. Puedes tener más de uno, puedes tener tres. No estoy seguro de por qué tendrías tres? Se va a enloquecer porque va a intentar ir a ambas páginas. No estoy seguro de cuál va a ir en realidad, pero solo sé que puedes conseguir un botón para hacer más de una cosa. En nuestro caso, juega nuestra animación hover. N, ve a una página, ahorra para el aprender más. Ahí está el botón Aprender más. Quería ir a éste, los detalles del producto, conocer más sobre este producto. Ir a la vista previa. Por ahora, nos va a llevar a nuestra segunda parte de nuestro proyecto de clase y más. Ahí está esto. Es como el botón de radio. Quiero ver si puedes hacer eso. Es como un interruptor de alternancia. Ese es el hover, este es el toggle. En cuanto a la garrapata, acabo dibujar eso. Lo dibujé con una herramienta de alfiler. Tú también puedes dibujarlo o encontrar algo de Icon Finder o de un SVG en algún lugar, kit de interfaz de usuario de otra persona. Lo que encontrarás cuando lo dibujas, tu garrapata se verá como ninguna otra garrapata. [ Risas] Es realmente difícil dibujar como la garrapata, siento que llegué allí eventualmente, pero volví a dibujar ese boleto pocas veces. Comprobemos. Botón Comprar Ahora, deben ser el mismo componente principal y estado estacionario en esa segunda interacción prototipo. Al hacer clic en él y va a esa página, marca de verificación, igual que un botón de opción, activa y desactiva. Cuando termines, graba un video de ti interactuando con él. En un Mac recuerda que está aquí arriba, PC, está por ahí. Recuerda también que algunos de los lugares que puedes subirlo, especialmente las redes sociales, solo vuelcas el video ahí arriba y lo procesa y está bien. A menudo con las tareas y sus comentarios, es posible que tengas que subir este video que haces a algo como YouTube o Vimeo o Behance o algún otro alojamiento de video y simplemente compartir el enlace. Si lo intentas en el último video anterior y simplemente no pudiste por la vida que grabas un video, eso está bien. Simplemente toma una captura de pantalla y sube eso. Dos capturas de pantalla una encendida, otra apagada. Eso es todo mis amigos. Me encantaría ver lo que haces, compartido también en las redes sociales. Estamos empezando a llegar a alguna parte. Nos vemos en el siguiente video. 61. Cómo usar la cuadrícula de repetición en Adobe XD: Hola a todos. Este video te voy a mostrar probablemente la característica más emocionante de Adobe XD. Puedes hacer click en las cosas y seleccionar poco COD. Necesito que también sepas, imagínate si solo pudieras ir, mira eso, hay montones de ellos. Pero, ¿y si necesitáramos algunas imágenes? Mira, solo puedo arrastrar algunas imágenes y todas se actualizan. Puedo jugar con el espaciado y conseguir que todos separen el asombro en la rejilla de repetición. Déjame mostrarte cómo funciona en Adobe XD. Para empezar, página de detalles del producto, lo he hecho más largo y me he mudado fuera pequeño snack bar ahí abajo. Estoy construyendo todo este duro trabajo que hemos hecho y también podría deshacerme de la imagen y simplemente cambiarla por un relleno al igual que volver al cuadrado uno. Si yo estaba haciendo esto y hay múltiplos de estos, es realmente fácil usar la rejilla de repetición en esto. Voy a seleccionar todo lo que quiero ser parte de ella. A menudo le doy un meneo para asegurarme de que lo tengo todo y no tengo nada que no debería tener. Vas a tener que agruparlo, pero puedes hacer click en éste aquí, Repetir Grid [Risas] Eso es un nuevo científico para este curso por cierto. Todo lo que haces es arrastrarlo hacia abajo. Eres un maestro de rejilla de repetición, mira esto. Cosas que puedes hacer, vamos a conseguir algunas de ellas. Aquí vamos. Él estaría como, necesito esto para subir un poco, la brecha es demasiado grande. Mira este hover, hover, pasar el cursor, y simplemente no estoy haciendo nada, solo estoy haciendo clic, sosteniendo, y arrastrando. Puedes conseguir que se superponga, puedes hacer esto [Risas] Esto no es lo que quiero, pero voy a hacer que el mío esté bastante apretado ahí, tal vez incluso un poco así. Aquí vamos. Ahora, voy arriba y abajo porque tenemos eso, pero definitivamente puedes ir así también, no importa. Si estás haciendo la versión de escritorio, puedes ir a la izquierda, derecha, puedes subir y bajar. Sólo voy a bajar en este caso. Lo que lo hace fresco es que es continuamente ajustable. Una vez que hayas terminado con él, solo tienes que hacer clic en la espalda. Puedes decir, ¿puedes ver estas cosas por fuera y estos chiquititos? Estos no se van. Se quedan ahí para que más adelante puedas agregar más y más si es necesario. Ahora lo que hace que esto sea encantador es que puedas pasar, y ¿dónde está mi copia? Puedo añadir textos individuales para estas cosas. Agreguemos estos y agreguemos éste. Sólo estoy haciendo doble clic en ellos. Puedes editarlas y aún hay que encantador. Si hago clic fuera mientras hago doble clic en él, vaya dentro de miembro y nuestro modo de edición de objetos, hago clic fuera de hacer clic de nuevo en, y todavía tengo esto y significa que todavía puedo jugar con todo el espaciado, pesar de que son bastante individuales iguales con estas cajas aquí para imágenes. Ahora con las imágenes solo puedes arrastrar de una a la vez. Vamos a agarrar nuestros archivos de ejercicio, ahí están. Vamos a agarrar la imagen uno y simplemente arrastrarla. Entonces puedes ir a ti en esto. Yo quiero que éste sea ese. Asume todo lo que estás haciendo los suplentes. Eres como, no. Sólo voy a hacer cada individuo, hagámoslo. Vas ahí y solo sigues agregándolos a medida que avanza hasta cómo quieres hacerlo. A menudo lo que puedes hacer es, vamos a deshacer eso [RUIDO] Simplemente puedes agarrar, tengo cuatro de ellos ahí. Puedo agarrar cuatro de estos, agarrar hasta cuatro. Simplemente arrastra uno y asumirá que vas a hacer esta pequeña y encantadora rejilla de repetición. Es genial para ti. Puedes hacerlos individuales, pero puedes controlarlos a todos juntos. El espaciado es una cosa, lo que me parece útil es esto aquí tú decides que en realidad más adelante no estamos usando esa fuente. Vamos a usar, ¿tengo Trajan Pro? Otra fuente encantadora. puede ver que puedo ajustar estas cosas o tal vez sea solo del tamaño y en realidad esto necesita ser un poco más grande y puedo moverlo por ahí, o no es del todo apropiado, así que necesito hacerlo más pequeño. Tienes esto, digo, encantador mucho en la parrilla de repetición. Es una de las verdaderas grandes bondades de XD sobre los competidores. Puedes cambiar las fuentes, puedes cambiar los colores, puedes cambiar el espaciado todos juntos, pero algunos bits pueden ser individuales, como el texto real en él y las imágenes en él. También alrededor de las esquinas se puede ir, voy a tener cinco por favor y todos van y cambian. Aquí tienes. Habrá un punto que eres como, en realidad podrías simplemente parar con todos los topos de actualización que quieren destrozarlos porque voy a hacer algo más individual con ellos. Quiero barajarlas por separado. Lo que puedes hacer es que puedas hacer clic en él una vez, click, hacer click una vez. Por aquí hay una cuadrícula desagrupada y solo haces clic en eso y solo los rompe aparte en objetos individuales. ¿ Qué individuo? Aquí tienes. Puedo meterme en éste y decir realidad vas a ser una imagen alineada a la derecha sobre esto como si vayas ahí, vas ahí, y vas ahí. Quieres cambiar esto a una fuente específica diferente, aquí tienes. Puedes romperlos aparte. No puedes volver a pegarlos juntos una vez que se rompan, acabo de terminar ahí. Puedes escuchar mi teclado ruidoso tocando el comando Z o control Z en un PC para volver a unirlos. Genial para este tipo de cartas de cosas, cualquier cosa que se repita. Podría ser un elemento de lista, ver estos aquí. Podría ser una gran lista larga o puntos de bala, algo así. También lo usas para la navegación. Haremos nav más adelante en el video, pero barra de navegación por el costado aquí de un nav móvil donde dice casa y cuenta y eso. Haces uno y luego simplemente duplicarlos a lo largo. Otro caso de uso para el que lo uso son estos Moodboards, gran y feo moodboard. Lo que puedes hacer es simplemente ir rectángulo e ir algo de tamaño representativo sabio [Risas] y no tan grande. La última vez los arrastramos y estaban golpeando a la distancia a la derecha y eran bastante grandes. Lo que puedes hacer es hacer un moodboard esto un poco más, no lo sé, menos así. Yo puedo hacer esto. Obtener más o menos el número que necesito. Agarra mi moodboard donde estaba ese moodboard? Simplemente arroja todos estos adentro. Mira lo increíbles que vamos a ser, ¿estás listo? Mira lo impresionantes que somos y puedes controlar el espaciado como antes. [ Risas] Espaciado, podrías conseguir que se superpongan. Eso no está bien [Risas] solo sigue adelante con eso entonces ese es el final del video. Una rejilla de repetición, súper útil y útil para esto. Podrías encontrar que en realidad también se repite. Si yo puedo ver que ya no tengo suficiente sólo para que lo sepas. Tengo esto y puedes ver a este tipo repitiendo dos veces. Bueno, ahí está la primera y repite esto, así que realmente no necesito, ¿qué hice? [ Risas] Clic derecho aleatorio y lo bloqueé. Puedes cerrar cosas, ¿lo sabías? Puedes bloquearlo para que no se mueva. Ahí vas. No hice eso mucho en XD de todos modos, excepto por accidente. Me voy a ir, realmente no necesito éste. Aquí tienes. Este mi moodboard. Eso es todo por este video, te veré en el siguiente. 62. Proyecto de clase 12: repetición de la: Se puede decir desde el título del video, es otro proyecto de clase. Este de aquí es Repetir cuadrículas. Vamos a estar haciendo esta página de revisión. Bueno, no vamos a estar haciéndolo, tú sí. En tu documento de proyectos de clase, este es el Proyecto 12 aquí. Lo primero es que quiero que investigues la forma en que se ve una tarjeta de revisión. Apuesto a que no has hecho uno antes o tal vez lo has hecho. Pero solo ve a Google y escribe Revisar Card.Ui, o en Dribble o en Behance, de lo que quieras para inspirarte. Google, cambiamos a imágenes y agregamos la palabra UI al final para que la tarjeta de revisión pudiera ser demasiado amplia. Haz eso, consigue algunos ejemplos, toma algunas capturas de pantalla. Puedes tener un tablero de humor para tu tarjeta de opinión. Eso está bien. Quiero que creéis una nueva mesa de trabajo. Sé que está fuera del alcance de nuestro flujo de tareas, sólo se nos ha pedido que hagamos estas páginas completas, pero oye, esto es un curso. Podemos llegar a romper las reglas. [ RUIDO] Vamos a hacer una nueva revisión de código de mesa de trabajo, y quiero que construyas tu propia tarjeta de revisión [RUIDO] y luego la repitas [RUIDO] usando la Repetir Cuadrícula. Haz uno, repítalo, y luego voy a conseguir que experimentes con al menos dos plug-ins para poblar tu grupo. No uses los que estoy usando, no buenos. No te voy a mostrar cómo usarlos porque supongo que quiero que explores cómo funcionan los plug-ins. No todos son iguales y quiero que encuentres la frustración y luego la superes, y luegote encuentres la frustración y luego la superes, y luego das cuenta, está bien, plug-ins son todos hechos por varias personas y todos funcionan de manera diferente. Entonces los que terminé usando para este ejemplo en particular, puedes usar diferentes, terminé aprendiendo algunos que instalamos anteriormente, Faker XD e UI Faces. No soy como defensores de estos dos, han trabajado, fueron buenos, pero ahí hay mucho. Echa un vistazo a través de los plug-ins. Recuerda llegar a los plug-ins, está aquí abajo esta última opción y es posible que tengas que golpear “Plus” y abrirá tu app de Creative Cloud. Si necesitas buscar, puedes buscar por aquí y solo tienes que asegurarte de que XD esté marcado y yo voy a ir, no lo sé, cara [Risas] y puedes ver que hay un montón de diferentes . Echa un vistazo. [ RUIDO] En este caso, la interfaz de usuario se enfrenta a uno es bastante genial. Puedes hacer click sobre él y puedes escoger de la fuente. ¿ Recuerdas Unsplash y pixeles? Ahí vas. Son muy comunes. Esta persona no existe. [ Risas] Interesante. Es complicado pero no demasiado complicado. El truco es, con la mayoría de estos plug-ins, tienes que tener algo seleccionado primero. Al igual que si selecciono en este texto dice no soportado, mientras que hago click en esto y dice, hey, sé qué hacer, y es posible que te encuentres como en este caso, le pegas a “Seleccionar Fotos” y puedes escoger diferentes y hay mucho para ello. Sólo para explorarlo un poco, averiguarlo, tener una oportunidad con él. Pruebe uno distinto a éste. Este es bastante impresionante. Tiene muchos filtros diferentes y sólo gente feliz, y también diferentes características. Este en particular, reconoce que es Repetir Grid y pasa todo el camino y los llena a todos. Este otro, Faker, donde quería que se seleccionara este texto, éste es raro. Te voy a mostrar sólo una demo rápida de ésta porque, si eres nuevo en los plug-ins, todos funcionan de manera tan diferente. Este de aquí es un poco gracioso. Déjalo ahí, tengo mi texto seleccionado, puedes pasar por tanto. Se puede decir, está bien, tengo que conseguir una cita que necesito poner y se pueden poner en fechas y se las pondrá al azar ahí para ti. Pero éste de aquí no es tan aleatorio. Bueno, déjame mostrarte cómo funciona. Dije que quería que los exploraras, [Risas] pero entonces pensé en realidad este particular funciona de una manera extraña. Tengo esto. Voy a decir nombre. Hay uno que dice que todos generan nombres para mí y si hago doble clic en esto, estarías como, ¿qué pasa? En la parte superior aquí, ¿ puedes ver lo que hizo? Si hago clic en esto, solo agrega otra cadena variable, no estoy seguro. Pero tiene algún código en la parte superior aquí. [ RUIDO] Lo que voy a hacer es, quiero que sea nombre y luego un apellido, y lo pone en el orden equivocado, Mira esto, si pego “Generar”, ahora se pone ahí Cara Little. Ahí vas. Se lo pone al revés, así que puedo agarrar eso, cortarlo, [RUIDO] ponerlo arriba, y porque pongo una vuelta, ¿qué pasa? El regreso entra. Aquí arriba, puedes hacer esto más amplio solo para que lo sepas. Puedo borrar esto. ¿ Quiero un espacio ahí? un poco de espacio, generar. puede ver que es muy personalizable, lo cual es impresionante. Montserrat. [Risas] Oberbrunner. Aquí tienes. Oberbrunner? Este sin embargo, no va a pasar y hacer todo. Tienes que ir que no es un gran drama, pero al menos te da un material aleatorio, mientras que el otro plug-in automáticamente pasará y actualizará todos ellos. Te vendría bien esos dos. Quiero que explore algunos de los suyos, sólo para conseguir el cuelgue de ellos. Podrías ser como, hombre, eso es [Risas] no muy bueno. Es algo que necesitas explorar porque todos estos no están hechos por Adobe. No todos funcionan muy bien, y sus críticas pueden ser buenas y es terrible de usar, pero ve a explorarlo, descúbrelo. Puedes hacerlo por Loren ipsum, por los nombres. Para esto, es posible que tengas una parte diferente de tus críticas, podrías tener algo completamente diferente. Pero es divertido explorar esos plug-ins. Lo otro que quería mencionar es que en este caso, tengo hasta el final aquí. ¿ Se puede ver? En mi prototipo, si toco esto, ¿lo pueden ver? Bueno, no puedes ver, pero no puedo desplazarse hacia abajo. Lo que voy a hacer es, solo quiero reiterar, cubrimos antes en el curso pero creo que fue hace mucho tiempo. Voy a hacer esto más largo de lo que necesito. ¿ Recuerdas esta cosa? Mientras no movamos eso, cortará ahí y se desplazará hacia abajo aquí. Vamos a jugar. Ahora puedo desplazarse y tener muchas de estas diferentes. Recuerda que si termino moviendo esto, trata de exprimirlo todo en esa página, ya no se desplazará más y es un poco raro. Te voy a ir, voy a deshacer eso. Puedes arrastrarlo o puedes ajustarlo por aquí. ¿Dónde estaba yo? Creo que tal vez tenga que hacer clic en la página. Doy clic en la página, ahí va. Altura del mirador, eso es todo ahí. Podrías escribir el tamaño de tu teléfono, lo que significa que tan alto es. [ RUIDO] Lo último que hay que hacer es que quiero que creas un botón Comentarios en la página de inicio. [ RUIDO] En la página de inicio, solo el enlace a esta página, de lo contrario tiene una forma de llegar a ella y en la página de inicio he agregado una reseña falsa, más botón Comentarios que me permite y mi prototipo para saltar a esa página y desplazarse hacia arriba y hacia abajo. Debo añadir eso también. [ RUIDO] En realidad no tienes que tener el código aquí. Es posible que solo tengas un botón Comentarios. No tiene que ser un botón, puede ser texto. Depende de ti, solo alguna forma de vincular la página de inicio a la página de comentarios. Después ve a tomar una captura de pantalla, y subirla a las asignaciones del curso y también compártelo en redes sociales y etiquetarlo con el hashtag XD en las redes sociales, solo para que puedas echar un vistazo tú mismo para ver lo que otras personas hicieron por las críticas. Es interesante ver cómo se ve una tarjeta de revisión de diferentes personas, diferentes culturas, y su industria particular. Es nerdy, lo sé, pero ahora eres un nerd; eres un nerd de la interfaz de usuario, te interesa esto, así que es interesante ver qué hacen otras personas. ¿ Quién hubiera pensado que una tarjeta de revisión sería tan interesante? Eso es. Te veré en el siguiente video. 63. Actualización y problemas con las cuadrículas de repetición del borde: Hola a todos. En este video, te voy a mostrar cómo sumar a nuestra rejilla de repetición después de que lo hayas hecho, y también algunos de los temas que suceden cuando te gusta, oye quiero hacerlo más grande, pero todo es corte. ¿ Por qué está cortada? Quiero que se haga más grande. Eso es lo que te voy a mostrar a continuación en Adobe XD. El primero es fácil. Digamos que quiero sumar este pequeño número después de estas estrellas. Actualmente no está ahí ahora, así que lo que puedes hacer es ponerte en posición. No tiene que estar en el puesto. [ Risas] Pero voy a hacerlo. Voy a cortarlo. Se va a ir a editar, cortar. Voy a hacer doble clic para entrar. Simplemente tener algo seleccionado aquí, no importa cuál sea y luego solo pulsa “Pegar”. Entonces entra. Se puede ver, está en todos ellos. Así es como agregarle algo más. Voy a usar mi tecla de flecha solo para tocarla alrededor. Bueno, el problema que podrías encontrar es que quieres extender esto, el fondo blanco, haciéndolo más pequeño es más fácil, pero quiero hacerlo más grande. Si lo haces más grande y eres como, solo quiero hacerlo un poco más grande. Quiero moverlo por ahí. ¿ Puedes ver que está recortada del borde aquí? En realidad hacerlo color no ayudará. Pero te dan la idea. puede ver, Sepuede ver,se recorta de ese lado, si lo hago más grande en ese lado, está atascado en este tablero de rejilla de repetición aquí. Si lo extiendo, estoy como, está bien, voy a hacer clic en él. ¿ A dónde vamos? Haga clic en él una vez. Aquí está mi filo. Sólo voy a arrastrarlo más grande. Eres como, no es lo que yo quería. Lo que terminas haciendo y lo deshago antes de que lo arruinara. [ RUIDO] Realmente no importa si haces esto antes o después. Estirarlo antes o después. Lo voy a hacer después. Todo lo que necesitas hacer es hacerlo, el mío es largo, y podrás ver ese mango, ¿dónde está? En ella estar fuera, dale clic una vez. Ahí vas. Ahí está el mango. Si hago este mango más grande, solo necesitas estirar esto primero. Date un poco de espacio, luego haz esto más grande, y luego arrastra esto hacia atrás. Tal vez haga clic en “Off”, haga clic de nuevo en él, y te deshaces de eso otra vez. Te da un poco más de espacio. Me pasa mucho cuando voy de escritorio a móvil. Copia esto y voy a mi vista de escritorio y tengo más espacio, así que llego a hacer las cosas de un tamaño diferente. Sólo hazlo más grande. Date un hueco. Entonces extender eso hacia fuera. Entonces podemos extender eso y luego volver a aquí y encogerlo de nuevo. Ahí vas. Actualizando y también algunas pequeñas actualizaciones, bueno, fijando el borde, si es necesario hacerlo más grande. A veces sin embargo, en lugar de hacer nada de eso, a veces tratar de ajustar esta cosa después puede ser bastante complicado dependiendo de lo que tengas. A veces selecciónalo y vete, desagrupa la cuadrícula y solo vete, todos se han ido, y empiezan de nuevo, y solo empieza a repetir la cuadrícula con el nuevo tamaño y estás fuera de nuevo. Vas a tener que actualizar estas cosas, pero a veces simplemente desagruparlo y empezar de nuevo podría ser más fácil. Eso es todo por el video, amigo mío, te veré en el siguiente. 64. Cómo usar las pilas en XD: Agarra a tus sombreros gente, es la segunda característica más emocionante Adobe XD llamada pilas. ¿ Qué hacen? Mira esto. El nombre en la tarjeta tiene que ir a continuación y nuestro correo electrónico tiene que ser el top. Mira esto. Voy a conseguir que se barajen. Puedo jugar con este espaciado de todos ellos o solo uno. Se pone mejor. Mira esto. Tengo estas tarjetas, puedo ir así. Necesito barajarlas porque el cliente sigue cambiando de opinión. Mira eso, aún mejor. Hagamos este menú en la parte superior aquí. Tienes que estar por aquí ahora. En realidad, la búsqueda, vamos, Dan, tiene que estar por encima de ese lado derecho. Míralos a todos barajando, todos automáticos. Es una de esas preciosas herramientas métricas en Adobe XD. Vamos a saltar y te mostraré cómo funcionan. En primer lugar, necesitamos algo que apilar. Ustedes esperen ahí. Estás de vuelta, hice algunas cosas. Esta es una forma y es posible que hayas visto en la versión de velocidad, lo hice con la Repetir Grid porque es mucho repetir. Para usar pilas, en este caso, vamos a desagruparlo. Repetir Grid fue genial para crearla, pero para las pilas, no pueden ser así o no pueden ser una Repetir Cuadrícula. Estas son todas las unidades que justo lo que Repetir Grid hizo por mí. Pero si no lo estás, tienen que estar en grupos. Eso es lo que las pilas saben cómo ajustar. Ves estos, no en grupos. Entonces lo que quiero hacer es seleccionar esto y agruparlo, y agrupar algo es el Comando G o Ctrl+G. éste de aquí también es simple, por lo que no necesita ser agrupado. Se puede ver que lo reutilicé desde mis activos. Tengo que usar mis estilos de personaje. Mírame, todo elegante. Ahora lo que tenemos que hacer es simplemente seleccionarlos todos. Por aquí, decimos que eres una pila. ¿ Dónde está? No será así. [ Risas] Entonces estas cosas necesitan ser agrupadas, pero todo tiene que ser un grupo también, como un grupo universal. Grupos individuales, genial. Voy a agruparlo de nuevo. Usaremos el largo camino. Usa esto para agruparlo. Se puede ver en mi panel de capas, ahí está ahí. Este mi grupo. Yo lo llamo Formulario porque no lo sé, seamos elegantes. Tengo mi formulario. Ahora puedo hacer una pila. ¿ Dónde está? Ahí está. Enciéndalo. Debe por defecto a la correcta, ya sea pila vertical o se mantiene en una pila. Listo, vamos a hacer click dentro de ella. Ahora, mira, mira, mira, mira eso, ¿el nombre va primero? ¿ No va primero otro? ¿ Esto va primero? Tan bueno. Puedes reponer y puedes hacerlas horizontalmente también, o yo lo desharé. Puedes mantener presionada Shift mientras lo arrastra y lo moverá hacia arriba y hacia abajo. Mira eso, podrías decidir que eso va primero o esto va primero. ¿ Qué va primero? Correo electrónico. Hagamos eso. Hagamos eso. Si necesitas agregar otro, necesitas el, no sé, el mes. Simplemente puedes seleccionar uno de ellos e ir copiar-pegar, tienes otro. puede ver que lo golpea hacia abajo, que es lo realmente genial. Para que te vayas así. Se podría decir caducidad. [ Risas] Así es lo malo que soy un hechista. No lo sé, simplemente no entra. De todos modos. Se puede ver también y hace un llamado a todos estos. Cielos, necesitan ser los mismos entonces , deletrearlo correctamente. [ Risas] Las copias y las pegas, las agregas, y las empujas hacia fuera. Puedes eliminar uno. Podrías decidir que en realidad has vuelto y ya no necesito éste, así que haz doble clic en él para entrar. Haga clic en él, elimínelo, y todos se mueven hacia arriba y hacia abajo. Todavía puedes trabajar con ellos individualmente porque estas ya no son Repetir Cuadrículas. Para que pueda agarrar éste y hacer doble clic en él. He terminado haciendo clic en él una vez, solo haz clic en toda la pila. Haciendo doble clic en él para ir dentro de este grupo. Quiero volver a ir dentro del grupo, doble clic de nuevo. Se puede hacer un poco de eso y sucede un poco. Voy a hacer éste y voy a agarrar esa unidad, doble clic en ella para entrar, copiar y pegar. Mira eso, ¿y qué es? CVV. ¿Es CVV? Es uno de esos. No es que sea un CVC. [ Risas] Uno de esos. Sí. Así es como haces una pila. Agrupas las cosas que quieres ser barajadas y luego todo el lote tiene que estar en grupo, entonces solo tienes que hacer clic en “Stack” aquí. Puedes ajustar el espaciado. Mira esto. Puedes hacer click en él una vez, todo, hacer doble clic en él y pasarás el cursor entre tus grupos y mira eso, todos vienen. Puedes hacerlas individualmente así con solo pasar el puntero por encima de ellos. Voy a deshacer. Puedes deshacer por completo. Tú sostienes algo, estoy adivinando Shift. Supongo que está bien, yay. Entonces mantén pulsado Shift, y todos se moverán. Podrías decidir que eso es perfecto. Esa de ahí, esa de ahí. Como digo, las pilas son súper útiles. Otra cosa que puedes hacer es que puedas apretar las cosas. Entonces hemos copiado y pegado, ¿verdad? Si quiero otro de estos, solo lo selecciono, copiar-pegar. Pero digamos que vas a la herramienta rectángulo y quieres agregar algo, no estoy seguro de qué es. Digamos que tiene que ser una cosa de la imagen de subida. Vas a ver que solo estoy usando mi herramienta rectángulo. Si solo lo arrastro hacia arriba, solo hace un pequeño regalo para sí mismo, haciendo un rectángulo ahí dentro sin razón. Lo mismo con la herramienta de tipo. Agarra la herramienta de tipo y ve, en realidad, quiero poner tipo ahí, y ahora puedo escribir. Mi tipo pasa a ser blanco. [ Risas] No es útil. Pero se obtiene la idea, son bastante resilientes. Voy a deshacer para deshacerme de esos. Pero hay momentos en los que en realidad eres como, en realidad, ya no quiero que sea una pila. Quiero mover estos por aquí porque si trato de hacerlo, sólo va [RUIDO]. Voy a deshacer eso. desapilar solo apagando esta pequeña garrapata. Así que lo tengo seleccionado. Apaga esto. Todavía está en un grupo, lo cual está bien. Puedes hacer clic con el botón derecho y desagruparlo en algún lugar, si es necesario. Ahora todo es pedacitos. Pero lo que voy a hacer es que te voy a mostrar una cosa genial. Dije resiliente antes, es sólo realmente robusto es probablemente la palabra que quiero. Es una pila, voy a desapilar . No, eso es relleno. [ Risas] Ya lo he desapilado. Voy a ir dentro del grupo. Estoy dentro de forma y lo voy a mover por aquí porque eso es lo que quería, y luego salir de ella. Vuelva a seleccionarlo. Recuerda, tiene que ser un grupo. Simplemente puedo volver a encender la pila y pasa algo mágico donde agrupa esta línea. ¿ Se puede ver éste en la parte superior? Ese, ese, éste. Ahora puedo moverme a través de todo esto. Simplemente, no lo sé, es bastante guay. De alguna manera sabía que estaba en el mismo plano horizontal y funcionaba. Si sostengo Shift, agárralos a todos igual. Puedes teclearlo por aquí. Si haces doble clic hasta que veas las cosas rosadas, puedes hacer click en ese pequeño hueco rosa. Puedes ver aquí puedes empezar a jugar con ella en la parte superior y abajo, si quieres que sea todo muy exacto. Estás usando una cuadrícula de ocho píxeles, o 16 píxeles superior e inferior, u ocho en la parte superior y 16 en la parte inferior, puedes ser muy específico y realmente decirle qué hacer. Lo último es que, es por aquí, tenemos nuestro grupo de formularios. Vamos a nombrar todos estos. Este primero aquí se puede ver que se llama correo electrónico. Haga doble clic en el nombre y llámalo Correo electrónico. Recuerda si no puedes, si vuelvo fuera de esto, [Risas] no es lo que quería. Haga click en este nombre, vaya al Comando 3 para verlo todo, haga click en esto. Tengo los nombres de capa, y lo que quería mostrarte era escribir éste, Email, luego escribiremos el siguiente, y puedes hacer doble clic en esa y escribir Nombre. Un pequeño atajo, no es la palabra Nombre, el atajo es pestaña. Entonces sigue parpadeando, abatible para que no tenga que quitarme las manos del teclado. ¿ Es eso un atajo divertido? Es para mí de todos modos. Esa es la caducidad y CVC o CVV, sea lo que sea. Ahí vas. Puedes agacharte para cambiar el nombre de las cosas a mano cuando estás a punto de entregar tu trabajo a alguien y querías parecer que no eres una persona loca con como un billón de capas sin nombre como yo. Grupo 32, [Risas] esa no es una buena señal. Ésas son las pilas. En realidad, quiero mostrarte un par de otros ejemplos. Aquí está este sitio web y tiene una navegación en la parte superior. Lo que voy a hacer es que voy a hacer clic en ambos. Sólo estoy sosteniendo Shift, haciendo clic en el primero y luego el segundo. Voy a agruparlos para que estos tipos se muevan juntos. Estos dos últimos ya están agrupados. Lo que puedo hacer es que voy a decir, quiero cambiarte, tú, tú, tú, tú, y tú, puedes convertirte en una pila. ¿ Por qué no está aquí como una pila? Ya sabes que todo el asunto necesita ser agrupado, Comando G o Ctrl+G. Se puede ver en este caso, solo de alguna manera XD es magia y sabe si quieres una pila horizontal o vertical. Genial. Entonces puedes decir que entras en ella, haz doble clic en él, y decir que vas ahí. puede ver lo útil que es para este tipo de cosas, estas navegaciones. Se puede decir en realidad esto necesita ser primero, COVID info va a ir allí. Mueve la barra de búsqueda va aquí. Hagamos lo mismo aquí. Tengo esta página de eventos móviles y sólo voy a asegurarme de eso. No tienen que agruparse, estos dos bits. Puedes, para hacer las cosas un poco fáciles, no tienes que serlo. Esta cosa aquí lo haré. Bueno, veamos qué hacen las pilas. Veamos si cuánto, qué inteligente es porque es bastante complejo. Voy a agarrar todo esto, no necesito el nav superior, y alejar aún más. Agarralo todo. Hagámoslo. Digamos que sea una pila. No será una pila hasta que lo agrupemos. Entonces decimos que sea una pila y se asumió arriba y abajo o vertical, y vamos a darle una oportunidad. Así que haz doble clic en él para entrar. Te vas a decir, puedo Shift+Click ambos y decir en realidad, vas ahí. Mira eso. Si mantiene presionada Shift mientras lo arrastra, irá directamente hacia abajo. Mira eso, se apilará y por encima de él. Ahí vas. Vamos a tratar de conseguir este por debajo de esto. Oh, es demasiado bueno. Buen trabajo, XD. Este trozo inferior es demasiado de una unidad entera. Así que está terminando debajo de esto. Lo único que podría tener que hacer es, este era un gran grupo de unidades de antemano, podría tener que separar eso antes de hacer mi pila. Así que dale una prueba. Tira la pila a ella, mira si hace lo que quieres, y luego deshacerlo y tal vez tengas que hacer alguna agrupación de fantasía de antemano. El último, una pila de escopetas aquí lista. Tengo todos estos bits individuales. El cliente va a hacerme moverlos. Voy a agruparlos juntos, hacerla una pila, doble clic en ella y decir que uno está por ahí, que uno está ahí, y luego uno tiene que ir allí. Mantén pulsada Shift mientras los arrastra, gente. [ Risas] De lo contrario, terminan en todo tipo de lugares. Entonces mira, afuera, haz clic, apilar, manos fuera, listo. Bien hecho, XD. Eso es tan bueno. Me encantan las pilas. Eso es todo. Te veré en el siguiente video. 65. Proyecto de clase 13: pilas y la página de pago: Hola, ahora es tiempo de proyecto de clase. Éste, voy a conseguir que construyas tu página de checkout. Quiero que ambos investiguen cómo una página de checkout y un formulario de tarjeta de crédito ven una página de checkout y un formulario de tarjeta de crédito, las diferentes opciones. Sólo hay diferentes formas de hacerlo. Tú decides por tu perfil de usuario cuál podría ser mejor. Pondré toda la mía en una página que está asumiendo algún nivel de igual que es más difícil de hacer y todo está volcado en una página. Podrías decidir separarlo en tres páginas de pago. Es posible que haya decidido una nueva cantidad, recoger el envío en los detalles de la tarjeta de crédito y luego comprar. Es posible que tengas tres páginas de pago diferentes. Eso depende totalmente de ti. Pero echa un poco de mirada. Echa un vistazo a las páginas de pago para ejemplo móvil y solo un poco de exploración para decidir cómo quieres que luzca la tuya. El otro motivo es que quiero que explores pilas. Incluso si lo tienes todo dispuesto a jugar perfectamente con pilas solo para que te pongas una idea de lo que hacen, lo que los rompe, lo que los hace funcionar. Es genial para cosas como estas listas. Esto es cuando se pone realmente agradable con eso. Echemos un vistazo rápido. Páginas de investigación, tarjeta de crédito y pago. Simplemente pasa cinco minutos echando un vistazo a su alrededor, invente una idea de lo que quiere el tuyo también, y luego completa tu formulario en tu página de pago. Asegúrate de experimentar con pilas, crear un botón de compra y enlazarlo a la página de confirmación. Mi prototipo aquí, si vas ahí y vas abajo y compras, va a la página de confirmación. Haz eso y envíame una captura de pantalla, súbela a los lugares habituales, y eso es todo. Te veré en el siguiente video. 66. La diferencia entre la animación y las microinteracciones: Hola a todos. En este video vamos a hablar de la diferencia entre animación y microinteracciones. Son bastante similares. Son diferentes los mismos en la forma en que los creas. Está justo alrededor de su propósito y el término microinteracciones, no lo sé. Si conoces UX, probablemente conozcas el término. Para aquellos de ustedes que son nuevos en UX, que probablemente sean muchas de las personas que ven este video, probablemente nunca hayan oído hablar del término. Describiremos rápidamente las diferencias entre la animación y las microinteracciones. Lo que estás mirando en la pantalla ahora, aquí es básicamente todas las animaciones. Están ahí para deleitar al visitante a tu sitio web, tal vez para comunicar una idea más plenamente. Podría ser un poco de animación tipo diagrama de información, algo que no se puede comunicar con una sola imagen, podría decidir animarla. La diferencia entre microinteracción y animación es que las microinteracciones son, veamos un ejemplo. Estas pequeñas animaciones de estilo de notificación de interfaz de usuario. Estos [risas] en la pantalla yendo al mismo tiempo, es un poco distraer a otro. Una Microinteracción generalmente se realiza como respuesta a la entrada del usuario. Eso significa que cuando haces clic en el corazon, rebota hacia arriba y hacia abajo para hacerte saber que has hecho algo. ¿ Alguna vez has hecho clic en algo y no hace lo suficiente y sigues haciendo clic en él? Es como tu cámara digital en tu teléfono, hace el raro ruido de clics. No necesita [Risas] un ruido de clics raro, pero nosotros, los humanos tontos necesitamos ese pequeño clic para saber que algo ha sucedido [Risas] para que podamos continuar con nuestro día. Es lo mismo con la microinteracción. Ahora las líneas se ponen un poco borrosas entre animaciones y microinteracciones. Éste de aquí, yo diría que no una microinteracción, más sólo una animación. Sólo te está mostrando cosas. Es genial ahí, se ve bien, pero en realidad no es comunicar nada. Algo como esto es. Es una pequeña animación. Pero si estaba haciendo clic en esto, haciendo clic en él, es una forma de mostrarme que puedo usar el mismo inmueble en mi página. En lugar de tener dos botones, más, y menos, esta cosa puede transitar y esta pequeña animación me ayuda. Cosas que se mueven, atraen los ojos, y ayuda a ir así, esta y aquella cosa ahí. Es sólo pequeño. Es sólo un poco extra. Es una microinteracciones. Echemos un vistazo a algunos otros. Animación. Esta es mi humilde opinión también. No soy el jefe de lo que es una microinteracción [Risas]. Se te permite no estar de acuerdo, pero solo te estoy dando mi opinión. Esta es buena. Si hace clic en el botón de búsqueda y se abre, entonces puede hacer clic en él para cerrarlo. Es agradable definitivamente, pequeña interacción agradable, pero en realidad ayuda a comunicar lo que está pasando, que en realidad has hecho algo. Echemos un vistazo a algunos otros. Quiero estos sitios. Este se llama lottiefiles.com. Es útil para animaciones que están en línea. No vamos a cubrir demasiada más información al respecto. Lo mismo con éste, se llama codemyui.com, y esto está bajo la etiqueta llamada microinteracciones. Ahora, cada vez que sugiero un sitio en mis cursos, es como el caso de la muerte. [ Risas] Te apuesto esto, no estaría aquí cuando vengas, así que estos son solo ejemplos sitios. Si tengo un vistazo aquí, ¿ ves esto aquí? Eso no es una microinteracción aunque esté etiquetada ésta, es solo animación. En realidad, es un juego. Echemos un vistazo, algunas buenas microinteracciones. Esta de aquí es una bonita. Si alguna vez has hecho esa cosa en tu iPhone cuando estás tratando conseguir la huella digital para hacer las cosas de seguridad, ese pequeño material de línea ondulado es suficiente para saber que estás haciendo algo. Porque de lo contrario si solo dice hazlo y muévete, no sabes si estás como, “¿me estoy acercando o está funcionando?” Esas pequeñas líneas alrededor del pulgar no hacen nada. El ordenador no va, “Oh mira, veo una línea”. Es sólo un poco de animación para ayudarnos como humanos saben que has tomado una foto, puedes escuchar el click. Otros. Nota, esto es divertido pero una animación. No ayuda. Está ahí para ser impresionante, no para comunicar retroalimentación. Generalmente, una microinteracción es la retroalimentación de la interfaz de usuario. Echemos un vistazo y eso es transición de página. Este de aquí, no lo sé. Se ponen un poco borrosas. A veces estás esperando, así que eso es bueno. Esa pequeña pantalla de carga y ese pequeño confeti [Risas] al final. Voy a meter eso en las microinteracciones, pero está un poco en la frontera. Veamos una página más. Los anuncios te seguirán por todas partes en este sitio. Puedes decir lo que he estado comprando últimamente. [ Risas] Diseñadores UX/coche wirra necesitando bits. Echemos un vistazo. Animación. Un poco de ambos. Tengo micro-interacción. Veamos. Esta es una buena. Mira esto. Cuídalo. Verde, todo significa que lo has completado. Veamos la siguiente. Tiene una buena. Se pone rojo. Cuídalo. ¿ Puedes ver que sacude? Significa que no. No es decir nada, solo es comunicarte visualmente el no a ti. Entiendes la idea. ¿ Algún otro? Animación. Eso es genial. Aquí vamos, microinteracción, útil. Eso va a ser, lo prometo. ¿ Alguna última? [Risas] Un último lugar es, solo ve a algo como Dribbble o Behance y escribe en microinteracción y encontrarás, nuevo, una mezcla de ambos. Pero este de aquí es bueno siempre y cuando estés usando dólares americanos. Había uno. No voy a pasar por todos ellos. Entiendes la idea. Mira. Descargando y algo está pasando. Esa pequeña línea, pequeñas microinteracciones. El último, promesa. Poco cargamento, nubes volando por el lado de la microinteracción, en mi opinión. Eso, amigos míos, es una pequeña introducción a las microinteracciones. Vamos a hacer uno en el siguiente video. 67. Lo dibujo de Dan en Adobe XD: Hola a todos. Bienvenido al video más aburrido que he hecho. Pensé hacer este video cuando lo estaba reproduciendo, estaba como, sí, voy a hacer un video donde voy a dibujar estas cosas y tiene que ser dibujado en lugar de simplemente saltarse a que se dibuje. Pensé que lo haría y podrías venir para el paseo y ser súper interesante. No lo fue, pero todavía está aquí [Risas] así que puedes saltarte porque nada realmente emocionante pasa excepto algo muy promedio, mirando la caja de ícono de camión. ¿ Adivina qué es eso? Espero que pienses que es una caja porque mientras tanto, necesito que decidas cómo hacer un paquete como icono, pero de todos modos, voy a dibujar estos, voy a cubrir básicamente cosas que he cubierto ya en el curso, fue hace un tiempo desde que hicimos algún dibujo así que los vamos a tirar todos aquí, vas a verme hacer estas cosas feas y eso es todo, nada más sólo va para ser aterrizado en la página. Pero sí, los animaremos en el siguiente video. Ahí vas, disfrutas o saltas adelante, no me importa. Comienza el dibujo. Ahora podría estar tentado a empezar a dibujar por aquí en la tabla de pasta. El problema con hacerlo por aquí es que vas a escala de referencia y terminas dibujándolo realmente grande o demasiado pequeño y luego tener que escalarlo, pero terminas con casas de aspecto prodigioso [Risas] porque hay que redimensionarlo y recoger nuevas fronteras y alinear las cosas. Lo mejor es simplemente dibujar en tu tablero de arte real que va, por lo que obtendrás algunas comparaciones. Con este tablero de arte aunque hay mucho en él, y no quiero moverlo, porque todo es solo piezas. Puedes seleccionar todo en el tablero de arte, hacer clic con el botón derecho y decir bloquearlo, solo para que no se pueda mover. Puedes seleccionar todo el asunto, en realidad, seleccionarlo, todo, hacer clic derecho en él y decir desbloquear también , o simplemente podemos ocultarlo. Depende de ti. Voy a dibujar esto. Empezamos con una herramienta de rectángulo, y voy a sacar algo, mi proceso fue, solo para que lo sepas, fui y busqué en buscó ícono de camión, e ícono de paquete y acabo de terminar mirando cosas que me gustan y algunas de ellas están cerca y algunas de ellas no estaban y acabaron con un poco de malla arriba. Sí. Voy a escoger un color de relleno, no voy a tener trazo, alrededor de las esquinas, algunos de ellos aguantan opción o Alt en un PC, sacar la esquina inferior. Ahora Pin a para la cabina. Sólo voy a dibujar con líneas rectas. Déjame hacerlo como un pequeño recorte para la ventana. Si no se alinea, sí, se alineó muy bien. Voy a agarrar la herramienta Selección, que es la clave V. Vamos a hacer doble clic en él primero. Todo lo que intentamos ir a Illustrator para hacer esto, probablemente no para decir que sabes algo así como iconos y cosas para las que Xd es perfecto. Vamos a darle un relleno a esto. En realidad no, no estoy seguro de lo que iba a decir ahí. [ Risas] Si vas a hacer cosas como golpes, puedes ver cosas que se alinean? Tienes que recordar que lo hicimos antes en el curso, había una forma de decir B, déjame hacerlo más grande para que puedas ver. Medio tutorial, medio mírame hacerlo. Puedes ver que puedes ponerlo por dentro, podría haber momentos en los que eso sea necesario, no lo necesites en mi caso. Tengo que dibujar unas ruedas. Pensé que esto podría ser interesante pero [Risas] no es, agradecido. Sí. [Risas] Realmente no pensé que esto sería duro, no es bueno para la gente. [ Risas] Definitivamente no lo es. Muy bien, así que esa va a ser mi camioneta. Dibujemos la caja. Voy a conseguir que caiga en esa cosa. La cosa es con esto, cuando buscaba iconos de cajas, todas son tridimensionales y no funcionan con mi pequeño camión unidimensional, así que tuve que tratar de encontrar una manera de evitar eso. En primer lugar, algún tipo de trazo y quiero bordes redondeados, vamos frontera por todas partes, tres. Ahora puedes ver los bordes redondeados no están funcionando, eres como, uh, ¿por qué no está haciendo esquinas más redondeadas? Tiene las esquinas redondeadas, tres no es mucho, pero también se puede ver que todo está tratando de agarrarlo por dentro, así que cuando llega al interior, se gana siendo afilado. Lo que quiero decir con eso es, afuera más pronunciado en el medio. No sé lo que buscaba, algo así. Tenemos que tener cinta. Para la herramienta rectángulo, démosle un relleno de eso, dos de esos por favor, ¿ eso parece cinta? Dos de esos por favor, mantenga Shift, seleccione todos esos, vaya en el medio, empiece a hablar Dan [inaudible]. Tú [Risas] consigues una pequeña flecha para que así sea lo único para que parezca una caja, es si tienes un poco de esta manera arriba Arrow, no iba a dibujar el cristal destrozado, cosa frágil, pero estoy usando la herramienta Pin, hacer una pequeña flecha en la parte superior, voy a avivar en la parte inferior. Voy a jugar con, asegúrate de obtener el color correcto, asegúrate de obtener el tamaño correcto. Esta es mi flecha arriba, algo apropiado. Quiero que tengan los pequeños extremos blobby y voy a agruparlo y quiero dos de ellos, entonces voy a decir que vaya con ahí. ¿ Eso parece una caja ahora o como una caja? Selecciona ambos, mantén pulsada Shift de lo contrario hacen algunas cosas raras. Hold Shift, acariciarlos, aquí tienes. Mira estos pequeños puntos en la parte superior aquí, voy a desagruparlos, así que tengo la frontera seleccionada y en lugar del pequeño borde ingletado, voy a dar la vuelta con eso todo redondeo. Muy bien, voy a seleccionarlo todo, voy a agruparlo, voy a darle un nombre, voy a llamar a éste Box. Este de aquí va a ser mi camioneta. ¿Me gusta el camión? [ Risas] Realmente no lo hago. Haga doble clic en él para entrar. Voy a eliminar ese punto de anclaje, solo seleccionándolo y eliminándolo y voy a hacer una ventana más grande. Ya no quiero el techo inclinado, quiero camión Mack. Ahí vamos. Muy bien. Eso es suficiente. No eres camión, así que voy a seleccionarlo todo, agruparlo, controlar G, e ir camión. Que mi amigo, ese apasionante episodio [Risas] fui yo dibujando una caja y todo camión cuestionable. Muy bien, vamos a animarlo en el siguiente video. 68. Más animación en Adobe XD: Hola a todos. Es hora de hacer alguna animación. Ya hemos hecho animación antes. Acabamos de hacer uno realmente básico al principio del curso. Quería presentarlo entonces, pero ahora tenemos muchas habilidades de dibujo y otras habilidades, habilidades de hackeo de computación. Queremos ahora tomar eso y tomar lo que aprendimos en la animación y simplemente hacer algo un poco más complejo o al menos más bonito. Voy a ir y comprar ahora botón, compré listo. Esto es lo que vamos a hacer. Míralos entrar, míralo rebotando. Hace un poco de wheelie y se va. Vamos a construir esto juntos usando muchas de las técnicas que ya conocemos. Lo sé, prometí que vamos a hacer micro-interacciones en [Risas] uno de los videos anteriores. No lo estamos, sólo estamos haciendo animación completa en este momento para poner en marcha nuestras habilidades. Entonces siento que es mejor hacer eso luego meterme en las micro-interacciones en los próximos videos de platillos. [ Risas] Eso es. Empecemos con nuestro dulce camión una vez más. Vámonos. Empecemos a animar. Primer paso, voy a seleccionar todo porque partes de ella estaban cerradas. Voy a hacer clic derecho en ella. Extrañamente no puedes desbloquearlo. Puedes bloquear en absoluto y luego hacer clic derecho y desbloquearlo para que funcione. O si deshago, se puede ver aquí, deshacer eso. Se puede ver que un montón de ellos están encerrados. [ RUIDO] Estoy en mi panel de capas, hasta ti. Lo que quiero hacer es deshacerme de eso. No puedo vivir con el mapa. Puedes quedarte con el mapa. Puede que te guste el mapa, pero me parece demasiado distraente para éste. Sólo voy a hacer algo como esto. Estoy en modo prototipo, debería estar en modo de diseño. Aquí vamos. Buena práctica para la animación es que voy a tener suficiente espacio porque viste al principio arranca de pantalla, así que necesito un poco de espacio aquí. Estoy sosteniendo turno para que este tablero de arte se mueva a través. Voy a duplicar este tablero de arte manteniendo presionada la tecla de opción y arrastrando o tecla Alt en un PC, copiar pegar. Te da otro. El gran problema con la animación, y medio me olvido cada vez que lo estoy haciendo, es que estoy como, por aquí quería arrancar pantalla y luego pasar por aquí. Pero no va a funcionar porque ha terminado en esta pasta masiva. No importa lo que haga ahora ya no se animará a través porque ya no sabe que está en este tablero de arte. El truco con animación es, en primer lugar, de grupo, todo esto va a funcionar a la misma velocidad exacta, no separada. Estas cosas son objetos separados. Van a animar este que estoy tratando de decir. Les he nombrado camión y caja y los he agrupado. Esa es una buena práctica y el nombre igual por aquí. El truco para hacer cualquier cosa es agregar primero la animación o al menos la transición. Si tengo un prototipo. ¿ Incluso importa lo que añada? No te importa lo que haya por aquí. Simplemente significa ahora cuando arrastro esto fuera y diseño de vista o modo prototipo, ¿todavía puedes ver? [ Risas] Eso no funcionó. Modo prototipo, está conectado por aquí. No necesito dos de ellos. ¿ Por qué no trabajas? Dame un segundo. Estoy de vuelta. Se puede ver el tiempo ahí arriba probablemente. [ Risas] [inaudible]. Fue un buen minuto o así me voy, he recordado cómo hacerlo. No puedo recordar. Voy a deshacer. pasa a lo mejor de nosotros. Lo resolví. Lo que pasa es que tienes que agregar tu animación, pero tiene que ser auto animate si solo está en transición. Puedo arrastrarlo fuera de reloj. Mira, va a la placa base. Pero si agrego mi animación, así prototipo y mi animación. Pero esa animación pasa a ser auto animada entonces bloquea a esos chicos y puedes verlos y arrastrarlos fuera. No se va a la tabla de pasta ahora todavía está en la confirmación HIFI. Todos aprendimos algo. Voy a arrancarlas fuera de pantalla. Él va a terminar ahí en el medio. Vamos a darle una vista previa. Haga clic en el encabezado aquí. Vista previa. El tuyo podría no hacer exactamente lo mismo. Mindset a, podría ser tap. El tuyo está listo para. Quiero el mío después de algún tiempo y quiero que sea capaz cero tiempo para luego animar automáticamente a este otro destino. Puedes decidir que quieres relajarte. facilidad fuera es probablemente la más bonita y ésta. Va a ir más rápido al principio e ir despacio al salir. Voy a meterme con esto. Voy a hacer un segundo. Echemos un poco de mirada. Hay mucho jugando con la flexibilización y simplemente ir. Ahí vas. Siento que lo es, me siento bien. [ Risas] Ahora éste va a caer en el camión. Bueno, te mostraré otro truco es que voy a eliminar este de aquí. Voy a ir a mi vista de diseño. Quiero que acabe aquí. Ahí vamos, ahí. Voy a copiarlo y luego ir por aquí. Se llama caja. Sobre éste, voy a pegarlo se remonta en exactamente el mismo lugar, lo cual es genial. Todavía se va caja que va a funcionar y voy a moverla hacia arriba sosteniendo Turno. Eso es lo que quiero hacer. En realidad, eso no es lo que quiero hacer. Lo que quiero hacer es sacarlo de este primero. Yo quería ser una progresión. Lo que no quiero pasar es todo pase al mismo tiempo porque mira esto, van a usar la misma flexibilización que es, mira eso. Funciona. Pero voy a terminar haciéndolos en una progresión. Lo que quiero hacer es decir no en éste. No hagas eso, solo menos que fuera. Ponte en el hábito de eso. Duplicemos este. Asegúrate de que bajo prototipo, tenga alguna conexión recordando qué, es lo que animé. No te olvides de eso. Lo que quiero es en éste, quería estar despierto. Entonces esta cosa aquí quiero que sea, echemos un vistazo, rebote finalmente. Es tiempo de rebote, todo el mundo podría realmente trabajar. Vamos a darle una oportunidad. Vuelve aquí, haz clic en “Jugar”. Lo hizo. ¿Hay una pausa en este? El retardo de tiempo es de 0 segundos. Bounce solo toma un poco de tiempo para subirse a él es feliz camino. Aunque fue bastante bueno. Estoy feliz conmigo mismo. [ Risas] Ahora vamos a conseguir el camión se mueva. Duplicarlo. Ponte en el hábito de ir a Prototype Member. Compruébalo doble que sea auto animate porque quiero que se apague de pantalla y mi uno va a volver al modo de diseño. Se va a hacer un poco de wheelie. Ambas máscaras, voy a llevarlas a ambas [Risas] y a pegarme. Ojalá no termine en la tabla de pasta. Aparte de la flexibilización vamos a echar un vistazo. Se rebota. [ Risas] No se ve bien. Parece que tiene un poco de choque. Vamos a darle una oportunidad. Cae en. [Risas] Jefes de todos. Sólo voy a usar el prototipo. Éste, voy a ir en lugar de rebotar, windup es bastante bueno, como usa la anticipación que todo se mueva hacia atrás antes de que siga adelante. Vamos a darle una vista previa. Observando. Agradable y un poco de retraso entre estos dos. Tú después de cero segundos, voy a tener tal vez 1.5 segundos. Otro preestreno. Demasiado largo. Tal vez solo medio segundo pausa, 0.5 segundos. La otra cosa es esa caja. Quiero que se inicie aquí bajo modo diseño, me gustaría que fuera opacidad cero por lo que aparece de la nada. A lo mejor vamos a conseguir que se caiga por detrás de esto. ¿Estás listo? ¿ Se puede ver que viene abajo con mucha más fuerza? Eso es interesante porque lo que termina pasando es entre éste y éste, es un modo prototipo entre, le estoy dando un segundo para el rebote. Cuanto más lejos tiene que moverse, mira esto aquí arriba. Todavía tengo un segundo para llegar hasta aquí abajo. Va a ir mucho más rápido, tiene que llegar hasta aquí en un segundo y hacer es rebotar. Mira, es mucho más rápido. Ese es el momento con el que necesitarás jugar. A partir de aquí, quiero que probablemente sea unos dos segundos. Sólo sigue jugando con eso. Se puede ver que puedo hacer algún diseño básico, al menos mover las cosas mientras estoy en modo prototipo. No tienes que hacerlo. cambiar entre diseño y prototipo. Apuesto a que es la opción uno para ponerse entre los dos. En un PC, es Alt uno y dos. Si no es Alt porque ya no tengo un PC delante de mí, solo pasa el puntero por encima de ella y te dirá cuál es. Me distraí con el atajo de PC. Vamos a darle una vista previa. El último, lo prometo. Entra, rebota en por qué toma demasiado tiempo y luego se quita. Mira nuestra pequeña animación, probablemente necesita un poco de garrapata de confirmación ahora. O continuar con el botón de compra o volver a casa o tal vez justo después de una cierta cantidad de tiempo. Te va después, usa un atajo. Después de algún tiempo, solo puedes arrastrarlo, solo puedes hacer clic en él. Decir en realidad después de algún tiempo quiero que vaya a la página de inicio. Ahora mira lo desordenado que es esto. Quiero homepage marketing, HIFI. Creo. Nombra tus páginas, gente. No rebotes y no quiero que se anime automáticamente. Sólo quería hacer la transición a esa página. Disolver. No quiero que rebote. Incluso con un rebote, en realidad no lo vas a ver con una transición, realmente no importa qué usar que hagas. Realmente no se puede decir. Dije la última vez, esta es la última vez. No quiero cambiar esa habitación. 2.5 listo, estable. Volvemos a la página de inicio. Encantadora. Amigos míos, eso es una animación, un recapitulativo de algunas de estas cosas que conocemos. Si vas a tener algo fuera de pantalla en cualquier momento, recuerda agregar primero la animación . ¿Qué tienes que hacer? ¿ Qué prototipo de animación tienes que agregarle? Auto animar, de lo contrario entra en la tabla de pasta. El último. Compra ahora. Botón de compra. Mira eso, esa es la marcha, hicimos. [ Risas] Eso es definitivamente. Está terminada. 69. Proyecto de clase: mi segunda animación: Este proyecto de clase es tu segunda animación. Recuerda que hicimos un camino de regreso con la pequeña flecha. Quiero que hagas algo más y único para tu proyecto actual. He hecho esta cosa de la camioneta. Se puede hacer algo parecido. Haz un poco de investigación. Busca página de confirmación o animación de pago. Busca ese tipo de cosas que podrías integrar tu producto real. Acabo de hacer esa vieja caja normal. Dependiendo de lo que sea el tuyo, podrían ser hojas de té o lo que te quedaste atascado en este curso. Sé creativo, sé simple. Depende de ti. Puedes ser elaborado. El mínimo es de tres. Algo, algo, algo, pero quizá te vuelvas loco. Podrían ser 20 de ellos. Juega con las diferentes servidumbres auto animate. Cuando hayas terminado, graba un video del mismo. Recuerda en un Mac es fácil, está ahí arriba. En un PC, es más difícil allá. Podría estar usando algún otro software de grabación de pantalla. Eso está bien siempre y cuando puedas grabar tu animación y subir el video o el enlace a ella. Subirlo a YouTube o Vimeo o Behance o algo así y envíanos el enlace. Si no has podido descifrar el código de video, solo puedes hacer una captura de pantalla de todas esas páginas como esta para que podamos ver qué está pasando, todas esas y subir eso. Asegúrate de compartirlo tanto en las asignaciones como también en las redes sociales. Es una de las cosas más emocionantes que ver son las animaciones de todos. Simples como puedan ser, no te preocupes, no tiene por qué ser increíble. Se permite que tus habilidades de dibujo sean horribles. Estamos aprendiendo, estamos empezando, está totalmente bien. Compártelos de todos modos. Creo que eso es todo. Dibuja tus propios elementos, tres fotogramas mínimo, crea tu propia animación, y eso es todo. Te veré en el siguiente video a todos. 70. Cambio de la conector de la interacción micro en Adobe XD: Hola a todos. Bienvenido a conmutadores de palanca. Vamos a hacer un poco de micro interacción. Vamos a combinar nuestras habilidades desde la animación más algunas de las cosas como estados. ¿ Recuerdas ese estado de toggle que hicimos por éste? Vamos a combinar la animación y hacer un pequeño interruptor de alternancia genial. Es un rito de paso como diseñador de UX así que siéntate, relájate y vamos a ponernos todos toggly. Ahora básicamente estamos combinando dos cosas diferentes que hemos hecho. Hemos hecho la opción toggle, como este pequeño botón aquí. Recuerda que hicimos un estado y tiene una opción de toggle y vamos a sumar parte de nuestra animación que hemos aprendido. La diferencia entre esta animación y animación que vamos a hacer es que sucede dentro del componente. No va de tablero de arte a tablero de arte. Se necesita esto porque necesitamos el momento mientras que la micro-interacción es solo una pequeña animación que ocurre dentro de un componente. Vamos a construirlo. Vamos a construir algo realmente rápido y no bueno para empezar. No nos preocuparemos por los puntos de diseño. Vamos a poner en marcha la mecánica y luego haremos que se vea bonita al final. Herramienta Rectángulo. Hacer redondas las esquinas exteriores. Alguna forma de píldora, herramienta de círculo, mantenga presionada Shift, dale un color de relleno. Eso es todo lo que necesitamos. Voy a seleccionar ambos, convertirlo en un componente, convertirlo en un componente, Comando K o haga clic en ese botón. Lo que necesitamos aquí es que necesitamos un estado, necesitamos otro estado, igual que lo hicimos antes. Hicimos el toggle, como el pequeño botón de radio que acabamos de ver, y vamos a tener en estado. Todo lo que hacemos es ir, asegurarnos de que estamos en, doble clic en él para entrar y hacer algo diferente. Lo que va a pasar es que va a por defecto a la animación auto-animada y vamos a darle una oportunidad. En realidad, vamos a prever al principio. Realmente no se puede previsualizar porque no está en un tablero de arte. Vamos a pegarlos en algo. Voy a hacer esto más grande. Construimos sobre tableros de arte personas. Aquí vamos. Mi interruptor de palanca gigante, mi gigante. Vamos a prever. Está aquí, mira. Genial. Es un sentimiento genial hacer cosas como esta. [ Risas] trabajo. Era simplemente formas viejas demasiado aburridas y mira lo que hicimos. Entonces así es como hacer el interruptor de alternancia. Eso es un rito de paso. Tienes que construir este interruptor de alternancia como diseñador UX. Ni siquiera lo necesitas. Es muy raro de lo que necesito un interruptor de alternancia aparte de enseñar a nuevos diseñadores de UX cómo construir un interruptor de alternancia. Pero es una microinteracción realmente buena, es una muy buena clara lo que está pasando. Podemos hacerlo más claro. Entonces hagámoslo más micro-interaccióney. Vamos a entrar y darle estilo. Ahora, lo que es más fácil es bien que lo peines antes de convertirlo en un componente. Haremos algo ahora mientras sea un componente, solo ajústalo y luego te mostraré la forma normal de hacerlo. Vamos dentro de ella. Vamos a decidir en qué estado queremos estar, ¿queremos estar ajustando este estado o este estado. Hagamos esto primero. Lo que vamos a hacer es tal vez hacerlo aburrido. Hagámoslo y utilicemos el color off internacional, que va a ser rojo deshabilitado, algo así. Generalmente es gris o rojo. Usaremos rojo porque se ve elegante. Claramente no me gusta el rojo. Voy por algún tipo de no rojo. Tenemos este primero y luego en el on-estado por aquí, recuerda, será lo mismo a ambos lados de nuestro auto animate a menos que lo cambiemos. Por el momento, hemos actualizado nuestro estado predeterminado y no es diferente en el encendido así que se va a quedar rojo por aquí sin embargo. Vamos a decir en realidad ahora que vas a ser verde. Vamos por un verde brillante, demasiado brillante. Ahora vamos a prever . Vas a, botón de reproducción ¿dónde estás? Encendido, apagado, encendido, apagado. ¿ Por qué empezó en verde? ¿ Lo sabes? Tú lo haces. Te acuerdas, es porque lo dejamos. Dondequiera que dejes esto encendido, recuerda, ese es el punto de partida. Vamos a asumir que está apagado y encenderlo para que sea verde. Genial. Vamos a ser aún más elegante con la animación. Se agrega algunas cosas predeterminadas y puede que no te guste. ¿ Dónde se ajusta la flexibilización? ¿ Te acuerdas? ¿ A dónde irías? Tener un pensar. ¿ A dónde irías ahora si te dejara a ella? Yo lo seleccionaré. Ve a Prototipo. Se puede ver esta pequeña, yo no voy a ninguna parte. Tiene el estado Default, tiene un Tap, que es lo que quiero. Es la animación automática, lo cual es perfecto. Destino, se va al on-state y qué tipo de flexibilización? Se está relajando. Voy a hacer dentro y fuera, y vamos a prever. Echemos un vistazo, dentro y fuera. Simplemente se ve más bonito en mi opinión. Significa que comienza lento y termina lento y va rápido en el medio. Ahora la única cosa es que es difícil notar en esa, hagámoslo el loco Bounce y preestreno. Lo que termina pasando es ver esto, y luego el de atrás, ¿por qué no va a retroceder al revés? Solo tienes que recordar que tienes estos dos estados. Por el momento tenemos el estado predeterminado y su auto animando con saldo pero si hago clic en, ¿se puede ver? Todo está cambiando. Está usando la facilidad hacia fuera. Si quieres hacerlo en ambas, ahí vas. [ Risas] viejo interruptor mecánico, se siente como. En cuanto al estilo, ahora solo te daré algunos conceptos básicos porque quiero introducir algo. También quiero mostrarte la forma normal en que lo hago. Lo que generalmente haría es no hacer todas estas cosas en el estado. Se puede eliminar un estado. Solo vuelve a este primero, debería ir a Diseño. Todavía tengo mi estado. Sigue siendo un componente y todavía tiene mal nombre. Vamos a tener un Button Toggle. Realmente no importa si eres un estilo antes de hacer un componente, pero justo antes de agregar todos los estados porque hace que sea complicado ir y editarlos todos para que coincidan porque voy a hacer muchos cambios. Estoy haciendo doble clic para entrar dentro de ella. Estoy sosteniendo Shift y escalándolo. Yo voy a, lo que quiero mostrarte es que obtienes puntos de bonificación si haces una sombra interior. Tengo aquí mi sombra interior y en realidad le voy a dar un color de relleno de qué, entonces el color de la interfaz, un viejo color de Windows que entra ahí. No hay reglas sobre lo que puedes hacer por esto. Si estás diseñando para, digamos, teléfonos Android o Apple, estás usando el sistema operativo. A menudo no puedes cambiar estos interruptores de alternancia por defecto por lo que podrías simplemente copiar y pegar desde uno de los kits de interfaz de usuario de Apple, iOS que lo llaman o Google lo llama material de Google. Sólo vas a pegarlos aquí afuera. Aunque queremos hacer nuestros propios botones personalizados porque somos impresionantes. Estoy haciendo una sombra interior, se puede ver ahí. Esto es X e Y es lo lejos de la parte superior y cómo adentro de la derecha está, y B es el azul. Esta pequeña opción aquí es lo oscura que es. Entonces voy a usar el negro, esta es la transparencia. Puedes tener una sombra interior de rojo. No quiero eso. Puedes decidir qué tan oscura es esta cosa. Voy a conseguirlo así y luego voy a ir cómo desenfoque. Usa mis teclas de flecha para moverte arriba y abajo, algo así y deshacerte de la frontera. Yo como que necesito la frontera. Este de aquí, vamos a añadir una sombra también porque, ¿por qué? Sólo porque. Borrosa también, tal vez dos y tal vez esto solo tiene que ser uno y uno. Tal vez un poco más oscuro. Puedes ver, puedes meterte por mucho tiempo antes de hacer la siguiente etapa para intentar hacerlo más agradable. Podría hacer de la mía sólo una vieja como esa. Ahora puedo sumar mi estado extra. ¿Eso es bonito? Vamos a tener nuestro propio estado y éste va a tener las micro-interacciones de ir por aquí. Se pondrá verde. En realidad, en lugar de volverse verdes, podemos hacer que el fondo se vuelva verde. Entonces el color de fondo va a ir como un color positivo. Encuentra un buen verde y tal vez hagamos que esto se ponga blanco. Aquí tienes. Recuerda, nuestro estado inicial va a estar fuera. Vamos a darle una vista previa. ¿ Es bueno? Se ve genial. Se puede ver que la cosa de la sombra interior funciona de manera diferente desde muy atrás. Es bueno tener esta cosa abierta. Lo tengo abierto en otra pantalla. No se puede ver esa pantalla, pero justo así cuando estoy diseñando muy cerca. Mira esto, bueno, finges que está en otra pantalla. Puedo entrar aquí y puedo empezar a meterme con la sombra y estar viendo una versión muy lejana. Mejor aún si lo tienes en tu teléfono porque entonces puedes tocarlo a medida que vas. La otra cosa que quiero compartir con ustedes ya que lo miramos mucho antes en el curso, fue Responsive Resize. No sucede cuando es una forma irregular, pero cuando es un componente como este, mira esto, si voy, realidad es demasiado grande y lo hago más pequeño, sosteniendo Shift y escalarlo hacia abajo. ¿Qué estás haciendo? Hace algunas cosas raras. Es porque eso se enciende cuando es un componente. Está tratando de ser elegante donde se puede hacer esto. Eso es genial, tipo de botón de reajuste. Nos ha encantado hasta ahora pero para esto queremos escalarlo todo proporcionalmente. Está haciendo algunas cosas raras. Puedes apagarlo, luego mantener el turno y escalarlo de la manera regular. Te darás cuenta de que la sombra interior puedes ver? Se está quedando igual por lo que tendrás que ajustarlo, y puedes volver a encender Responsive Resize una vez que sea pequeño y hacer tus ajustes como lo hacías antes. Pero eso es solo un recordatorio cuando estás haciendo componentes, se activa este Redimensionamiento Responsive. Muy bien, Suite toggle. Ve a hacerte alternar, ser parte de la comunidad de diseño UX. Hay cheques en las conferencias de diseño para asegurarte de que hayas hecho tu interruptor de alternancia, lo comprobarán en la puerta así que asegúrate de hacer tus interruptores de alternancia. Te voy a hacer hacer un interruptor de alternancia en un par de lecciones para tu práctica de clase. practica ahora y estarás haciendo uno seguro en un poco. Muy bien. Eso es. El interruptor de palanca ha terminado. 71. Menú de hamburgués de la interacción se convertirá en un cruzado en XD: Hola usted. ¿Ya te sientes como un diseñador de UX? Somos bastante ajenos a este curso. Deberías empezar a sentirte muy uXy. Si no te sientes UXy, te metes después de esto. Mira esto. Es otro rito de animación de paso. Es la cruz la que se convierte en el menú de hamburguesas o al revés. Al igual que el interruptor de alternancia, es un rito de paso. Lo mismo que como aprender la llamarada de lente en photoshop. ¿ Recuerdas cuando aprendiste eso? De todas formas, déjame mostrarte cómo hacer esto en Adobe XD. Hagamos esta. Sólo necesita tres líneas, 1, 2, 3. No voy a pasar demasiado tiempo diseñándolos. Sólo voy a hacer que se vean lo suficientemente bien. Usando la flecha de tamaño hacia arriba y hacia abajo y hacer pequeños extremos redondeados. Eso parece apropiado. Genial. Vamos a convertirlo en un componente. Pulse la tecla “Comando” tecla “Control” en un PC y simplemente haga clic en el botón. Vamos a tener dos estados. El estado predeterminado va a ser el menú grande y entonces este estado de toggle va a ser la cruz, lo llamaremos. Lo que vamos a hacer es dejar estado predeterminado tal como está y la cruz, vamos a hacer doble clic para entrar. Este medio, recuerda, no lo elimines. Basta con bajar la opacidad, así que se va y se desvanece. Este top va a ser de 45 grados. Este de abajo aquí va a ser menos 45 grados. Selecciónalos ambos. Entonces aquí arriba, vamos a ir alinear medio y solo revisar. Voy a hacer click , haga clic de nuevo en. Sólo voy a comprobar si se alinean , y se alinean. Perfecto. Empecemos por el estado predeterminado. Vamos a darle a esto una obra de teatro. Vayamos aquí abajo. ¿ Estás listo? [ Risas]. Me encanta esa. Vamos. Lo he hecho un bazillion de veces, pero sigue siendo emocionante. Lo haces, estarás emocionado. Dale un clic. Es difícil dejar de hacer clic. Ni siquiera hace nada. Un poco más tarde en el curso, construiremos un menú que en realidad aparece en pequeño nav lateral que aparece en el dispositivo móvil. [ Risas]. Voy a dejar de hacer clic en él y pasaremos al siguiente video. En realidad sólo haremos una cosita, sólo para reiterar. Si quieres cambiar el cronometraje, recuerda tener seleccionado tu estado, menú de hamburguesas seleccionado, y luego ve al prototipo y puedes hacer click en los diferentes estados. Estado por defecto, si quieres que sea o alivia dentro y fuera, ese es mi favorito. ¿ Qué tan rápido? 0.5, no voy a practicar, no estoy seguro, en realidad. Definitivamente me gusta la facilidad de entrada y salida. Yo lo estoy haciendo ambos, por lo que ambos hacen lo mismo. Haremos 0.5. Veamos cómo va. Vista previa. No lo sé, tal vez un poco lento, tal vez atrás 2.3, pero ahí vas. Menú alternando. Haga clic en todos ellos. Eso es todo. Te veré en el siguiente video. 72. Proyecto de clase 15: la interacción micro: Es hora de hacer tus propias micro interacciones. Van a haber dos que ya hemos hecho. Si aún no las has hecho, asegúrate de hacer esas. Ese es el interruptor de alternancia y el menú de hamburguesas que se convierte en cruz. Entonces tu propia costumbre. El interruptor de alternancia puede ser real, simple y básico. Todos pueden ser reales, simples y básicos. Podrías estar tratando de volar por este curso para seguir adelante con él, pero si tienes un poco más de tiempo, un poco de investigación. Hay algunas cosas realmente geniales que puedes hacer con un interruptor de alternancia. Ahora en este caso, porque este es un curso, puedes hacerlo tan elegante como quieras. En el mundo real, probablemente quieras que sea realmente simple y claro y no una animación en toda regla, pero tienes pleno permiso para volverse loco con ella si tienes tiempo y ganas. Mira los interruptores de alternancia, son algunas cosas realmente geniales alrededor. Menú de hamburguesas. No hay mucho que puedas hacer con esa. [ Risas] Tiende a dibujar una cruz. Hay diferentes formas de convertirla en cruz. Ahí vas. La propia costumbre. Nuevamente, si tienes tiempo, me gustaría que tuvieras un poco de explorar con algo así, Dribbble es un lugar mejor y tiene estas miniaturas realmente fáciles de previsualizar. Sólo echa un vistazo. Podrías ir por algo bastante extravagante. Eso es casi animación y en realidad no tan útil como una micro interacción. O podría ir algo simple, como esto parece un interruptor de alternancia. Mira ese blobby. ¿ Cómo harías eso? Hay algunas cosas impresionantes. Depende de tu nivel de habilidad y de tu animación y habilidad. Pero echa un poco de mirada, encuentra uno que te guste y que tal vez puedas reproducirlo, personalizarlo, e intentar que funcione dentro de tu app. Mira tu documento y vete, ¿qué pasa aquí? ¿ Puedo actualizar o animar como un poco de interacción? Podría ser simple, podría ser bastante extravagante. Depende de ti. Tres de ellos, entregables, graban el video, si puedes, subirlo a un sitio de alojamiento de video, y compártelo con nosotros, y compártelo en redes sociales. Si no puedes hacer las cosas del video, como antes, solo toma una captura de pantalla. Eso es todo. Proyecto de clase, micro interacciones. Diviértete. Es bastante emocionante. Bueno, me gusta pensar que lo es. [Risas] Disfruto haciendo micro interacciones. Espero que también lo hagas. Vete, hazlo. Te veré en el siguiente video. 73. Cómo pilar la navegación a lo superior en Adobe XD: Hola a todos. ¿ Cómo se fijan las cosas para que no se desplacen con el resto de la página? Ver la navegación en la parte superior que golpeamos los pergaminos debajo, para que siempre podamos acceder a mi navegación. Haremos lo mismo por nuestro pequeño snack bar abajo aquí, y yo te mostraré al final cómo apagar esto también. Se ve bastante completo. Déjame mostrarte cómo. Lo primero es que necesitas una página que realmente se desplaza. Este de aquí no es lo suficientemente largo para desplazarse para que pueda hacerlo funcionar, pero no podré probarlo visualmente. Esta página es lo suficientemente larga. Si lo previsupo, hay desplazamiento involucrado. Considerando que esta primera página, no puedo desplazarse hacia arriba y hacia abajo. Estoy usando mi rueda de desplazamiento, no funciona, por lo que tampoco necesitas hacer que tu página sea más larga. Ya tengo uno que es más largo, pero ve a vista de diseño con el nombre de página seleccionado. Sólo asegúrate de que sea lo suficientemente largo. Ves esta línea punteada y al menos hay algo de desplazamiento pasando. Voy a trabajar en esta página y trabajar en esta navegación. Todo lo que necesitabas hacer lo que quieras fijada, tenerlo seleccionado, cambiar a prototipo, y luego ir por aquí y decir “Posición fija al desplazarse”, y ya has terminado. Juguémoslo y miremos eso. Está fijo a la cima. Mi problema es que mi orden de capas no es del todo correcto. Dependiendo de quién fue hecho último o quién está en la parte superior del orden de la capa, posible que tenga que llevar esto al frente. Hagamos eso. Con él seleccionado, utilizaré el atajo Comando Shift corchetes todo el tiempo. Los corchetes son los que sobrepasan por tu clave P. Es Control Shift y corchetes yo soy para traerlo adelante y atrás. Cuando hacemos clic derecho, envíalo de vuelta. Ahora quiero que haga clic derecho y lo lleve al frente. Vamos a prever ahora. Mantengámoslo aquí, mira esto. Ahora pasa por encima de todo. Sin embargo, no es muy utilizable. Es muy común agregar un poco de un color de fondo. Volver a la vista de diseño. Podría ir dentro de mi componente y editar aquí y aparecerá en todos ellos o podría ser separado donde solo tendré que copiarlo y pegarlo, no parte del componente solo en segundo plano, pero yo tienen que copiarlo y pegarlo en cada página. Tratemos de aplastarlo debajo de los componentes. Esto va a hacer esto un poco más de un dolor en la espalda aunque porque entramos en este problema antes. Recuerda que si tratamos de agregar cosas por aquí, va a haber dolor en la espalda, pero ya veremos. Dentro de mi componente Top Nav de antes, si estás saltando a este video y no has pasado por el curso, o simplemente estás saltando hacia atrás y no tiene que estar en el componente. Sólo lo estamos haciendo porque probablemente vas a necesitar hacerlo en algún momento. Voy a enviarlo a la parte de atrás. Voy a deshacerme de la frontera. Por el momento es sólo blanco, depende de ti. Vamos a prever, así que voy a previsualizar esta página. Está ahí, y se queda en la cima. Hay un par de cosas que la gente hace es que usted podría ir dentro de él, agarrar ese rectángulo blanco en el fondo, y agregar una sombra paralela. Voy a dejarlo como el defecto. Vamos a prever eso. Vamos a prever esto. Aquí vamos, tenemos una sombra paralela por encima o por debajo de ella. O, y así o bien puedes seleccionarlo y en realidad poner el relleno, solo baja la opacidad un poco para que esté ahí, pero puedes ver a través de él. ¿ Sabes quieres que me refiera? Probablemente comienza a ser un poco más opaco, pero ahí vas. Pin a la parte superior. Ahora puedes anclar cualquier cosa. ¿ Dónde está esa pequeña esta cosa de aquí? Es un poquito aquí. ¿ Recuerdas nuestro pequeño snack bar , nuestra pequeña cosa tostada? Podría mantenerlo en el fondo aquí. Oh, en realidad con ella seleccionada, ¿quién recuerda a dónde vas para conseguirlo para arreglarlo o anclarlo? ¿Te acuerdas? Oh, lo haces. Eso está bajo prototipo. Mira, prototipo. Son esto, super fácil. Vamos a prever esto y mirar todo se queda. ¿ Puedo cerrarla en este momento? Parece que puedo o vas a querer saber cómo cerrarlo, ¿no? Tú lo eres. Haremos eso también, pero vamos a subrayar el anclaje. Hemos anclado la parte superior y la parte inferior porque más trabajo para mí y para ti. Las cosas que debes recordar es que la página necesita ser lo suficientemente larga para desplazarse y es posible que tengas que jugar con tu orden de capas. Entonces podría agregar una cosa de transparencia de fondo de sombra paralela para que sea un poco más legible cuando se está desplazando. Ese es el final de la mitad. Ahora descubramos cómo hacer que esto se cierre. Vamos a cerrar eso. Echemos un vistazo. Planeaba hacer esto más adelante en el curso. Bueno, yo iba a hacer de una manera diferente. Pero estamos aquí, es interesante y te voy a mostrar mi proceso. Voy a alejarme, agarrar todas estas cosas, se está poniendo desordenado, entonces, selecciónelo. Lo que terminas haciendo es que termines teniendo dos páginas. En realidad no, lo haremos de esta manera. De esta manera es aún más inteligente, creo. Vamos a ir a la vista de diseño, y hacer clic en esto. Vamos a tener un toggle. ¿ Todo esto es parte de lo mismo? Lo es. Es un grupo. Lo que vamos a hacer es que usaremos toggle unas cuantas veces y bajaremos la opacidad. ¿ Obtienes lo que vamos a hacer? Voy a decir que eres un componente con estado de toggle. Una vez que esté alterado, va a estar apagado. Entonces el fuera del estado aquí, ¿podemos bajar todo el asunto? Está encendido. No, no puedes hacer todo el asunto, pensé que sí, así que necesitabas hacer los bits individuales. Por alguna razón, si haces la aparición del componente, lo hará tanto en este estado ese estado. Tú ahí. El estado si lo vuelvo a encender, ahí está la espalda de mi padre. ¿ Se puede ver que afecta a ambos? Tenemos que ir dentro del estado fuera. Entra dentro de esto, selecciona todo. Ahora, he hecho doble clic para ir dentro del componente. Yo pego, “Comando A” en mi teclado porque es el atajo que recuerdo y puedes ir a “Seleccionar todo”. Es Control A, en un PC o simplemente ve a darle, “Selecciona todo”. Me he metido dentro de mi componente, he seleccionado todo y sólo voy a bajar la opacidad de todo lo que hay dentro de él. Extraño. No estás bajando la opacidad del componente envoltorio exterior real. Te has metido dentro de ella y bajaste la opacidad. Nos estamos poniendo un poco, no sé cómo se llama, Inception. ¿ Conoces esa nueva película? Tú lo haces. Ahí vamos. Vamos a darle una vuelta. Voy a seleccionar esta cosa invisible ahora y volver al estado predeterminado, y cuando es prototipo, cuando se toca, se va a animar auto. En realidad, sólo vamos a conseguir que se anime automáticamente. Sólo va a desvanecerse, ¿no? Destino. Vamos a entrar en el estado fuera y se va a aliviar lentamente. Podrías acelerar eso. Vamos a darle un entrenamiento ir sobre la marcha. No planeé hacer esto aquí, pero oye, estamos aquí. Mira esto, desplázate. ¿ Cómo lo recuperaste? [ Risas] No es absolutamente [Risas] infalible. No, eso es todo. Xd no está haciendo una versión real completa de la misma, hay muchas falsidades pasando, que lo hace rápido y fácil. No es una gran cantidad de ajustes, no enormemente complejos. Pero hay algunas cosas que acaba sonreir y soportar en términos de las maquetas donde no se puede hacer absolutamente como una aplicación, sino lo suficientemente cerca para probar y degradar. Eso es fijar, además de cómo apagar esa cosita. Hacia el siguiente video. 74. Cómo añadir un modal superado de la cual se superó en Adobe XD: Hola a todos. En este video, vamos a hacer esto. Vamos a hacer clic en este “Botón”, y va a tener esto como poca superposición emergente. Podemos cerrarla, abrirla de nuevo, cerrarla de nuevo. Déjame mostrarte cómo hacer eso en Adobe XD. Para empezar, hice un par de cosas. Edito un botón a nuestra página de detalles del producto, me muevo esta cosa porque estaba justo en el camino, y creé esto. Este va a ser el pop-up que viste al principio es sólo un montón de rectángulos y círculos y texto. Puede ser cualquier cosa, y así necesitas algo que va a aparecer y necesitas un botón que lo vaya a activar. Esas son las dos cosas para empezar. El modo en que funciona esto es, este botón o enviándome mensajes de texto cualquier cosa que lo active, quiere llamarlo mesa de trabajo y superponerla, por lo que esta cosa de aquí no va a funcionar. Es sólo en la tabla de pasta, solo pasando el rato solo. Lo que tenemos que hacer es convertirlo en una mesa de trabajo, y realmente no lo convertimos en una mesa de trabajo, solo hacemos clic fuera de fondo, si no tienes nada seleccionado, agarra la herramienta de mesa de trabajo, como lo hemos hecho antes, hemos estado agregando mesa de trabajo. Acabo de hacer clic una vez en. En realidad puedo arrastrar una mesa de trabajo personalizada sobre la parte superior porque se ajusta al tamaño correcto. Hemos convertido nuestro pequeño gráfico aquí en una mesa de trabajo. Voy a nombrarlo, voy a llamar a este carro modal, y ahora puedo conectarlos. Por la forma en que los conectan, da clic en tu “Botón”. Esto no es un componente, no es nada, es sólo que cualquier cosa lo puede desencadenar. Voy a seleccionar ambos y decir realmente bajo prototipo, cuando se hace clic en esta cosa, lo que hemos estado haciendo es que hemos estado bajo prototipo, es que hemos estado arrastrando cosas. Se puede hacer click en esto, realidad simplemente haga clic en uno de ellos o agrupe estos dos, por lo que sólo voy a hacer click en el “Cuadro Verde”. hemos estado arrastrando para conectarnos a páginas. Puedes o hacerlo de la otra manera. Con ella seleccionada, vamos a agregar una interacción, va a ser un tap, y por defecto quiere ir a animar automático o transición dependiendo de lo último que hiciste. La magia pasa debajo de aquí, bajo superposición. Cuando esto se toca superposición, ¿qué mesa de trabajo? El carro modal uno, por favor, y ese es el gran cambio. ¿ Puedes ver que esto apareció? ¿No hubo hace un segundo? Ahora está ahí. Vamos a darle una prueba como está, y veamos qué hace. Desplazo hacia abajo mi botón. Oye, mira eso, y puedo hacer clic en él, ciérralo mira eso. Lo bueno de ello es que en realidad no necesitas actuar el cierre, solo quiere volver atrás por defecto. A pesar de que hay una cruz ahí en mi maqueta, es sólo un círculo con una cruz en ella. No lo he arreglado, en realidad se puede hacer clic en cualquier parte y simplemente desaparece. Simplemente funciona, pero no he tenido que hacer nada. Eso es lo básico de ello. Va a haber un par de cosas que te gusten. Oye, ¿tenías una sombra paralela? Probablemente ni siquiera hubieras visto la sombra paralela. Pasé años elaborando mi sombra paralela, pero se ha ido, y es realmente difícil porque realmente no se puede ver el fondo. Algunas cositas que pasan es, está por aquí. Voy a volver al modo de diseño, opción uno en un PC. Creo que es todo uno, lo siento, gente de PC. Lo que quiero hacer es la mesa y la caja blanca fondo son en realidad varias cosas. Ahí está mesa de trabajo, caja blanca. Para conseguir la idea, caja blanca. Ver la caja blanca y la mesa de trabajo separados. El problema con él, puedes ver ahí está mi pequeña sombra encantadora, pero porque está por encima del borde de la caja blanca se está recortando, así que puedes hacer una de dos cosas. Puedes hacer que tu caja blanca sea pequeña, para que puedas verla, o puedes agarrar tu mesa y hacerlo más grande, para que puedas verlo. Ahora vamos a darle un adelanto, volvamos a este tipo, vamos a ir a ti, aquí y su tiene una sombra paralela ahora. Sí, funciona. Creo que mi caja blanca es un poco demasiado grande para llenar la pantalla. Pero sí, probablemente necesitamos un fondo más apagado. Haremos eso también. Estamos consiguiendo un poco de avance, pero oye. Una cosa es que se puede ver agregando esa función de superposición a esto, lo que le hizo a esta mesa de trabajo fue en realidad desactivar la apariencia del fondo. Puedes hacerlo manualmente, pero lo hace automáticamente para que puedas ver la sombra paralela, pero ve el resto de esta página debajo en lugar de ser una gran caja blanca. Lo que quería hacer es que viste al principio ahí tuve que como desvanecerse oscuro en el fondo. En realidad antes de que hagamos eso, hay un poco que a menudo confunde a mis alumnos, así que ¿qué te confunde? Déjame tratar de desconfundirlo. Es con ella seleccionada, voy a volver a cambiar a mi modo prototipo, y le doy a esto un click, es donde aparece esto. Digamos que lo puse justo por encima de ricos. Eso llegaría allí. Está justo encima de eso. Si llego a jugar y voy aquí abajo y digo, debería aparecer justo encima de Rich. Boom. Apareció en medio de mi cosa. Eso es raro. ¿Qué está pasando? Básicamente esta cosa aquí, esta visión general, sigo diciendo visión general, la superposición es hacer referencia a lo que se llama la ventana gráfica. El visor es la parte superior del documento a esta pequeña línea aquí. Recuerda que hemos estado hablando de eso a lo largo del curso, así que está mirando al fondo ahí, no lo que hay debajo en el contenido. Es un posicionamiento fijo. Si lo muevo aquí abajo, no por encima de lo orgánico pero realmente cerca de la parte inferior de la página, cerca de la parte inferior de la página,va a estar en la parte inferior de la página y probablemente estar en el camino, simplemente haga clic en ella, y usted ir. Eso es lo que es esa referencia. ¿ Puedes conseguir que se fije a las cosas reales? No es que yo sepa ahora mismo. Intentas usar posicionamiento fijo en él, termina por posicionamiento fijo, el botón, no la superposición. Entrémonos en el bit un poco más de inicio, donde apagaremos el fondo. Es un truco, actualmente no es una opción aquí para desvanecerse de fondo. Lo que hacemos es que acabamos de poner esto en una mesa de trabajo de diferente tamaño que cubra todo el asunto. Por el momento mi mesa de trabajo es de este tamaño. Lo que quiero hacer es moverlo por aquí, quiero hacerlo del mismo tamaño que la ventana gráfica para esto. Es lo ancho, pero ve a mi vista de diseño. He hecho clic en mi mesa de trabajo. Sé que es 375, así que digo que ahora eres 375 pasta. ¿ Qué tan alto debería ser? Da click en esto, entonces mi ventana gráfica está a la altura de esto, entonces 667 o todos son 667. No importa cuál lo saque. Me das una altura de 667, y luego digo que vas a estar en el medio. ¿ Puedes conseguir lo que estoy haciendo? Usa mis teclas de flecha solo para ponerlo sobre la parte superior. Necesito hacerlo más pequeño. Es una de esas veces que respondemos, cambiar el tamaño es realmente brillante. La mayoría de las veces es brillante. Viste un par de veces necesitas apagarlo, pero eso fue genial. Lo que hice estaba ahí, así que agarro el borde, y si solo lo agarro, funciona, pero si mantengo presionada la “Clave de opción”, lo hace desde ambos lados al mismo tiempo, eso es Alt en un PC. Yo tengo eso, quiero que esté arriba en el medio, y ahora lo que quiero hacer es solo añadir un fondo de negro sin borde. Quiero bajar la opacidad del relleno, y quiero que esté en la parte posterior. Tenemos una mesa de trabajo, tenemos un fondo negro desvanecido ahora que coincide con la ventana gráfica. Si fueras como, me tenías en resumen, pero ahora me has perdido. Está bien. Esto es cosas avanzadas. Si lo estás consiguiendo alto cinco tú. ¿Estás listo? Espero que esto funcione. [ Risas]. Hablando de un buen juego entonces vamos, no funcionó [Risas]. Sé por qué ahora, pero era bastante confiado que iba a funcionar recto. ¿ Qué pasa? El posicionamiento. Lo posicionamos cuando era sólo un pequeño rectángulo pequeño, así que si vamos a la vista prototipo ahora, cuando hacemos click en esto, está haciendo exactamente lo que dijimos en relación a la ventana gráfica. Se puede ver que se está superponiendo el fondo. Quiero decir que llegas a la cima. Ahora hagamos esto. ¿ Listo? A pesar de que no tenga que hacer clic en la 'X', debe hacer clic en la 'X'. Eso es genial. Me encantan los pequeños pop-ups, y así es como hacerlos en Adobe XD. Muy bien, amigos, los veré en el siguiente video. 75. Slider en la superposición del menú de la nav móvil en Adobe XD: Hola a todos. En este video, vamos a hacer este pequeño nav móvil que aparece de un costado, que podemos cerrar. Funciona. Puedes hacer click en cosas, ir a diferentes páginas, saltar atrás, así que eso es lo vamos a hacer en este video. Listo, listo, vamos. conoces todas las habilidades para que eso funcione. Solo hay un pequeño escenario que necesitamos cambiar para que suceda. Lo que voy a hacer es simplemente hacer una versión real simple de ella, cosa verdadera cruda, fea. Entonces lo haremos bonito al final porque estás aquí para mirar cómo se desliza esta cosa dentro y fuera. Lo que hacemos es, necesitamos diseñar un menú. Esto es por lo que voy a ir. Tú decides cuánto quieres que esto se deslice. Voy a ir tan lejos. Puedes ir todo el camino a través. Dibujo primero con un rectángulo. Pero como en un video anterior donde tiene que ser una mesa de trabajo, tiene que ser una mesa de trabajo. Podrías empezar a dibujar un fuera de borda encima de aquí, y se rompen un poco y las cosas saltan capas. Es un dolor en el trasero, así que solo dibuja primero con un rectángulo y luego deselecciona en el fondo, por lo que nada seleccionado. Después agarra la herramienta de mesa de trabajo, y luego dibuja esto sobre la parte superior, del tamaño correcto. Ahora esa caja blanca, puedes mantenerla ahí, puedes eliminarla. Voy a dejarlo ahí porque quiero hacer toda esa cosa de sombra en un segundo. Te dije que no lo iba a diseñar. No lo diseñes entonces. Todo lo que tenemos que hacer ahora es encontrar algo que lo active. Voy a usar esto, obviamente el menú más grande, así que voy a hacer click una vez, pincha dos veces para tener eso seleccionado, ir a mi prototipo. Esta cosa aquí, voy a agregar una interacción, o voy a arrastrarla aquí y decir, cuando esta cosa esté tocada, vaya a superponer. Podría ser en transición o auto-animar, dependiendo de lo último que hiciste. Eso es básicamente todo, y eso es lo que hicimos por nuestro pop-up en el último y luego se va a pop-up modal. La única diferencia es que en lugar de la animación se disuelva, vamos a conseguir que simplemente se deslice bien. ¿ Te acuerdas? ¿ Se desliza desde la derecha o se desliza hacia la derecha? Puede probar uno, probar el otro. Estoy bastante seguro de que eso es correcto. Deslízate dentro y fuera, y eso me queda bien. Vamos a darle una vista previa y miremos eso, lo hemos hecho. Eso es lo básico de tu menú. Voy a ir a darle estilo ahora y agregarle cosas. Pero eso es básicamente. Ya puedes irte, voy a diseñar mi menú y puedes pasar el rato si quieres. Modo de diseño, opción uno o lo que sea la necesidad de comprobar. Probablemente sea viejo. Conozco a todos de memoria, pero estoy bastante seguro de que uno es diferente en un PC me refiero. ¿Qué voy a hacer? Voy a tener otra versión del logo doble-click copy. Voy a pedir prestado esto. Toma prestado eso, y toma prestado ambos. ¿ Puedes ver mi pequeña técnica de selección? Al igual que yo quiero eso, es realmente pequeño hacer clic y sostener “Shift” y todo está en el camino. A menudo lo que voy a hacer es simplemente nada seleccionado. Acabo de conseguir mi herramienta de selección y solo arrastra una caja alrededor de esto. Seleccionará todo lo que hay debajo de esa pequeña caja azul de ahí. Entonces sostengo “Turno” para anular la selección. Puedes hacerlo uno por uno sosteniendo Shift y simplemente haciendo clic en las cosas que no quieres. O lo que hago es sostener “Shift” y arrastrar una caja alrededor, todas esas cosas. No significa nada aguantar. Quiero todo esto y luego sostenga “Shift” para anular la selección de eso. ¿Haces eso? No, yo sí. Voy a “Alt” arrastrarlo por aquí o opción arrastrarlo a un PC. Voy a terminar mi menú nuevos ítems. En este caso, porque quiero que se puedan hacer clic, no quiero usar como un gran menú largo, volver, volver menú. Lo que quiero hacer es tenerlos a todos como su propia pequeña unidad. Este primero va a ser detalles correctos. Voy a ir a mis dulces estilos de carácter. Probablemente la versión audaz. Ahora estoy bastante seguro de que aún no puedes hacer viñetas en Adobe XD, ¿verdad? Bullet, no, y eso podría aparecer en el futuro por aquí. Podría ser el ahora, no ahí. Puedes hacer algunos tipos diferentes de cosas. Lo que hago a menudo es en un Mac, al menos es “Opción, 8". ¿ No es lo que hay en este teclado? “ Opción, Turno, 8" te dará un pequeño punto de bala. En un PC, es posible que tenga que Google cuál es el atajo para hacer un punto de viñeta y lo uso porque no hay opción por aquí. No creo. Tengo esto y voy a usar mi rejilla de repetición solo para algo sencillo como esto. ¿ Cuántas opciones tengo? Probablemente alrededor de cuatro. Hacerlos lo suficientemente grandes para que sean clicables y lo bueno de esto es que puedo hacer doble clic en ellos y hacerlos ir a diferentes lugares, por lo que parte de los detalles pueden ir allá. Recuerda, recordará lo último que decidiste. No quiero que haga una superposición ahora, quiero que pase a esa página usando la diapositiva ¿verdad? Probablemente no sólo se disuelva o ninguno, sólo consigue que salte ahí. Ahora éste, voy a cambiar el nombre y éste va a ser, en realidad, ese primero necesita estar en casa, ¿no es así? Genial. Diré la página de pago? Estoy llamando a la página de pago. Probablemente sea más probable que se llame el carrito de la compra . Tengo una página de cuentas. En realidad no tengo esa página hecha, pero se puede ver cómo es fácil usar el bajo diseño, usar el que es? Esa cosa ahí, la rejilla de repetición. Voy a decir que deshazte de ti. No tienes que romperlo para empezar a trabajar con ella. Puedes dejarlo aquí. Necesito un hogar en la parte superior ahí. Si hago click en este top y voy a copiar y pegar, no está funcionando, es copiar y pegar ese elemento individual y estos son sólo copia espejada, por lo que no funciona como queremos, Entonces, ¿cómo arreglamos eso? Voy a desagruparlo y en qué podemos convertirlo? Bueno, podemos empezar a cambiar el pedido y agregar otros nuevos. Recordamos que es una pila. ¿ Cómo te conviertes en una pila? Asegúrese de que su componente. Entonces dice stack. Ahora puedo seleccionar en este top uno e ir copiar-pegar otro. Ahora estamos en casa. ¿ Qué hizo con el prototipo? No lo sé. Conservamos la de arriba. Para reajustar esto, voy a agarrarlo y romperlo ahí y decir que vayas ahí. Ahora tú, amigo mío, vas a ir allá y porque recuerda lo último que hiciste, debería ser todo muy bonito ahora. Porque no puedo ver este otro, en lugar de arrastrarlo, solo voy a decir agregar interacción. Recuerda todo excepto la mesa de trabajo. Voy a decir ir a mi página de checkout. ¿Cuál? Tengo demasiados. Yo echaría un vistazo a Hi-Fi, no creo que quiera ir. Ahora, en este curso he guardado los wireframes como parte de este documento sólo para hacer la vida dura. Eso es lo que hice. Tendría más probabilidades de tener estos en otro documento ahora solo porque están causando más problemas de los que valen en este momento. Iba a empezar porque es fácil copiar el diseño. Pero ahora, acabo de Guardar como, File, Save As, hago otra copia, una llamada wireframe y otra llamada alta fidelidad. Esperaste por todo esto. Mira lo hermoso que es. A veces sé que los dejo en porque a veces es útil ver el funcionamiento de otras personas. Entonces otra vez, como la rejilla de repetición, significa que la pila, puedo hacer algunas de esas cosas bonitas. Quién recuerda lo que sostengo para meterme con este espaciado? Eso no fue. ¿ Alguien se acuerda? Tienes que ir dentro de ella y simplemente pasar el cursor por encima de él, pero yo quería hacer todo al mismo tiempo. ¿ Qué sostienes? ¿ Te acordaste? Estás mirando el teclado, es turno. Lo tienes. Demos a esto un adelanto. Tú, amigo mío, voy a jugar y vamos a hacer clic en él y es mucho más bonito. ¿ Cómo consigo que vaya en cada página? Ese es un punto muy bueno. Lo que voy a hacer es decir que voy a ponerlo en esta página. Vamos a ignorar acerca de cambiar el color por el momento. Sólo voy a ir dentro de éste y hacerla más oscura. Voy a ir aquí y eliminar esa. Bueno, solo eliminemos esa. Voy a mover éste a través porque contiene dentro de aquí mi prototipo, que van dentro que enlaza de nuevo a esto. Siempre y cuando copie y pegue esta navegación mientras esté en modo prototipo, traerá ese enlace a través. Voy a decir que copia, ve a éste, y pega. No necesitas una mesa de trabajo diferente para todos. Vamos a nombrarlo bien a uno. Sí necesito agregar algunos como un rectángulo en el fondo aquí, así que “R” para rectángulo, llegó a estar en vista de diseño , de lo contrario, R no, no sé lo que hicieron. No hice nada. Vamos a arrastrar esto. Vamos a poner algunos nuevos, vamos a escoger este color, este color es opacidad del color. Envíalo a la parte de atrás, por lo que ahora eso debería funcionar. Vamos a darle una vuelta. Detalles del producto. Genial. Apareces, yo puedo cerrarlo. Bueno, tú apareces, quiero ir a los detalles del producto, pero sigue siendo el menú disponible. Nosotros tenemos eso. Ahora puedo ir te conectas a casa va a casa. Tenemos eso yendo hoy. Yo sí le di un adelanto. Usted probaría, un montón de pruebas. De vuelta a casa. Ese producto detalla. Ese es un menú deslizable. Es bastante fácil ponerse en marcha. Solo tu visión general, solo asegúrate de que esté en su propia mesa de trabajo coincida con el mismo tamaño que tu ventana gráfica y puedas vincular varias cosas o volver a ella. Una vez que hayas arreglado tu componente por la parte superior aquí en términos de digo rig up, pero quiero decir como conectar el prototipo, todas estas pequeñas líneas punteadas aquí es una vez que lo tienes, asegúrate de copiar y pegarlo en modo prototipo, no en modo de diseño porque el modo de diseño despojará a todas aquellas partes que estén rebotando. Eso es todo, menú lateral deslizante. Voy a bajar un poco la opacidad de esto. Ya puedes ir por tu negocio. Vamos a echarle un vistazo. Ahí tienes tienda por ahí. Espectacular, no realmente legible. Eso es suficiente para este video. Te veré en la siguiente. 76. Proyecto de clase 16: Popup y navegación: Hola a todos, tiempo de proyecto de clase. Voy a conseguir que hagas un pop-up y una navegación. La navegación es fácil. Es éste. No tiene que ser exactamente como el mío. Tengo un poco de investigación. Echa un vistazo en tu teléfono, solo sitios web que frecuentas mucho y ve cómo han hecho navegación, cosas que te gustan, cosas que no te gustan y tal vez mira cosas como Dribbble o Behance o incluso solo Google y busca interfaz de usuario móvil Nav solo para ver diferentes estilos y la forma en que en realidad están interactuando y cómo realmente funcionan o cómo entraron en la página y estilo esto pequeño panel también. Más bonito que el mío, aburridos viejos puntos de bala. La otra parte son pop-ups. Van a haber dos. Quiero que hagas un pop-up como lo hemos hecho. Hicimos éste. Hemos utilizado esta confirmación de “Agregar al carrito”. Puedes hacer eso, eso está bien. Pero también lo hemos hecho. Podrías haberlo hecho a través del curso, así que echa un vistazo a tal vez haciendo algo más como un pop-up. Echa un vistazo a tu diseño. ¿Qué más podría ser algo que aparece pero te devuelve a esa misma página. Podría ser algo así como una información sobre herramientas. Ya sea hay un I para información, o un pequeño signo de interrogación donde puedes hacer clic en él y te da más información. Exactamente mismo principio. Hicimos el clic en el botón “Compra” para mostrar la confirmación del carrito, pero podrías hacerlo por una información sobre herramientas también. No haga clic en él. [ Risas] Clickable. También puedes pensar totalmente en cualquier otra cosa, siempre y cuando haya un pop-up clickable entonces. Nos va a hacer nuestro boletín de registro modal. Modal si no lo has sabido ya, es su palabra usada para una pequeña unidad, sobre todo la que aparece. Algo que aparece es un modal. No te lleva a otra página para hacer algo. Es esta pequeña pantalla de información donde puedes hacer algo y potencialmente volver a donde estás. No es una página separada. Aparece en la parte superior de una página existente, por lo modal. Quiero que hagas una suscripción a boletin. Aparecen en las páginas o cuando intentas salir, son como, oye, ¿ te gustaría que se haya ido? Entonces, inscribe boletín modal o algo así como, 10 por ciento de descuento si te inscribes en nuestro boletín de correo electrónico. Ahora la diferencia entre esto y decir el tooltip o el “Añadir al carrito” es que quiero que sea un pop up cronometrado y tú eres como, él no nos mostró cómo hacer eso a propósito. Lo que quiero hacer es supongo que en lugar de simplemente seguirme a través de esta cosa, siento que en este punto de nuestra clase o de nuestras lecciones, podrías o no tener la capacidad de ver si puedes hacer eso. Lo que quiero decir con eso , por si no estás seguro, es que no hago clic en nada. No está de grifo. Es solo un tiempo después de una cierta cantidad de tiempo, aparece un modal emergente y es el registro del boletín, y luego puedes hacer clic en él para cerrarlo. En lugar de tocar, vas a tratar de conseguir que se cargue en un temporizador. Eso va a ser complicado. Si no puedes hacerlo, revisa los comentarios. [ Risas] Ojalá alguien más te pueda dar una mano, pero supongo que quiero enseñarte a pescar en lugar de darte pescado. ¿ Cómo va eso? Entendes la idea. A ver si puedes hacer que funcione. Si no puedes, no hay drama. Tienes que hacer algunas búsquedas en Google. Pregunta en los comentarios, pregunta en los grupos si lo estás encontrando duro, pero dale una ir tú mismo primero si puedes resolverlo. Timed pop-up modal. [ RUIDO] Si puedes grabarlos, si no puedes hacer una captura de pantalla y compartirlas a los lugares habituales, me gustaría ver qué haces. Amigos, navegación feliz y pop-up making. Buena suerte con el pop up cronometrado. Hacia el siguiente video. 77. Qué son los flujos en Adobe XD: Hola a todos. Este video, vamos a ver estas cosas que son flujos. Teníamos un poco de mirada antes en el curso. Teníamos flow 1, pero ahora vamos a tener unos flujos distintos que podemos compartir. Déjame mostrarte cómo hacerlas. Para hacer un flujo, tu primera, echemos un vistazo a esta es mi página de inicio para mi primera, creé un flujo antes. Hacemos click en este pequeño ícono Home y el flujo 1 apareció y antes en el curso, lo ignoramos. Significa que si no tienes nada seleccionado, absolutamente nada en tu obra, por eso hemos estado estudiando aquí. [ Risas] He estado lidiando con esa parte ignorante hasta aquí porque esto está un poco más lejos en el curso que tenemos el espacio en blanco para resolver qué son los flujos. Tengo un wireframe. En lugar de llamar flow 1, lo que voy a hacer es asegurarme de que cambiemos al modo prototipo, en realidad no para compartir el modo. Recuerda que es la opción de comando 1, 2, o 3 para cambiar entre estos, y no lo estás haciendo mucho, 1, 2, 3 y recuerda, es PC, es Alt 1, 2, 3, y vuelve a comprobar eso. Esto es flujo 1. Podemos renombrarlo. En realidad se puede nombrar aquí o por aquí, no importa. Este va a ser mi wireframe. Significa que puedo tener el mismo documento y puedo crear un enlace para compartir con la gente. Estoy enlazando para revisión. Lo hicimos de nuevo antes en el curso recuerda, tengo un enlace esperando. Ahí vas. Tiene su propio enlace único. Lo que podemos hacer en realidad es crear uno diferente para esto, podemos volver al prototipo. Podemos dar click en esto. Puedo hacer de esto otro punto de partida haciendo clic en el pequeño botón Inicio y luego el modo prototipo y luego compartir. Creo que puedes hacer click en el botón Inicio y compartir también. Éste puede ser mi alta fidelidad. Puedo crear un segundo enlace. Voy a crear otro ahí mismo. Magia, Alta Fidelidad una de las imágenes tardó aproximadamente una cuarta parte del tiempo para hacer el enlace. Ahora, podemos compartir este enlace con alguien. Tenemos el mismo documento para mantener nuestros cerebros todos en el mismo lugar que un diseñador. Pero para la gente que lo revisa, podemos compartirlo con enlaces separados. En la parte superior aquí, puedes decidir ahora digamos que lo cambiamos, en lugar de todos, sólo vamos a invitar a personas específicas. Podemos decidir si estamos haciendo eso para el wireframe o la versión Hi-Fi que estamos enviando. Ahora tenemos sólo dos aquí. Podrías tener tantos como quieras. Al igual que nos hemos separado en wireframe, High Fidelity, podrías terminar teniendo uno que sea como concepto 1, concepto 2 o colorway 1, colorway 2 colores diferentes. O en este caso, es posible que tengas otro en acción, no puedes hacerlo. Tienes que hacerlo en prototipo. Aquí vamos. Aunque no lo puedas ver, sé que este pequeño ícono de Home, lo puedes ver ahí, solo que no tiene suficiente espacio para ser visto. Haz eso. Cuando te metes ahí, está ahí, cuando alejas desaparece. Vamos uno más. Es demasiado pequeño, pero aún se puede hacer clic en él. Esta podría ser mi vista de escritorio. Puedo compartir ese vínculo con la gente. Pero debido a que mis activos están en lo mismo, todo el logotipo y todos los colores y bichos y esas cosas, es más fácil guardarlos en un documento a veces. A veces hay que dividirlos en dos documentos diferentes lo están haciendo ocultos porquelo están haciendo ocultosporque hay demasiado pasando. Eso es flujos en Adobe XD. 78. Cómo compartir tu documento con clientes y los testadores de usuario: Hola a todos. En este video, vamos a ver cómo compartir nuestro documento a nuestros grupos de interés, o a nuestros clientes, o a los probadores de usuarios. Básicamente, la pestaña Compartir aquí cubrimos un poco antes en el curso, pero vamos a entrar un poco más de una inmersión profunda y vamos a pasar por las diferentes opciones que XD puede producir y para qué son buenos. Vamos a saltar. Hicimos un poco de compartir justo atrás al principio. Recuerda, compartimos nuestro diseño para comentar y así recuperemos algunas de las cosas que necesitamos recordar. En primer lugar, cuando estás compartiendo un enlace, debes decirle a XD cuál es tu página principal, que es la primera página que alguien va a ver. Lo haces al estar en modo prototipo y haciendo clic en esta casita. A veces no se puede ver la casa. Mira esto, alejando el zoom. Se está acercando. A veces gira en solo una pequeña pestaña. Lo que puedes hacer es que puedas decir que esta es en realidad mi homepage o hacer clic en el nombre de ésta. Esto va a ser. Cuando haces clic en él, ya lo hemos hecho antes, recuerda cuando hicimos flujos. Pero aquí, se podría decir en realidad esto es todo. Se le va a dar un nombre de flujo y esta es tal vez mi animación de confirmación. Este podría ser un buen punto donde voy a compartir solo este enlace porque de eso estamos hablando. Eso es lo único que queda por hacer, es como, hey, ¿has hecho esos cambios en la animación de confirmación? Lo que podríamos hacer es simplemente compartir este enlace, y para compartir ese enlace, haz click en el que quieras. Para compartir, ve a la pestaña Compartir y decide cuál de estas configuraciones de vista vas a crear, crear un enlace, y eso es lo que vas a compartir. Puedes decidir sobre el acceso a enlaces. ¿ Puede alguien con el enlace? Obviamente esto es menos seguro, pero nadie va a tropezar con él. Es un eslabón loco que nadie va a adivinar. Pero si quieres ser más seguro, puedes invitar a personas con correos electrónicos. Si conoce su dirección de correo electrónico, puede invitarlos específicamente. O la tercera opción es a cualquiera que tenga la contraseña, no sólo a las personas con la dirección de correo electrónico correcta, cualquiera que tenga el enlace y conozca la contraseña. Puedes decidir cuál de estos necesitas. Creas el enlace y lo compartes. Otra cosa interesante es que digamos que esta Hi-Fi va a ser la que quiero compartir, y te darás cuenta que la Hi-Fi incluye esto más la confirmación. Es como una adición a, pero va a empezar desde esta página. A pesar de que estos chicos son los primeros en la línea, quien usa estos es solo superposiciones recuerdan. Entonces esa casa es realmente importante. La otra cosa es que me va a mostrar lo que no está incluido. No hay conexión entre ninguno de estos hasta mis wireframes, por lo que estos no van a ser parte de ese enlace. Igual con estas pequeñas opciones para la página de inicio, diferentes versiones que hicimos. Sólo tienes que ser atento. Echa un vistazo a lo que está incluido, lo que no. Así que nada de estas cosas de escritorio, nada de esto por aquí. Lo que pasa es decir prototipo, está buscando una de estas conexiones. ¿ Puedes ver opiniones solo tiene una pequeña conexión con ellas? Si agarro este trozo y accidentalmente lo elimino y luego vuelvo a Share y hago click en “Hi-Fi”, ¿puedes ver que está en gris? Simplemente significa que eso no está incluido. Voy a golpear “Deshacer” en mi teclado, así que está de vuelta en el juego. Creamos un enlace antes. Hemos hecho muchos cambios desde entonces, por lo que vamos a hacer clic en “Actualizar enlace”. Puedo copiar ese enlace y enviarlo por correo electrónico. Me está diciendo cuándo se actualizó por última vez. Estoy muy claro que este es el enlace actualizado y puedo ponerlo en un e-mail, enviarlo. Ahora si quiero enviar mis wireframes, si hago click en esto, es un enlace completamente diferente. A pesar de que están en el mismo documento, no hay forma de conectarse a través de estos, así que tenemos que crear actualización. ¿ Se puede ver que éste se hizo hace un rato el 11 de febrero? Necesito actualizar este enlace y se ejecutan por separado para las personas que lo ven del otro lado. Hay una versión de wireframe y una versión de alta fidelidad, y se puede utilizar eso para diferentes equipos, diferentes partes del flujo. Podrías estar enviando una parte de ella a legal. Algo de ello podría estar yendo a los derechos de autor, podría ser tu manager de estudio. Puedes crear diferentes flujos y solo saber que son enlaces diferentes. Veamos los diferentes ajustes de vista. Hicimos vista de diseño más temprano y te lo mostraré. he abierto todos porque voy a pasar rápidamente por lo que hacen todos estos diferentes, pero básicamente lo mismo con diferentes formas de verlo. Revisión de diseño es cuando salimos a revisión de diseño. Esto sería genial para tu cliente o cualquiera de tus partes interesadas que podrían ser cualquier gente que tenga participación en este proyecto. Podría ser tu mayor equipo. Podría estar saliendo a los clientes. Podría ser sólo ir a un amigo a revisar, y es el que más uso. Vamos a echarle un vistazo. Esta primera pestaña aquí, te da casi todo. Te da navegación básica aquí abajo. Entonces tu cliente, si no son muy conocedores y no saben cómo usarlo y solo pueden trabajar el camino a través, pueden usar las teclas de flecha en su teclado. Es bastante robusto. Además, tiene el comentario. Recuerda, puedes anclar esos comentarios en lugares específicos. [ RUIDO] Puedo presentarlo. La otra cosa que la vista de diseño te da son estas pistas. Podrías ver esto. Si hago clic en cualquier parte, puedes ver los aspectos más destacados como, hey, quieres decir hacer clic en estas cosas. Esa es algunas de las diferencias entre las otras. Vamos a echar una revisión de diseño de look. Desarrollo lo haremos en otro video porque es bastante específico ir a tu desarrollador web, diseñador web. Si lo estás codificando, eso es bastante específico. Pero la única diferencia real visualmente es que se puede ver comentar. Si no tuviera mi propio comentario ahí, la única diferencia es, ¿puedes ver esta opción aquí? Podemos meternos en algo del código, por lo que no es una gran diferencia. Si le das a un diseñador el de desarrollo, eso va a estar bien. Aún pueden hacer todo. Hay un poco extra, y tal vez esto es solo un buen todoterreno. A pesar de que dice desarrollador, no tiene que ser un desarrollador que lo reciba. [ RUIDO] Echemos un vistazo a otro. Esta de aquí puede ser una gran presentación. Básicamente, sólo va a pegarlo en el modo de pantalla completa. Si mandas el enlace a alguien, va a ser de pantalla completa y tiene la pista. Se deshace de toda esta basura. Está muy claro. A pesar de que podría ser usted presentarlo, sólo podría usar esto para enviar a clientes que usted sabe que solo quieren verlo. No necesitan comentar y confundirse por todo. Es una versión bonita, limpia. Pero sí tiene la insinuación para ayudarlos a lo largo. Asegúrate de vincular todos tus botones. [ Risas] Creo que nos tengo a una página donde nada funciona, así que pruébalo tú mismo porque no hay escapada de esta página. Todas esas pistas son solo para botones de radio aquí. Ahora volvería a XD y me iría Hi-Fi. Puedo llegar a esta página. Si miro mi prototipo, lo que he notado es que no tengo ninguna de estas herramientas de navegación funcionando. Compra funcionó. ¿ Por qué no hago clic en el viejo desplazamiento? Ahí vas. Eso trae un buen punto también. Ese modo de presentación es como todos estos enlaces que estoy mostrando que estás en mi escritorio. Deberíamos serlo, si vas por un dispositivo móvil, compartiéndolos, especialmente para pruebas de usuarios realmente en un teléfono. Nos saltaríamos estos enlaces aquí. Recuerda cuando hicimos pruebas en un teléfono antes, eso es lo que estarías haciendo. Estarías compartiendo el enlace, abriéndote en la aplicación XD, y reunirte con alguien para hacer algunas pruebas de usuario y solo ver cómo interactúan con la app, alguien que está cerca de tu usuario perfil. Incluso si son solo compañeros o amigos o familiares los que están haciendo algunas pruebas básicas de usuario, hazlos que hagan por teléfono porque esto es raro cuando estás tratando de decidir el tamaño porque sé que es un poco grande. Mi monitor simplemente lo hace un poco grande, y estoy usando mi ratón y no mi meñique. Estos podrían tener que ser grandes o pequeños objetivos para golpear y sé que no tengo navegación aquí arriba , pero tengo un botón. Me aseguraría de entrar aquí, encontrar uno que tenga la navegación en él. Éste lo tiene. Todavía no he arreglado estas dos cosas, pero recuerdo que puedo copiarlo siempre y cuando estemos en modo prototipo y nos vayamos. Usted borra. En realidad, quiero que todo esto se haga. Yo copio y pego. Viene la navegación. Ahora que he hecho eso, ¿qué hago? En Compartir, tienes que asegurarte de actualizar el enlace. Incluso si sólo tienes en los cables, no hay nada físicamente diferente al respecto, lo era el mío. Pero aunque solo cambies la lista mínima de opciones, hay que actualizar el enlace y enviarles uno nuevo. Cuando digo que les envíes uno nuevo, no tienes que enviarles uno nuevo. Actualiza el enlace y se actualizará por su lado. Un enlace no tiene por qué serlo. No es necesario enviarlos y decir, oye, aquí hay un nuevo enlace. Solo necesitarán refrescar su página o abrirla de nuevo y comenzará a funcionar. Déjame mostrarte. Si voy a Design y entro aquí y decido que este botón aquí, hemos decidido por alguna razón que es del color equivocado y lo cambiamos a algo realmente obvio. Yo lo guardo. Voy a Compartir y todo lo que tengo que hacer es actualizar el enlace, asegurarme de que estoy en el correcto. ¿ Ves por defecto al wireframe Hi-Fi? Actualice el enlace, y luego en estas maquetas de aquí, espere a que haga lo suyo. Lo ha hecho. Por aquí ahora, si presiono “Refrescar”, cuando la persona vuelve a abrir el enlace, mira este botón debería actualizarse. Aquí tienes. Ese mismo enlace no necesita ser recompartido. Hemos hablado de desarrollo de revisión de diseño. Estamos haciendo un poco de presentación. Las pruebas de usuarios son básicamente lo mismo, excepto que no hay indicios. Estos dos son exactamente los mismos, excepto éste no tiene la insinuación. No quieres guiar demasiado a tus probadores de usuarios porque quieres averiguar si pueden hacerlo por su cuenta. Presentación, esta de aquí, la misma pero las pistas están apagadas. Mientras que éste de aquí, es lo mismo, pero tengo estos encantadores indicios. Éste, sin insinuaciones. Impresionante. Otras opciones es costumbre. Básicamente, puedes decidir cuál de estas cosas te gusta. Una pantalla completa es lo que sucede cuando estás haciendo pruebas y presentación de usuarios. Mostrar puntos de acceso. Recuerda que esa fue la única diferencia entre las pruebas de usuario y la presentación, esa pequeña cosa carnosa para ayudar a las personas a moverse. Simplemente puedes decidir, mostrar controles de navegación. Echemos un vistazo. Esas son estas cosas abajo aquí. ¿Pueden moverse? Agrega o elimina esto. Puedes decidir si eso es útil o no, y permitir comentar es comentar. Ahora, es útil actualizar los links, pero hay momentos en los que me gusta simplemente hacer un nuevo enlace porque quiero retener esa versión antigua, como una versión 1, versión 2. Podrías haber notado a través del curso que he hecho versión 1, 2, 3, 4. A pesar de que está brillantemente guardado, tengo diferentes versiones para mí porque no puedo detenerlo. [ Risas] Usted quiso simplemente guardar el mismo documento. Lo que me gusta hacer es decir que envío esto fuera comentando. Lo que me gusta hacer, sobre todo si soy el revisor, me encanta poder ver qué comentarios hice porque a veces voy a marcar algo y decir, hey, puedes cambiar esto y esto, y mi UX diseñador me enviará una versión actualizada. No recuerdo con qué tuve problemas la última vez, así que es difícil enmendar. La forma de moverse es decir que hemos enviado esto con comentarios. Hemos actualizado nuestro enlace y lo enviamos fuera y quiero retener esa versión. Lo que puedo hacer es sólo guardar el documento. Entonces si voy “Archivo”, “Guardar como”, y voy a hacer una nueva versión, todavía la estoy guardando en la nube. Versión 5, ¿puedes ver aquí? Enlace de actualización se fue. Si abro la versión antigua, versión 4, todavía estará en que estuvimos hace apenas un minuto, se podría ir a Share, y su enlace de actualización. Esos enlaces se quedan por ahí y puedo volver atrás y revisar ese enlace e ir, esos fueron los comentarios. Considerando que esta nueva versión, hay que generar otras nuevas. Todavía tienes tus flujos como todos mapeados, pero los enlaces van a ser nuevos. ¿ Eso tiene sentido? Lo último que hay que tener en cuenta es su mirador. Hemos hablado de ello unas cuantas veces. Seleccionarlo, Comando 3, Control 3 en un PC para seleccionarlo todo es esta cosa aquí. Recuerda que si tienes una página corta, no la vas a ver. Pero tan pronto como tengas una página más larga, esa cosa aparece. Solo asegúrate de que esté en la posición correcta. Coincidencias con todo lo demás, coincide con tu documento de prueba, incluso en la vista de escritorio. Si estás haciendo una vista de escritorio, si arrastra esto hacia abajo, ahí está. Esto debería ser nosotros queremos que sea. Porque si te olvidas y solo te mueves porque me molesta. [ Risas] Ojalá hubiera una ventanilla no vista. No hay por el momento. Sólo voy a moverla de cualquier manera. Si lo quitas de cualquier manera, como lo voy a mover por ahí para que pueda diseñar esto. Entonces si exportas esto, terminarás con esto. [ Risas] Vas a ser como si fuera un poco pequeño. Sólo asegúrate de que esté en el lugar correcto. En mi caso, quiero que esté en, ¿dónde está? 667 porque eso es lo que estoy probando. Estoy probando en mi teléfono que tengo. Ese es el tamaño correcto. Eso es. Haremos más enviando a un desarrollador en el siguiente video. Saltemos por ahí y aprendamos todo sobre eso. 79. Hablar con tu desarrollador temprano en el proceso de diseño XD: Hey, todos. Estoy fuera. Estamos siendo atascados en esa pantalla de computadora portátil demasiado tiempo, así que estoy al aire libre. Quería hablarte de hablar con tu desarrollador. Va a haber momentos en los que hay algunos de ustedes por ahí que van a estar siendo diseñador de UX y siendo tú mismo el creador de aplicaciones web. Habrá muchos desarrolladores viendo este curso para conseguirte las habilidades de Adobe XD. Pero la mayoría de ustedes van a ser diseñadores o creadores que quieran hacer diseño de UX, y van a tener que empezar a trabajar con el desarrollador. Algunos de ustedes podrían ser nuevos en esto. Es como una charla pip, cómo hacerlo cosa porque inicialmente, lo hice cuando empecé, da miedo trabajar con un desarrollador o un ingeniero, dependiendo de lo que se llamen ellos mismos, web diseñador, ingeniero desarrollador web. Has hecho tu diseño, lo tienes probado, y ahora, van a ir a construirlo. Lo que no quieres hacer es que no quieras que esta sea la primera vez que hablas con ellos. Quieres haber tenido una discusión todo el camino. Puede ser intimidante y aterrador, lo sé, porque estaba intimidada y asustada trabajando. Entregándolo a desarrollador, eres como, les mandas un e-mail, primera vez que hablé con Sally, se lo mandas a ellos y esperas lo mejor. Es decir, sin duda, todos los empleos que han ido realmente mal, son empleos que han seguido esa línea de proceso. Los trabajos que van extremadamente bien son los que voy a averiguar quién es el desarrollador, si es alguien con quien estoy trabajando constantemente, como desarrolladores con los que trabajo todo el tiempo así que tengo realmente buena relación con ellos. Pero digamos que es para otro cliente y el cliente está organizando al desarrollador, ni siquiera estás seguro. Es para conocer a esa persona desde el principio y involucrarla. Porque lo que no quieres hacer es ser tú contra desarrollador, lo que puede suceder. El diseñador me dio esta cosa y estoy tratando de construirla, y no saben nada. Tú, asustada del desarrollador. Es sólo una mala manera de entregar ese producto al desarrollador porque se convierte en tú contra ellos, se vuelve, ¿por qué lo han hecho? Donde si es temprano, hay tantas veces en un proyecto donde he asumido que las cosas son demasiado duras y lo haremos más tarde. He hablado con mi desarrollador, no tiene que ser una reunión oficial, es como, oye, este es mi primer wireframes, oye, este es el breve, y solo hablando de lo que quieres hacer. Es simplemente genial porque eres como, esa cosa que pensaste que era muy dura y vas a hacer más adelante , tal vez en la fase dos, es realmente fácil y son como, de ninguna manera, esa cosa es ya sucediendo de este lado, simplemente llame a otra cosa, o esto es algo diferente, o está integrado en el marco que estoy usando. Puedes conseguir esas cosas principio de trabajar con el cliente. El camino opuesto es a veces, estarías pensando, esto sería realmente bueno. Impresionante. Esto parece fácil. Entonces el desarrollador es como, eso no es fácil. Te parece fácil pero la forma en que tal vez la lógica o la plataforma o la base de código que están usando ya no es capaz y es un gran trabajo conseguirlo. Es posible que tengas que entonces solo permitir más tiempo para el trabajo o empujarlo a la segunda fase. La segunda fase es una buena manera de decir que se hará en el futuro, pero probablemente nunca. No se le quiere decir al cliente, eso no puede pasar nunca. Lo haces en la fase dos, que nunca lo es, pero suena mejor. Puede ser formal, me parece solo conversacional, averiguando quién es, reunirme con ellos, porque no hay forma oficial. Te voy a mostrar formas de darle cosas al desarrollador, pero no hay como x, y, y zdárselo a una impresora, si eres diseñador gráfico, hay una forma específica, puedes averiguarlo. Sangrado, recorte, resolución, y esas cosas, con el desarrollador, va a depender de ellas, van a querer algunas cosas específicas, definidas. Entonces mucho es la forma en que quieren trabajar y cómo lo están construyendo. Si se trata de una actualización de un nuevo sitio o crear un nuevo sitio, van a necesitar mucho más de usted. Si se trata de una actualización de un sitio existente, básicamente, van a estar simplemente usando tus diseños como guía visual y simplemente haciendo todo por separado de ti. Todo lo que necesitas para suministrarlos son probablemente imágenes. Eso es lo que quería decir es que si tienes miedo de los desarrolladores, no te preocupes, los desarrolladores también tienen miedo de los diseñadores de UX. Es lo mismo pero del otro lado. Conseguir una conversación temprano hace que el proyecto simplemente funcione 10 veces mejor, confía en mí en esto. Has hablado con tu desarrollador y ahora, es hora de darles algunas cosas. Vamos a saltar a XD ahora y darles cosas. 80. Exacta los formatos de archivos de imagen adecuados de Adobe XD: Hola a todos. En este video, vamos a exportar imágenes de Adobe XD, listas para entregar a nuestro desarrollador. Vamos a ver tanto la mecánica de exportar realmente algunos de los trucos como también algunos de los formatos. Por eso éste es un poco más largo. Cubriremos cuándo deberías estar usando un JPEG versus PNG frente a SVG. Vamos a conseguir todas las imágenes. Lo primero que debes hacer probablemente cuando estás exportando imágenes es simplemente dar una visión general de las imágenes, un PDF con solo dos páginas. Solo puedes ir a Archivo, Exportar, Todas las mesas de trabajo. El problema con eso es que va a exportar todo lo que es una mesa de trabajo. Al tener sólo un documento de referencia, lo voy a utilizar para cualquier cosa que no colocar las imágenes como en tú les mandas 400 imágenes y son como, “¿A dónde van estas?” Se puede hacer un PDF solo para que puedan ver a dónde va todo. Obviamente podrían usar el enlace también. Para ello, puedes seleccionar solo las páginas que desees. Haga clic en el nombre mantener pulsada Mayús, haga clic en los que desee salir. Sólo voy a exportar estos cuatro y voy a ir a Archivo, Exportar, y luego voy a ir a Exportar Seleccionados, luego haremos todo el tablero de arte. Desde el formato, PDF es realmente bueno, múltiples páginas, buena resolución, y podemos golpear Exportar. Ya he hecho uno porque esta es la segunda vez que grabo esto. Perdí mi camino allí. Aquí vamos. Tenemos un PDF y sólo podemos enviar eso, incluir eso en nuestras cosas que salen. Eso es sólo para referencia, cosas que en realidad podrían estar usando. Podemos utilizar la misma técnica. Esta imagen aquí, necesito sacarla para el desarrollador. Por qué esto conseguir exportación y no este texto. Van a reconstruir el texto en HTML, o depende de cómo estén haciendo, si se trata de una aplicación frente a un sitio web. No van a querer lanzamientos de tu texto. No van a querer nada que hayas dibujado, cosas como botones. No vas a querer esta caja para tu formulario porque usarán código para crearlo. Con tus botones aquí, hay un botón. Extrañamente, a pesar de que has puesto mucho esfuerzo en tu sombra paralela, lo construirán de nuevo usando código, incluso la sombra paralela. Las cosas que sí se exportan que se consideran imágenes son cosas que parecen imágenes que son claras. Tenemos un montón de esos por todas partes. Las cosas que has dibujado como estos iconos. Estos iconos aquí nos vamos a exportar como “imágenes”. Haremos eso. Esta imagen se va a salir. Para sacar una imagen, solo puedes ir Archivo Exportar Seleccionado. Quiero mostrarte de esta manera solo porque quiero realmente pasar brevemente por formatos. Tal vez tengas que investigar esto un poco más, pero vas a estar lidiando con uno de estos cuatro. PDF que probablemente ya conozcas. Eso fue sólo un buen formato de documento de visión general. Ya no vamos a usar eso. JPEG versus PNG frente a SVG. Cuando se trata de imágenes como estamos explotando ahora es PNG o JPEG. La diferencia es que un PNG permite cierta transparencia. Déjame echar un vistazo a éste. Veamos, éste tiene que ser un PNG. Prefiero que sea un JPEG. ¿ Por qué? Porque JPEG o menor. Puedes obtener gran calidad a un tamaño de archivo realmente pequeño. El tamaño del archivo es bastante importante cuando se trata de como cargar sitios web. Puedes ver por qué este podría tener que ser un PNG en comparación con éste? Esquinas redondeadas. Éste de aquí tiene esquinas redondeadas. Tiene que haber como algunos rincones transparentes. JPEG no dejarán pasar ninguna transparencia. Comparemos estos dos. Voy a exportarlo dos veces. Archivo Exportar como seleccionado. Lo haremos tanto como JPEG. La calidad, hablaremos de eso en un segundo también, pero vamos a exportar éste, y luego vamos a exportar una vez más como PNG. Lo exportamos. Sólo voy a traerlo vuelta para mostrarte la diferencia. Lo haremos tal vez más. Crearemos un tablero de arte por aquí. Tengo un gran documento con contraste en él. Voy a usar import. Voy a decir que aquí están estos dos. Importe dos a la vez. ¿ Ves la diferencia ahí en los bordes? Conozco la calidad. Hablaremos de eso en un segundo. Pero se puede ver un PNG permite esa transparencia, mientras que los JPEG, a pesar de que son geniales para las imágenes, no son geniales para las imágenes donde se necesita transparencia. Si has hecho alguna máscara de fantasía divertida, va a tener que ser un PNG. Si es sólo un completo sobre cuadrado o rectángulo, ¿dónde estamos? Éste de aquí, porque tiene bonitos bordes afilados, no se necesita transparencia, va a ser un JPEG. Hablemos de qué tamaño debe ser. Archivo Exportación Seleccionado. Hemos decidido que éste tiene que ser un JPEG. Calidad, ahora, depende de cuánto sepas de esto. Buena zona segura es del 80 por ciento, 60 por ciento probablemente va a estar bien también. Cualquier cosa menor que eso, va a hacer que el tamaño del archivo sea agradable y pequeño, pero va a hacer que la calidad no sea muy buena. Un 100 por ciento es demasiado alto para salir a en nuestro caso a un sitio web. Uno de estos dos. Depende de lo preciosa que sea. nuestro es el producto, es lo que estás tratando de vender, así que la mejor calidad que puedes hacer, 80 por ciento es probablemente importante para esto. Si solo son cosas de fondo de apoyo, di esta imagen de fondo aquí atrás. Este de aquí no tiene por qué ser hermoso y es enorme. Ese ahí estaría bien al 40 o 60 por ciento, porque se desvaneció en segundo plano. Nadie va a notar la calidad, mientras que el producto que estás tratando de comprar probablemente necesite ser tan bueno como pueda ser. También echemos un vistazo a JPEG versus PNG. ¿ Puedes ver la diferencia de talla? JPEG, ambos son la misma versión terminada a excepción de la transparencia. Usamos JPEG porque son más pequeños. Puedes obtener la misma calidad, pero en nuestro caso, casi la mitad o un poco más de la mitad del tamaño del archivo y el tamaño del archivo es importante. PNGs son increíbles, pero grandes. JPEG son pequeños, pero no tienen transparencia. Estamos ignorando los SVGs en este momento. Cuando llego hasta aquí y sí voy a exportar seleccionado. Vamos a hacer nuestro JPEG. Hemos hablado de la calidad y el tamaño de exportación. Esto es importante. Lo que termina pasando es si lo exportas del tamaño que es, hagamos uno del tamaño que es. Ya hice uno que estaba a las dos. Hagamos otro a uno. Voy a acelerar esto. He exportado eso tres veces, a la talla única, a las dos tallas, y al tamaño completo. ¿ Por qué necesitas tallas completas? No necesitas cuatro tallas. A menudo dos es lo que se requiere. El motivo por el que tienes uno y un dos y un cuatro o tantos como quieras, es que a ese tamaño la calidad está bien, pero si te metes en un teléfono un poco más grande, recuerda, tenemos que adaptarnos para diferentes teléfonos. Si hago esto, para este teléfono y luego pasa al teléfono más grande con una pantalla diferente, se va a quedar no muy agradable. Lo que hace la gente es que harán a veces dos tallas. Eso es que a dos símbolo. Añadimos eso sólo para identificar cuál es cuál, porque todos tienen el mismo nombre de archivo. Hemos sacrificado ser más del doble del tamaño que el primero, pero nos permite cierta flexibilidad cuando sale a diferentes dispositivos de diferentes tamaños. Es muy común hacer a veces dos. En los momentos cuatro es más en el diseño de aplicaciones. Ellos querrán tamaños aún más grandes solo porque las resoluciones en pantallas versus dispositivos de escritorio y sitios web, puede ser excepcional como usted podría ser en el futuro. Podría ser en los momentos 20 porque la resolución en teléfonos más adelante o en realidad virtual o cosas futuras podría necesitar diferentes tamaños, pero es por eso que terminas tal vez exportando algo eso es el doble del tamaño. Es porque tiene algo aplastando esto, hay un poco de ella puede ser grande, ser más pequeño, y todavía tiene buena calidad. Cuando estás exportando, especialmente para web, ya sea web móvil o web de escritorio, la expectativa está al doble tamaño, habla con el desarrollador, tal vez como ¿qué tamaño lo quieres? Serán como, no me importa. Soy un desarrollador que está en ellos a veces también. Si solo les mandas un tipo no necesitas agregar. Siempre me apetece un add two o al 2x es otra forma común de escribirlo. No tendrás que escribir nada de eso. Sólo tienes que ir, aquí tienes todas tus imágenes. Tengo bin eso, no los necesito. Ahí vas. ¿ Eso tiene sentido? JPEG: tamaño de archivo bajo, gran calidad, sin transparencia, y generalmente solo los exporta al doble del tamaño que necesita. notarás que tomaron el nombre de lo que aparece aquí. Es posible que no te hayas dado cuenta, pero esto obtuvo su nombre de mi imagen que importé. De ahí sacó su nombre. Puedes ajustar el nombre aquí, puedes decidir que no es un nombre muy bueno. Podrías ser una persona eco y podrías estar diciendo : “Vale, tiene que llamarse té verde-barato. Terrible eco, pero de ahí va a sacar su nombre. Si exporto eso ahora, Archivo, Exportar, Seleccionado, tomará ese nombre. Ahí tienes, té verde-barato. Obviamente puedes cambiarlo sobre la marcha ahora a medida que avanza. De ahí obtiene su nombre, y eso pasa cada vez más cuando empiezas a hacer cosas como el siguiente paso. Digamos que quiero exportar esta imagen. Tienes que decidir o tal vez chatear con tu desarrollador, ¿solo quieren esta imagen y van a teñir a ella porque pueden hacerlo en código o quieren que simplemente la pegues juntos para que hayan ¿conseguiste esta unidad que pueden usar? Averiguar eso o enviarlos a ambos. Les enviaremos uno sabiendo que podrían regresar y pedir otro tipo. Lo que vamos a hacer ahora son dos partes. Si exporto dos partes: Archivo, Exportar, Seleccionado, va a exportarlas a archivos separados. Si voy, “Aquí vas” y exporto éste, ya tengo uno ahí solo porque estaba jugando con esto. ¿A dónde fue esa? He terminado con esta imagen separada del rectángulo. El rectángulo no es bueno para nadie y esto podría ser justo lo que necesitas, pero si quieres conectarlos necesitan ser agrupados. Una caja, una imagen, voy a seleccionarlos ambos y agruparlos. Voy a usar el Comando G o Control G, y aquí es donde entra el naming. Podrías llamar a este fondo y llamarlo -homepage. Ahora puedes usar guiones o guiones bajos. Sería realmente común en el diseño web usar ningún espacio real. Ahora puedes salir con los espacios, por lo que realmente no importa pero podrías apegarte a lo que todo el mundo sabe, y ama, y usa guiones, o guiones bajos, o de nuevo tal vez una conversación para el desarrollador. ¿ Qué prefieres? Prefiero guiones. la mayoría de los desarrolladores les gustan los guiones bajos, pero ahí vas. Si necesita exportar cosas que son dos partes separadas, agruparlas primero. Estamos explotando imágenes individuales en este video, y puedes exportar múltiples imágenes individuales. Vamos a hacer la exportación por lotes en un SQL que es un poco más robusto para trabajos más grandes, pero digamos que solo necesitas esta imagen. ¿ Qué más tenemos? Esta señora de aquí. Lo que puedes hacer es que puedas seleccionar esto, mantener pulsada “Shift”, dar click sobre éste. Puede ser difícil seleccionarlos todos, y puedo ir Shift click en ésa. Si golpeo mi “Comando O”, “Control O”, en realidad tengo tres cosas seleccionadas y puedo exportarlas, por lo que va a exportar tres imágenes separadas. Tienes que Shift pincha un par de cosas, y obtendrás las tres imágenes separadas. El último formato de archivo del que quiero hablarte es SVGs. Hablamos de SVGs antes. Recuerda gráficos vectoriales escalables. Si eres de la vieja escuela, imprime el archivo EPS o AI. Veamos esto. Voy a hacer doble clic en esto; tiene un nombre terrible, así que lo voy a llamar icon-search. Haré lo mismo por mi pequeño hogar uno. Ahí vas. Nuevamente, los nombro de esta manera hacia atrás para ayudar solo a pedirlos en tu menú de archivos, que sea fácil para que la gente encuentre. Tengo estos dos. Voy a seleccionar ambos, mantener “Shift” porque sé que puedo hacer Archivo, Exportar, y Seleccionado, y sacaré ambas cosas. Ahora, vamos a usar SVG. SVG; Gráfico vectorial escalable. Significa que se puede escalar hacia arriba y hacia abajo. Todo ese drama que teníamos antes por ir, ¿qué tan grande debería ser? No debería ser 2x. ¿Qué calidad debería ser? Todo eso desaparece con SVG. ¿ Por qué no puedes usar SVGs para decir que este té sale de aquí? Porque los SVGs solo se ocuparán de esos puntos de anclaje o gráficos vectoriales. Lo que quiero decir con eso es que si hago doble clic en estos eventualmente, se compone de estas pequeñas coordenadas. Aquí está la mía. No se compone de nada. ¿ Dónde está mi hojas de té? Eso es grande. Selecciónelo, Comando 3. Si hago doble clic en él, en realidad se compone de estas coordenadas. Es matemáticas lo que lo hace, así que hace las dos cosas increíblemente bien. Significa que es escalable porque si escalo algo, es un SVG o vector. Se escala para siempre, sea del tamaño de un planeta. Es un tamaño de archivo realmente pequeño porque esa es la otra mitad. SVG es super pequeño. Tú Archivar, Exportar , Seleccionado, y vas a ser SVG y dejar los valores predeterminados por aquí. Si no estás seguro, esto se está volviendo bastante hardcore sobre lo que probablemente necesitarás saber sobre SVGs. No voy a ir en esta clase, pero dejarlo todo en el defecto. Una cosa que podrías hacer es este trazo de contorno. Lo hemos hecho antes donde digamos esto aquí si le agregamos un trazo, y puedes decidir qué quieres que haga. Puedes obligarlo a delinearlo. Puedes decir Trazo de contorno ahora, y luego realmente no importa lo que marques en la siguiente opción cuando estés exportando porque ya estará esbozado. Pero recuerda si no hago eso significa que cuando se escala, tiene un tamaño de cuatro si lo escalo ahora. Incluso es realmente grande todavía son cuatro, y tal vez eso es lo que quieres porque coincide con otros elementos de la página o si quieres que escale proporcionalmente como en esbozas el trazo y cuándo se hace más grande también lo hace el trazo alrededor del exterior. Te das cuenta que lo llaman golpe en la exportación, pero frontera aquí es para probarte. Voy a ir Archivo, voy a ir a Exportar, Exportar Seleccionados, y SVGs. Déjalo todo y simplemente haz clic en “Exportar”. Debería haber nombrado primero a mi capa, pero puedo hacerlo aquí sobre la marcha. Esto ya no es un ícono. Va a ser mi gráfico y va a ser hojas de té. Ojalá aquí tengamos algo así como un SVG. Recuerda que los conseguimos como iconos antes. Ves que es pequeñísimo, 900 bytes. Ni siquiera es un kilobyte, y es enorme. Puede ser enorme, puedes escalar eso como quieras. Aquí van a haber algunas rarezas como ésta. Hacemos algún recorte elegante aquí abajo. Voy a hacer doble clic en él. Ya puedes ver aquí tengo este Grupo de Máscara, así que vamos a exportar eso. Vamos a Archivo, Exportación, Seleccionado. Sabemos que podríamos hacerlo como JPEG versus PNG. Espera ahí. Aquí están mis opciones mal nombradas. Se puede ver aquí tengo éste que está enmascarado. JPEG, bonito y pequeño. PNG; realmente grande, pero tiene la transparencia que necesito. Pero hay todas estas cosas, y tú dices, “ realmente no necesito esas cosas”. A veces hay algunas cosas a donde tienes que ir, "Bueno, estoy dentro de un componente”, así que voy a copiarlo, posponerlo en segundo plano, salir de todo, y simplemente pegarlo, doble clic en él, y encuentra mi pequeña máscara y edita eso sólo para que cuando exporte esto simplemente no sea una imagen tan grande. Puede ser mucho más pequeño. Vamos a archivar, exportarlo. Aquí vamos. Ahí está el PNG que es realmente grande, y ahí está ese segundo que exporté. Notarás que el tamaño del archivo es significativamente más pequeño y eres como tres kilobytes. Oye, todo cuenta. Ese es tu formato de archivo todo-en-uno/ cómo exportar imágenes individuales de Adobe XD. Ahí hay una larga. Ahí vas. Te veré en el siguiente video. 81. Imágenes de exportación a la vez con la marca de exportación en XD: Hola a todos. Vamos a ver algo llamado exportación por lotes o marcar para exportación. Lo que nos permite hacer es darle el poder al desarrollador, a la persona que construye la aplicación o sitio web. Pueden usar el enlace que creamos antes, ese enlace de desarrollo compartible, y pueden hacer click en cosas y pueden decir, va a ser un SVG o PNG o JPEG. Puedes dejar que elijan. Es súper práctico. Déjame mostrarte cómo hacerlo ahora en Adobe XD. Lo primero es que necesitas marcarlos para esta exportación por lotes. Lo haces seleccionando en lo que quieres que se exporten y diciendo o bien marca la exportación, ahí hay una pequeña casilla de tic, o lo desharé. Puedes hacer clic con el botón derecho y decir marca para exportación o en tu panel de capas, ese pequeño icono allí junto a esa capa lo exportará. Asegúrate de que estén agrupados de la manera que quieras y que sean nombrados de la manera que quieras porque recuerda, conservarán ese nombre y solo trabajarán a tu paso. Digamos, este logo aquí necesita ser exportado, así que voy a hacer eso. Debería nombrar estos realmente muy bien. Vamos a asegurarnos de los grupos correctos. Me he sumergido en este componente porque no quiero exportar todo el asunto porque solo sería una gran unidad. Voy a entrar, agarrar eso y decir que estás exportado. Entra, agarra, no solo el techo, la parte. el momento estoy ignorando los nombres. ignoras conmigo. Una vez que hayas hecho eso, podrías ir al lote de exportación de archivos. Eso es lo que hace esa cosa. Se exportará todo como un lote y eso está bien. Depende de cómo su desarrollador cómo quieran hacerlo. A veces solo quieren las imágenes. El problema con ello es que tengo que decidir todos estos, exportados como PNGs. Hagamos eso. Lo pegaré en mi escritorio, crearé una nueva carpeta. Tengo que exportar todos ellos como PNGs, todos ellos como SVGs, y todos ellos como JPEG, en tres por separado va y eliminar los que no quiero en formatos, así que eso no es divertido. El verdadero motivo por el que hacemos esto es que cuando vamos ahora a compartir y vamos a éste, desarrollo, que ignoramos antes, hay que decidir qué proceso de desarrollo va. ¿ Va a ser un sitio web, qué casas, sitio web móvil o va para iPhone o va a ir al Google Android? Utilizará las convenciones de nomenclatura adecuadas para usted. Bueno, esto está subiendo para web y luego esto debe ser clickable. ¿ Por qué no se puede hacer clic en esto, Dan? Porque tengo el flujo equivocado. Múltiples flujos son útiles pero también problemáticos. Aquí, ahora puedo ir al desarrollo y ahora puedo ir a la web. Mira. Ahora hay cuatro activos que en realidad he etiquetado. Ahora puedo hacer clic en esto. Esto es realmente útil ahora porque una vez que estén marcadas, incluso si hago cambios en estas hojas, seguirá siendo como parte de esto así que solo puedo reexportarlo. Hagamos eso. Hagamos clic en “Crear enlace”. Lo que hace este activo descargable es cuando el desarrollador va a ella, así que déjame abrirlo, ahora tenemos estos [inaudible] por aquí, como vista de diseño. Lo que puedo hacer sin embargo es que tienes esta opción aquí. Lo que me va a mostrar, estamos tratando con imágenes, así que ignora todo lo que no es esta carpeta de activos. Miraremos a estos otros en un minuto. Pero se pueden ver todas estas preciosas imágenes. Ahí está mi gráfico-téa1 que llamé, ahí está mi logo, y ahí están mis iconos sin nombre. Lo bueno que pueden hacer es que lo puedan seleccionar y abajo abajo aquí pueden decidir SVG, PDF, JPEG. Podrían asustarse porque no saben qué formato de archivo deberían estar usando. Hay trabajo [inaudible] que dependerá del desarrollador. Podría requerir algo de educación de parte tuya. Deberías estar bien con ello dependiendo de sus antecedentes, cuán nuevos sean, pero les da la flexibilidad, pero requiere que entren aquí y hagan clic en ellos y descargarlos. Podrían simplemente estar esperando una gran carpeta de imágenes antiguas, así que chatea con ellas. Muéstrales esto y dile oye, puedes hacer click en las cosas y mirar, puedo descargarlo, o puedo hacer clic en nada y pasar por las carpetas aquí. Éste, éste, aquí. Les da información al respecto. Pero, ¿incluso los marqué para la exportación? Yo no lo hice. ¿ Cuál marqué para la exportación? Acabo de hacer unos en esta página. No, acabo de hacer esos iconos. Asegúrate de marcar todos estos para exportarlos para que puedan pasar y simplemente haz clic en ellos y descárgalos aquí. Si no lo haces, no pueden. Interesante factoide para acabar con nosotros, es que en XD, si lo haces primero porque está en una rejilla de repetición, lo siento, de vuelta en Vista de Diseño, haz doble clic en ella. Si marco éste para exportación, todos se marcan para exportación. Si no quieres que eso suceda, tendrás desagrupar la cuadrícula de repetición, y luego marcarlas todas individualmente como quieras. Pero es una forma bastante genial trabajar con un desarrollador como los que quieres de la exportación. Asegúrate de probarlo primero antes de enviarlo. Pregúntame cómo sé porque envié cosas a desarrollador todo el tiempo que está, no las has marcado para la exportación. Vas a revisar estas cosas. Sí, eso es. Eso es la exportación por lotes o marcado para la exportación y la mejor manera de utilizarlo como vía la acción y vía ese desarrollo. Asegúrate de elegir el flujo correcto. Eso es todo. Vamos a subir al siguiente video. 82. Cómo exportar código en XD para ingenieros usando especificaciones de diseño: Hola a todos. Te voy a mostrar cómo sacar el código de Adobe XD listo para tu desarrollador para que puedan hacer click en las cosas, averiguar el espaciado, el relleno, el tamaño del mismo, los elementos CSS, qué se están utilizando colores, qué fuentes, texto real que está dentro de las cosas, en realidad es muy fácil de hacer realmente, así que hagámoslo. Primero aunque hacer este trabajo no es mucho, puedes hacerlo mal rápidamente, pongámoslo de esa manera. Voy a ir a mi parte, sólo tenemos que asegurarnos de que hacemos clic en el flujo correcto e ir Desarrollo, después bien generar el enlace o en nuestro caso, actualizar el enlace. Envias ese enlace a un desarrollador y esto es lo que obtienen. Lo grande, la educación que podrías tener que darles es que lo único real es que necesitan saber para hacer click en este pequeño icono de especificaciones de vista que les va a dar todo lo que necesitan, va a los comentarios por defecto, pero para un desarrollador, probablemente quieran todo esto. A partir de ahí, deberían poder entorpecer su camino y conseguir todo lo que necesitan. Porque simplemente pone automáticamente cosas como esta con mi tamaño de diseño, mi viewport, hay esas imágenes que etiquetamos en el último video, todos los colores que necesitan. Desafortunadamente, no van a ir a copiar, pegar, codificar y simplemente pegarlo en su editor de código y va a funcionar, van a reconstruirlo usando bits y piezas de lo que has hecho. Al igual que los colores, van a tener algún CSS que defina los diferentes colores, y lo que pueden hacer ahora es entrar fácilmente aquí y decir que necesitan este color, solo hacen clic en él, y se puede ver ahí abajo, dijo que está copiado, y van al editor de código y simplemente van a pegar, y simplemente tirarán pequeños pedacitos así, pueden mirar algunos de tus estilos de personaje. Ahora, cuando estás nombrando tus estilos de personaje, lo levantamos por defecto en Adobe XD. Recuerda que hicimos esa cosa, fue vista de diseño, hicimos esto. Creamos estos, donde había H0s, H1s, H2s, y luego acabamos de ir agregando a estilos de personaje, tal vez nos gusta eso y solo hacemos clic en ese botón. Se ha ido, y por defecto poner el nombre de la fuente o el tamaño de la fuente, lo cual es práctico y legible, pero para el desarrollador, probablemente estén más acostumbrados a conseguir algo como, ¿ puedes ver su H0, H1, 2, 3, 4. Esto a menudo se llama solo la etiqueta P, por lo que depende de tu nivel de capacidad de codificación y de lo útil que quieras ser para ellos, por lo que podrías pasar y renombrar estos antes de salir, mismo con nombrar las imágenes que vas a estar exportando. Aquí, tiene un buen nombre, creo, bajo mi panel Capas, se llama grafic-tea, así que ve a hacer tu nomenclatura junto con tus estilos de personaje y eso puede ayudar. Otras cosas que son útiles para ellos. Podrían ir, genial, en realidad donde está el H1. En realidad, sólo me está mostrando las cosas en esta página, no todos mis estilos de personaje. Te darás cuenta que si paso por las páginas, los colores van a cambiar y se van a cambiar los estilos de carácter utilizados. Esta copia corporal, y lo que harán es decir genial, esta es la copia corporal, y podrán reconstruir en base a tu estilo aquí. Lo que también pueden hacer es, ¿puedes ver los aspectos más destacados por aquí? Se pueden profundizar un poco, y pueden decir que mires eso. Pueden seleccionar en él y les da el CSS. De nuevo, es poco probable que solo lo copien literalmente fuera de aquí porque probablemente sea demasiado detalle para la mayoría de la gente, pero les da un montón de la sintaxis correcta que pueden usar, especialmente para cosas como la fuente. También pueden decidir, si hago clic fuera de aquí, pueden decidir si están lidiando con píxeles o van a hacer con puntos o dps, dependiendo de cómo estén trabajando. Otras cosas realmente útiles es hacer con el tamaño y el diseño. Nuevamente, digamos que esta aquí es mi fuente, han trabajado, saben cuál es la fuente real. Éste de aquí, pueden hacer click en él, lo copia, pueden pegarlo en la versión de código, pero también pueden con ella seleccionada para ver hasta dónde está. ¿ Lo ves flotando por ahí? Me dice que 22 píxeles abajo en esta caja, así que cuando lo estén construyendo y haciendo el relleno, dirán que el relleno es de 22. Si hago clic en este cuadro primero y voy a pasar el cursor por ahí, es un margen de seis a cada lado. Mira esa cosa súper útil, oh y tiene una sombra paralela, mira eso, y les dice exactamente qué tipo de sombra paralela, qué borrosa es, todas las cosas súper útiles, en lugar de ellos sólo tratan de adivinarlo. Ahí está ahí, esa es la sintaxis real, tomaría todo eso y lo pondría en mi archivo CSS porque todo está hecho y está en el formato correcto, super práctico. Otras cosas útiles para las que lo usamos es copiar tu texto. Probablemente hayas pasado mucho tiempo con el cliente y tienes el lenguaje correcto, y van a hacer mucho de seleccionar y describir esto y copiar el texto y pegarlo en su archivo. Además, pueden encontrar es la interacción, así que pasemos a otra página. Ya verás aquí si cierro estilos de personaje, ellos podrán, porque digamos que si encuentras uno que sea un poco más emocionante. Éste aquí recuerdan, es una interacción, si hago clic en “Off” bajo interacciones, podrán ver que he añadido, hay un botón aquí y va a algo, les dice cuál página a la que va, y si le hacen click, [Risas] los lleva a la siguiente página, eso no es lo que quiero hacer. Volvamos a mi pequeño, quiero ver una de estas dos cosas, es, se pueden ver todos estos disparadores diferentes aquí, y si usted por encima de ellos, ¿puede ver que los resalta? Lo que hace es, si haces clic en él, ¿puedes ver? Les da ambos estados para que puedan cambiar entre los diferentes estados y estar entonces yendo. En realidad, ¿cuál es el color de fondo de esto? Vuelva a cambiar al estado predeterminado, que es el color de fondo de esto. Aunque podrías haber pasado mucho tiempo construyendo estos diferentes estados, pero no pueden verlos si solo les das un PDF o un JPEG, no pueden ver lo que esto ha significado hacer, el lo mismo con éste. No van a ver la interacción como animada aquí, pero cuando están agarrando todo el código, podrán cambiar entre el estado predeterminado y el estado activo. Pueden interactuar con él, solo necesitan salir de este modo de desarrollo y volver al modo de comentar, luego pueden ir y subir alto. Eso es que funciona, entra en ella, pincha sobre ella y decide los colores, mira redonda, gorra, trazo central, todo eso bueno, así que hubo un poco de educación con la que trabajar el desarrollador que pudo o no haber trabajado con alguien tan bueno como tú en Adobe XD. Eres buena, ahora estamos superando este curso y te prometo que tantos diseñadores son autodidactas y saben lo suficiente de XD, van a hacer un trabajo hermoso, pero no sabrán algunos las super características como estas, pero lo haces, así que chatea con tu desarrollador, mira cuánto saben, y tal vez solo pasa un poco de tiempo trabajando a través de estas diferentes opciones. Eso es todo, así es como conseguir todos los bits codey a tu desarrollador, o si te estás construyendo cómo extraer todos los datos listos para codificar. Eso es todo, te veré en el siguiente video. 83. Qué es una guía de estilo en Adobe XD: Todos, en este video vamos a ver lo es nuestra guía de estilo de diseño frente a tal vez una hoja de pegatinas y un sistema de diseño. Vamos a crear algo sencillo para el trabajo que hemos hecho hasta ahora y te voy a explicar los diferentes niveles que puedes golpear cuando estás haciendo algunas de estas guías de estilo. Empezaremos con una guía de estilo. Una guía de estilo a menudo es solo una simple guía de marca si has venido de branding o diseño. Es sólo que, en mi caso, sólo un uno-buscapersonas que puedo dar al negocio para mostrar algunas de las decisiones de diseños que he tomado para dejarlo claro, digamos que eres un contratista trabaja para un mayor empresa. Sus diseñadores van a necesitar algunas reglas para trabajar también. Dependiendo de lo que hayas hecho, puedes decidir qué pasa aquí. He hecho uno básico de verdad. Tiene algunas fuentes, los pesos de fuente que he usado. Ahora estaría tentado a ir y ahora que veo esto, a ir a poner en mis H1s, H2s, H3s. ¿Dónde están? Bueno, estos. Quizás en una versión más bonita solo para ver lo que he decidido por la diversa jerarquía de encabezamientos. Los colores, los códigos de color que han utilizado. Cuando se trata de colores, verás cosas como acento secundario primario, tal vez solo secundaria primaria, tal vez terminará color uno, color 20 dependiendo de la empresa y la marca, cuántos colores que has usado. Pero verás bastante este acento primario, secundario. Les he etiquetado uno dos tres de este lado. Por aquí verás que he etiquetado 100, 300, 500, 700. Eso es realmente común en el diseño también, viene de codificar un poco. Pero solo significa que tengo cinco de ellos, el más alto es de 1,000, que es mi sólido negro y gris 100 es mi color más bajo al que puedo ir. Me he saltado los 200 y 400. ¿ Por qué? Porque he optado por no usar una gran cantidad de ellos, pero me da cierta flexibilidad. Si yo decido que necesito algo aquí. Necesito algo que no sea del todo eso, pero no del todo esto, tengo 800 que podría usar. Verás eso por ahí. No hay nada especial al respecto aparte de que es una convención de nomenclatura común con, es posible que la hayas visto en fuentes, especialmente en los blancos. Podrías tener Futura 100, que es la versión ligera, y la 900, que es la versión negra. Verás las dos. Yo no los mezclaría. Acabo de ponerlos aquí [Risas] para que te ayuden. Éste podría ser 300, 500, 700, dándome espacio para algo más ligero y algo más oscuro potencialmente, pero 1,2,3 está bien también. Aquí puedes decidir como si estuviéramos a cargo del logo y cuando digo logo solicitan que acabamos de escribirlo. Pero podrías estar decidiendo cosas como el ancho mínimo, el espacio claro que lo rodea. ¿ A qué tan cerca pueden llegar estos otros botones, decisiones que has tomado? qué colores se va a usar, cómo se ve contra el blanco versus oscuro. Cuando hayas hecho la versión ligera. ¿ Cómo se ve contra la oscuridad? ¿ Tiene que ser más grande? Ese tipo de decisiones de diseño. También he incluido el breve y he escrito mi flujo de usuario para que se vea elegante. Ponlo en cajas. [Risas] Lo he hecho naranja. Pero echemos un vistazo a algunos otros niveles. No hay regla sobre como cuánto tienes que hacer. Dependerá del trabajo, del presupuesto que tengan, cuánto trabajo le pongas y cuál fue su papel. Si tu rol era solo este flujo de tareas aquí abajo, posible que no hayas hecho ningún diseño, por lo que no se requiere ninguna guía de estilo. Es posible que solo tengas un documento explicando tus pensamientos sobre el flujo. Cómo vamos a estos lugares y si has tomado más decisiones de UI sobre colores como o cuándo usar los negritos en esta configuración en particular. Tu guía de estilo podría ser muy descriptiva de los modelos que has creado o del orden en que se entregan al usuario. Estoy balbuceando. Echemos un vistazo a algunas de las otras. Acabo de meterme en problemas y escribí en guía de estilo. Se puede ver que sólo hay algunos, ¿ves esto? Eso es hermoso, lejos más allá de lo que tengo. Este fondo, gráficos, hay un desvanecido más allá en él. Es sólo un realmente hermoso, es un producto de diseño en sí mismo. Si es un gran proyecto y estás haciendo mucho del trabajo de diseño también, entonces algo como esto podría ser súper importante para entregar al cliente. Muestra un compromiso con el diseño que has hecho en lugar de esto que es muy justo como aquí vas. Aquí hay un poco está en una página. Se puede ver, echemos un vistazo a algunos otros. Algunos de estos son lo que llamarías pautas de marca, más para imprimir. Este de aquí. Nos estamos acercándonos, míralo. Mira, esta es la misma pero han salido la página. Se ve genial. Aquí está en una laptop. Voy a conseguir que hagas uno de estos porque no hay nada técnico que necesites aprender sobre esto. Es más conseguir toda tu información en una página. Pero en términos de este curso, se trata de construir algo para tu portafolio. Haga esto, pero también se burla en una computadora portátil. Haz algo bonito con él. Se puede ver aquí, este de aquí no es una gran cantidad de contenido pero mira lo bonito que es. Me encanta. Puedes decidir a qué nivel vas a ir. Pero echa un vistazo a través y al igual que no hay una regla absoluta sobre cuánto debe entrar en tus guías de estilo. ¿ A dónde vas desde guía de estilo? Lo siento, uno más para mirarlo juntos. Digamos, es interesante la forma en que los colores se ponen como yo he ido por esto sobre la parte superior, cegando cosas porque eso es lo que siempre hago, pero han trazado sus colores de manera diferente. Han ido por la escala de grises completa por el fondo aquí, los tienen. Sepa que no se puede leer del todo ahí, pero es 100, 200, 300 usando todos los colores grises. Chicos locos. Por aquí, se puede ver que se han disputado por ahí golpeando 1,2,3,4,5. Otra cosa que puedes hacer es decir que esta fuente, ya sabes dónde está, pero sabes que el cliente no va a ir y te van a enviar por correo electrónico en ese momento. Lo que puedes hacer es vincular estas cosas. Este es un poco de material técnico que no hemos cubierto es, vamos a ir aquí, vamos a ir al prototipo. Este es un prototipo raro. Vamos a agregar interacción cuando esté tocada. No para transición, no pedir animate. Vamos a ir, no superponer, también lo hemos hecho. Vamos a ir al hipervínculo y luego puedes escribirlo aquí y puedes ir a donde tengas esa fuente. Conseguimos las nuestras de recordar, fuentes de Google Fonts y Adobe para que puedas vincular a donde fuera que la gente pueda ir y vincularla para que hagan clic y lo descarguen. Es posible que tengas que añadir un poco de notación ahí que puedan descargarla, pero eso es una cosa que puedes hacer para ayudar a conectar algunas de estas piezas. Pueden ser imágenes que has utilizado o tal vez repositorio para todos los diferentes tamaños de logotipos que has creado. Puedes agregarle un enlace. Hay diferentes niveles. Guía de estilo no hay reglas específicas, pero a menudo es informativo, mientras que una hoja de pegatinas es otro término que probablemente deberías, bueno, te estoy presentando ahora y es menos de pieza de diseño para mostrar a todos lo que está pasando y es solo tirar todo en una página. La hoja de pegatinas, ese es un buen ejemplo de una hoja de pegatinas. Es sólo todo lo dispuesto. No hay explicaciones. Es sólo un viejo grande a menudo una hoja de pegatinas puede ser solo un documento XD. Simplemente puedes tirar todo porque por el momento muchos de nuestros botones están ocultos en un componente que alguien que no conoce XD o tal vez está usando un sistema de diseño de interfaz de usuario diferente. Puedo agarrar esto y puedo diseñar todos los diferentes botones, todos los diferentes colores, etiquetarlos y etiquetar eso. Eso es primario, ese es el secundario, ese es mi botón Cancelar. Simplemente arrastra todas estas piezas y empieza a etiquetarlas. Incluso entonces no es necesario etiquetarlas. Se trata más de simplemente exponer todas las diferentes opciones que alguien puede ver. Eso sería una hoja de pegatinas. Un poco como una guía de estilo, pero más como arrojarlos a todos a la página. Difuminan un poco las líneas. Algunas de ellas a las que estoy mirando aquí son un poco pegajosas. Eso es definitivamente una buena hoja de pegatinas en mi opinión. Este de aquí se empieza a meterse en un poco de ambos, un poco de una guía de estilo, muy hermosa, de marca alta, pero todo está dispuesto por ahí también. Entonces un poco híbrido. Ahora, ¿a dónde vas desde aquí? Después de una guía de estilo y una hoja de pegatinas, terminas en lo que se llama sistema de diseño. Lo que te he mostrado ahora no es un sistema de diseño. Un sistema de diseño es masivo. Es una forma en la que alguien, mucha gente puede todo. Me quedo con éste. Este tiene animación. Estos son todos los sistemas de diseño que fui y saqué. Básicamente lo que son es como unas pautas de marca ginormosas que explican no sólo cosas como cómo debe verse el botón, sino también por qué estamos haciendo las cosas. Es comunicar cosas como visión y misión. Tendrá información sobre accesibilidad, tendrá cosas que solías hacer, y esto es lo que ya no hacemos. Es un proyecto enorme. Nunca antes había hecho un sistema de diseño completo. He trabajado dentro de ellos y por qué son buenos es si empecé a hacer algún trabajo para Shopify para una tarea cuando dijeron: “Oye, ¿puedes hacer esto?” Podría trabajar mi camino a través de esto, entender lo que estamos haciendo, qué colores se están utilizando y encontrar todos los elementos que necesito para hacerlo. No habrá nada en lo que realmente tenga que tomar o intentar tomar una decisión porque aquí habrá una comprensión de ello. Estos son enormes, grandes proyectos para que Shopify construya. Shopify hacen estos, me dan un nombre como Polaris. Simplemente significa que hay decenas de miles de empleados en todos los diferentes países todos pueden compartir el mismo sistema de diseño. [ Risas] En realidad tengo un botón que hacer y no estoy seguro de qué tipo. Puedo pasar y decir, aquí hay algunos ejemplos de sus botones. Puedo verlos trabajando. Echemos un vistazo. ¿Cuáles son los botones delgados? Mira, hay una variante delgada. Lo puedo encontrar. Incluso me han mostrado esto es lo que la versión web versus Android versus iOS. Son grandes cosas grandes. Echemos un vistazo a lo que están haciendo por los formularios. Si tengo que diseñar un formulario, no voy a ir en XD y estar simplemente arrastrándolo al azar yendo donde quizá esquinas redondeadas, quizá no esquinas redondeadas. Va a haber reglas muy claras y específicas sobre las cosas reales, pero también hubo mucho que ver con entender quién es su cliente, cuáles son sus valores, por qué somos diseñando estas cosas. El diseño de materiales es lo que Google utiliza para el sistema Android. Es un poco difícil de navegar, pero me parece realmente útil a la hora de diseñar aplicaciones. Aquí puedes tener muchas cosas. No tienen documentos XD que puedas descargar, pero echemos un vistazo a sus iconos. Sólo preguntándose por ahí ahora, pero van a explicar cómo consiguieron muchas de sus opciones de diseño. Mira esto. Incluso se llega a ver cómo llegaron a esto. Mira eso. Mira la navegación. Entendes la idea. Estos son grandes, grandes, grandes proyectos. Estamos haciendo una guía de estilo. Sepa que podría hacer unas guías de estilo, una hoja de pegatinas, en algún lugar intermedio y que o bien podría estar trabajando desde un sistema de diseño si una empresa tiene uno, o podría estar creando uno, lo que podría hacer un día, muy pronto. El otro que saqué fue Salesforce. No estoy seguro por qué. Justo si quieres diseñar un gráfico en Salesforce, estas son las reglas, estas son cosas que no hacer. Ahí vas. Espero que eso fuera interesante. Se introdujeron unos pocos términos pero eso es todo. Hacia el siguiente video. 84. Proyecto de clase 17: diseño final: Santo Moly, es el proyecto de última clase. Se llama diseño final, razonablemente grande. Es principalmente para terminar tu diseño móvil, crear una versión de escritorio del mismo, y una guía de estilo. Haz algunas pruebas con tu diseño móvil y solo descubre lo que has dejado. Este es un curso. Acabamos ignorar bits y dejamos unos pedacitos. Ve a través de ED, juega con él en tu teléfono y solo mira si hay algo que falta. Cosas que no funcionan, no tenemos barra de búsqueda. A lo mejor diseñas algo que aparece abajo, hay una pequeña opción de búsqueda. Quizás deshazte de la búsqueda y agregas algo más. Quizás establezca el botón Cuenta, vaya a través y simplemente agregue todo lo que falta, luego vea si puede traducirlo a una versión de escritorio. Deberían usar muchos de los mismos elementos de diseño, pero hubo formato diferente. Ese es un proyecto divertido y uno complicado. Me resulta más fácil comenzar con el escritorio y pasar al móvil después. Pero en nuestro proyecto aquí, sabíamos por nuestro cliente y de nuestra persona que principalmente se va a utilizar en el móvil. Empezamos a diseñar con el móvil. Si sabes que es lo contrario y la mayor parte del negocio encendido para la empresa se realiza a través de la página web, y lo diseñas primero y luego lo traduces a éste aquí. Quiero que hagas tres páginas, la página principal, la página del producto, y la página de pago. Pueden ser relativamente simples. No quiero que vuelvas a crear todo el diseño, usar los elementos de la versión móvil y prepararlos para escritorio. Es posible que tengas que volver atrás y ver el video, recuerda cuando hicimos cosas como el diseño y conseguir que eso vaya nuevo para que tengas algo de consistencia por aquí. Decide qué tan ancho quieres hacerlo y no puedes salirte con la suya haciendo que sea un sitio web más estrecho, si te resulta difícil estirar lo que es un diseño bastante simple? Estrecha el sitio web en caso de que no esté tratando de mancharlo a través y solo se ve un poco solitario y perdido y luego, quiero que hagas una guía de estilo. Puede ser súper simple, más simple que el mío, si es posible, y apagarlos. Dónde está mi, Comando 0, Control 0, algo así. Puede ser algo así como una hoja de pegatinas. Saca algunos de los botones. Estoy feliz de que sea ya sea una hoja de pegatinas o una guía de estilo o algo en el medio. Porque recuerda ahora esto es algo que puede ser realmente genial para tu portafolio. Tienes tu propia empresa, tiene sus propios colores y temas, tienes tu propio usuario único. Puede ser esa primera pieza para tu proyecto UX, si eres nuevo. Así que cuando lo has hecho, me gusta ver capturas de pantalla de tu móvil terminado, tu escritorio terminado, y tu guía de estilo. Hacerlas en instantáneas separadas para que podamos verlas muy bien, subirlas a las asignaciones, pero también compártelas en redes sociales. Me encanta ver dónde terminaste. Pide comentarios si quieres, del grupo, especialmente estos grupos aquí son más útiles para esa retroalimentación. Esto es un poco más de una manera publicar, gustar, compartir cosas tipo. Ese es tu proyecto final de clase para el curso. Acomodarse, hacer eso, y saltemos a la siguiente sección, la última sección. 85. Lo que sigue después de Adobe XD Essentials: Vaya, ¿dónde, dónde está el final? Significa que estuviste aquí, lo lograste. Espero que estés ahí sentado bastante orgulloso de ti mismo, bastante presumido. Todos los demás están viendo Netflix y acabas terminar el curso omega long, contenido emocionante. Entonces sí, deberías estar muy orgulloso de ti mismo. No dejar que la gente inicie cursos y aún menos los terminé tan bien hecho tienes qué hacer a continuación. Y lo que hay que hacer a continuación sería potencialmente acompañarme en otro curso. ¿ Qué te sería útil después de XD essentials, qué estás haciendo? Ahora. El siguiente paso podría ser si quieres entender un poco más el código. Incluso si quieres tal vez crear tus propios sitios o tal vez simplemente entender el papel del desarrollador. De verdad te va a ayudar, ¿de acuerdo? elementos esenciales de Responsive Web podrían ser un buen siguiente paso para eso. Y vamos de este curso después, así como después. Xd essentials, es si quieres realmente empezar a ponerlo en práctica sin usar código. Entonces, no codificando, haz algo como Webflow o Elementor, que es un poco como un creador de sitios web de WordPress. Voy a hacer cursos sobre esos dos caracoles pronto. Lo que estoy haciendo después de este diseño en este momento, no lo sé, tal vez sea una pollito, pero por lo demás, de manera responsable de lo esencial. Y ya sea Webflow o Elemental, que es un poco como un curso sin código. Y voy a estar haciendo en XD avanzado eventualmente también. Bien, voy a seguir adelante para hacer esos flujos de viento en Elementor a continuación, y volveré a doblar de nuevo a XD para hacer el avanzado. Así que vigila, esos otros cursos que podrías hacer. Y tengo un curso de Photoshop, Photoshop, elementos esenciales de Illustrator y avanzado. No estoy seguro donde dije que hay mucho tiempo porque creo que dije Photoshop Illustrator essentials. No es a lo que me refiero. Hay un Photoshop, Illustrator, InDesign, After Effects, Premier Pro. Y tengo muchos cursos y a menudo hay esencial y avanzado en todos esos. Así que hay otros cursos que podrían estar listos para su visualización. Placer. Quiero agradecer a mis editores, solo animales y Taylor Coleman. Hacen mucho trabajo, tipo de post MI grabándolos. Así que gracias por esos tipos. Y muchas gracias a Stephen Butler y a sus asistentes de enseñanza. Es posible que te hayas topado con él o con uno y su equipo a lo largo de este curso te puede ayudar con respuestas y preguntas. Y muchas gracias por esos tipos, por la ayuda. Además, si te ha gustado este curso, asegúrate de dejar una reseña. Y también si se te ocurre una manera de referirlo a otras personas, contándoles lo genial que fue. De cualquier manera que sepas, eso también lo agradecería. Cuanta más gente llegue a ver mis cursos, más cursos llego a hacer. Además, asegúrate de seguirme en redes sociales. Ha pasado por todo el rumbo, pero aquí están otra vez, asegúrate de unirte a mí y a todos esos. Y por último, hablemos de nuestro diseñador ui UX todavía, porque eso puede ser bastante aterrador colgar esa teja, colgar esa sesión para decir, sí, soy diseñador de UX, estoy disponible para el trabajo. No hay papeleo oficial. Todavía me preocupa que alguien llame a mi puerta y diga: Oye, te llamas a ti mismo diseñador de UX. Muéstrame muéstrame el certificado. Tienes todo el grado que tienes todo el sello oficial de aprobación. No hay ninguno. Es más un cambio de mentalidad decir que sí, ahora me estoy llamando diseñador de UX y puede ser difícil. Pero solo debes saber que hay niveles. Puedes ser un diseñador junior de UX. Puedes ser un terrible, malo, recién comenzando diseñador UX, lo que sea que te ayude en tu cabeza, algo así como abrazarlo. Se trata de disfrutarlo realmente, querer saber más. Y ahora es el comienzo de nuestro viaje. Puede que ya te llames diseñador de UX, eso es genial. Pero muchos de nosotros padecemos síndrome del impostor. ¿ Cuándo está bien? Mucha gente espera hasta conseguir su primer concierto y luego llamarse diseñador de UX. Pero te doy permiso para empezar a llamarte diseñador de UX a partir de ahora porque es una, es una actitud es que aún no lo sabes todo, pero está bien. Estás en tu viaje como diseñador de UX. Eso va a ser mis amigos. Espero que hayan disfrutado del curso. Realmente me encanta y hacerlo. Bien, ahora voy a tomarme un buen descanso largo. Deberías de que en realidad vas a trabajar en tus diferentes proyectos si aún no los has enviado. Sí, ese es el final del curso. ¿ Cómo terminaste saludando? Y luego nos desvanecemos a negro. Entonces qué vamos a hacer en éste de todos modos, porque no puedo pensar en otra cosa que hacer. Es el final del curso. No, volviendo, espero verte en otro curso. Bien, agitando se desvanecen a negro, banco de datos. ¿ Se han ido?