Diseño de UI/UX y web con Adobe XD 2018: diseño de experiencia de usuario

1. Introducción a Adobe XD: Hola ahí. Mi nombre es Dan y soy instructor certificado por Adobe. Juntos yo y tú vas a aprender a usar Adobe XD. Ahora esta herramienta de diseño UX UI nos va a ayudar a crear hermosas interfaces de usuario, además de agilizar nuestra experiencia de usuario. Durante este curso, vamos a utilizar un proyecto freelance real en el que estoy trabajando. El proyecto necesita tanto una interfaz web como una aplicación móvil. Te va a dar una muy buena comprensión de cómo ejecutar tu propio proyecto potencial de UX. Mi curso aquí está dirigido a personas nuevas en diseño y experiencia de usuario. Empezaremos justo al principio y avanzaremos paso a paso. Primer paso, te mostraré cómo construir un buen breve y UX [inaudible], luego aprenderás a crear algunas tramas simples. A partir de ahí aprendes a implementar y colores e imágenes correctamente en tus diseños. Aprenderás qué hacer y qué no hacer para elegir fuentes para sitios web y aplicaciones móviles. También haremos trampa un poco por [inaudibles] kits de interfaz de usuario prefabricados para acelerar nuestro flujo de trabajo. Construiremos un prototipo, tanto el diseño de nuestro sitio web como el diseño de aplicaciones móviles, conectando las páginas y agregando la interactividad completa lista para su uso y prueba. Te compartiré todos los trucos secretos dentro de Adobe XD que realmente te ayudarán a acelerar todas esas tareas repetitivas, hasta exportar los archivos correctos y crear tu propio espacio de diseño. Al final, tengo un proyecto para ti, para ayudarte a desarrollar tus habilidades y así tienes algo listo para tu portafolio. Espero que estés listo para actualizarte y unirte a mí al Adobe XD. Sí, esa es una planta falsa de [inaudible] Entrarás a la tienda y se ven muy bien y se va a quedar bien en la oficina y luego la llevas a casa, y es una planta falsa. 2. Primeros pasos de tu proyecto en Adobe XD: Hola ahí. Para empezar, es necesario descargar los archivos de ejercicios. Hay un enlace en los comentarios o descripción a continuación. A veces, hay un botón. Estás mirando hacia fuera los archivos de ejercicio de descarga. Otra cosa que puedes hacer es durante este curso, lo que hago es al final de cada video guardo lo que hago, y lo mismo a algo llamado el archivo completado. De acuerdo, entonces cada video tendrá ya sea un link o un botón donde podrás descargar donde estoy hasta en XD y si el tuyo no se ve igual, puedes descargar el mío y solo comparar los dos. Lo último es, es que durante este curso se te va a pedir una revisión. Revisión es la sangre de vida de mí como entrenador y por qué llego a hacer esto a tiempo completo. Si estás disfrutando del curso y sí consigues pedir una reseña, por favor, deja una ahí dentro, vale una revisión honesta, eso me ayudaría mucho. Está bien, vamos a seguir con el curso. 3. Diferencia entre UI y UX: interfaz de usuario y experiencia de usuario: Antes de empezar, solo cubriremos rápidamente lo que es UX versos UX UI. Si eres nuevo en el campo, se juntan por ahí. UX es más un término paraguas. Cubre una gran cantidad de componentes incluyendo la interfaz de usuario. UI, diseño de interfaz de usuario es lo que vamos a cubrir en este curso. Vamos a hacer mucho en Adobe Extreme donde desarrollamos la interfaz de usuario para una web y app. Ese es el componente de interfaz de usuario, pero que generalmente es parte de un proyecto de UX más grande. UX se puede romper en tres partes principales. Uno es el lado de la investigación, por lo que haces tu investigación de experiencia de usuario. Eso es sólo romper y averiguar quiénes son las personas, quiénes son sus clientes, cuáles son los requisitos del cliente. Está construyendo un breve, todas las características que necesitan estar en su producto. Ese es el lado de la investigación de las cosas. Después está el diseño real, el diseño de la interfaz de usuario que vamos a cubrir en este curso. Después pasas al usuario las pruebas de usabilidad, después, tomas tu proyecto XD y comienzas a probarlo. Nos vamos a centrar en este bit medio, te mostraremos un poco de cómo conseguí el breve y cómo prepararte para las pruebas de usuario. Pero tengo otro curso llamado How To Be a UX designer, echa un vistazo a eso. Eso es más una visión general del diseño de UX. Eso te dará estrategias para construir los escritos correctamente, persona es correctamente, y también las pruebas del usuario, forma de hacer eso un poco más cubrirá brevemente aquí. Pero nos vamos a centrar en las características reales de diseño de UX. Tú como diseñador de UX, solo para que lo sepas, depende de dónde estés trabajando. Si estás trabajando en una empresa más pequeña, mediana empresa, probablemente se te va a esperar que hagas las tres macetas; investigación, la interfaz de usuario, y las pruebas. Si estás trabajando en una gran empresa, podrías simplemente ser el diseñador de UI como parte de ese proyecto de UX más grande. Es posible que tengas investigadores especializados, podrías tener un usuario especializado probadores, por lo que dependerá de dónde te encuentres. Pero XD se sienta en el medio ahí para las herramientas de diseño. Sí, eso es todo. Pasemos por ahora y empecemos a construir nuestras cosas en XD. 4. Resumen y definición de “persona” para nuestro proyecto en la vida real: Antes de empezar, quiero esbozar rápidamente el breve para este proyecto porque este es un proyecto real de uno de mis clientes, y pensé que sería una buena manera de explorar XD a través de unos proyectos reales. Lo que teníamos que hacer este lado de la investigación UX de las cosas y tuvimos que construir fuera son breve del cliente, que te voy a mostrar aquí y tuvimos que construir la persona, igual que quién va a ser ese público objetivo. Echemos un vistazo aquí en la pantalla. Tanto en lo que el cliente me envió como breve inicial como en lo que teníamos que realmente moverlo así que teníamos un proyecto real por el que trabajar. Vamos a echar un vistazo aquí ahora. En primer lugar, como cualquier buen trabajo creativo, y hay que hacer lo breve correcto especialmente para UX porque a menudo el cliente, especialmente los clientes con los que trato, realmente no han pasado por muchos proyectos de UX antes. Supongo [inaudible] lo que está cubierto, lo que no está cubierto, esas cosas, por lo que un breve siempre es esencial para cualquier proyecto. Me imaginé que te mostraría el que conseguimos. Este es el breve que obtuvimos del cliente. Entonces básicamente fue bastante delgada. Tienen un sitio web, bringyouronlylaptop.com y han construido este back-in para ello, el tren es para usar, y quieren simplemente lanzarlo a otros entrenadores para potencialmente usarlo como producto. Por lo que quieren un sitio web, quieren una app, son muy básicos. Entonces lo que hice fue echar un vistazo a través de sus detalles, través de la analítica para su página web. Conozco un poco de ellos porque ya lo he tratado antes sobre básicamente pasé por el proyecto de investigación UX, trabajando quiénes eran sus competidores, qué hace el producto, sus USPs, quiénes harían los potenciales usuarios ser y construir un breve. Entonces esto es lo que les envié por correo electrónico y básicamente solo cubre los fundamentos de la mayoría de los escritos. Déjame correr rápidamente a través de él. Si no te interesa, solo puedes saltarte y empezaremos a hacer cosas XD pero en este caso, descripción del nombre del proyecto. Básicamente eso es lo que he dicho. Por lo que sólo esbozar la descripción, para quién es es es bastante importante. Entonces construimos una persona. Te mostraré eso en un segundo sobre cómo se ve realmente la persona. Pero esto es lo que acordamos con el cliente quién es la persona potencial. Ahora, lo grande con las personas es que puedes adivinar y puedes tener una mejor conjetura, pero necesitas revisar potencialmente quién podría ser tu persona, porque podrías ir, “Sí, definitivamente es esta persona”, pero necesitas permitir wiggle room y beta ortografía y gramática. Hemos construido para quién creemos que es el cliente, construimos una lista de características. Sólo para asegurarnos de que sepamos lo que realmente está entrando en las tramas alámbricas al principio, cuáles son las partes importantes. Dejamos fuera cosas como un pie de página u otras características que son simplemente normales. La página de contacto con nosotros necesita estar ahí, todas esas cosas. Entonces esta es la materia única para este proyecto. Competidores e inspiración de productos. Esto solo nos ayuda a saber y el cliente sabe que estamos alineados en términos de esto es el tipo de cosas que estamos construyendo. Entregables, esto es súper importante. Entonces pasamos por dos partes, hay Wireframing y luego hay Alta fidelidad: los wireframes son realmente simples, alta fidelidad tiene todas las fuentes y colores e imágenes. Por lo que construimos wireframes puramente solo para la aprobación del cliente. Yo no salgo a probar wireframes. Hablaremos de esa carta en. Después construimos un prototipo de alta fidelidad y luego salimos a algunas pruebas de usuario. En base a la degustación del usuario, haremos un reporte de usabilidad y que puede ser grande o pequeño. Básicamente solo retroalimenta lo que descubriste cuando estás probando por el usuario. Entonces, una vez que todo haya terminado y hayamos arreglado cualquiera de los problemas con las pruebas del usuario, agarraremos todos los activos de la interfaz de usuario para los desarrolladores. Eso sólo significa darles imágenes y código, e iconos y símbolos para que puedan construir ya sea la aplicación o un sitio web. Entonces ahí es donde nuestro trabajo va a terminar. Por lo que siempre tengo un Not Included, solo para asegurarme de que los límites se establezcan agradables y claros. Por lo que la primera es prototipar el back-end, que es la instrucción a un lado de este sitio web. También había un lado estudiantil del que ya lo tienen desarrollado, no quieren que rediseñemos eso. por lo que solo estoy asegurándome de que esté claro. Me dijeron que está claro, no estamos cubriendo eso porque esperan usar sus sistemas actuales, el lado instructor que vamos a estar probando. Costos, entonces esto es lo que cobro por este trabajo. Los empleos varían, a menudo empiezan en unos dos y medio de los grandes Estados Unidos y llegan hasta cerca de 10 de los grandes para proyectos más grandes. Este de aquí básicamente entreno cuál es mi tarifa de día y es aproximadamente unos 800 dólares y luego trabajo cuántos días necesito para trabajar con algo así como una línea de tiempo, agrego un poco de buffer, luego les doy una tarifa por hora después de eso. Para que si lo hacen empiecen a pedir cosas que no están cubiertas en los entregables, se puede decir: “Claro, yo puedo hacer eso, pero probablemente me va a llevar otro medio día”. Entonces conocen tu tarifa por hora, así que saben que va a costar X, Y, y Z. Y me parece que es una buena manera de detener el trabajo para escabullirse. Por lo que el creep laboral pasa con cada trabajo. Ellos dicen: “¿Puedes rápidamente simplemente agregar esta cosita extra?” Lo agregas y decidirás más adelante si las construyes para ello o no, y luego el trabajo se rebasa y o los sorprendes con una factura gigante o simplemente chupas esos costos que apestan. Entonces me aseguro de que el principio le dé costos [inaudibles] porque eso es lo que todos quieren. Nadie quiere una tarifa por hora. Pero dándoles una tarifa por hora, también, para que cuando estés charlando y digan : “Oye, ¿también puedes hacer esto?” Estás como, “Claro, probablemente me va a llevar tres horas”. Ellos saben cuál es la tarifa por hora y puedes agregarla tu factura y todos están claros desde el principio, siempre pido 50 por ciento de pago por adelantado para iniciar la obra. Hay tantos trabajos que termino iniciando que nunca terminan. Por lo que me gusta asegurarme de que llego 50 por ciento por adelantado para poder cubrir mis costos por la parte inicial. Es la parte más importante que hacer la investigación UX y elaborar las características. Esa es la parte súper importante del trabajo, creo. Por lo que siempre pido un porcentaje por adelantado, podría haber preguntado algo más pequeño que eso, pero el 50 por ciento es bastante común. Entonces 50 por ciento a la terminación. Plazos, cada trabajo un poco diferente pero sí, esto es lo que hemos hecho. Entonces hay una delgada y yo. Por lo que voy a hacer la investigación del usuario para empezar, los wireframes se entregan para traer tu única laptop delgada, luego me dan retroalimentación para esta fecha determinada luego les doy la alta fidelidad. Entonces me dan retroalimentación sobre esa alta fidelidad y luego en realidad voy a las pruebas de usuario. Entonces permitimos un par de semanas para las pruebas de usuario. Esto puede ser diferente, depende de cómo así para este proyecto, vamos a hacer mucho lo que se llama pruebas de pasillo o pruebas sobre el hombro. Vamos a tratar de reunirnos con gente para hacer cosas de la vida física. Encuentra personas que coincidan con tu persona y en realidad trabaja con ellas. Ahora de nuevo, no vamos a tener una prueba completa aquí. Tengo otro curso para eso. un vistazo a cómo ser diseñador de UX para algunas de las técnicas de prueba. Pero sí, vamos a hacer cosas por encima del hombro posibles, probablemente hacer algunas pruebas sin moderar donde vamos a ti dices userstesting.com, me parece realmente útil, y puedes simplemente enviárselo a ellos y a la gente grabarse formas rápidas y es algo para lo que no tienes que organizar reuniones y tienes grabación para que puedas recortar, pero para que puedas mostrarle al cliente algunos de los resultados. Después habrá una prueba de usuario y reportes terminados. Básicamente solo retroalimentación sobre esto es lo que sucede en las pruebas del usuario. Estos son los cambios que vamos a hacer y ustedes hacen esos cambios. Una vez que se hayan hecho los cambios finales, entregaremos los activos al desarrollador para que se construya, lo que en este caso sería, probablemente terminaré haciendo el lado web de las cosas, al menos el diseño web front-end cosas pero la aplicación en el desarrollo back-end tendrá que hacerlo un desarrollador, que está totalmente fuera de mi zona. Yo soy más de ese lado creativo, el lado front-end. Sí, ese es el tipo de breve que vemos a través del cliente. Te apuesto un 100 por ciento prometió que esto no va a llegar al 4 de diciembre, principalmente por la retroalimentación. Por lo que tu cliente verá esta fecha y dirá que lo harán, pero las cosas simplemente se volverán tarde. Tan solo llegues uno o dos días tarde y solo me aseguro que en cuanto llegue un par de días tarde, reviso la siguiente línea de tiempo, para que sepan que son ellos los que la empujaron. Entonces cuando es como dos meses de retraso, no es por mí, es por su mala retroalimentación. Entonces, sé realmente un poco rígido al principio diciendo que, tiene que estar aquí para esta fecha y tan pronto como tan tarde, agréguele eso al tiempo y solo empuje eso porque esto va a parecer largo si empuja hacia el próximo año, porque se va a sumar otro par de semanas en medio de una Navidad. Entonces deberíamos haber estado entregando esto a mediados de diciembre y antes de que te des cuenta es febrero. Después tuvieron a mediados de diciembre. Por lo que solo tenga muy claro acerca de los plazos y los plazos. Ahora de nuevo, este es mi proceso. Podría estar trabajando en una agencia en ese $4000 simplemente no cubriría el rango. Por lo que podría estar empezando en los $5000 y terminando en la marca de $50,000, dependiendo de lo grande que sea el proyecto. Podrías estar recién empezando y quizás te estés llevando el trabajo a casa mucho más barato que ese Reino Unido. Podrías estar haciendo diseños por $1500 o incluso $500 para conseguir tu primer trabajo. Pero pensé que te mostraría dónde estoy como diseñadores freelance de UX. Por lo que tienes alguna idea de precios y cronogramas y breves. Echemos un vistazo rápido a la persona que me hicieron. Entonces esta es la persona que construimos para este proyecto ahora, y los escritos iniciales tenían un esbozo áspero. Lo que hemos hecho desde entonces es alguna investigación de UX sobre quién es más probable que sea esta persona. Lo bonito de este cliente en particular es que tienen mucho Google Analytics y tienen un canal de YouTube fuerte. Por lo que es fácil entrar ahí y ver datos duros reales sobre quién está usando el canal, quién está usando su producto, y luego hablar con el cliente sobre quién podría ser esta persona potencial. Entonces lo que entre en esto dependerá realmente de tu proyecto. Entonces le hemos dado nombre a este tipo, Peter, esa es una imagen falsa de la biblioteca de valores, pero siento que representa a la persona. Le damos una edad, su título de trabajo, y un lugar que vive. Ahora, lo que realmente quieres hacer es poder comunicarte. Bueno, después de leer esto conoce a la persona. ¿ Necesitas anotar la pasta de dientes que usa o el auto que conduce potencialmente, pero potencialmente no? Si es un Prius o un Ferrari, eso es una indicación potencialmente de qué tipo de persona es. He visto algunas personas que apenas se meten en es mi nuevo detalle corto, supongo que lo que quieres ahí solo es para que puedas tener suficiente y él tuvo que irse e irse, entiendo de dónde viene Peter en relación a mi producto. Por lo que podría ser más corto que esto, probablemente no mucho más corto, pero tampoco lo haría demasiado tiempo. Ten una lectura a través de esto solo para que entiendas quién es Peter, por qué estamos haciendo este proyecto. Lo que he hecho por ti es en los archivos de ejercicio hay carpeta llamada persona template. Puedes usar esto si quieres. Hay un archivo de Illustrator puedes cambiar las imágenes y fuentes y cosas y usarlo si quieres, tienes permiso total para usarlo, pero sí, ten una lectura a través y ver cómo Peter hace las cosas. Entonces ten una lectura a través y entiendan Peter y sus posiciones de que cuando estamos construyendo un XD, podemos tomar algunas decisiones basadas en lo que Peter querría, no en lo que el cliente quiere, y no en lo que yo quiero personalmente. Entonces ese es el breve y las personas. Pasemos al siguiente video. 5. Creación de esquema de página (baja fidelidad) en Adobe XD: Vamos a iniciar el encuadre de alambre en XD, ahora enmarcado de alambre o baja fidelidad, es el término que se usa con frecuencia. Alta fidelidad sólo significa la visión con las fuentes y los colores y las imágenes. Se ve exactamente igual que el producto final, el encuadre de alambre o baja fidelidad solo tiene una fuente, un solo color, diseño básico real. Para mí el encuadre de alambre es probablemente la parte más importante. Ahí es donde mi valor viene de mi conjetura es, trabajando el flujo del usuario, cómo llegan de A a B, ¿cuánto tiempo tarda? ¿ Cuántos pasos? ¿ Qué tan fácil es? Ese tipo de encuadre de alambre es de donde la mayor parte del valor proviene para mí como diseñador. A pesar de que me encanta lo de alta fidelidad, el encuadre de alambre que encuentro es bastante importante. Ahora, ¿prueba los marcos de alambre? Utilizo marcos de alambre para enviar al cliente para que puedan comprobarlo para asegurarse de que todo esté en el lugar correcto pero no lo uso para pruebas reales para usuarios finales reales o las personas, puedes. Yo encuentro, soy lo suficientemente rápido en conseguir las versiones de alta fidelidad listas para las pruebas y prefiero probar con aquellos con todo el material de marketing adecuado, imágenes correctas, fuentes y todo eso de ahí dentro. El otro es en cuanto a encuadre de alambre, los haré a mano primero como si fuera algo así, y en mi libro muy rápido esto no va a nadie más que a mí, así que lo sostendré. El micrófono desaparece y realmente no puedes oírme. Ojalá puedas ver eso. A lo mejor me puedes entregar pero sí, son solo contornos básicos reales. Ahí hay páginas y páginas de éstas y yo solo paso y encarné las ideas donde todo necesita estar yendo y luego empiezo a construir en lo siguiente. Simplemente más rápido de esta manera, es posible que prefieras ir directamente a la computadora. Eso también está bien. En realidad vamos a empezar en XD ahora y ver algunos de los kits de interfaz de usuario. Por fin tiempo XD, sigue prometiéndolo. Te lo prometo, siguiente video. 6. Cómo trabajar con kits de UI existentes en Adobe XD: Hola ahí. En este tutorial, vamos a empezar nuestra página aquí. Vamos a conseguir una página, vamos a conseguir que tenga una navegación. Vamos a sacarlo de algunas de las plantillas que están integradas desde XD, y hacer que se vea así. Entrémonos en ello y empecemos en XD. Por fin tenemos XD abierto. Ahora, lo primero que vamos a hacer es que vamos a descargar una de las plantillas que XD nos ha hecho de manera útil. Simplemente vamos a sacar piezas de eso mientras trabajamos porque se acaban de hacer algunos alambres prefabricados de los que podemos robar piezas para ayudar a acelerar nuestro proceso. Puedes hacerlo descargando aquí donde dice “Kits de UI”, hay una opción, esto es Wireframes o puedes subir al archivo “UI Kits” y dar click en ellos aquí y esto solo abrirá Behance. Echemos un vistazo a eso. Aquí puedes hacer click en “Descargar Kits”. Ahora, ya los he descargado para ti y los he puesto en los archivos de ejercicios, así que si descargas los archivos de ejercicios, ya estarán listos para salir. Volvamos a saltar de nuevo a XD. Aquí en XD, vamos a abrir ese wireframe consiguió un “Archivo” ir a “Abrir” y los archivos de ejercicio que hemos descargado éste en un código UI plantillas. He descargado este wireframes aquí y vamos a empezar con web. Ahora, ¿por qué estamos empezando con web y no. Nuestro breve es bastante específico. Los principales objetivos van a ser el uso de la web, la interfaz web. Pero si supieras que tu proyecto estaba basado principalmente ya sea para uso móvil, web o tal vez para una aplicación, comenzarías con el móvil, pero vamos a empezar con la web y simplemente abrirla. Lo primero es navegar y hacer zoom y la forma más fácil es mantener pulsado el comando en un Mac o el control en un PC y tocar la tecla más para acercar y la tecla menos para alejar, agradable y fácil. Un par de otras técnicas de navegación está sosteniendo la barra espaciadora. Me da la mano y llego a moverme. Si hago zoom un poco, mantenga presionada la barra espaciadora, haga clic en mantener y arrastrar, con el ratón, y eso me permite moverme por los documentos. Ahora, otros dos atajos de navegación poco útiles, antes de empezar, es mantener pulsado el comando en un Mac o el control en un PC y tocar la tecla una, que se acercará a un 100 por ciento y aquí es donde deberíamos estar haciendo la mayor parte de nuestros trabajar, estar demasiado alejado y demasiado alejado y tomar decisiones sobre la elección y el tamaño de la fuente no es tan útil porque yo los usuarios solo lo voy a ver en un 100 por ciento, por lo que es genial estar en este tamaño, comanda uno o controla uno si estás en un PC. El último, te prometo es mi favorito es si selecciono este elemento aquí y voy comando tres o control tres en un PC, se acerca, solo resalta esa área. Eso me parece súper útil. Se lo puedes hacer a todo el up-board también. Se quiere ver esto up-board. Puedes hacer click en el nombre a lo largo del comando superior tres y lo centrará en tu vista. Esa es la navegación básica. Lo que vamos a hacer es crear ahora un documento de ejecución. Vamos a ir a “Archivo”, vamos a ir a “Nuevo”. Aquí hay algunos incumplimientos. Puedes golpear este pequeño desplegable para encontrar otras opciones. De verdad depende de lo que quieras hacer. Me gusta empezar sitios web con este 920 a través por 1080 de alto. Puedes escribir un tamaño personalizado por aquí o si obviamente trabajas con iPhones o iPads, puedes usar esos por defecto. Voy a usar a este tipo, dale click en él. Vamos a salvar a éste. Ve a “Archivo” “Guardar” y vamos a poner todos nuestros archivos para esta clase en nuestro escritorio. Voy a hacer una carpeta nueva y esta se va a llamar instructor HQ y vamos a llamar a este instructor de archivos HQ, lo llamaremos prototipo, y llamaremos a éste V1. El primero que tenemos que hacer es nombrar up-board. Solo tienes que hacer doble clic en las palabras de aquí. Vamos a llamar a esta página de inicio. Ahora si eres una persona como yo que nunca nombra tus capas en Photoshop o Illustrator. Tienes capa como 57. No tiene nombre, nombrar a tu up-board aquí en XD, se vuelve súper útil cuando dejamos de prototipar esto más adelante. Yo me meto en el hábito. La otra cosa que voy a hacer es que voy a alejarme, y voy a hacer que mi up-board sea bastante larga. Ahora porque no tengo nada en mi página y nada seleccionado. Yo solo prepago al up-board. Hay un up-board 2 que te vendría bien si quieres ser oficial, pero como no tengo nada más en mi página, solo puedo actualizar fácilmente el up-board. Notarás que aquí hay línea punteada. Esta es solo una bonita guía visual aquí para mostrarte cuál es o decir el punto de vista inicial por encima del pliegue. Esto solo significa que todo lo de arriba aquí es lo que la gente va a ver primero en tu página web. Todo aquí abajo va a ser cosas por las que tienen que desplazarse. Aquí es donde tiene que suceder la magia. Necesitas hacer tu venta, tu principal convincente, tu llamado a la acción. Todo por encima de esta línea punteada aquí. Puedes ajustar este punto de vista inicial si crees que es demasiado alto o demasiado pequeño. En primer lugar, vamos a ir a robar algunas partes de esa plantilla, vamos a saltar a ella. Puedes conseguir una ventana y cambiar entre ellos aquí, así que eso es saltar entre éste y éste, depende de ti. Utilizo comando tilde en Mac. Tilde es la clave de camino ancho por encima de tu tecla de tabulación. En un PC, creo que es pestaña de control solo alterna entre ellos. Hago mucho saltando entre ese camino. Lo que quiero ahora es que quiero uno de estos elementos de navegación. Yo sólo voy a escoger el que más se asemeja a mi maqueta dibujada a mano, y probablemente sea éste de aquí. Voy a darle un click una vez, conseguí una copia, Editar Copia. Voy a saltar a través de mi diseño, y voy a ir a pegar. Lo que quiero hacer es que voy a usar mi flecha negra y lo bonito al respecto, voy a tratar de meterme en el centro, pero ves XD, es inteligente, conoce el centro que puedes ver esos píxeles. Mételo a la parte superior. Ahora, cuando estamos diseñando esto, elegí una talla. Si hago click en el borde aquí, hacemos click en los nombres de la forma más fácil. Me da mis sentadas de documentos, mi up-board haría sentadas, y hemos recogido 1920 a través. Nunca quise diseñar un sitio tan grande, especialmente para mis wireframes. Escojo esta talla porque me gusta usar la talla diga aquí, 1400 a través para hacer mi página web. Pero me gusta tener aquí estos bordes extra, solo para que no esté tratando de diseñar dentro de una caja diminuta. Esto es aquí igual que el área de amortiguación para que pueda ver cómo se ve en potencialmente una pantalla más grande. Lo que también me gusta hacer es extender mi nav a lo largo porque va a ser a través de la parte superior. Lo que voy a hacer es que voy a desagrupar esto, haga clic derecho. Aquí se ven los atajos. Pasaremos por cada vez más atajos a medida que avanzamos. Pero desagrupar, ese atajo es el mismo que muchos otros productos de IW. Tengo esto, voy a copiarlo y pegarlo. ¿ Por qué? Voy a alejarme, estoy usando esto como guía aquí para mostrarme dónde debería estar diseñando dentro de. De lo que voy a hacer con él, voy a agarrar el relleno y sólo voy a bajar la opacidad de este relleno a la derecha. Es justo como una pista de fondo ahí para mostrarme cuándo están mis límites. Lo que también voy a hacer con él es que lo voy a bloquear para no poder moverlo. Con él seleccionado, puede hacer clic derecho y bloquearlo. Hay un par de maneras de llegar a bloquear. Utilizo los atajos Command L en un Mac o Control L en un PC, y solo obtienes este icono de bloqueo. Puedes desbloquearlo fácilmente haciendo clic en él. Eso me está dando mi ancho y sólo significa que no puedo moverlo ahora. Puedo seleccionarlo, pero no puedo moverlo. Una de las cosas que quiero hacer es que en realidad está por encima de todo aquí en mis capas. Cuando intento hacer clic en mi navegación, está en el camino. Voy a hacer clic en mantener y arrastrarlo, así que está en la parte inferior y puedes ver ahí en tu panel de capas que está bloqueado. Si no puedes ver tus capas, haz click en este pequeño ícono aquí. Voy a dar click en esto y voy a sostener un pequeño atajo. Mantén presionada la tecla Alt en un PC o la tecla Opción en el Mac y arrastra un lado, verás que sale en ambos sentidos. Realmente no importa cómo lo arrastres, pero eso es lo que quiero empezar. Tengo aquí una guía para saber dónde está el centro de nuestra página web y mi navegación va todo el camino por la parte superior porque así es como planeo tenerlo en mi resultado final y solo se ve bien en mi wireframe. Una última cosa antes de irnos es que por aquí en mi alambrada, la plantilla que podrías haber notado y ya arreglado eso, podrías tener fuentes faltantes. Da click en el botón y podrás sincronizar las fuentes usando kits de tipo, agradables y fáciles. No lo ignores y si no puedes arreglarlo, no te estreses, funcionará muy bien con este tutorial. Si no puedes encontrar las fuentes, no hay gran drama, pero si puedes arreglarlas entonces pasaremos al siguiente video. 7. Cómo trabajar con tipos de letra en tus esquemas de página XD: Hola allá, en este video, vamos a ver Type in XD. Vamos a actualizar algunos de los nav aquí. Vamos a hablar de qué fuentes podemos usar y no podemos usar. Haremos algunos alineando y distribuyendo y actualizaremos el logo aquí en la parte superior izquierda, muy emocionante, no realmente, pero algunas cosas esenciales. Entrémonos y hagámoslo. Trabajar con Type in XD es bastante fácil, cubriremos fuentes web más específicas y cosas más adelante cuando lleguemos a nuestra versión final de alta fidelidad. Pero lo básico por el momento es que quiero reemplazar este XD por nuestro logotipo de negocios. Por lo que voy a seleccionar en él y eliminarlo, seleccionar mi título. Ahora, tal vez te inclines ahora a empezar a usar el logotipo de marca para la empresa, no es práctico y marcos de alambre, solo tienes que mantenerlo realmente simple en marcos de alambre y luego dejar que tu creatividad corra libre en las versiones de alta fidelidad del versiones finales. Yo mismo sé que me atrapan demasiado como ponerle un logo y te gusta, “solo usaré el color de la marca para la navegación”, luego comienzas a recoger fuentes y luego antes de que lo sepas, diseñarás completamente un marco de alambre y lo debería ser un proceso bastante fácil. Entonces sólo voy a poner en INSTRUCTOR HQ así el nombre de la empresa, y no voy a preocuparme de nada excepto el color, por aquí llenar, sólo que se pueda ver. Entonces los fundamentos están por aquí. Tienes tamaño de fuente y tienes tu fuente obviamente, y los diferentes tamaños o los pesos, y solo tienes algún tipo básico. Tienes los espacios entre letras, así que puedo abrirla tal vez 200 y consigo un poco más de espaciado entre los personajes. No quiero estar haciendo esto en este proceso y esto es eliminar el espacio entre las líneas. Ahora, uno de los trucos prácticos cuando estás trabajando con fuentes es esta cosa de aquí no es como un desplegable, tienes realmente escribirlo y así es fácil como a veces solo hacer clic en “Hold”, y ver este pequeño punto aquí, agarrar esa flecha negra, ve este pequeño punto blanco, hace un par de cosas, si lo arrastro hacia abajo, hace el tamaño de fuente arriba y abajo, lo cual es genial, y también te darás cuenta si justo debajo de él un poco, puedes empezar rotándolo. Mi consejo aunque es no rota ningún texto en un sitio web o diseño de aplicación, es simplemente bastante difícil técnicamente conseguir que “Type” rote, parece algo fácil de hacer, pero si alguna vez has tratado con sitios web antes, en realidad, rotar “Tipo” es imposible, así que tenemos que convertirlo en una imagen y es un gran drama, así que trata de no hacer eso. El otro es que cuando estás recogiendo tallas, te gustaría estar en un 100 por ciento, puedes ver que estoy al 75 por ciento. Entonces empiezo a tomar algunas decisiones sobre, “Oh, ¿esto es lo suficientemente grande?” Pero cuando no estás en un 100 por ciento, podrías tomar algunas malas decisiones. Entonces si entro y luego mando uno en un Mac, controlo uno en un PC, entonces puedes tener una sensación de que estos son los tamaños reales que los usuarios van a ver, así que siento que son bastante pequeños y esto es bastante grande. Voy a encogerlo un poco esto, ¿qué es a los 20? Entonces, o bien puedo arrastrarlo aquí, obviamente escribirlo por ahí. Voy a apegarme a un tamaño de fuente realmente consistente, 16 es un básico realmente estándar, la fuente más grande que quieres estar usando. Yo también voy a dar click en estos tipos. En realidad, voy a estar ajustando algunos de estos, así que no quiero, tengo tres de ellos que quiero. Voy a seleccionar a los tres. En realidad no, solo haremos una y luego la duplicaremos. Solo voy a usar mi flecha negra, solo borrándolas, y voy a dar click en esta primera. Este va a ser ejemplo, y voy a hacer el tamaño de la fuente hasta 16 para que coincida con la otra cosa y quiero un par de ellos ahora. Un pequeño truco es que puedes seleccionarlo e ir a editar, copiar y pegar o Control D en un PC o Command D en un Mac y eso te da dos de ellos. Encuentro la forma más fácil sin embargo es, con tu flecha negra, con esta seleccionada, mantén presionada la “tecla de opción” en tu Mac, la “tecla Alt” en un PC y la arrastras a través, y te darás cuenta de que justo cuando la arrastras sosteniendo la tecla abajo, obtienes un duplicado. Precios, inicio de sesión. Recuerda, estoy sacando estos de mis características. Estas son las principales cosas que necesitan entrar y en este caso, la última es apuntarse. Lo que quiero hacer es probablemente quiero a este tipo hasta el borde aquí, tal vez solo dentro un poco, y voy a sostener Shift y seleccionarlos todos. Tengo mi flecha negra sosteniendo Shift y solo haciendo clic en ellos cada uno, y en realidad podría arrastrar este un poco más allá. Puedes arrastrarlos y ver, ¿ puedes ver los espacios entre ellos empiezan a forrarse, ves ese punto rosa ahí? Por lo que podrías hacer eso, entonces van a igualar, Depende de ti, o si los seleccionas todos sosteniendo turno y usas esta opción aquí arriba que dice, mira esta cuarta opción aquí dice, distribuye horizontalmente, sólo los extiende a todos. Ahora, la otra cosa que tienes que estar haciendo es como yo, peleando contigo mismo para no pasar y escoger una fuente más bonita, solo una más bonita, y tal vez usando uppers y lowers y solo quieres mantener eso fuera del momento. Quieres que sea este montura de alambre realmente torpe, funcional, sin estilo. medida que paso y los alinearé bien, sólo hay tanto que puedes ignorar. Está bien. Entonces eso vamos a ser nosotros en el siguiente video. 8. Cómo crear formularios, casillas de verificación y botones en Adobe XD: Hola ahí. En este video vamos a hacer algunas casillas de entrada y algunas casillas de verificación y un botón. También veremos crear nuestro primer estilo de personaje. Entonces vamos a empezar a crear ahora. Lo primero que quiero hacer es agarrar la herramienta de rectángulo y sólo dividir un poco de espacio. Esta va a ser mi caja de embarque. Está por encima del redil, es mi más importante. Es pedirle a la gente que se convierta en miembro o al menos probar el curso. Lo que me gustaría hacer es, estoy pesado con un relleno blanco, la frontera aquí, voy a cambiar un poco para estar oscuro. Ya sabes como digo que no gires demasiado recogiendo fuentes y color. A veces no puedo evitarme. Pero acabo de escoger un gris ligeramente más oscuro y voy a reutilizar este gris a lo largo del curso. Entonces ve este pequeño botón más aquí, golpeo plus, y significa que es de fácil acceso. Yo voy a hacer lo mismo para aquí abajo. Voy a dar click en la navegación. Voy a dar click en el azul, y voy a añadir eso para que sea agradable y fácil de reutilizar. Lo que también voy a hacer es darle a este pequeño punto aquí. Se puede arrastrar por ahí para tus colores. Voy a arrastrarlos a la parte superior izquierda para que sea completamente blanco. No te preocupes por esta navegación por el momento. Entonces tengo un color blanco al menos ahí y un negro completo. Entonces solo lo estoy arrastrando todo el camino hasta la parte inferior izquierda, haciendo clic y arrastrando más allá de esa esquina. Entonces tengo al menos algunos colores básicos con los que empezar a trabajar. Entonces lo voy a volver a sentar, mi navegación de vuelta al azul. Ahora, ¿por qué estoy usando azul? Simplemente pasó a ser el que está en la plantilla y soy reacio a ir a escoger el color de la marca para usar, tal vez el verde del color que podría empezar a usar. No. Te vendría bien en blanco y negro. Eso está bien. Esta va a ser mi caja de embarque. Lo que voy a hacer es simplemente bloquearlo, recuerda Comando L, o Control L en una PC, realidad un poco de tipo en la parte superior aquí primero. Esto va a ser cuando vaya mi mensaje de incorporación. Voy a hacer de esto sólo una fuente más grande. mensaje de incorporación va aquí. Intento no agregar ningún diálogo real o material de marketing real aquí. Nuevamente, sólo para mantenerlo sencillo, dada idea de lo que va a ser útil el título. Entonces ahora cuando quiera un campo de texto o un cuadro de entrada, entonces voy a ir y obtener de mi plantilla. Aquí, mi alambrada, estaba mirando alrededor y he encontrado que hay una sección de formulario. Entonces supongo que solo es escoger el estilo que más te guste. Voy a agarrar este de aquí. Voy a copiarlo, saltarlo de nuevo a mi opción aquí. Eso funciona para mí. En lugar de entrar, voy a poner a nombre su curso. Yo sólo estaba repasando lo mío que no ha tenido mensajes de marketing o ningún tipo real, pero no podía pensar en una mejor manera de describirlo sin realmente escribir el texto en este caso. En cuanto al texto, voy a mantener todo gris, solo mantenerlo aburrido consistencia a través del acelerador, y voy a añadir un pequeño signo más aquí haciendo clic una vez, golpeando plus, seleccionándolo, Podría hacerlo un poco más grueso por lo que se puede ver, negrita, talla sabia probablemente necesita estar arriba, 30 incluso, Flecha Negra, moverse a la posición. Lo siguiente que quiero es una casilla de verificación. Puedes arrastrar en esta cosa por ahí si realmente quieres chasquear a cosas. Normalmente es realmente genial. Lo que puedes hacer es si lo estás encontrando un poco difícil, es dejar ir eso y solo usar tu teclado. Estoy usando mis teclas de flecha en mi teclado solo para moverlo. Puedes mantener pulsado Shift, y usar las teclas de flecha y se mueve en trozos grandes, y sin ella solo se mueve en pequeños pedacitos. Ahora quiero una casilla de verificación. Entonces voy a saltar de nuevo a mi marco de alambre. Ahí hay uno. Eso servirá. Yo lo tengo y lo copio, lo muevo al otro lado. Va a estar en algún lugar ahí. Voy a hacer doble clic en él, y voy a decir, “Usa video de muestra”. Voy a usar mi color que estoy usando a lo largo. A continuación quiero poner un igual y ahora voy a poner un botón aquí. Entonces voy a ir a buscar un bonito botón llano esperemos. Ahí hay un botón para mí. Voy a desagrupar estos. Esa es una unidad de una. Voy a copiarlo, moverlo, pegarlo, y eso es lo que voy a usar. Este va a ser mismo, y éste dice vista previa. Lo que podría hacer es seleccionarlo, hacerlo sainted. Ahora notarás que en realidad es grupo con la caja exterior, pero no está conectada. Voy a desagruparlo, para que pueda arrastrarlo al medio aquí. Ahora en cuanto al tamaño de la fuente, he decidido ir por una más grande, ¿qué tenemos aquí? Catorce. Tengo 16 y 14, así que en realidad podría hacer esto un poco más consistente. Tú, tú, y tú, y tú, todos van a tener 14 también. Siento que es un mejor tamaño de fuente. Hay algo raro, me voy a deshacer de él. Una de las cosas que me pasa cuando estoy diseñando aquí es que puedes ver, me cuesta ver ambos bordes. Yo quiero quedarme al 100 por ciento. Lo estoy diseñando del tamaño correcto, pero es difícil ver ambos lados. Vas a tener que encender y apagar esto si estás trabajando como esta pantalla aquí es un MacBook Pro. Supongo que eso es de 15 pulgadas. Por lo que la pantalla no es lo suficientemente grande. Si estás en 13, estás en muchos problemas. Pero esperemos que tal vez puedas estar trabajando en un monitor externo. Eso es lo que hago normalmente cuando no estoy grabando. Simplemente tengo un monitor extra más grande, monitor 4K en el que lo conecté para trabajar. Voy a por lo menos hacer esto centrado, ahí dentro. Eso se ve bien. Bueno, las últimas cosas que me olvidé de hacer es, puedes saltarte ahora ya no nos estamos poniendo más emocionantes, voy a añadir una pequeña opción aquí que va a decir, “Elige tu archivo y un plus”. Voy a usar la misma fuente y cosas que ésta, así que lo que quería hacer es que en realidad me voy a sumergir en un poco de estilos. No vamos a usar demasiado estilos en este nivel. Entonces con esto seleccionado, lo voy a desagrupar para poder seleccionar solo en este tipo. Voy a abrir lo que se llama mi panel de activos. Entonces aquí en activos, puedo tener algo llamado estilo de carácter. Entonces es como estilos de personajes de otros productos como Illustrator o InDesign, si hago clic en él, es justo como un tamaño prehecho que llego a reutilizar realmente fácilmente. Si hago clic en él, y hago clic en él ahora, todos coinciden. Si actualizo este haciendo clic derecho en él, voy a editar y decir más adelante y decidir: “En realidad, no. Creo que hay que usar 16”. Se puede ver que todo va y se actualiza. Se puede ver que éste no formaba parte de ese estilo, pero rebasó alguna magia hoo-do donde llega al documento y encuentra los que son exactamente iguales y los actualiza también. Es súper útil. En realidad, voy a darle vuelta esos a 14. Algo que podría hacer para que parezca un enlace en el que se puede hacer clic es hacer un subrayado. Extrañamente, no se puede hacer subrayados todavía en XD, es la visión uno, así que vamos a cortar un poco de holgura pero tiene uno de los importantes, así que voy a conseguir la línea dos y fingir un subrayado. Para indicar un poco de jerarquía entre que sea el más importante y este siendo el bit de nicks, en realidad podría usar un tamaño ligeramente diferente, 14 y ajustar esto en. Pueden ir por debajo. Puedes usar nuestro video de muestra o elegir tu propio archivo. Cuando lleguemos a una versión de alta fidelidad, podré demostrarlo mucho más y despejar. Estoy peleando con ellos. De verdad quiero pasar algún tiempo haciendo que esto parezca una segunda opción, pero vamos a dejarla ahí por el momento. Pasemos al siguiente video. 9. Iconos gratuitos para proyectos UX y UI en Adobe XD: Oye, ahí en este video vamos a ir a buscar iconos. Se puede ver el video aquí es un ícono mural allá, hay una imagen uno. Entonces vamos a ir a mostrarte los principales lugares para ir y reunir iconos consistentes y estos tres lugares principales, y luego vamos a diseñar esto realmente rápido. Apenas el resto de la página y revisaremos nuestro pie de página. Entonces vamos a hacer eso ahora. Entonces quiero algunos iconos. Estoy mirando mi alambrada aquí y tengo una caja grande debajo que va a tener este video de reproducción de auto, este video de “cómo”. Debajo de eso hay una gran infografía. Entonces necesito un par de iconos, necesito un video, necesito un botón de silencio y necesito un icono que muestre una imagen porque obviamente no quiero usar imágenes reales específicas y videos específicos. Una pequeña nota al margen, en realidad puedes poner videos, videos reproducibles dentro de XD por el momento. Por lo que queremos algunos iconos. Hay un par de lugares para conseguirlos. Uno de los lugares fáciles es suministrado por Adobe. Así que haces clic en tu logotipo de Creative Cloud y está aquí arriba en un Mac, y está abajo a la derecha en un PC. Quieres ir a Activos y luego a Mercado, luego da clic en este pequeño ícono de Buscar y luego escribe el ícono que estás buscando. En lugar de hacer el video primero, hacemos imagen porque no pude encontrar un buen video aquí, pero puedes encontrar una buena versión de imagen. Entonces eso es un razonable, consistente, como lo que esperaría como marcapasos para una imagen. Se puede hacer click en ellos. Comprueba que este sea un SVG de gráficos vectoriales escalables. Si no estás acostumbrado a los SVG, son increíbles y se conocen. Son como EPSs de los tiempos pasados. Son intercambiables pero son vectores, lo cual es encantador. Haga clic en Descargar. ¿A dónde voy a descargarlo? Voy a hacer una nueva biblioteca para este proyecto. Voy a llamar a éste Instructor. Escribamos la HQ, el nombre de la empresa. Esperemos que se descargue ahí. puede ver que se está sincroniando aquí. Tardará un segundo. Si vuelvo a saltar a XD. Ahora si voy a Archivo, abre mis Bibliotecas CC, ahí es donde lo he guardado t, y puedes ver aquí tengo un elemento sin soporte. Eso es un pequeño problema supongo. XD es nuevo y aún no es compatible con SVG. Si descargaste un JPEG o un PNG funcionará, pero no SVG por el momento. Hay una alternativa fácil y estoy seguro de que están trabajando duro para actualizar eso. Vamos a cerrar eso. Encuentro que es fácil sólo entrar en algo como Illustrator. Abre tus Bibliotecas CC desde aquí, encuentra la biblioteca en la que estamos trabajando, Instructor, HQ, ahí está, un doble clic en ellas, luego selecciónalas. Copiarlos. Acabo de ir a Editar, Copiar, y luego en XD Pegar. No hay gran drama. Algo que quiero hacer es que quiero cambiar el color, y se puede ver porque está agrupado no se pueden ver los colores. Para que puedas desagruparlo. Acabo de usar el atajo Comando, Shift G en un Mac, y su Control, Shift G en un PC o aquí arriba bajo ungroup. Enfriar. Entonces lo tengo seleccionado, voy a escoger uno de los colores. Este es uno de los iconos que quiero, voy a encogerlo ahora. Si mantienes pulsada la tecla Mayús mientras arrastras en cualquiera de las esquinas, lo hará proporcionalmente. Ahora sin turno sostenido, se puede ver que es un poco raspadero. Otra cosa agradable si estás sosteniendo Shift, mantén presionada Alt también en un PC u Opción en un Mac. Entonces turno y opción juntos mientras arrastras una esquina y va desde el centro. Es conseguir el mío a un tamaño más proporcionado. Ese es uno de los iconos que quiero. Necesito dos más, muéstrale otros dos lugares. Entonces uno de los más útiles está en un sitio web aquí, es material.io, por lo que esto es dirigido por Google. Si vas a /iconos, hay un montón de iconos geniales aquí, y lo bueno de ellos es que están muy bien considerados y usados mucho a través de digamos, el navegador Chrome, como estamos viendo ahora, así como a través de todos los teléfonos Android. Entonces usa este ícono de búsqueda aquí y voy a poner en video. Se puede ver que no es el que yo quiero. Ese es el tipo de cosas que creo que funcionarán para esto o decir parte de aquello. Depende de ti lo que sientas podría funcionar, voy a dar click en este. Lo que puedes hacer es elegirlos de qué color quieres descargar y el tamaño. Realmente no importa el tamaño porque va a ser un formato SVG. Recuerda esa cosa de Vector, eso es impresionante. Por lo que haces click en eso y te descargará un SVG. Si quieres un PNG, puedes obtenerlo desde aquí. Ya los he descargado para nosotros y están en tus archivos de ejercicios. Entonces lo que puedes hacer es volver a XD. Se puede ir al archivo y se puede ir a importar. Ahí encuentra tus archivos de ejercicios, encuentra iconos, y hay algunos aquí dentro que vamos a usar. Voy a usar este, dice IC Webcam. Voy a dar click Importar y conseguí un poco de webcam. De nuevo, podría tener que desagruparlo. Simplemente baja como un pequeño grupo agradable, con él seleccionado, ahora voy a escoger el azul. Probablemente voy a conseguirlo del tamaño más grande, y ahora voy a ir a buscar el último en mi último lugar, que es mi ícono Mute. Vayamos a revisar de dónde podemos sacar eso. Entonces este es el último lugar, hay millones de lugares para encontrar iconos. Sé de iconfinder.com es un lugar realmente bonito aquí si quiero buscar un botón de silencio. Se puede ver que hay algunas opciones de pago, pero también se puede decir Vector, quiero Gratis, y quiero que haya No Link Back para uso comercial. A menudo voy a esas y aquí encontrarás muchas opciones. Lo bonito de este sitio es que a menudo se puede encontrar un grupo agradable consistente. Digamos que decides que te gusta este estilo, pero si hago clic en él, notarás que forma parte de un grupo más grande el cual puede ser súper útil. Pero en mi caso quiero algo bastante sencillo, así que voy a usar este. Sí. Quiero la opción SVG y la voy a descargar. Ya he descargado uno y podemos ir a agarrarlo ahora, pero esos son los tres lugares. Puedes obtenerlo del mercado de Adobe. Puedes obtenerlos de material.io/iconos, o puedes obtenerlos de Iconfinder. Encuentro que hay que usar los tres de esos lugares para encontrar todo lo que necesito. Todavía no hay un lugar que tenga todo lo que quiero. Entonces vamos a traer el último, así que voy a ir al archivo. Voy a ir a importar y hay una opción aquí llamada volumen apagado, veo volumen apagado. En realidad una ligeramente diferente a la que miraba antes. Voy a desagruparlo. Haga clic en esto, voy a escoger el icono azul. Ahora voy a empezar a usar estos en mi gran apretón aquí. Entonces hagámoslo. Voy a alejarme y te quiero, amigo mío, lo he desbloqueado y quiero esta parte también. Por lo que tengo presionado Shift y hago clic en ambos. Ahora si sostengo Alt mientras los arrastro, aquí traemos a estos dos tipos grandes. Entonces hay 1, 2, y luego hay otro aquí abajo en mi pequeña maqueta de ahí. Genial. Este top one es el video uno, y éste de aquí es la imagen. Agrupar estos juntos. Haciendo genial Dan. Lo que podrías hacer ahora es en realidad simplemente avanzar rápidamente hasta el final y pasar al siguiente video, porque ahora solo voy a pasar y en realidad armar estas cosas. Entonces no súper excitante. Depende de ti. Va a ser Auto Playing. Cómo hacer video. Pon eso en el medio aquí y va a ser así, pero se va a silenciar para empezar. Por eso quería este ícono. En realidad lo voy a llenar de blanco y ver si puedo agarrarlo de nuevo. Mantén presionada Mayús usa mis teclas de flecha para moverlo a través, esa es mi solución para intentar demostrarlo. Pongámoslo en este silenciado, ese es ese tipo y ponerlo en el medio. Estoy haciendo asíntota, genial. Ahora éste de aquí es algo parecido esta es la fila arriba. Esta va a ser mi Infografía para el ecosistema. Ahora debido a que esto no es realmente se consiguió salir a usar las pruebas. No teníamos que ser explícitos con lo que sea la cosa. Me encantan los wireframes, bajando las ideas, pero no todo el test de usuario que se debe hacer con una versión completa de alta resolución. Serán personas que discuten conmigo sobre eso sin embargo, está bien. Usted en el mensaje de embarque. Esta de aquí son dos listas pequeñas, lo que voy a hacer es seccionado para mostrar dos piezas. El tobogán aquí, va a ser lista paso a paso para comercializarte tú mismo. Este de aquí va a ser el mismo pero éste está comercializando tu curso, me he alineado, separarlos en el medio, puedes ir ahí, necesitas estar en realidad en el medio y usaré dos de estas imágenes sosteniendo Alt mientras estoy arrastrando u Opción en un Mac. Este de aquí va a ser para mi tablero. Va a haber un ejemplo de tablero de instructores. Este es un poco especial como en, realmente quiero saltar a mi alambrada y encontrar que hay llamada a las acciones. Había un poco aquí con gráficos y cosas, es aquí abajo, precios y selección de tablas. Tengo ganas de empezar a agarrar algunas de estas gráficas de tartas y esas cosas, pero todavía siento que probablemente haya demasiado detalle en estas para lo que necesito en este momento. Yo sólo voy a mantenerlo sencillo. Voy a apartar esto de mi ejemplo de paneles de usuario. Va a ser otra imagen y por aquí va a ser mi descarga de la app. Aquí vas selecciónalos todos y descarga. Acabará de poner una app para iPhone. Eso fue solicitado por el cliente, vamos a asegurarnos de que se incluya. Lo último aquí abajo iba a ser una lista de características. Yo solo estoy despertando este solo artículo también, este de aquí y esta va a ser mi lista de funciones. Ahora en este caso necesito un poco de texto corporal, voy a agarrar un poco de Loren ipsum. Todavía no había nada integrado en XD. Podrías usar InDesign o hacer lo que hace mucha gente e ir a lipsum.com. Lo bonito del sitio, es feo, pero se podría decir cuántas palabras quieres. Yo quiero en realidad sólo un párrafo por favor. Genera como un párrafo muy grande. Yo sólo voy a agarrar esta puñetita frase de la misma. Voy a usar eso como solo colocar texto titular. Es muy común usar longitud mixta para hacerlo. Voy a usar mi Arial. Voy a asegurarme de que estoy en mi 100 por ciento y en realidad esta cosa de aquí, 14 es demasiado pequeña. Por el momento no hay puntos de bala en XD. Se puede copiar y pegar uno de otro programa o mantener pulsada la Opción ocho. Mantén presionada Opción en un Mac o O un PC, solo tienes que hacer clic en el Ocho, la tecla número ocho te da ese valor predeterminado. Voy a usar esto una y otra vez en realidad, lo que hago es copiarlo y simplemente poner un montón de ellos y luego espaciarlos con el espaciado de líneas por aquí. ¿ Cuánto? Asegúrate de volver al Comando uno y luego el interlineado va a ser 32, tipo caen. Eso va a ser todo por el momento. Simplemente coloque titular para esto en este momento, dos columnas tal vez. Muy bien, genial, así que eso es la mayor parte. Una de las últimas cosas que quiero hacer es agarrar un pie de pie de titular de lugar desde aquí. En la parte superior estaban estos elementos de la interfaz de usuario. Voy a agarrar cuál, no estoy súper preocupado en este momento, déjame agarrar a este tipo aquí, voy a simplemente Copiarlo, golpearlo Pegar y encajarlo, desagruparlo, sostén Alt como qué lo hicimos por el tipo superior u Opción en un Mac. Lo que estoy haciendo es meter esto ahora así que voy a agarrar mi herramienta Apple en realidad, nunca uso la herramienta Apple, en realidad simplemente no hago clic en el borde aquí y puedes redimensionarlo. Voy a tener que ir a cambiar esto porque si dejas esto como XD y algunas otras cosas, cliente acaba de volver y dice, “oye, esta no es nuestra dirección” y te metes en problemas de esa manera. Yo sólo voy a poner y voy a poner en carretera de muestra, muestra en California está bien. Nuestro número va a ser 0, 0, 0 y esto va a ser muestra. También podríamos poner instructor HQ. Cualquier otra cosa, que quiera cambiar rápidamente, dirección de correo electrónico que está bien. Suscríbete a nuestro boletín suena como algo que haremos. Sólo una alambrada y esto va a coincidir con las cosas de arriba ahí. Tenemos ejemplo y tenemos precios, tenemos apuntar. Creo que hay un login también, login. Ahí tendríamos copyright InstructorHQ 2018. Eso se está acercando a nuestra página de inicio. Nos tomamos un poco para que este trozo se pusiera en marcha, pero verás cómo después de un rato conseguiste elementos tirados alrededor que puedes reutilizar. Una vez que tienes tu propio estilo para un wireframe de lo que quiero decir con estilo como puedes ver que este de aquí es, me parece altamente diseñado y luce bonito y es bueno. Pero me parece que ha sido demasiado tiempo tratando de que se vea realmente bonito, mientras que, esto se podía ver que es feo, pero es funcional. No va a usar una prueba. Se ha ido al cliente solo para explicar todas las diferentes partes y asegurarnos de que no falte nada antes de ir y pasar horas haciendo el diseño, y pasar tiempo con las fuentes y las imágenes. Está bien, eso va a ser todo para este tutorial. Saltemos al siguiente, es uno largo. Está bien, vámonos. 10. Prototipo y agregado de interactividad a Adobe XD: Hola ahí. Bienvenido a este tutorial donde vamos a empezar a crear prototipos y añadir un poco de interacción. Se pueden ver estos cables colgando por aquí. Lo que pasa es que cuando golpeo “Play”, puedo golpear “Preview” y luego cerrarlo y volver para que eso vaya a sumar un poco de interacción para que podamos dejar de movernos alrededor estas balas y empezar a hacer algunas pruebas mientras estamos trabajando. Empecemos. Para empezar a crear prototipos y conectar nuestros alambres para obtener alguna interacción necesitamos tener más de una página. Tenemos un fueraborda llamado homepage. Son un par de formas de hacer una nueva. Puedes hacer click en esto y bueno, truco que hemos estado usando hasta ahora en este curso mantenemos presionada la tecla “Opción” en Mac o tecla O en un PC y luego hacemos clic en la palabra “Página de inicio”. Simplemente puedes arrastrarlo a través y conseguir uno nuevo. No quiero todos estos elementos, así que no es lo que voy a hacer. Voy a ir a deshacer. Puedes ir a tu último panel y solo tienes que hacer clic en este tipo, hacer clic con el botón derecho en él y decir duplicado, y tendrás dos de ellos. Quiero una nueva página. Para ello, puedes agarrar el fueraborda también y solo tienes que hacer click una vez por aquí. Podrías ir y redimensionarlo si quieres. Si necesitas un tipo diferente de documento, puedes ver aquí abajo, están los de Apple, ahí está Google, hay web de Microsoft. Por lo que puedes hacer click en cualquiera. Digamos que necesitaba un iPhone, y eso los sumará. Eso es fácil, agregar páginas. Antes de conectarlos, solo necesitamos agregar algo a esta página para que haya algo con lo que conectarnos. Vamos a renombrar el a bordo y éste va a ser nuestra página de opciones de vista previa. Cuando la gente haga clic en este pequeño ícono de aquí, voy a acercar. Al hacer clic en esto, llegan a decidir qué tipo de adelanto con eso ven el lado estudiantil, o ese lado docente. En primer lugar voy a pedir prestado algunos pedacitos. Te voy a agarrar. Yo también te agarraré. ¿ Algo más que yo quiera? Pero un texto voy a ser tú. Copiarlos, dar click en esta página, pegarlos, vienen para el paseo. Esos son los pedacitos que yo quiero. Voy a redimensionar esto para que sea algo así y lo medio-ish. Voy a usar estos dos, estoy sosteniendo turno, para agarrarlos a ambos. Al mirar mi marco de cable, uno dibujado a mano, tengo dos de estos. Yo quiero que éste diga muéstrame. En realidad, quiero que ambos digan que me enseñen. Es este texto de aquí. Usaré todos los 16 puntos para el texto un poco más grande. Aquí quiero decir, y lo que ve tu estudiante. Ese tipo va ahí, escribiré alinearlos para que cuando los duplique y me ponga a la mano, digamos reloj. Ya ves como el instructor, me voy a interesar decir, solo estoy usando este lenguaje para empezar. Va a ser la prueba que me permita trabajar con el hecho realmente me hace desde entonces. Siento que tal vez no. Estoy bastante seguro de que la degustación de usuarios va a volver y se va. Aquí nos confundimos. Pero está bien, es estrella alfa. La otra cosa que quiero es una cruz. Podría usar la X en mi teclado, pero eso generalmente no se ve tan bien. Entonces voy a pasar por aquí y encontrar una cruz. Ahí hay uno. Es práctico pequeño documento, este tipo, ¿no? Voy a darle click en él y agruparlo. Yo te quiero por favor. Yo lo voy a pegar aquí. Se va a ir por aquí y puede quedarse azul. Ahora vamos a romper esto como prototipo. Tengo dos páginas y quiero poder prototiparlo y conectarlo. ¿ Por qué lo hacemos ahora y no estamos terminados un marco de cable, me parece que es una forma realmente rara de hacerlo. Lo que necesito hacer mientras estoy desarrollando esto, es que necesito diseñarlo y estar probándolo tanto en un ancho un teléfono ya que estoy trabajando en lugar de esperar hasta el final. Se trabaja bastante entre el diseño y el prototipado. Estamos en modo diseño. Ya puedes ver que tenemos nuestras opciones de diseño. Si tienes un prototipo, esta es la forma en que podemos agregar interactividad. Lo que me gustaría hacer es antes que nada, esa es mi página de inicio. No estoy claro. Eso es una especie de base en casa y será lo que sean las estadísticas anteriores que sea. Después prototipo, y notarás que ninguna de las opciones cambia, nos falta un pequeño panel de propiedades aquí. Pero lo que podemos hacer es lo que quería hacer es cuando se hace clic en este botón de vista previa, no en el texto, este texto es por sí mismo o la caja. En realidad voy a seleccionarlos a ambos. Mira esto, si hago clic fuera en segundo plano y luego hago clic en turno, haga clic en ambos, puedo agruparlos. Estoy usando el atajo pero el largo camino está ahí. Con ellos ambos seleccionados, esta es poca opción que se saca, así es como nos conectamos hacia arriba. Voy a alejarme un poco. Voy a dar clic en “Hold” y arrastrarlo. Eso significa que cuando se hace clic en ese botón, va a ir a esta página aquí. Ahora obtienes algunas opciones, por defecto se va a disolver. Esto va a ser como un desvanecido cruzando y hay un poco de una Facilidad que simplemente hace que se vea bien en cuanto al movimiento. Es así el tiempo que lleva. El genial de esto es quien hizo esto en XD, todos son bastante dulces para empezar, y realmente no necesito cambiarlos. Vamos a probar esto y a averiguar qué es lo que tenemos que hacer a continuación. Para probarlo, usamos este pequeño botón de reproducción hasta el aquí, es vista previa de escritorio, porque estamos previsualizando una página web, lo mejor es previsualizar realmente en tu laptop. Si estuvieras diseñando una aplicación, irías directamente al móvil para estar probando. Hablaremos de las pruebas móviles un poco más tarde cuando empecemos a construir la versión de la app de esto, pero vamos a golpear “Play” ahora. Aquí, esto es como una pequeña ventana que se abre y nos permite hacer nuestras pruebas. Está bien, así que ahora vamos a dar click en vista previa y ya ves que hizo esa pequeña cruz disolver cosa de la fe. Puede que no te guste eso, puedes cambiarlo y apagarlo. Ahora puedo hacer click en cualquier cosa. Estamos atascados. Voy a cerrar la vista previa. Aquí necesito hacer algunos otros bits, para que eso funcione. Se puede ver que está conectado. Otra forma de llegar a esta cosa aquí dice ejemplo, voy a usar eso como mi botón para cruzar. Pero uno de los problemas es que, que las garrapatas son bastante pequeñas por lo que sería realmente común aquí en XD también. Si tienes un botón aquí, voy a hacer unos botones falsos. Voy a volver a Diseño. Yo sólo voy a hacer un área grande para que esto golpee. Voy a apagar la frontera, darle el mismo color azul para que se vea igual que el fondo. Lo que quiero hacer es asegurarme de que esto envíe el texto. Voy a ir a traer al frente. Agarra mi rectángulo y es un poco difícil de ver supongo, pero tengo turno click a los dos y voy a agruparlos. Eso significa que sólo el área clicable es más. en lugar de solo unas garrapatas que pueden ser difíciles de hacer click. Yo lo voy a hacer bonito y grande, sobre todo cuando lleguemos a versiones móviles de prototipos. Volver al prototipo. Aleja un poco. Yo quiero que este tipo vaya al mismo. Realmente no importa dónde le hagas clic y saltará al punto correcto. ¿Queremos disolver? Simplemente probaremos y te mostraremos algunos de los otros. Podríamos hacer deslizamiento a la derecha. Puedes decidir qué quieres usar. Lo que también quería hacer es este pequeño botón cruzado, quiero que recoja para volver a esta página aquí. De lo que voy a hacer el mismo truco. Por lo que volver al diseño, agarra esta herramienta, dibuja algo que sea más fácil de golpear, apaga el borde. Es más fácil mover esto al frente que el otro a la parte trasera. Ve detrás de esta caja, tráelo al frente, encuentra mis discos. Un poco duro. Estoy usando mi tecla de flecha solo para darle un toque. Segundo ambos sosteniendo turno para hacer clic, ambos, agruparlos. Ahora tengo un prototipo. Lo que podrías encontrar es que arrastrar y soltar es porque puedes alejar y luego ir y arrastrarlo aquí y eso funciona bien. Pero a veces es más fácil en realidad. O quiero deshacer eso. Deshacer no está funcionando. El deshacer normal, típico cuando estás en modo prototipo. De lo que puedes hacer, di di que quieres romper eso, solo tienes que hacer clic y arrastrarlo a tierra de nadie y eso lo desconectará. Encuentro muchas veces cuando estoy en esta cerca, no quiero tener que alejar para tratar de encontrar la app board, es que solo tienes que hacer clic en esto, en este caso, fuera de borda anterior funcionaría o página de inicio. Voy a llegar a recoger de nuevo a la página de inicio y ya verás que salta así. De cualquier manera que quieras hacerlo. Vayamos a previsualizar esto ahora. Vamos a jugar. Por ahora podemos dar click en esto. Taquen eso. Llegó un pequeño deslizamiento a la izquierda, lo cual es raro ejemplo. No me gusta ese deslizamiento. Funciona, pero me confundo. Hay un momento especial y un lugar principalmente a través de teléfonos donde funciona la diapositiva, no a través de sitios web porque ningún sitio web hace lo de la diapositiva. Es sólo raro. Vamos a ir a apagarlo. El otro asunto es, es que esta es una ventana separada. Ahora estoy trabajando en mi laptop por el momento para este curso de capacitación. Pero lo que hago cuando estoy trabajando normalmente es que tengo un gran lleno llegó a eso trabajo desde y tengo mi laptop al costado de la misma. A mí me gusta trabajar desde dos monitores. Lo que normalmente hago es tener dos monitores. Tengo esta laptop y tengo un monitor grande para el que trabajé principalmente. Tendré ambos abiertos uno al lado del otro y tendré este panel en una de ellas, normalmente en mi laptop y estaré trabajando en esta olla en mi monitor grande principal. El cool al respecto, es una actualizaciones en vivo. A medida que mueves cosas aquí esta cosa se actualiza. Tengo este abierto 100 por ciento del tiempo. Podría estar haciendo ajustes, ver cómo se ve al 100 por ciento y estar jugando con las interacciones al prototipo para que no tenga que seguir cortando ese botón de “Play”. De todas formas, tengo que cerrarla y abrirla nuevo por el momento porque sólo estoy esperando en la laptop. Lo que me gustaría hacer es ejemplo aquí. No me gusta el tobogán. Yo sólo voy a ir a disolver. Probablemente sólo necesita un salto por disolver se ve bien. Da click en este pequeño punto aquí. Puedes dar click a cualquiera de los lados y yo voy a ir a disolver también. Eso es lo básico para la creación de prototipos. Vamos a ir por y construir más páginas y prototipo más a medida que avanzamos pero eso es una introducción al mismo. 11. Vistas de los estudiantes del video de producción: Hola, ahí. Este es un video de producción. ¿ Qué es un video de producción? Es donde necesito hacer algunas cosas para que este tutorial siga adelante. Puedes o seguirme o saltarte porque no vamos a aprender nada particularmente nuevo. Ves parte del flujo de trabajo que paso por lo que puede ser interesante o simplemente puedes saltar al siguiente video donde aprendemos algunas cosas nuevas. En este video en particular, lo que estamos haciendo es que vamos a crear esta página y conectar ese botón para que salte a esto, cree un botón cruzado para volver a esto. Aquí no pasa nada realmente porque al cliente en su escrito se nos pide que no trabajemos en la vista estudiantil. Ya tienen vista estudiantil. Quieren que hagamos prototipos de la vista formadora o instructor. De acuerdo, entrémonos en el video y empecemos a hacerlo, o puedes saltarlo y solo estaré un poquito ofendido. Vete entonces. En primer lugar, empezar necesitamos otra página, me parece que esto es fácil de sostener Alt y solo arrastra esto por lo que obtienes un duplicado. Me encantan todas las cajas rosas, el espaciado automático. Puedo renombrar esto y esto va a ser Student View. Voy a mantener sólo unas piezas de cop-out fuera de aquí. Voy a seleccionar todo esto en ti ido. No quiero el botón solo quiero los tics y el cierre. Aquí me dieron unos tics. Esto es lo que el alumno ve el front-end de la plataforma. Recuerda al cliente se nos pide que no diseñemos esto, así que solo lo dejamos aquí para que el botón haya llegado a algún lugar a donde ir. Lo que podría hacer es, porque 16 es bueno, sí eso es tamaño final y voy a poner una cruz aquí. Lo que podría hacer es convertir esto en un botón más grande. Lo estoy desagrupando y estoy seleccionando en él. Desagrupar no está funcionando. Está funcionando totalmente. Voy a volver a ponerle la frontera y tratar de convertirla en un círculo perfecto. La forma más fácil es no vincularlos, solo para asegurarse de que tengan la misma altura y anchura. Seleccionar ambos están alineados horizontalmente, alineados verticalmente, agruparlos. Enfriar. Esto va a estar en esta página, no pasa mucho y voy a asegurarme de que esté en el centro. Ahora vamos a plantearlo. Vamos a ir al prototipo. Voy a hacer un par de cosas. Es que cuando se hace clic en este botón, el Show Me, voy a agruparlo con la caja azul y se puede agrupar mientras estás en prototipo, o diseño, lo cual es algo genial. Al hacer clic en eso, vas a ir a esta página aquí. Lo que vamos a hacer, es disolver y vamos a seguir con eso. Cuando hagan clic en este botón cruzado aquí, los voy a llevar de vuelta a la página principal o a esa opción de vista previa, probablemente página de inicio. Voy a probar esto para asegurarme. Hagamos esa prueba rápida para ver dónde estamos. Tendrías un click en la vista previa y podrás ver lo que ve el alumno. Esto es lo que ve el alumno, cierra eso de vuelta a la página principal. Creo que esa es probablemente la mejor manera de hacerlo. Por eso me gusta tener el prototipo abierto y trabajar como estás desarrollando, no esperar hasta el final. Eso va a ser por este. Vamos a cerrar este, vamos a Vista completa Comando 0 o Control 0 en una PC. Guardémoslo y subiremos al siguiente video. 12. Cómo hacer y usar símbolos en Adobe XD: Hola ahí. En este video, vamos a ver símbolos en XD. Entonces por qué son buenas es porque cuando tengo un símbolo, puede ver aquí, tengo la navegación utilizada en más de una página, y cuando la actualizo, ambos se actualizan y cambian lo cual es súper útil para cosas que son reutilizado a través de un montón de documentos como pies de página y encabezados. Vayamos a ver cómo crear esos ahora. Para crear un símbolo, vamos a reutilizar esto tanto como el encabezado como el pie de página. Voy a crear una nueva página, y hay muchas maneras, sigo mostrándote diferentes maneras. Voy a volver a la herramienta de página, y dar click en esta, que es mi valor predeterminado que usé al principio, lo arrastraré arrastrando el nombre debajo, y le daré un nombre, y le llamo a éste el “Instructor Dashboard”. Yo quiero extenderlo solo un poquito, cool. Entonces recuerda el beneficio por usar un símbolo es que puedo conectarlos todos juntos y cuando haga actualizaciones a la navegación, digamos en esta página de inicio aquí, se actualizará para todas las instancias de la misma. Entonces voy a acercarme aquí, lo que quiero es que quiero todo esto. Empezando aquí, en el área gris con mi flecha negra, solo estoy dando clic, sosteniendo y arrastrando, solo asiendo cursos como un poquito de arriba. Lo que quiero hacer es, puedes ver que he seleccionado lotes, pero también he seleccionado esta cosa azul claro que estoy usando para darme mis anchos. Por lo que voy a sostener “Shift” y basta con dar click en Inicio para deshacerme de ellos. Tengo todo a lo largo de la parte superior aquí. ¿ Cómo lo sé, lo arrastro para comprobar. Todos se acercaron para el paseo. Entonces lo que voy a hacer es que tú podrías estar en tu panel de “Capas”, quieres ir a este top de aquí. El panel “Activos”. Dentro de aquí, algo voy a ir “Símbolos” click plus, y eso es todo. Eso es ahora símbolo que llego a reutilizar. Déjame hacer clic en mantener y arrastrarlo y eso es útil supongo, tengo una cosita linda que llego a reutilizar, pero pude copiar y pegar eso supongo. Lo que es realmente útil, es ahora, si vuelvo y dice, en realidad algunas personas usan “LOGIN” como una palabra, deberían ser dos palabras. Depende de ti. Pero digamos que hemos estado convencidos de que debería ser espacio de registro. Entonces lo hemos hecho, pero por defecto, en realidad se convierte en un símbolo único. Por lo que este de aquí arriba no ha cambiado todavía. Lo que tenemos que hacer es hacer clic derecho en este compañero y decir “Actualizar todos los símbolos”. Se actualiza símbolo en la biblioteca. Voy a tener que alejarme, este de aquí. Vamos tres para acercarlo, acercar un poco más. Se puede ver que es login. Entonces esa es la clavija para símbolos. Se llega a vincularlos a esta cosa, que fácilmente arrastre y reutilizable, pero fue realmente súper útil ya que actualizarías una y las actualizarías todas, así que obviamente bueno para la navegación. Cualquier cosa aquí arriba está en todas las páginas, así que voy a hacer lo mismo aquí abajo. Voy a agarrar a mi amigo. Voy a cambiar click a este tipo, así que solo conseguí eso seleccionado, solo comprueba que lo tengo todo y voy a conseguir un símbolo. Todavía no puedes nombrarlos, los iconos son un poco pequeños para este. Está bien. ¿ Esta es la página correcta? Lo es. Arrástrelo, viniendo aquí, y allá van. Si actualizo uno ahora, ambos actualizarán. Un par de cosas que quiero hacer para terminar esto es que quiero poner esa gran raya azul en el fondo para que sepa dónde están los bordes, así que copia y por aquí, pega, equivocada. Yo te quiero y ve a desbloquearlo. Copia, vuelve a bloquearlo, y luego ven aquí, da click en este panel. Si golpeas la pasta, lo genial de ello, va perfectamente donde debería. El único problema es que probablemente esté encima de todo lo demás. Entonces solo voy a hacer clic derecho y decir, “Enviar al fondo”, y luego puedo usar Comando L, o Control L o puedo hacer clic derecho e ir a bloquear. Enfriar. Me da mis límites. Lo que necesito ahora es un menú a la izquierda. Aquí estoy mirando mi marco de cable dibujado a mano. Entonces quiero ese nav izquierdo y voy a saltar a esta cosa de aquí y voy a encontrar, un nav de mano izquierda, ¿dónde puedo ver uno? Aquí hay una navegación que se ve bien. De todos modos va a ser mi comienzo. Te voy a agarrar, también copiarlo, arrastrarlo, pegarlo, y ese será mi comienzo para este. Voy a desagruparlo todo, porque son algunas cosas que tengo que hacer. Necesito despejar el fondo y a la izquierda para ordenar eso en un poco. No necesito una manera de quedarme ahí. Al venir aquí se requiere de click duro. Yo sí quiero el tablero de palabras, así que probablemente voy a borrarte, muévete aquí a la parte superior. Voy a hacer este tablero de madera, pero voy a usar mi 14, alrededor de 75 por ciento, es mala costumbre. Tienes que estar en 100 para poder hacer tamaños de fuente, supongo que este va a ser dashboard. Dashboard. Haré esto audaz. Enfriar. Debajo de aquí. En realidad, voy a hacer este 16 usando 12 y 16 para diferenciar alturas. Ahora, lo que haré también es agarrar mi herramienta superior, pincha aquí. Estas son las garrapatas que vamos a usar con mi murmurando ahora, porque solo estoy llenando fuentes. Para ser honesto, si va a haber más genio en esta clase por el que tal vez quieras quedarte por ahí, pienso en el genio. Entonces solo estoy poniendo esto. Lo que podría hacer, es sólo poner los pequeños puntos en el frente para que se vean como un sub menú. Recuerda ahí estoy metiendo, es sostener Alt y golpear 8, o la opción A en un PC, porque esto no tiene puntos de bala para empezar, porque un dashboard te para las diferentes cosas que puedes elegir. Impresionante. Una última cosa que está en mi pequeño marco de cable dibujado a mano aquí es, y tengo ese pequeño anuncio de la página principal. Ahora no es una manera realmente fácil de saltar entre páginas, puedes usar el panel de capas, volver a aquí y volver a la página de inicio. No es tan genial, no creo. Esperemos que una de las actualizaciones nos dé una característica como esa. Entonces aquí, no soy por qué volver por esto pero en tomas pero sí lo hice. Entonces lo vamos a usar, y vamos a entrar aquí comando 3, un poco más de pasta, y se va a ir en esta pequeña zona de aquí. Ahora, creo que esto necesita ser más grande, porque voy a tener dimes más largos de lo que definitivamente van a descargar lo de la app, tal vez incluso más pequeño. En realidad hay cero genio viniendo. Lo último que vamos a hacer es porque vamos a usar este curso, todo el instructor y páginas. Lo vamos a convertir en un símbolo en sí mismo. Entonces sólo vamos a arrastrar una caja por ahí. Todo esto, anule la selección del color azul más claro y diga, su “Símbolo”. Eso va a ser todo para este video. Si has esperado hasta el final, eres impresionante. Eso se puso un poco doloroso ahí al final, lo sé, pero el siguiente video va a ser impresionante. Empezamos a hacer rejas repetidas. Oh Dios mío, es impresionante. Vayamos a hacer eso. Ahora en el siguiente video, sumalo. 13. Uso de cuadrículas de repetición en Adobe XD: Hola ahí. Bienvenido al mejor video de todo este curso. Se trata de la cuadrícula de repetición. Me encanta Repetir Grid. Tiene un nombre cojo. Debería tener un nombre súper emocionante, pero no lo hace. Lo que hace es dibujar ciertas líneas y simplemente se repite para siempre. Mira eso. Algunos con estos vamos a hacer esta lista de cursos y se encoge y contrae y simplemente sigue sumando más y más para siempre. Tan bien, me encanta. Vamos a aprender a hacerlo ahora en este video. Vamos a estar usando la Repetir Grid en nuestro tablero de instrumentos aquí. Voy a sacar una caja para flecha y ¿adónde vamos? Vamos a la herramienta de rectángulo y dibujamos una caja aproximadamente de ese tamaño. Voy a cortar como tres pasos. Voy a añadir un poco de texto ficticio y escribir estadísticas y voy a usar mi estilo de personaje. En realidad podría usar este 16 para este. Va a tener estadísticas y va a haber un número en el medio, qué número. No estoy seguro aún así que probablemente signo de dólar para empezar. Pondré 4 mil dólares. Esto va a tener cosas como los ingresos mensuales recurrentes, cuántos visitantes del costado, cuántas ventas este mes versus el mes pasado también las estadísticas del panel. A mí me acaba de poner esto, tratando de no diseñarlo. Tratando de no hacerlo. Sólo algunos conceptos básicos. Entonces tiene que ser un poquito de consejos de explicación hacia abajo la cosa de abajo. Pensaré que lo robaré de la Página Principal. Esto sólo describirá lo que está pasando en este azulejo en particular. Ahí vamos. Pegar, sí que se ve hermoso. Se va a ir en medio. Todos irán en medio, hagámoslo. Vamos incluso a seleccionarlos todos y hacerlo correctamente de nuevo. Tenemos nuestro azulejo. En realidad, tiene que haber como un poco ver más botón. Voy a añadir un poco más probablemente en esta esquina superior aquí para que puedas dar click. No estoy seguro si debería ser los tres puntitos, o el sandwich nav ahora probablemente no estoy seguro. Decidirá y utilizará una prueba. Tengo mi azulejo. Voy a seleccionar todas estas macetas. Este es el botón mágico aquí. Repetir Grid debe ser genial. No sé algo más asombroso, el botón increíble o algo así. Doy click en esto y miro lo que pasa. Magia igual que lo duplica, lo cual es genial, pero es aún más impresionante mirar eso. No estoy seguro de cuántos de estos vamos a tener en realidad. Haré esto muchos. Las cosas que puedes hacer para hacer ajustes es que obviamente puedes ver estas cosas rosadas apareciendo entre las líneas. Puedo arrastrar esos para expandirlos o contratarlos. Puedes ir negativos. En realidad se ven bien de la forma en que estaban antes. Voy a dejarlos así. El Repetir Grid obviamente los duplicará. Pero lo que se pone bonito es que puedo agarrar la herramienta de tipo realmente puedo hacer que estos sean bastante únicos. Este podría ser 50k. Podría ser que tenga que ver con los números. Ahora, a ver que podría ajustar los números. De hecho voy a hacer eso centrado. Voy a agarrar eso y hacer que todos se centren. Pero si dejo de moverlos físicamente, están todos conectados. Es lo mejor de ambos mundos que llego a pasar y realidad poner en datos diferentes porque soy solo un representar las diferentes cosas por lo tanto tengo control total sobre si realmente quiero eliminar el botón más, solo eliminarlo de uno y todos borraron. Si añado uno. Si decido que realmente quiero agregarle una cosita a este tipo, te darás cuenta de que todos lo consiguen. Repetir Grid es impresionante. Dejaremos eso ahí. Quiero mostrarles una última pieza increíble para la Repetir Grid es que también se puede trabajar con imágenes. Lo que voy a hacer es que voy a construir la página de cursos, que es la siguiente página de esta lista. En realidad, lo que voy a hacer es que lo voy a acelerar porque no es nada nuevo. Simplemente haré una nueva página y construiré el primer elemento. Aceleremos a través de esto. Tyler, llévatelo, agícalo y te veré cuando terminemos. Aquí estamos en nuestra página del curso. Voy a seleccionar todo. Voy a ir a Repetir Grid. Al igual que hicimos con lo del entrenador, todavía me sorprende esto. Cada vez que lo uso es increíble. Digamos que tenemos estos mini cursos. lo de la imagen a la que me refería ahora probablemente sea mi cosa más emocionante para mostrarle a cualquiera. En realidad estoy en nuestros Expedientes de Ejercicios. Estoy en Imágenes y he encontrado todas nuestras Imágenes del Curso. Los he seleccionado a todos. La forma más fácil es poder ver la ventana del Finder o si estás en un PC tener la ventana abierta y simplemente arrastrarla desde ahí a cualquiera de estos cuadrados azules. Listos para la magia. Mi bondad, eso es magia. Estoy súper emocionado por eso. Pasa y simplemente los replica todo el camino. Sí, me encanta. Repetir Grid, se extiende arma mágica. Significa que todavía puedo tener un poco de control. Recuerda, puedo seleccionar aquí y aquí puedo encontrar mis rejillas y puedo abrir y cerrar estas. Diga que quiero a todos bancariados juntos o tal vez solo un poco separados. Tengo un poco de ajuste y digo esta lista de comprobación aquí, necesito ir y cambiar esto por el negro o el gris. Fácil de llevar y actualizar. Ahora bien, ¿puedes hacerlo con texto? Sí, puedes. En tu archivo de ejemplo, solo necesitas un archivo de texto. Al igual que este de aquí tiene un montón de nombres ahí dentro y solo voy a asegurarme de que no sea ni un archivo TXT de punto o RTF, solo algo realmente básico, nada que tenga algún formato como Word, o PDF. Sólo un documento de texto antiguo sin formato y luego sólo tienes que hacer clic en mantener y arrastrar el propio documento real a través de uno de los títulos y bingo. ¿Qué tan guay es eso? Me encanta la Repetida Grid y no pude dejarla más tarde en el curso sobre todo estas imágenes porque es simplemente demasiado especial. Pero para esta estructura alámbrica real, nos estamos volviendo demasiado detallados y bien. Voy a tener que pasar y deshacer para deshacerme de todas estas imágenes y y volver a donde estaba todo llana Jane. Probablemente debería ir mover este ancho aquí y solo poner en curso de muestra. Eso es todo para Repetir rejillas. Yo los amo, pero probablemente estás harta de que yo siga hablando de ellos. Pasemos a más de lo asombroso en XD y otro video. 14. Maquetación de una aplicación en Adobe XD: En este video vamos a ver construir la versión para iPhone solo en versión de productos OWL. Después enlazaremos solapamiento, para que se deslice uno al lado del otro. Vamos a construir esto ahora. Hemos estado trabajando con los wireframes para los wireframes templados de UCSD para la web. Queremos ir y abrir los para móviles. En tus archivos de ejercicio y las plantillas de UI bajo wireframes es uno de los móviles cool. Había estado levantado y diciendo algo así. Pero obviamente para pantallas móviles. Para empezar, busco coleccionismo tipo onboarding. ¿ Tienen alguna cosa de onboarding? Ellos lo hacen, genial. Es ese tipo de cosas cuando abres la pantalla y hay eso como el salto de Nick. Solo para darte un poco de una visión general del producto. Entonces mis wireframes, mis dibujados a mano aquí, hemos pasado por alguna onboarding que es login y luego se llega a ver el tablero. Voy a escoger uno todos estos y lo que hago es agarrar éste porque lo que realmente quiero, no quiero mucho de esto. Te llevaré y tomaré esta parte. Yo quiero esto y yo quiero esto. Sí, esos son los pedacitos que quiero. Voy a copiar eso y voy a saltar a menor cerrar lo sabio para web no necesitan tenerlos por el momento. Apenas mi proyecto y la versión de la app. Voy a trabajar en la versión de teléfono móvil. Voy a dar click en la “Herramienta de tablero de anuncios”, y voy a recogerla el iPhone 6S. Agarré la línea punteada. Cuando te alejas lo suficientemente lejos como para ver no puedes ver el nombre sólo se convierte en tres pequeños puntos. Puedes arrastrar esos por ahí y ¿dónde los voy a empezar? voy a empezar como una nueva pequeña línea a lo largo de la parte inferior aquí. Voy a acercar el comando 3. Zoom, se acerca a un lugar específico, lo que sea que tengas seleccionado. Voy a pegarle a “Pegar aquí” y a “Jackpot”. Lo que podría hacer tan bien como en realidad voy a hacer algunas ediciones y luego voy a ir a comprometerlo con un símbolo. A éste se le va a llamar instructor y estructura HQ. Sí, todo esto está bien. Voy a agarrarlos a todos en realidad y simplemente tirarlos en un símbolo. Usted los sitia símbolo. Impresionante, y sólo voy a poner un texto ficticio en el medio aquí. Este va a ser un emocionante mensaje de incorporación. Yo sólo voy a ser el número 1, está bien, y tú vas a entrar, voy a usar esa gran versión tengo y voy a hacer el más pequeño trabajo de diseño, y no, no debería, pero me gusta ese círculo que vi en el último. Rector filas, por lo tanto. Bueno, ya terminaste, lo has hecho súper emocionante. No sé por qué hice eso. Pero ese va a ser mi súper emocionante mensaje a bordo 1, va a haber, en realidad vamos a hacer sólo tres de ellos. Voy a hacer doble clic en este doble clic otra vez. Puedes entrar ahí bastante fácil haciendo doble clic, seleccionar los tres, ponerlos en el medio, y luego recordar, puedo hacer clic en ellos y decir click derecho, actualizar todos los símbolos. A pesar de que no lo he vuelto a utilizar, acabo de actualizar la de aquí, mi biblioteca. Genial. Yo quiero ¿cuántos de estos? Yo quiero tres. Voy a aguantar eso. Los nombraré primero. Esta va a ser mi app, y esta es la de incorporación número 1, emociona a la gente antes de que se registren o tenga que iniciar sesión porque eso es lo peor es como, “Hey, comprometerse con un inicio de sesión, mientras que lo que queremos hacer es decir, hey antes de que inicies sesión, y es una buena lista, cosas geniales que puedes hacer”. Este es el número 1, este va a ser el número 2, y sólo para que el usuario sepa cuándo esa aplicación de prototipos, o al menos el cliente sabe que vamos a simplemente cambiar color para que sepamos lo que estamos haciendo. Ve, y una líneas más a la app, y vas a ser el mensaje número 3. Número 3, puedes ser azul. Nos estamos quedando sin colores, sólo tenemos dos colores realmente. Volvamos al azul. Impresionante. Tenemos tres de esto y esa va a ser mi incorporación. Lo que podríamos hacer a continuación es hacer nuestro prototipado porque queremos realmente comprobar la co forma en que puedes ver esto en una app, así que antes de hacer eso, necesitamos que estos botones sean un poco más fáciles de hacer click, así que como lo hicimos antes . Voy a seleccionar en esto, voy a hacer doble clic en él. Por eso no soy, estoy adentro. Parece barra verde en el exterior. Sé que estoy dentro de mi símbolo. Voy a agarrar la “Herramienta Rectángulo” y voy a tener un relleno de blanco. ¿ Qué significa decir como, hice eso? Deshacer. Vamos adentro puedo ver la barra verde y te agarro, dibuja una primavera bonita caja grande. Se puede ver que sigo en eso porque mira lo que es cuando lo arrastre para que esa barra verde del exterior se haga más grande. Apague eso. Yo lo voy a copiar y lo voy a mandar a la parte de atrás. Ahora, haga clic derecho, envíelo hacia atrás. Estoy usando un atajo y se puede ver esto, vamos a llegar, es Comando Shift y los corchetes, que está al lado del pico. Yo uso eso todo el tiempo porque es lo mismo en InDesign Illustrator y Photoshop, lo cual es bonito. Ahí está mi gran caja blanca por lo que va a ser fácil dar click y lo copio. Por aquí, voy a hacer doble clic. Ahora estoy dentro de la cosa verde y pegarlo y moverlo hacia atrás. Agarra a este tipo, haz doble clic en él , algún fenómeno, así que la cosa verde, pégala, muévelo hacia arriba y envíalo hacia atrás, tal vez haga que éste no toque más pequeño. Ganó bastante grande. Copiarlo y entregarlo ahí. Enfriar, así que voy a dar clic en el “Fondo”, haz clic en él una vez que lo tenga seleccionado. Tengo todo este grupo que hice y recuerdo, actualizar todos los símbolos y ojalá ahora por aquí cuando hago doble clic en él y hay esa caja también. Los símbolos son geniales porque es medio cuando vamos y ahora hacemos prototipado, tengo bonitas cajas grandes para hacer clic. Ahí está aparejo esto arriba, vamos a agarrar la siguiente caja, y voy a decir cuando se te haga clic yendo allá, y por defecto se va a disolver. Ahora que estamos en más como el mundo centrado en el móvil, y vamos a mirar el deslizamiento hacia la izquierda. Tendremos un vistazo a esto cuando estemos en vista previa y lo que podríamos hacer solo para mostrarte la diferencia es que vamos a ir a esta versión y vamos a ver la otra que es push lift, ok, y solo ver las diferencias entre ellos. Siguiente y éste no tiene manera de ir. Lo que podría hacer es en realidad simplemente agarrar otro tablero y hará de éste la app. Ahí va a haber la pantalla de inicio de sesión. Queremos realmente construir esto el momento, y así simplemente eliminaremos todo en esta página. Adiós. Esto no tiene a dónde ir ahora, crece la caja blanca, vas a ir ahí. Va a ser lo mismo para estos botones de saltar. Te voy a decir que vayas ahí. Yo quiero que vayas ahí. Saltando, vamos todo el camino al inicio de sesión. Eso no conectó y saltar aquí es lo mismo. No lo veo, por eso tan fácil solo ir aquí e ir login, twin naming y es bastante útil, dije en la parte inicial, así que entonces se hace. Lo que podría hacer es querer cambiar estos puntos para moverse, pero no me voy a molestar debería porque quiero, sino porque es una alambrada, sólo vamos a ir rápido, y los botones traseros tienen que funcionar. Voy a agarrar a este tipo, tengo un prototipo y tú, amigo mío, vuelve a ti, y tú vuelves a ti. Un poco de un defecto en mi toma de símbolos, Significa que estos dos funcionan, pero hay un error que no va de todos modos aquí. Probablemente solo lo voy a ignorar o puedo seleccionar en buena mi diseño. Da click en esta cosa, que es C verde alrededor del exterior aquí, puedo desagrupar el símbolo, que no es genial, pero necesito hacerlo en este caso. Así que adiós. Potencialmente tengo el mismo problema con estos puntos si quería actualizarlos. Un poco llevado con mis símbolos. Estaba impresionado cuando lo puse. Lo que queremos hacer ahora es alguna degustación en móvil. Vamos a saltar al siguiente video porque es una pequeña app cool puedes descargar más, mira eso ahora. 15. Cómo usar la aplicación XD en iPhone y Android: Es hora de descargar la app. Hay tanto una versión para Android como una para iPhone lo cual es impresionante. Ve a descargar eso para tu teléfono móvil. Ahora, hay dos formas de realmente ponerlo ahí dependiendo de si tienes un ordenador Mac como un MacBook Pro o un iMac o si tienes un PC. Voy a lanzar la app, click en XD y ahora si estabas usando el miembro de la versión Mac fest, no importa si tienes un Android o un teléfono Apple pero tiene que ver con una computadora. Puedes ver aquí me he conectado con un cable USB, nada elegante y lo que podemos hacer es usar Live View. El genial de Live View es que lo que tengas abierto en tu pantalla aparecerá aquí abajo en tu teléfono móvil. Ahora, te está mostrando lo que sea que tenga la casa al lado. Si hago zoom aquí, esta es mi página de inicio, se puede ver que hay casita aquí. Aquí estamos saltando entre pantallas y todo aquí, pero se puede ver esta casita aquí, me está mostrando eso en mi teléfono. Yo quiero cambiar una casita a esta para poder previsualizar aquí. Entonces haz click en este tipo, da click en la casita y puedes ver ahí está en todo su esplendor. Lo que es realmente bonito de la vista en vivo es que, mira esto mientras empiezo a mover esta cosa, se actualiza automáticamente. Es realmente agradable tener esto configurado en una bonita pantalla aquí así que cuando estás editando, mi escritorio está todo limpio. Nunca está tan limpio, solo por filmar. Ten todo configurado y un iPad y todo para que puedas verlo como estás trabajando en él y puedas hacer ajustes. El cool al respecto así como porque tenemos tipo de wireframe esta cosa, deberíamos poder dar click en esto e ir a continuación. Se fue por la diapositiva izquierda a tierra de nadie. ¿ A dónde va esta cosa? Alguna razón por la que conecté eso a todo el camino por aquí, eso fue bastante bueno. Voy a acercarme, olvidé lo que hice aquí. Ahí vas pero creo que hice clic en la palabra 'Next'. ¿ Cómo nos pusimos todo el camino por ahí, ni siquiera estoy seguro. A continuación, ahora funciona, siguiente y luego siguiente, la pantalla en blanco. Cuando estás trabajando en esta app, hay un par de cosas que puedes hacer para navegar por ella. Puedes hacer clic y mantenerlo pulsado por un tiempo y obtienes algunas opciones aquí. Una de ellas es navegar por los tableros de aplicaciones y solo puedes ver como la versión grande de todo lo que hay en mi archivo XD, que es una gran manera de saltar de vuelta a aquí. Otras cosas que puedes hacer mientras estás aquí es mantenerlo abajo y ver este, este es hotspot, de ahí puedes encenderlo porque si haces clic en algún lugar, puedes ver es para gente que quiero decir como mis padres, que necesitan un poco poco de estímulo para poder usar esta cosa distinta. Eso debería estar bien porque es lo siguiente me salté, pero si tienes algo un poco complicado y necesitas agregar de ahí, probablemente sea una señal de una mala experiencia de usuario pero a veces solo necesitas tener estas cosas que se muestren. Solo he habilitado algunos de los botones, no todos. ¿Qué más? Entonces eso es live view si tienes un Mac conectado ya sea a un iPhone o este viejo teléfono Android con pegatinas de patrulla Paul en él para mi hijo pero correcto en la pantalla. Puedes hacerlo de otra manera y la forma es que entras aquí y tendrás la opción de, voy a dar click y mantener, quiero volver a mi documento, documentos XD. Los documentos XD son cosas que se guardan en tu nube creativa. Lo que tienes que hacer aquí en la pantalla es que tienes que ir a Archivo y tienes que ir a guardar como y en tu computadora, no importa si es un Mac o PC, esto hará que esto funcione. Necesitas encontrar tu carpeta creativa en la nube. Sé dónde está en mi Mac. Tendrás que volver a comprobar con Creative Cloud mantiene sus carpetas en tu PC. Sé que en mi Mac está en, ¿dónde estamos? Sé que está por aquí, está bajo toda esta basura cuando llegas a tu palabra, tu nombre como mío, el de Daniel Scott. Aquí está con un Mac los mantiene. En un PC tendrás que hacer un pequeño vistazo rápido para ver lo que consiguieron. Lo que puedo hacer es darle click ahí y lo puedo poner en su propia carpeta especial o simplemente puedo tirar esta cosa aquí. Este es mi iPhone en prueba y haga clic en guardar. Lo que pasará es que una vez que esté todo sincronizado, verás este pequeño ícono en la parte superior aquí empieza a hundirse y eventualmente terminará en tu biblioteca creativa en la nube y eso es todo con Creative Cloud. Mágicamente esta cosa lo verá. Voy a actualizar y revisar para ver si está ahí dentro. Todavía no está ahí. ¿ Lo guardé en el lugar correcto? Creo que sí. Archivos de Creative Cloud, sí. Bueno voy a abrirme. En algún momento, puedes dar esta cosa, puedes ver que se está hundiendo aquí y te mostraré por qué, no estoy seguro de lo grande que es, pero hagamos una pausa y esperemos a que se hunda y volveré a saltar. Si eso no funciona, que la mía no es por alguna razón, mía deja de hundirse funciona cada dos días, no es el momento, buena excusa para mostrarte otro camino. He ingresado a mi cuenta de Adobe por lo que assets.adobe.com/files y puedes simplemente arrastrarlo aquí. Se puede ver que está subiendo bien y dulce aquí ahora y ojalá ahora mi teléfono, si voy a actualizar, irá y buscará a través todos mis archivos de Creative Cloud y ver si hay algún documento XD. Ahí está. Esta es una forma en que puedo hacerlo. No tengo que estar conectado a mi teléfono, así que no tengo que usar este cable. Puedo tenerlo aquí ahora y hace lo mismo para las pruebas. A continuación, puedo saltarme y lo genial al respecto es que una vez que tienes en tus archivos de Creative Cloud es genial para pruebas de usuario porque la vista en vivo es solo cuando la tienes enchufada. Lo que puedes hacer es tener esta cosa fuera en el campo para mostrar a la gente, ir a ver a un cliente pitch It o simplemente mostrar gente y compañeros en las reuniones y es lo mismo que antes. Puedo hacer click y mantenerlo pulsado y puedo compartir como imagen. Puedo tomar capturas de pantalla y las mismas cosas que tenía antes. Eso es todo por usar la app. Live view funcionará tanto en Android como en iPhone pero solo si está enchufado a un Mac. Si quieres usarlo en un sistema Windows, o no quieres conectarlo realmente y usar Live View en un Mac, puedes usar ambos sistemas. Necesitas guardarlo en tus archivos de Creative Cloud, ya sea a través de la versión web o normalmente puedes simplemente volcarlo en esta carpeta aquí, que no funciona por el momento. Eso es todo. Te veré en el siguiente video. Adiós ahora. 16. Video de producción: pantalla de registro y panel de control: Hola ahí. Bienvenido a este video de producción. Antes de saltar, hay una cosa que debes revisar en este video, y es recta después de mi pequeña introducción, y básicamente es agregar esta cosa deslizante que necesitas saber. El resto aunque vamos a construir estas páginas aquí para nuestra app. Nada súper emocionante, por lo que puedes saltar después de aprender a hacer esta cosa. Vamos a entrar y hacerlo. Quiero ir por y construir mi página de inicio de sesión. Voy a robar la mayor parte de ella de una de estas plantillas, ahí está el apuntador aquí arriba, y voy a escoger uno de estos y sólo ven a ir Comando 3 para acercar a la derecha. Vamos a acercarnos. ¿Cuál quiero? Usaré este de aquí. Se va a robar toda la página real porque es un tamaño de iPhone, eso es lo que son todas las plantillas. Voy a dar clic a la palabra “Regístrate”, voy a dar click en “Copiar. Voy a saltar de nuevo a la principal, voy a pegarlo, y en realidad sólo voy a eliminarlos. Tomaré el nombre, y luego tú, adiós, y sólo usaré este de aquí. Esa es una de las cosas bonitas de seguir usando los colores azules, en lugar de salir y escoger colores personalizados, tienes que ir a actualizar todos los colores y esas cosas. Ahí vamos. Por lo que te has colgado por ahí, es, cuando previsualice esto, tengo a este tipo aquí, voy a ir al prototipo y solo voy a asegurarme de que esto se guarde en casa. No es por defecto, lo que se puede ver cualquiera de estos al hogar. Cuando golpeas “Preview”, va directo a éste. Voy a pegarle a “Play”. Estoy tratando de desplazarme hacia arriba y hacia abajo, pero simplemente no me deja. Eso es un tema un poco. Si hago clic en él, se puede ver que en realidad hay un montón de cosas extra aquí. Para ordenar todo eso, voy a dar clic en el nombre, voy a ir a Diseño, voy a cambiar el desplazamiento a vertical. Esa es la primera parte. El puerto de vista está establecido en 667, que es la altura exacta de este iPhone aquí, y haga clic en él, él también es 667. Lo que también necesito hacer es agarrar la app, quiero hacerla un poco más larga. Guardas el puerto de vista, y luego haces esto todo el tiempo que necesites. Esto puede durar el tiempo que quieras, y puedes ver que ahí es el puerto de vista, esa línea punteada. Lo teníamos automáticamente en nuestra versión web. Ahora tenemos eso en nuestra visión móvil. Simplemente significa que si previsualizo, va a previsualizar esto, pero ahora puedo desplazarme hacia abajo. Permite el desplazamiento vertical, elige la altura correcta y asegúrate de que tu ascendente sea lo suficientemente largo para verlo todo. Probablemente lo que quieres hacer es simplemente seguir usando esta para duplicar cuando estás haciendo otra diapositiva a partir de ahora, porque si duplicas esta otra vez, vuelves a tener que hacerlo una y otra vez. Ahora puedes saltarte porque no voy a hacer nada particularmente emocionante. Voy a pasar y cambiar esto a instructor. Puedo deletrearlo, no puedo. Esto lleva, en realidad ya no quiero. Voy a ceder, luce bien. El registro de la página, esto es todo bueno, perfecto, página de registro. Tengo una página de registro y una página de inicio de sesión. Yo sólo voy a duplicar esto fuera. Este va a ser mi apunte, y luego aquí sólo voy a pasar y cambiar esta opción aquí dentro. Ese pequeño cuerpo se utiliza para mostrar dónde estás para que puedas cambiar entre los dos, y este, todo lo que voy a necesitar para iniciar sesión es dirección de correo electrónico y contraseña. El que hizo esto todavía está hecho de usar nuestra KO Repetit Grid, pero lo voy a desagrupar para así poder dar click en partes de la misma. Voy a desagrupar, y te digo, no quiero, te quiero. No necesito ninguna información personal. Así que se fue. Pero sí necesito esta cajita aquí, y pondré eso en la parte inferior. En realidad lo que voy a hacer es dar clic en el borde y sé que necesita ser 77, ¿qué fue? Yo lo sé. Siete, perdón, 667, está ahí. Voy a dar click en este tipo y tu altura ahora va a ser 667. Perfecto. Alinearte al fondo. Agradable. Tengo mi pantalla de inicio de sesión y mi pantalla de inicio de sesión. Voy a tener que armar estos juntos ahora. Hagamos ese prototipo. Si seleccionas todo, selecciona todo en el documento y te muestra todos los cables, por lo que funciona en lo que aún no has hecho. Lo que voy a hacer es este siguiente botón aquí abajo. Vas a ir a mi pantalla de registro, y yo haré derechos de empuje. Tengo que revisar dos veces estos para recordar qué empuje izquierdo o empujar derecho, cómo se ve. Llega hasta aquí, y luego quiero que puedas hacer clic en el botón de inicio de sesión. Debería hacer esto más grande. Tengo que ir a la pantalla aquí. Este de aquí, iba a volver de esta manera. Este va a empujar a la izquierda, estoy bastante seguro, tendremos que probarlo. Vamos a darle una prueba. Estoy empezando en la pantalla de inicio de sesión, haga clic en “Iniciar sesión”, empuja por ese camino, empuja hacia el otro lado. Se siente al revés, ¿no? En realidad lo que voy a hacer es éste ahora es para ser empujado a la izquierda, y ahora que uno necesita ser empujado a la derecha. Vamos a darle una prueba. Eso se siente mejor. Impresionante. Es por eso que pruebas mientras te estás burlando todo el camino. Tenemos algo de desplazamiento en marcha. Ese no necesita ningún desplazamiento. Pasemos al último bit, y esa va a ser mi pantalla. Lo que voy a hacer es que voy a pre-agarrar este. ¿ Por qué? Porque es largo, porque sé que mi siguiente necesita ser largo, y tiene todos los puertos de vista ordenados. Básicamente quieres seleccionar todo esto, y despedirte. Sí, bonito. No limpia de nuevo al diseño. Ahora vamos a estar creando out teach dashboard y versión de app. Eso es tablero de instructores. Seleccionó uno de estos abrigos, y me voy a ir a agarrar mi abrigo de salpicadero, y lo voy a usar aquí abajo. Pégelos en. Es un poco grande. Lo lindo de esto repite todo, te puedo y solo tipo policiaco está fuera, y sí, tengo mi tablero de instructor listo para ir, una conversión. Yo quiero bonita tanto. Lo último que podría hacer es que voy a hacer una página de configuración, que puedan pasar a darles una indicación de lo que va a hacer la app. Estoy tratando de encontrar líneas de tirantes. Ya ves en la parte superior izquierda es donde están todos los universales, te va a agarrar chicos. Copia, salta por encima. Te pondré aquí. Son difíciles de hacer click. No estoy en desacuerdo. Cuando eso se haga clic, va a saltar a instractor. En realidad esto sólo va a ser ajustes. Nada emocionante. Yo quiero que esa gente pueda hacer un par de cosas. Vamos a hacer, ¿qué puedes hacer en la página de configuración? ¿ Por qué estoy dibujando un botón? No debería yo mismo. Aquí, voy a hacer algo de texto central, y éste va a ser, y podrías poder reordenar estas cosas, y repetir cuadrícula. Tengo algunos ajustes. Puedes reordenarlos. Podrás tener un favorito. Creo que esto podría estar rompiendo la regla en términos de agregar demasiados detalles. ¿ De dónde sacamos estos? Sí, pensé en esto antes. Eso es lo que mi página de configuración necesita tener. Te voy a agarrar, haz doble clic en el borde. En realidad mis puertos de vista no necesitan ser tan grandes. Lo que voy a hacer es, voy a dar click en ti, y voy a hacer la altura 667, y sin desplazamiento. Voy a necesitar un botón Atrás. Este tipo. Haga clic en botón Atrás, copia, y por aquí pega. Elegir el lugar correcto, sólo el color equivocado, y ese tipo de ahí también tiene un color un poco débil. Establece el resto de la misma. Enfriar. Como lo amañó. Voy a decir que cuando se haga clic en este botón, ustedes van a aquí, lo mismo con este botón, y eso es presionar a la derecha, y eso es todo correcto. Vas a saltar todo el camino por aquí también. Cuando te inscribes o ingresas, terminas en esta página. Al hacer clic en los ajustes aquí, puedes o bien hacer clic en ellos, vas a esta página. Entonces cuando quieras volver, vuelves a esta página. Impresionante. Vamos a darle una prueba. Tengo una prueba en mi teléfono, pero eso no se ve, no quiero volver a encender toda la cámara. Te inscribes. Genial, eres bienvenido al tablero. Está empujando por el camino equivocado, y luego vas a este. Vamos a tener que jugar con este empuje a la izquierda, empujar a la derecha. En realidad quiero probar eso otra vez. Este de aquí, hago clic en éste, y ese está mal. El error debe empujar al revés. Puedes dejar eso ahí arriba. Te voy a decir, tú amigo mío, vas a empujar a la izquierda, y lo mismo contigo, empuja a la izquierda. Vamos a darle una vuelta. Por aquí, eso se siente mejor. Sin embargo, Dashboard, eso sale, eso es bueno, y aunque éste necesita ir por el otro lado. Es solo que un poco raro, no puedo hacerlo. Necesito ver que se active en realidad para saber cuál es empujar a la izquierda y empujar a la derecha, no sé por qué. Ahora, de vuelta por ahí, por ahí. Por el error hecho. Impresionante. Encantador, eso va a ser todo para este video de producción. Es un largo plazo. ¿Qué aprendemos? Flujo de trabajo, lo llamamos flujo de trabajo. Eso es todo para el video. Vamos a saltar al siguiente, nos metemos en enviar para comentarios. Se lo vamos a enviar a nuestro cliente para que lo revise. Nos vemos en el siguiente video. 17. Uso compartido de esquemas de página para comentarios en Adobe XD: Hola ahí. En este video vamos a ver el envío nuestros wireframes para obtener algunos comentarios de vuelta. Vamos a usar esta pequeña opción aquí y mostrarte cómo trabajar esto para que puedas verlo a los compañeros, o al cliente, o a las pruebas de usuario. Vamos a hacer eso ahora en este video. El primero que hay que aclarar es que esto no va a ser nuestro test de usuario. Para lo que estamos usando nuestros wireframes es ante todo para sólo uno o dos de mis colegas. Para ti puedes ser cualquiera, un amigo que supongo que tiene el vocabulario o la comprensión para poder probar un modelo de cable, y darte algunos comentarios constructivos, ver si eso es una parte de ello. La otra opción es una vez que he ido mi colega y he vuelto con algunos restos y como, oye, pensé que esto pasaría. Sé que esto es un poco raro, solo para despertar a los bichos poder ponerlo al cliente para la aprobación del cliente. La aprobación del cliente es diferente a las pruebas del usuario ya que en el cliente está esperando un wireframe. Lo que quiero hacer es no quiero pasar mi tiempo haciendo la alta fidelidad o la versión de alta resolución de esta app, necesito saber que no es lo que querían. Es fácil enviar los wireframes sobre. Wireframes son fáciles de hacer que sean fáciles de actualizar. Simplemente está trabajando eso con el cliente, y una vez que lo aprueben, entonces me voy y hago la alta fidelidad y maquetas. Son esas maquetas que envío para las pruebas de usuario. Ahí es cuando meto a la gente en que un potencial usos para mi persona y real pruebo la app. Algunas personas saben wireframes, eso está totalmente bien. No las encuentro tan valiosas dando gustos por wireframes. Es solo que no estoy seguro. Es solo que no encuentro valor en la retroalimentación de mis compañeros, sí del cliente, sí, pero creo que necesita lucir todo cantando y bailando viejo para que pueda obtener una correcta retroalimentación de los usuarios. El otro motivo es que soy bastante bueno con hacer altas res. Me lleva mucho tiempo, pero no tanto si sabes a lo que me refiero. Puedo golpear un maqueta guapo con todas las imágenes y cosas bastante rápido. No es algo que tenga que externalizar a alguien más. Digamos que si eres más del investigador de UX, vale, entonces totalmente puedes obtener mucho valor de los wireframes porque el siguiente paso para obtener versiones de alta resolución es un trabajo largo. Pero para mí no lo es. Hemos discutido que no estaban haciendo pruebas particularmente de usuario, pero algunas de las reglas se aplican como si tuviera la oportunidad, preferiría hacer en persona sobre el caso de pruebas de hombro. Preferiría que un amigo me encontrara para almorzar y pasara por ello para poder ver sus interacciones. Son todos esos manierismos que realmente no saben que hacer eso un bastante útil para mí. En persona es increíble incluso con un cliente, pero encuentro para mis proyectos más pequeños en los que trabajo como freelancer, siempre estoy normalmente solo terminando estos enlaces. Echemos un vistazo a cómo crear estos enlaces, y luego obtenemos comentarios de nuestros colegas y de nuestro cliente. Por lo que para compartir un enlace, haces clic en el pequeño ícono, y solo tecleas algunos ladrones como el título, esto está bien y empieza a HQ y va a ser la versión 1. Puedes arrastrar una imagen aquí, solo hace que se vea bonita cuando estás enviando enlaces a personas de made en tus archivos de ejercicio aquí e imágenes, he hecho una versión apilada de este logotipo de HQ. Ahora ya verás que lo hice cuadrado. Originalmente lo tenía rectangular, pero termina por recortarla mal. Si estás encontrando el tuyo siendo recortado realmente en la plaza, solo asegúrate de que el fueraborda real en e Illustrator o Photoshop en realidad sea cuadrado, y solo tienes tu logo dentro de ahí ir. Se tiene un expediente IRF. Parece llevarse algo bonito. Otra cosa permiten comentarios exactamente lo que quiero. Esto de aquí es bastante importante. Este poco gris pero esto, empezar por. Ese es quizás el ícono del hogar. Si me dieron un prototipo antes cuando estaba trabajando, puedes ver aquí abajo, dije eso para estar en casa cuando estaba previsualizando en el móvil. Esa es la vista inicial que obtienen las personas que estoy enviando esta herramienta de enlace, que no es lo que quiero porque quiero que vayan directamente a la página de inicio. Yo prototipé vista, haga clic en pequeño icono de casa, vuelva a entrar aquí y debería decir inicio en la página de inicio. Agradable. Haga clic en crear enlace y magia. Hace que se vincule eventualmente. Ahora las dos formas en las que solo puedes enviar por correo electrónico el enlace, eso es lo que tiendo a hacer. No haga clic en él. Puedo copiar ese enlace y simplemente enviarlo por correo electrónico a la gente, o puedes hacer clic en el embed. Si sabes trabajar con un iframe, quieres incrustarlo en tu propio sitio por alguna razón, y puedes hacerlo. Eso si quieres, solo un enlace antiguo normal, puedes enviar un correo electrónico. Ese es el que se va de nuevo, así que lo copia. Eso es lo que parece cuando estoy conectado, quiero mostrarte cómo se ve cuando me gusta decir se lo envío a un colega que no tiene un Adobe ID. Ellos consiguen esto. Como se puede ver un pequeño ícono es el nombre. Lo que pueden hacer es un par de formas de trabajar con él. Simplemente pueden pasar por esto, y sólo pueden ver todo como eso. Pero una buena forma de hacerlo es ir a pantalla completa. Bueno eso no es realmente pantalla completa, solo se deshace de la basura o en el exterior y luego pueden empezar a interactuar con ella en lugar de hacerlo. Podría tener que volver en realidad, golpear Escape para salir. Lo que voy a hacer es volver a casa y dejar de previsualizar desde aquí. Es posible que tengas que educar a tu amigo sobre la mejor manera de usar el wireframe. Encuentro empezando por el principio y con sólo hacer clic en la pantalla completa les da la experiencia básica porque entonces les permite pasar y empezar a hacer clic en cosas. Si hago click en esto, voy a esta siguiente vista. Ahora una de las cosas es que es bastante útil. Si haces clic en cualquier otro lugar puedes ver todo solo resalta, lo consigue caja azul alrededor de ella. Simplemente ayuda a la gente a navegar por un sitio, especialmente un alambrón que quizás no haya amañado cada botón. Me até a hacer clic en algo y simplemente no está funcionando. Esto les da una pista visual sobre qué hacer clic. Vuelve a la página de inicio, entra de nuevo. Ya hemos previsado antes, pero eso es lo que parece. Escapar para salir. Ahora en cuanto a comentar, puedes hacer click en esto. Por el momento no están firmados. Por lo que pueden o hacer clic en el botón de inicio de sesión aquí o iniciar sesión aquí, o pueden entrar como invitado, lo cual es hermoso. Por lo que hace que la gente sepa pasar por todo el drama de iniciar sesión. Si lo hacen sin embargo, hay una manera agradable que Adobe ha hecho. Puedes iniciar sesión con tu Adobe ID, pero decir que tu colega no lo recuerda o no sabe qué es, pueden iniciar sesión con inicios de sesión sociales aquí con Facebook o Google. De cualquier manera eso les permitirá agregar comentarios o puedes hacerlo adivinando cuál me encanta. Obtienes algunos comentarios iniciales y necesitas actualizar ese enlace, hay dos cosas que puedes hacer. Se puede potenciar una retroalimentación de ellos y decir, oye, esto no está funcionando o ¿qué pensamos de hacer esto o no nos imaginamos que esto funcionaría de esta manera? Lo que puedes hacer es decir que sí haces un cambio y te gusta, este botón ahora va a ser, cambias los tics aquí dentro. Ir a la vista de diseño. No estoy seguro de qué estoy actualizando, pero esto sólo elimina algún texto. He decidido que esa es mi actualización y he hecho una actualización, puedo hacer dos cosas aquí. Puedo hacer clic en compartir de nuevo. Hay dos formas en que puedo actualizar el enlace original, para que nada cambie realmente el mismo enlace que había sido correo electrónico funcionaría, pero tendrá estos textos actualizados o puedes crear un nuevo enlace, y darle un nuevo título. Diga que es un enlace nuevo y eres como en realidad quiero hacer este nuevo enlace porque es como si hubieras hecho muchos cambios y quieres llamarlo como versión 2 algo completamente diferente. Compartes un enlace separado. O actualizas el enlace que tenías o compartiendo uno nuevo, entonces puedes hacer clic en Administrar enlaces si te estás perdiendo. Se cargará con tu Adobe ID. Lo haré en otro lugar. Hagámoslo. Cierra esos dos hacia abajo y haz clic en administrar enlaces. Se abre aquí y se puede ver ahí está mi instructor HQ. Estas las dos versiones que he hecho, probablemente debería haberla renombrado antes de crear un nuevo enlace, como un dos versiones 1, va a confundir a todos. Pero esas son las dos versiones que puedes eliminar la anterior, di que estás terminado con esa. Ya no quieres que la gente trabaje en ello, puedes hacer click y letras muy grandes. Dice Eliminar permanentemente. Voy a dejarlos ahí por el momento. Quieres que prueben en el móvil, digamos que estás construyendo una aplicación en lugar de un sitio web, volvamos a saltar de nuevo a extinguido. Entonces para previsualizar en un móvil, no es como un fluido 100 por ciento. Tienes dos opciones. Si me he extinguido realmente fácil, solo tienes sombra en el archivo y pueden previsualizar como lo mostramos anteriormente en un dispositivo con la app o lo que tiendo a hacer es solo darles este enlace, copiarlo, y enviarles un correo electrónico y decir: y pegarlo y di, oye, abre este enlace a través de tu teléfono. La mayoría de las personas tienen su acceso de correo electrónico en su teléfono. Simplemente dan clic en el enlace y dan clic en pantalla completa y funciona perfecto o pueden copiarlo y pegarlo en su navegador móvil. También pueden teclearlo, pero esa cosa es demasiado larga. Podrías usar un acortador de URL como Bitly o goo.gl. Esa es una bonita para acortarlas por lo que es fácil de escribir. Ahora otra forma de compartir es no compartirlo realmente de todos modos, solo llévate tu laptop contigo y luego solo presiona el botón de reproducción y haz que trabajen en ello aquí. El genial de eso es que puedes grabar lo que pasa. Se puede ver aquí. En realidad esto es sólo para un Mac. Puedes hacer clic en este pequeño botón de grabación y en realidad empezará a grabar lo que hace el usuario. Puedes verme pinchando aquí. De lo que pasan aquí. También grabará mi voz. Cuando termines, hit escape, y eso te permitirá guardar este archivo como un mp4, vale, y lo voy a meter en nuestros archivos de ejercicio, y lo voy a poner en Excel es sólo para ir a mi escritorio porque voy a Bennett. Por lo que instructor HQ prueba por Dan. Echemos un vistazo. Él es mi gusto. He grabado y eso es todo lo que han estado haciendo. Esa puede ser una manera agradable, fácil de ir y conseguir que tus amigos ayuden o se lo envíen al cliente para que hagan algunas pruebas y puedes grabar lo que hacen. Pero recuerda que la pequeña opción de registro solo está disponible en Mac. La diferencia entre PC y Mac sólo es leve. Bueno esa es una de las bonitas que tiene Mac y lo mismo, la enchufación directa al dispositivo. Si estás siguiendo junto con un PC, notas que el sistema de menús es construir un poco diferente en la parte superior para que coincida con más de un sistema Window. Lo último que quiero mostrarte es cómo se ven los comentarios del otro lado. Este es un proyecto de trabajo real. He diseñado este wireframes y se lo envía tanto a colegas como a clientes para su retroalimentación. Te mostraré un pequeño ejemplo de lo que sucede cuando sí comentan. Esta es la página de inicio y se puede ver, tengo algunos comentarios y se puede ver que hay dos formas de agregar comentarios. Estos pines, que es agradable porque su realmente se conecta a lo que apunta porque hay muchas cosas en esta página de inicio. Por aquí lo que puedo hacer, puedo responderle y explicarle algo o hacer preguntas o puedo resolver esto y decir en realidad, esto se hace. Arreglo lo lo que fuera ese problema y ahora está bien. Otras cosas que podemos hacer esto es echar un vistazo a través de unos comentarios más, más comentarios, más comentarios. Echemos un vistazo a algunos de los generales. Este de aquí es un comentario general para toda la página. No tienen colgante. Ahora quiero mostrarte lo que puedes hacer y lo que pueden hacer cuando anexan, cuando agregan un comentario. Digamos que quiero hacer un comentario, ellos pueden decidir por qué tenemos caídas sombras.Fui un poco demasiado por la borda con esta alambrada. Yo lo edité demasiado detalle a ella. Lo despojé como en el que estamos trabajando ahora. Simplemente puedes dejar eso ahí, golpear retorno y se convierte en uno genérico para todo el documento o podrías haber agregado un bolígrafo. Otro ahí. Ni siquiera sé qué significa eso, pero puedes arrastrarlo y dejarlo ahí. Lo genial de eso es que está anclado a ese punto. Sé retroalimentación hacia dónde va, así que ese va a ser un pequeño sistema bastante malvado que [inaudible] ha hecho y Adobe ha hecho. Me encantó mucho que puedan iniciar sesión adivinando, no forzando a la gente a iniciar sesión. Porque de lo contrario terminan simplemente enviándome comentarios y correos electrónicos y son como estaño en página. El fondo a la derecha se tiene una cosa verde y eres como ¿de qué están hablando? Este comentario es supercool. Ya lo sabías porque acabas de verlo. Seguiré adelante. Entrémonos al siguiente video donde empezamos a envejecer alta fidelidad. 18. Tableros de inspiración y recursos para el diseño de UI de alta fidelidad en Adobe UX: Oye, ahí. En este video vamos a ver cómo empezar con nuestra maqueta de alta fidelidad. También vamos a buscar recursos para ayudarte a empezar. Al igual que este de aquí es una UI de Windows, hay algunas de Apple geniales que encontraremos. Hay un gran material de Google, y veremos dónde conseguir nuestro tipo de ideas para tableros de humor. Construiremos una especie de pizarra de humor rápida. Dónde está, ahí está, por nuestras ideas de diseño, y las juntaremos todas en nuestro documento XD. Está bien. Entonces recursos y tableros de humor, vamos a meternos en ello. Entonces es tiempo de alta fidelidad lo que solo significa, recuerda, vamos a hacer unos con imágenes, y colores, y fuentes que nos gustan. Lo primero es que vamos a crear un nuevo documento. No vamos a hacerlo, depende de ti. A algunas personas les gusta trabajar desde y simplemente actualizar la estructura alambrada. A menudo me gusta volver a empezar, me parece que el wireframe se interpone en mi camino. Yo lo uso, voy a referirme a ella, y salto de nuevo a ella todo el tiempo para ver qué tipo de ideas tenemos, pero a menudo me parece fácil volver a empezar. Entonces eso es lo que vamos a hacer en este curso. Entonces voy a empezar con nuestro tipo de sitio estandarizado. Voy a guardarlo y darle un nombre. Estoy dando nombres raros a los míos porque te ayuda poder encontrar esto más adelante. Puedes ir al video 19 y en realidad encontrar el archivo en el que estoy trabajando. todas formas, este va a ser mi instructor, como lo hicimos antes, Instructor HQ. Este va a ser homepage. En realidad, solo necesita ser la página de inicio. Genial. Hay un par de cosas que vamos a hacer justo antes de empezar, y es sólo alrededor de tableros de humor y recursos. En cuanto a recursos, estamos especie de ponerlos antes. Están en un archivo, ahí están estos kits aquí, usaremos únicamente wireframes. Si descargas estos tres, si haces clic en alguno de ellos, en realidad te llevan al sitio web desde Apple, y te muestra dónde descargar. Ya verás aquí hay una opción para XD. Para que puedas descargar eso. he descargado para ustedes tanto para Apple, Windows como para Google. Están en tus archivos de ejercicios bajo Plantillas de UI. Hemos estado usando wireframes, estos son estos tipos de aquí. Simplemente puedes abrirlos en XD, y puedes empezar a tirar de estos porque lo bonito de ellos es digamos que usamos material de Google, es masivo pero realmente es como nuestros wireframes pero son una mayor fidelidad. Son bonitas. Tienen todos los recortes añadidos a ellos y muchas veces, trabajando desde algunos de estos, sobre todo si estás lidiando con apps, solo hay reglas que necesitas, si se va a ir a Google, y estás usando mucho sus iconos prefabricados, y símbolos, y esas cosas. Por lo que bien podrías usarlos en tu maqueta. Ahora sólo para que lo sepas, probablemente sea más común burlarse del Apple, aunque vayas tras ambos, a la gente le gusta ver las versiones de Apple. Así que descarga la hoja de pegatinas de iOS y usa esa para ello. Entonces esa es una forma de empezar. Otra forma de conseguir ideas y recursos está de nuevo en tu mercado. Debajo de Activos, bajo Market in here, si escribes en IU, a menudo puedes obtener muchos ejemplos que son bastante agradables. Digamos que te gusta este de aquí para empezar, puedes descargarlo. Este es un PSD así que no lo es, no he encontrado ninguna opción de XD aquí todavía, pero manténgalo pendiente. Pero solo puedes usar esto como guía visual y sacar cosas desde Photoshop. No hay problema. Entonces Market es un lugar agradable también. Después pasas a los tableros de humor e ideas. Por lo que dependerá de cómo trabajes con tu cliente. Entonces, digamos, mi cliente que estoy trabajando para este proyecto, el Instructor HQ, son igual que tú te vas y haces que se vea bien. No tienen una opinión particularmente fuerte al respecto, pero he trabajado con clientes que necesitarán ver primero una pizarra de humor porque quieren o me van a mandar una pizarra de humor. Un tablero de humor es sólo un grupo de imágenes para dar una sensación de hacia dónde se dirigen. Por lo que sin embargo, hago un tablero de humor para mí mismo. Es la parte divertida, es el sentarse y “¿Cómo va a quedar esta cosa?” “¿Cómo quiero que se sienta?” Hay un par de lugares a los que voy. Rápidamente te mostraré solo para ayudarte. Está bien. Por lo que Behance es uno de los primeros, behance dot net, es propiedad de Adobe, que es genial. Acabo de hacer una búsqueda de aplicación web. Se puede ver que es algo realmente bonito aquí. Ahora normalmente solo encuentro cosas que me gustan y luego hago una captura de pantalla. Simplemente haré una captura de pantalla de esto y tendré un montón de capturas de pantalla para construir mi tablero de humor. Lo mismo con Dribbble. Escribo en aplicación web todo el tiempo. Sólo porque aquí hay una búsqueda, me da el tipo de cosas que busco. Podría escribir en diseño de interfaz de usuario o aplicación y simplemente obtener algunas ideas. Ábrelos, toma capturas de pantalla. Por lo que Dribbble con tres B's. Niice es otra con dos I's. Aquí hay otro que he hecho para la aplicación web. Lo genial de esto es que en realidad es que es un creador de pizarras de humor. Yo uso esto todo el tiempo. No voy a pasar por todo, pero ve a niice dot co y te van a ordenar por ahí. Hay una opción gratuita. Awwwards es un lugar agradable. Un www en el medio ahí. Este es otro gran lugar. A menudo esto es, supongo, un poco más estructurado. Aquí hay algunas cosas increíbles. Se ganan los premios para diferentes categorías. Entonces podrías estar buscando en el blogueo lo cual es bastante bonito, y solo te da una especie de versión recortada y te da razones por las que es tan grande. Otro tipo de lugar de premios son los Webbies. Por lo que los premios Webby es un premio en línea. Creo que empezaron con sitios web. Parece que hay todo aquí ahora, pero entro, busqué este año, y pasé, y elegí, miré web y luego miré a Mejor Experiencia de Usuario o Interfaz de Usuario, y solo obtienes ideas bonitas y geniales y puedes desplazarte por ellas, abrirlas, tomar capturas de pantalla de las cosas que te gustan. El último, no hay último, es decir. Volver a nuestra app. Entonces una vez que las tienes todas, tomo muchas capturas de pantalla en mi Mac. En tu Mac es Command Shift tres. Puedes dibujar una caja pequeña, en realidad Comando Shift tres es toda la pantalla, Comando Shift Cuatro cuatro dibujará una caja pequeña y terminarás en tu escritorio. Lo que he hecho solo para mostrarte, es que he creado en tus archivos de ejercicios, aquí te dejamos un montón de capturas de pantalla que tomé. Solo hay montones de ellos. Yo sólo tomé un montón de cosas. Lo que hago es usar ese niice para hacer una pizarra de humor. Crea pequeños PDF fríos como este. De acuerdo, los genera para ti, lo cual es genial, o simplemente los volco en la página y XD la mayor parte del tiempo. Por lo que solo selecciono un trozo de ellos. Cuántos tengo, seis, voy a hacer cinco a la vez y en XD, voy a saltar a nuestro nuevo proyecto. Voy a alejarme de la derecha para que pueda ver ese pasteboard y sólo voy a arrastrarlos hacia adentro. Tengo esos y acabo de empezar a arrastrar en cinco a la vez o seis a la vez. Si las haces todas en una gran marcha terminan en una gran línea que se dirige a la tierra de nadie. Entonces si tu foto final está en el usuario, podrías usar [inaudible] que podría funcionar, Photoshop. Hay una opción stack in Layers bajo archivo y lo que sea que trabajes. Pero me gusta simplemente construir una pequeña mancha de tablero de humor impresionante, bondad. Está bien. Es un poco grande por defecto, las capturas de pantalla en este Mac. Entonces sólo lo voy a hacer mucho más pequeño. Yo lo voy a meter aquí arriba. Voy a agruparlo. De lo que hago cuando estoy trabajando y estoy buscando, solo estoy buscando, saco mis colores de aquí, empiezo a buscar fuentes. A mí me gustan las ideas de diseño. Estas capturas de pantalla, como esta es una razonablemente grande, pero a menudo esto puede ser enorme. Me encanta esta parte del trabajo consiguiendo ideas. También empezarás a notar que pesar de que son todos sitios web diferentes puedes empezar a ver el mismo tipo de colores viniendo por muy común en este momento, supongo esos, quiero decir pasteles tropicales, pero ahí es donde estamos en este momento. Pasemos al siguiente video donde empezamos a mirar columnas y rejillas, poniéndonos serios. 19. Por qué se necesita una cuadrícula de 12 columnas en Adobe XD: Oye, ahí. En este video, vamos a hablar de por qué vamos a crear una cuadrícula de 12 columnas. Si ya sabes por qué necesitas una cuadrícula de 12 columnas, puedes saltar al siguiente video. Para los que no, empecemos. En primer lugar es, ¿por qué estamos usando las cuadrículas de 12 columnas? Si no sabes y cuando estás codificando el sitio web en el otro lado, entonces cuando piensas el lado del diseño front-end ahora, cuando realmente tiene que convertirlo en un sitio web? ¿ Qué se utilizará a menudo como un marco que utiliza las 12 columnas como estructura? ¿ Por qué están usando 12 columnas? Es solo un número útil porque, para el diseño responsive, digamos este sitio web aquí, estoy usando, tiene alrededor de 1200 píxeles de ancho, y tengo 12 columnas como estructura subyacente. Esta imagen de aquí, este deslizador de aquí, en realidad está abarcando los 12 de ellos. Pero estos tipos de aquí abajo en realidad están gastando tres cada uno. Entonces 3 más 3 más 3 más 3 es igual a 12, creo. Esa es la frecuencia con la que los sitios web habían hecho no todos ellos. Así que consulta con tu desarrollador, pero la mayoría de las veces lo es. El motivo por el que es útil, es que cuando estoy en este tamaño de escritorio, tengo esta estructura uno y estos cuatro a través. Cuando baje a la tableta, verás que he decidido que ahora estas cajas abarcan, seis de las columnas. Por lo que 12 es simplemente dividible con bastante facilidad. Cuando trabajamos con estos diferentes tamaños como [inaudible] down mobile, estos en realidad gastaron 12 ahora, y la codificación es realmente fácil trabajar esa lógica. Además, muchos de los marcos que la gente inicia con los sitios de construcción se basan en estas 12 columnas. Por eso necesitamos 12 columnas. ¿ Las necesitas en tu proyecto XD? No. Lo vamos a hacer para que sea más fácil porque principalmente, hago el diseño web del otro lado. Entonces, cuanto más HTML, CSS cosas del sitio. Yo quiero hacerlo porque me va a ayudar. Podrías ser molesto para tu diseñador y desarrollador, y simplemente diseñar en cualquier lugar, y que ellos tengan que tratar de hacerlo encajar dentro de 12 columnas, lo cual sería un dolor. Esperanza que eso te ayude a entender por qué estamos haciendo 12 columnas. Saltemos al siguiente video donde realmente lo logramos. 20. Cómo crear una cuadrícula de 12 columnas en Adobe XD 2018: Hola ahí. En este tutorial, te voy a mostrar cómo hacer una cuadrícula de 12 columnas básicamente con un pequeño clic. Enciéndalo, apágalo, tiene función automática que hace que el diseño de columnas sea súper fácil, súper rápido. Vámonos y hagámoslo ahora. En primer lugar, en realidad soy Dan del Futuro. He vuelto en el tiempo a este video para actualizarlo porque el video original que hice, realidad tenías que agarrar la herramienta de rectángulo, tenías que hacer una columna, tenías que dividirla por 12, el ancho y canaletas de entrenamiento, y todo tipo de otro drama. He vuelto aquí para actualizarlo porque es una nueva característica que lo hace más o menos automáticamente. Cuando estás pasando por el resto de este curso sin embargo, no he pasado y remodelé todo el curso porque solo usamos columnas un par de veces. Cuando sí lo ves y estoy usando unas grandes cajas rectangulares torpes, y bloqueando, y desbloqueando columnas, puedes sonreír sabiendo que hay una nueva y dulce manera de hacerlo. El dulce nuevo camino es flecha negra, haciendo clic en los fondos, no tienes nada seleccionado. En realidad, haga clic en el nombre de su tablón de aplicaciones, y aquí donde dice grilla, marque esto, asegúrese de que está en diseño, no cuadrado. Teníamos cuadrado por un tiempo, queremos maquetación. Queremos ¿cuántas columnas? Doce columnas. El ancho de canaleta que usé mucho tutoriales es de 15. El ancho de la columna llega a ser automático. Queremos hacer automáticamente que las columnas encajen con dentro del límite es mi sitio web. Utilizamos una navegación de 1,400 a lo largo de la parte superior y ese va a ser mi ancho máximo, 1,400 es lo que quiero usar para mi ancho máximo del sitio. Podrías elegir algo diferente, los comunes son 1,024, 1,200, pero vamos a usar nuestros 1,400 para mi navegación. Tenemos que resolver cuáles son las columnas y todo lo que realmente necesitamos hacer es hacer clic en el nombre y tenemos que trabajar aquí el ancho a los bordes. Tengo un sitio que es 1920, tengo una navegación, eso son 1,400, así que necesito hacer algunas matemáticas básicas. Mi 1,920 menos mi navegación me deja esto para cualquiera de los lados divididos por dos. Esa es la brecha que necesito, así que 260 píxeles. Doy click en el nombre aquí y digo, quiero el ancho a los bordes a 200 y tan solo 16 píxeles. Eso ahora encajará perfectamente dejando un poco de corte a cada lado de mi navegación final sana. Puedes seguir adelante y empezar a trabajar en este proyecto que es mucho más fácil. Puedes activarlo y desactivarlo, puedes establecerlo como predeterminado. Siempre que hagas uno nuevo, pasará por ahí y usará tus plantaciones prehechas. Podrías simplemente elegir usar el valor predeterminado, depende de ti, pero me gusta un sitio web de 1,400 píxeles de ancho. Eso es todo, ve adelante y construye un sitio web impresionante. Ya terminé este curso porque soy Futuro Dan y es un buen curso. Me encanta [inaudible]. Adiós ahora. 21. Cómo trabajar con colores dentro de Adobe XD CC: Hey ahi, bienvenido a este video todo sobre el color. Vamos a averiguar cómo robar colores de digamos, un logotipo o marca existente y usar esos entonces los vamos a convertir en nuestro panel Essence. También los vamos a convertir en esta práctica opción reutilizable aquí abajo. También saltaremos y echaremos un vistazo a algo como esto con esta inspiración para el color y cómo usarlos. Saltemos ahí ahora y empecemos a hacer colores. Hay algunas formas de trabajar con el color en XD. En primer lugar iba a sacarlo de un logo, así que vamos a ir Archivo, Importar, y vamos a intentar traerlo bajo nuestros archivos de Ejercicio bajo imágenes. Se puede ver archivo AI. Actualmente, en esta versión, en realidad no puedes simplemente traer archivos AI, lo cual es un poco doloroso, así que lo que hago es simplemente abrirlos en Illustrator, copiarlos y pegarlos en. Puedes pegar muy fácilmente, de verdad. Voy a usar este logo aquí. Lo que quiero hacer es hacer doble clic en él o desagruparlo. Yo sólo voy a hacer doble clic eventualmente voy a conseguir la H y se puede ver ahí está el color de relleno. Lo que me gustaría hacer es presionar el botón más allá. Esto lo va a agregar sólo a colores de fácil acceso. También en tu panel de activos, cuál de estos dos pequeños blobs de aquí podemos ir a Colors, y como está seleccionado, lo agregará aquí también. Es bueno tenerlo en ambos lugares donde estamos trabajando. Ahora para conseguir otros colores, para obtener tal vez inspiración de color, un lugar agradable es Adobe Color. Se inicia en Crear. A mí me gusta saltar a este que dice Explore, y solo te da ideas de grupos de color. Simplemente podrías usar uno de estos para empezar con una gama de ellos, como conceptos. Todo lo que tienes que hacer es hacer clic en Guardar. Necesitas iniciar sesión en tu Adobe ID y escoger la Biblioteca RCC para que pueda entrar. Entonces dentro de XD puedes ir a Archivo, Abre tu biblioteca CC, y en nuestro caso sería Instructor HQ, y ellos serán los colores esperando ahí. Es otro método que quiero usar por el momento. Si no quieres usar esa opción de biblioteca CC o estás trabajando en un lugar donde simplemente no puedes usarla, solo puedes usar este sitio web. Haga clic en ellos y diga Editar, y verá abajo abajo, vea que es más fácil copiar estos números hexadecimales. Puedes copiarlos en XD. Dibuja un rectángulo. Por aquí da click en el ícono y solo pega eso ahí dentro y obtendrás tus colores. Es una forma de transferirlos sin bibliotecas CC. Otra forma de conseguir colores es mirar nuestros tableros de humor. Voy a alejarme un poco y quiero un color rojo melocotón que quiero usar. A lo mejor algo así, quizá no. Ahora solo busco un color. A lo mejor algo así como de alguna manera India es lo que quiero. Lo que puedo hacer es que voy a dibujar un rectángulo, solo rectángulo aleatorio, y voy a usar la herramienta cuentagotas aquí. Esta, herramienta cuentagotas de ojos me permite irme y solo escoger un color de aquí, y se puede ver seguir con una muestra. Eso está cerca de lo que quiero. Lo que también puedes hacer sin embargo, es un lindo truco es, puedes mover esto y ver cosas debajo, herramienta cuentagotas de ojos en realidad voy abajo y recojo cosas debajo también, así que en realidad no tienes que elegirlo solo de el panel XD como lo haces en muchos otros productos de Adobe. Tengo este color aquí, y eso es todo. Voy a hacer doble clic aquí, y probablemente voy a pasar y sólo arrastrar un poco esto hacia abajo. Ahora sólo estoy perdiendo por aquí. Ahí es donde quiero estar. Con esto, voy a copiarlo y luego borrarlo, baje hasta aquí. Lo que me gusta hacer justo en el pasteboard aquí arriba, es que me gusta construir mis muestras. Voy a dibujar un pequeño cuadrado sosteniendo turno me dará una altura y anchura perfectas. Voy a empezar con mi verde, y lo que voy a hacer es que no voy a tener frontera, y voy a tener dos de ellos. Uno de ellos va a ser ese color, y me gusta tener un color secundario que es sólo un poco más oscuro, así que arrastremos esto hasta aquí. Es como versión más oscura de la misma. Entonces voy a empezar con ese color melocotón. Te usaré, usaré herramienta cuentagotas, robaré de eso. Ya estás listo y empolvado. Ahora tengo otra muestra aquí y tú sólo vas a estar un poco más oscura otra vez. Probablemente quiero tranquilo un oscuro, probablemente en algún lugar aquí fuera es lo que quiero. Es gris pero todavía queda un poco de rojo en él. Esas iban a ser mis muestras para este curso. Puedo seleccionar los cuatro que ya no tengo y tengo plus, la parte real de esa pandilla, y por aquí necesito hacer un poco más individualmente y decir que agrega, agrega. Son prácticos tenerlo en ambos lugares, te lo prometo. Dos cosas más que quiero hacer antes de seguir adelante, quiero instruir a IQ para que sea parte de la biblioteca del símbolo porque esto es como un logotipo de trabajo, acabo de hacer rápidamente para darle una marca a la empresa, pero realmente no hemos acordó un logotipo todavía. Voy a agregar eso a los símbolos para que más adelante pueda actualizar esto y se actualizará todos los usos. Tengo otra versión de esa que quiero traer, esta versión apilada. Voy a copiar eso, pegarlo aquí, y lo añadiré a ese símbolo. Genial. Pásame una línea si tienes alguna otra pregunta sobre los colores, estamos usando RGB porque vamos a salir para pantallas digitales, no colores CMYK. Sí, ¿algo más? Déjame una pregunta y la contestaré en los comentarios. Pasemos al siguiente video. 22. Uso de fuentes seguras para la web o fuentes específicas para iOS o Android en Adobe XD: Hola ahí. En este video vamos a ver cómo traer fuentes tanto de Chrome como de TypeKit y traerlas a XD, y por qué necesitamos escoger un par de fuentes y solo un par de pesos, de lo contrario nuestro sitio web o aplicación explotará. Vamos a ver por qué en este video. A la hora de escoger fuentes para tu prototipo, necesitas escoger una fuente que va a poder ser utilizada ya sea en una app o en un sitio web. No todas las fuentes pueden serlo. Si tienes fuentes en tu computadora por el momento, no puedes simplemente pasar y recoger ninguna de ellas. La forma más fácil de encontrar una fuente que pueda funcionar en línea es utilizar las fuentes TypeKit de Adobe o Google. Voy a mirar ambos. TypeKit aquí, voy a ir a Browse y lo que encontrarás es prácticamente todo de este lado aquí, es capaz de tener una versión Web del mismo. Pasemos por aquí y escojamos cualquier fuente vieja, y lo que busco es cuando hago click en ella, busco ambas opciones. Hay una opción de sincronización y luego ver estos corchetes aquí, que indica que hay una versión Web. Eso está totalmente bien. La otra cosa que puedes hacer aquí es solo para habilitar si está desactivada, incluye fuentes de solo web. Ahí fuentes impresionantes que solo se permiten usar en línea y no se usan en impresión. Ahora bien, si no estás seguro de qué es TypeKit, TypeKit forma parte de tu licencia de Creative Cloud. Puedes iniciar sesión con tu Adobe ID y todas estas fuentes están permitidas para ser utilizadas comercialmente. Solo hay unos realmente bonitos aquí dentro. Algunas de las cosas que podrías considerar al descargar una fuente está por aquí a la derecha, tienes algunos filtros. Simplemente realmente ayuda a hacer ejercicio. Yo quiero buscar un cuerpo podría ser divertido, solo puedes cortarlo a fuentes simples Sans Serif y deshacerte de todas las dibujadas a mano. De igual forma, puedes activar Mano, y solo obtendrás las fuentes dibujadas a mano. Las otras cosas a mirar, potencialmente esto es probablemente mi más importante cuando estoy mirando una fuente Web, es el ancho. A mí me gusta tratar de encontrar, no siempre es necesario, pero me gusta finalmente apagar Hand. Quiero encontrar un ancho que sea bastante estrecho solo para que tenga el potencial, sobre todo para una fuente de encabezado, solo consigo la capacidad de agregar más caracteres a un encabezado. Si escoges unas fuentes realmente anchas, solo podrás tener encabezados muy cortos antes de que se rompan en dos líneas. Pasaremos por todas las características, pero está bastante frío. Se puede ver en la parte superior aquí, he ido a cambiar el texto. Puedes dejarlo en blanco, pero también puedes filar tu propio nombre aquí arriba para que puedas ver cómo se ven los personajes antes de descargarlos. Cuando estés listo para escoger una, di que decides que esta es la fuente para ti, en realidad ¿cuál es la que vamos a estar usando? Voy a subir a Buscar en la parte superior aquí, voy a usar Fairplex. Antes de hacer eso, necesito apagar algunos de estos filtros para que pueda encontrar a Fair. Este Fairplex ahí. Yo he decidido que esta es la fuente que quiero, todo lo que tienes que hacer es hacer clic en este botón que dice sync. Ya sincronicé la mía y eso es todo. Lo que pasará es que, mientras estés conectado a tu nube creativa, ves aquí arriba estoy logueado en la mía, aquí está mi carita. Si estás en un PC, eso se hace abajo a la derecha. Lo que termina pasando es, simplemente aparece mágicamente en XD. Entonces nada más tienes que hacer. Con fuentes de Google, muy similares. Fuentes de Google aquí escoges una fuente que consiguió filtrado similar por el lado aquí. Pero di que escoges una fuente, voy a usar Roboto. Roboto es como una sopa, es el nuevo Ariel de eso. Abre Sans, si vas a todos los sitios web que se han hecho en los últimos cinco años, un gran grito, la copia corporal es una de estas también, o Source Sans. Voy a escoger Roboto Me gusta, tiene unos pesos bonitos. Pero cuando lo estás usando, hay un poco de cosas extra que necesitas hacer. Diga que decide, Roboto para mí, hace clic en el icono pequeño más y hay una cosa que aparece abajo en la parte inferior aquí. Te das clic en él, y lo que tienes que hacer, ¿ ves este pequeño botón de descarga aquí? Esto te está mostrando cómo usar en un sitio web, no estás en ese momento, nos estamos burlando localmente en nuestro equipo. Entonces lo que tenemos que hacer es hacer click en “Descargar”. El genial de esto es que es una fuente que puedes descargar. Voy a meter esto en los archivos de ejercicios. Hago una carpeta y llamo fuentes y podrás usar Roboto también. Todo lo que necesitas hacer es abrirla e instalar las fuentes que necesitas, siempre [inaudibles] fuentes. Este es solo un recurso genial para cualquier proyecto de diseño en el que estés trabajando. Hay montones de fuentes. Simplemente recuerda hacer clic en este oscuro botón pequeño para decir descarga a tu computadora. Después, en un Mac, solo tienes que hacer doble clic en esto. Creo que en una PC es igual de fácil, solo tienes que hacer doble clic en ellas y van a empezar a instalarse. Ahora, nuestra siguiente consideración son los pesos. Voy a saltar a nuestro proyecto XD. Voy a montar un par de estructuras de fuentes básicas para empezar. Voy a usar Fairplex, que voy a usar para mis grandes llamadas a la acción. Yo también voy a acercar un poco. Ahora, cuando estés lidiando con fuentes e intentando escoger tamaños, asegúrate de estar al 100 por ciento solo para que estés al tanto de lo grande que es esto. Es así como la gente lo va a ver dentro de la app y en un sitio web. Voy a recoger Fairplex por aquí y deletrearlo Fairplex Narrow, esa es la que estoy usando. Ahora, quiero tres tallas. Voy a tener esta grande, voy a tener una más pequeña que va a ser 36, y quiero otra. Se trata de 24. Esas son las tallas con las que voy a empezar. No tienes que escoger tamaños de fuente, solo puedes empezar a trabajar y retroceder. Pero quieres algunos tamaños consistentes de fuentes sin otra razón técnica que más teoría del diseño donde cargas de diferentes fuentes y cargas de diferentes tamaños bastante es confuso para el usuario. Esa es una simple jerarquía de lo más importante, siguiente importante, lo último importante en cuanto a mis encabezamientos. Ahora, en términos de pesos, cuando me refiero a peso, quiero decir, ligero, medio, audaz, negro. Podría decidir que quiero una visión de libro para este top one, y entonces realmente me gustaría que éste fuera un poco más audaz y quiero que éste de aquí sea negro. Pero la consideración aquí es tiempos de carga sitios web y aplicaciones. Cada vez que escoges una nueva fuente y un nuevo tamaño, la computadora tiene que descargar eso antes de que la página se renueve. ¿ Por qué es eso importante? Es porque el tiempo de carga es súper importante por muchas razones. Uno de ellos son los sitios de rango de Google en función de lo rápido que cargan, cuantas más fuentes tengas, realmente lo ralentiza y por supuesto, solo el tiempo de carga general. Cuando la gente acude a tu sitio, no quieren estar sentados esperando que el sitio se cargue porque has escogido 10 fuentes con 10 pesos diferentes. Así que intenta, si puedes, mantener tus pesos lo más pequeños que puedas, porque ya nos estamos poniendo bastante alto. Voy a usar libro para todos estos, pero también planeo usar Roboto. En realidad sólo he por el momento, instalado una fuente, un peso. Fairplex y libro. A pesar de que es de diferentes tamaños, eso no importa. Esos van a ser mis tamaños de rubro. En cuanto a colores, voy a seleccionarlos todos y hacerlos negros por el momento, probablemente mientras estoy diseñando, ajustaré las cosas. Lo siguiente que quiero hacer es que me gustaría crear otro cuadro de texto para Roboto. Se puede subir aquí y el tamaño más grande que voy a usar para Roboto va a ser de 24 y eso va a ser para la mayoría de mis encabezados. Yo lo haré negro. Veinte van a ser mis subtítulos y este de aquí, 16 serán mi copia corporal probablemente a través de la mayor parte del documento. Dieciséis es un tamaño típico de copia corporal entre alrededor de 13 y 16 en usar un tamaño más grande porque no voy a tener un montón de publicaciones de blog como trozos pesados que más lleva aunque el mío va a ser marketing. Por lo que tal vez te pongas un poco más bajo para el tuyo. Catorce voy a usar para mis fondos. Se ve bonito. Ahora en cuanto a los tamaños de fuente, voy a hacer que los fondos sean audaces, voy a hacer que mis subtítulos también sean audaces. He intentado mantener los pesos de las fuentes a un nivel mínimo. Podrías estar haciendo el tuyo un poco diferente, tal vez solo estés diseñando y tal vez vuelvas y ordenes y decidas : “Solo necesito recoger algunas fuentes en todas estas a lo largo de ella”. Muy bien, dos fuentes y tres pesos. Se está poniendo un poco alto en la velocidad de descarga. Qué puedes hacer en las fuentes de Google aquí, hay algo de tiempo de carga aquí. Se puede hacer aquí. Digamos que he escogido Roboto y agregado a mi familia, puedo ir a personalizar y decir en realidad estoy usando Roboto light y voy a usar negrita. Se puede ver el tiempo de carga aún rápido, eso es impresionante. Pero entonces si voy y agrego otra fuente, ¿ y tienen Fairplex aquí? No lo hacen. Fairplay se ve muy similar. Entonces vamos a entrar en este, lo agregaremos a nuestro kit. Se puede ver estas dos familias de fuentes abajo por aquí y se puede ver moderada. Voy a dar click en “Vista justa” y voy a decir en realidad quiero la audaz y la versión ligera. Estaba empezando a entrar en la zona naranja si sigues agregándolos, eventualmente se va a poner rojo y decir demasiado lento. El Internet va a odiar tu sitio. Odio es la palabra fuerte, le va a disgustar tu sitio y no clasificarlo muy bien, cual no es bueno. Por lo que este largo video, es realmente solo escoger un par de fuentes con solo un par de pesos, lo contrario, el mundo acabará. Muy bien, pasemos al siguiente video. 23. Cómo usar estilos de caracteres en Adobe XD: Hola, ahí. En este video, vamos a ver los estilos de personajes. vamos a agregar a nuestro panel de activos por aquí, y luego mostrar lo increíbles que son cuando vas y los editas, y cambian de color mágicamente todo conectado a este estilo de personaje. Totalmente esencial cuando tienes montones de páginas. Te has burlado y necesitas controlar las fuentes a gran escala de páginas. Vayamos a comprobarlo. Crear estilo de carácter es súper fácil. Justo abajo aquí abajo, asegúrate de estar en tu panel de activos. En realidad, sólo voy a seleccionarlos a todos. Uno grande va en mi flecha negra y haga clic en este estilo de personaje. Boom. Están todos agregados, lindos, listos para salir. Ahora lo que hace útil el estilo de personaje es que cuando empiezo a escribir, solo puedo seleccionarlo todo y luego hacer clic en cualquiera de estos chicos. Entonces eso es, supongo, lo lindo al respecto. Eso es algo lindo, al menos. El otro bonito es que, digamos más adelante decido que he usado esto un montón de tiempos diferentes a lo largo del sitio, y luego más tarde decido en realidad no es lo que quería hacer. Vuelven los clientes y dicen que no les gusta la fuente, así que puedo pasar por aquí y escoger Museo, y todos se actualizan y enlazan. Puedes cambiar todo aquí; colores, fuente, tamaños, cualquier cosa que quieras, y todo está conectado a este estilo de personaje. Ahora si eres una persona que viene de, digamos, algo así como InDesign o Illustrator, esos estilos de carácter son bastante estrictos. Lo que XD ha hecho aquí, es que han hecho algunas cosas bastante increíbles creo. Este es un marco de cable para una aplicación. Digamos, puedes ver por aquí, si elimino todos los estilos, no hay estilos en absoluto. Ya has pasado por ahí y diseñas todo esto, estás como, “Oh, hombre, si esto es InDesign, quiero agregar el estilo”, así que voy a hacer doble clic en. Editar a mi estilo de personaje es genial, pero ese tamaño, esto se ha utilizado un centenar de veces ya en esta app. Entonces qué dolor. Pero y si XD lo han hecho, han sido súper listos. Mira esto. Si voy y actualizo esto, y digo en realidad que quiero que esto sea rosa, te darás cuenta de que no sólo tiene, [inaudible] es obvio. Yo lo he hecho a verde. puedes ver he actualizado este y éste, actualizado, pero mira, todos estos otros chicos también lo hicieron. Entonces lo que hace XD, va, wow, probablemente te refieres a todas las fuentes que son del tamaño correcto, que son del color correcto, que son aéreas, y llega a través del documento, y va y cambia esas. Es simplemente super servicial. Se puede decir que todas han cambiado, para que no tengas que ser tan estricta con todo. Aplicando este estilo de carácter, puedes editarlo al final y hacer pequeños cambios, y se extiende por todo el documento. Puedes ajustarlos por separado. Puedo decidir entrar aquí y decir, en realidad, me gustaría que todos los demás fueran verdes, pero quiero que este sea mi rosa y verás que se anula. Siento que es una forma realmente inteligente de introducir estilos de carácter. No son 100 por ciento estrictos, simplemente son realmente utilizables. Ahora si le hago un cambio a este tipo de aquí y los hago a todos regulares, se puede ver todo el resto de ellos. Tenía que ver fuente. Se puede ver ahora todos estos han cambiado. Pero debido a que le hice una ligera alteración a ésta y no coincide con sus amigos, él puede quedarse así. Entonces creo que los estilos de carácter son bastante increíbles y extintos. Gracias Adobe. Pasemos al siguiente video. 24. Creación de botones realistas en Adobe XD con propiedades de pegado: Hola. En este gran video, vamos a ver cómo hacer botones. Parece sencillo, pero tengo una tendencia a hacer squeeze con texto en ellos y los usuarios no saben que sus botones. Por lo que hay un poco más en ello. Te mostraré las mejores prácticas mirando algo como material.io, donde tienen buenos ejemplos en documentación, y también aprenderemos un pequeño truco genial que puedes usar para todas las cosas en XD. Donde es copiar y pegar propiedades. Vamos a hacer botones. Ahora trabajando con botones, parece un trabajo sencillo, pero puede ser un poco complicado. Creo que los dibujo, los hago, los pongo a los lados, y obtengo retroalimentación del personal que estaba como, eso realmente no se ve como un botón, y a ti te gusta de ninguna manera. Entonces a veces lo que sientes es un botón simplemente dibujando una caja y ponerle tipo en ella no es suficiente. Por lo que probablemente una de las formas fáciles de empezar es si miras material.io, recuerda que esta es la guía de estilo de Google para online y aplicaciones. Si vas a los componentes, aprende más. Es un poco donde todos vamos a encontrar esta opción web y vas componentes y encontrarás que hay un montón de botones. Ya hemos mirado esto antes. Aquí lo que puedes hacer es esto como alguna documentación técnica. Pero si en realidad solo tienes que hacer clic en este botón aquí que dice levantado, te da un montón de diferentes formas y estilos de hacer las cosas. Por lo que podría simplemente usar esto como guía de estilo. Sí te dice el CSS y todo para estos. Otra forma agradable es Beckon XD. Si vas a archivo abierto y ahora en nuestros archivos de ejercicios en las plantillas de UI y el material de Google, esta hoja de palo también tiene botones. Entonces aquí hay uno que dice botones. ¿Dónde estás ahí? Él está ahí. Es sólo una manera fácil de encontrar ¿qué? Parece un botón. Sólo son cosas simples. Al igual que este de aquí sólo tiene unas diminutas esquinas redondeadas. Permite acercar a la derecha. Esta diminuta esquinas redondeadas, menos pequeña sombra de gota. Por lo que una buena manera fácil de robar formateo de otros archivos XD es este es el momento es un objeto agrupado. En realidad es un símbolo así que lo voy a desagrupar porque no quiero las garrapatas en este caso. Yo sólo quiero esto. Voy a ir a editar copia, donde puedes elegir tu atajo. Por lo que solo simple copia baja luego salta a tu hoja. Herramienta de rectángulo, y voy a dibujar un botón por aquí. Cuando añades botones de dibujo y trabajas en tamaño, nuevo, necesitas estar en un 100 por ciento. De lo contrario, terminas dibujando botones enormes, lo hago todo el tiempo. Elige una talla para tu botón. Eso va a ser mío. Entonces lo que puedes hacer es ir a editar y hay apariencia de pasta. Puedes hacer clic con el botón derecho en él y recoger la apariencia de pasta también, y es solo una forma realmente rápida y fácil de robar el formato. Voy a cambiar el color. Entonces voy a usar la herramienta cuentagotas y en realidad sólo voy a usar esto, tal vez éste, y eso es todo. Obviamente puedes ir y personalizar tus botones para que sean lo que quieras. Pero seguir estándares que ya sea Apple o Google crean, a menudo es una buena práctica porque son el jefe. Están enseñando al mundo cómo usar internet a través de la interfaz de usuario y puedes pedir prestadas ideas de ellos. Ya puedes saltarte porque lo que voy a hacer es solo llenar mi tipo. Simplemente voy a agarrar mi herramienta de tipo, pincha aquí, y ésta va a ser la de apuntar. Suscribirse incluso. Voy a seleccionar todo, escoger mi estilo de botón y lo voy a llenar de blanco. En realidad para ser honesto, este de aquí, realmente voy a cambiar globalmente porque voy a hacer estos botones de colores todo el camino. Voy a arrastrarlo hasta arriba aquí si eso va a ser blanco. Entonces ahora aunque seguiré ese estilo. Voy a duplicar estos, y te darás cuenta cuando estés arrastrando cajas por ahí, estás como, oh no, seleccioné la columna. Realmente no importa cuando empiezas a arrastrarlo, lo ignora porque está bloqueado, y este de aquí, va a ser una demo en vivo. Lo que haremos por los otros botones es que quiero dibujar algunos iconos, lo cual haremos en el siguiente video. Vas a ser eso. Lo último que tengo que hacer antes de irme es que vamos a poner nuestro logo aquí ahora. Nuestro logo se ve un poco grande por el momento. Entonces no me tomé mucho tiempo antes en mostrarte cómo convertirlo en un símbolo, pero conseguirlo primero del tamaño correcto. Entonces una de las características que deben suceder para XD, que no tiene por el momento es que no puedes cambiar el tamaño de tu símbolo. Un poco extraño, pero es la versión uno, y tenemos que convivir con algunos de los inconvenientes de la nueva versión. Entonces lo que en realidad voy a hacer es que voy a hacer clic derecho en él y desagruparlo. Ahora llego a redimensionarlo, ponerlo en la parte superior aquí, y realmente puedo convertirlo de nuevo en un símbolo. Ahí lo tienes. Pero ahora tengo dos tamaños de la misma. Pero realmente necesito que esto sea un símbolo. Entonces me quedaré con ambas versiones porque he estado trabajando en segundo plano y te mostraré en realidad, aquí está. No está del todo hecho siento que esto se está acercando. Es yo, h q No estoy seguro porque se puede voltear boca abajo. Creo que estoy haciendo esto porque estoy leyendo libros de Dan Brown en este momento. Todo necesita ser súper secreto, código volteado boca abajo, cosas