Diseño de presentaciones con Adobe Xd

1. Introducción al diseño de presentaciones: ¿ Sigues haciendo presentaciones en PowerPoint o Keynote? ¿ Alguna vez has pensado en usar el paso de Adobe XD? Soy Martin. Tengo más de 20 años de experiencia como diseñadora gráfica, ilustradora e instructora certificada por Adobe. He trabajado con empresas como BBC. Estos necesitan Google, ikea y no puedo esperar para compartir mis mejores prácticas contigo. Este es un curso práctico aerodinámico que se centra en un proyecto de diseño de la vida real. Te estaré caminando por todo paso paso a paso y obtendrás todos los archivos de ejercicio para que puedas seguir adelante en caso de que prefieras no copiarme. También puedes seguir mi flujo de trabajo usando activos alternativos proporcionados. Crea algo completamente único que puedas mostrar en tu portafolio creativo. Estoy bastante seguro de que este curso te inspirará a crear algo increíble. Te voy a guiar a través de mi proceso de construcción de una presentación interactiva, Adobe XD. Comenzaremos el proyecto creando la navegación principal, algunos componentes interactivos y asignarles disparadores de atajo de teclado. También agregaremos el menú pegajoso usando el estado del componente y enlaces de anclaje. Además de todo lo técnico, también cubriremos alguna teoría importante del diseño gráfico que podrás aplicar en cualquiera de tus futuros proyectos creativos. Puedes unirte a este curso sin ningún conocimiento previo en diseño gráfico, ilustración o aplicaciones de Adobe. Pero para completar el proyecto, necesitarás acceso a Adobe Creative Cloud y a una computadora de escritorio o portátil, pero ahora es el momento de empezar a crear. Entonces te veré en la próxima lección. 2. Interacciones principales: Entonces aquí estamos en Adobe XD, y como se puede ver, ya tengo un par de diapositivas preparadas. Tenemos nuestra principal diapositiva de inicio aquí en la parte superior. Y luego tenemos estas tres diapositivas adicionales a continuación. Pero primero, solo construyamos las principales interacciones. Entonces a partir de esta primera tipografía componente, me gustaría pasar a este próximo tablero de arte. Así que solo estoy usando el pequeño signo más y arrastra la línea hacia fuera. Por cierto, estoy en modo prototipo. Entonces es entonces cuando puedes configurar estas interacciones. Y voy a simplemente usar el gatillo para ser tocado y la transición puedo cambiar a algo más adelante. Pero por ahora, estoy contento con la forma en que se configura por defecto. Ahora voy a hacer lo mismo con la teoría del color. Arrastraré eso aquí y luego la composición debe ir allá. Ahora, observe que la composición es ligeramente más pequeña que estas otras. Y eso es porque todavía no he configurado esto exactamente de la misma manera. Así que permítanme mostrarles antes que nada cómo se ve esto cuando lo estamos probando. Entonces para reproducir la animación o para verlo funcionando prototipo en acción, voy a presionar Comando o Control Enter. Por lo que eso abre esta vista de presentación. Y aquí te puedo mostrar que estos dos elementos ya construí como componentes con efectos de hover. Y como se puede ver, hay una animación automática ya aplicada. No te preocupes, porque te voy a mostrar exactamente cómo hacer esto en este tercer botón. Pero ahora, porque agregamos las interacciones, también puedo simplemente hacer clic en él ya. Y como pueden ver, pasamos a esa siguiente diapositiva. Y por cierto, esta diapositiva es más larga, por lo que automáticamente tiene integrada también la función scroll, que me encanta. Ahora, no tenemos los botones de atrás conectados aún a la diapositiva principal original. Así que hagamos eso antes de que nos olvidemos, me voy a mover aquí, seleccionar esa pequeña flecha y simplemente arrastrarla de vuelta aquí. Y lo bueno es que porque tengo esta configuración de flecha como componente y uso el mismo componente en estas otras páginas. Cuando los selecciono, fíjate que ya tienen esa interacción añadida. Por lo que no tuve que repetir estos pasos. Así que probemos esto otra vez. Vuelvo aquí, voy a la tipografía, desplázate un poco, y luego volvamos atrás, luego entramos en la teoría del color. También puedo moverme y funciona a la perfección. 3. Creación de efectos de desplazamiento: Ahora es el momento de construir ese efecto de hover en este tercer botón aquí. Así que en primer lugar, volveré a cambiar al modo de diseño y acercaré más a esta página Comando o Control tres, es la forma en que puedes acercar a un tablero de arte específico. Y les mostraré que estos dos aquí se crean como componentes, incluido el texto en la parte inferior. También edito dos guías en la parte inferior, que me ayudarán a crear la animación. Porque nota cuando cambio al estado de desplazamiento, no solo el icono cambia de color y ligeramente en tamaño e incluso orientación, sino que también el texto sube un poco. Entonces antes y después. Entonces está el estado normal y cómo nuestro estado, y lo mejor si x es e, para ser honesto, es que todo se anima automáticamente. Por lo que sólo hay que configurar los dos estados y la animación in-between se generará con la función auto animate. Por cierto, me tomó un tiempo darme cuenta de dónde están las guías en XD cuando los uso por primera vez, porque no hay reglas como en Illustrator o Photoshop o InDesign. En cambio, todo lo que tienes que hacer es llegar al borde de tu tablero de arte y luego arrastrar la guía desde ahí. Lo mismo se puede hacer desde el lado izquierdo. No encontrarás estas características en la parte inferior ni en el lado derecho. Por lo que sólo está a la izquierda y en la parte superior. Y luego cuando ya no necesites una guía, solo tienes que arrastrarla del tablero de arte para quitarla. Así que echemos un vistazo a este ícono aquí a la derecha, el ícono de composición. Esto ya es un componente de distancia, puedo decir es porque tiene un contorno verde. Los objetos normales tendrían contorno azul. Cualquier cosa verde significará que ya está configurado como componente. Por cierto, aquí del lado izquierdo en la parte inferior, tienes el panel de activos donde puedes hacer un seguimiento de todos tus componentes para que te dé una lista de ellos. Y por supuesto también puedes nombrarlos. No me he molestado en nombrarlos, por lo que son sólo los nombres predeterminados que entraron con los iconos. Por cierto, estos iconos son de Noun Project. El enlace se encuentra en la descripción a continuación. Échale un vistazo. Es un sitio de recursos gratis con montones de iconos realmente de calidad. Y realmente me encanta trabajar con ellos en XD porque puedo añadir las animaciones simples que ya has visto en los otros dos íconos. Pero veamos qué podemos hacer aquí. Entonces, en primer lugar, este componente aún no tiene un estado de desplazamiento, por lo que solo tiene el estado predeterminado. Entonces primero, lo que tenemos que hacer es agregar el estado de hover, pero tal vez incluso antes de eso, voy a combinar los mensajes de texto a este componente. Todo lo que tengo que hacer es cortarlo. Entonces Comando o Control X, luego seleccione el componente, haga doble clic en él, lo que significa que entramos a la fuente de este componente y luego presionamos Comando o Control V para pegar en el taxi recordaremos donde estaba. Entonces la posición uno cambia. Pero si hago clic lejos y hago clic de nuevo, ahora se puede ver que el texto y el icono está en un solo componente. Los componentes funcionan como grupos en Illustrator, y al hacer doble clic, es casi como usar el modo de aislamiento. Entonces ahora vamos a agregar el estado de hover. Por lo que sólo hacemos clic en este pequeño signo más aquí y elegimos estado de hover. Y hasta puedes renombrarlo si quieres el propio estado porque puedes crear tantos estados como quieras, pero yo lo voy a mantener como está. Y en cambio voy a hacer doble clic dentro este componente y arrastrar el texto hasta esta guía. Y entonces también cambiaré su color y usaré la herramienta cuentagotas y escogeré este color aquí del texto. Ahora debería haber salvado esto ya como muestra, pero siempre puedo referirlo desde ahí. Y si ahora seleccionamos esto y volvemos al estado predeterminado y luego presionamos Comando o Control Enter. Ya podemos ver ese efecto funcionando. Y ya puedes ver lo genial es esta característica de auto animate. Por lo que sólo tenemos que configurar los dos puntos finales y eso crea ese efecto. E incluso usa la flexibilización entre los dos estados. Así que ahora es el momento de agregar un poco más de intereses y animar el ícono como lo he hecho en estos otros también. Así que vamos a volver aquí, seleccionar el componente, ir al estado de desplazamiento, y luego hacer doble clic para poder seleccionar el icono en sí. Entonces ahí estamos, y voy a redimensionarlo. Entonces manteniendo presionada la tecla Alt y Shift juntas, puedo redimensionarla, pero se puede ver que es cambia la proporción de los ítems dentro de ella. Ahora eso está sucediendo porque por defecto hay una característica en XD llamada resize sensible. Entonces, si quieres simplemente un simple cambio de tamaño, lo que debes hacer es volver al estado predeterminado, y ahí es donde puedes desactivar esta función. Sólo voy a hacer eso. Entonces regresa al estado de hover. Haga doble clic de nuevo, seleccione todos estos elementos, y luego manteniendo pulsada la tecla Alt y Shift, voy a cambiar el tamaño del icono a algo así. Tal vez eso es un poco demasiado grande. Y también tal vez podamos moverlo ligeramente hacia abajo. Y luego una vez más, el color que sólo voy a escoger de aquí. Muy bien, entonces ahora si volvemos al estado predeterminado, podemos revisar antes, después. Eso se ve bien, pero también podemos probarlo así. Muy bonita animación sencilla ahí. Pero también me gustaría tener un poco más de interés en esto. Así que una vez más, en el estado de hover, acabo de entrar en él. Pero esta vez solo voy a seleccionar estos detalles aquí en medio. Y simplemente los rotaré a su alrededor, tal vez a algún lugar allí. Y tal vez también podamos moverlo ligeramente hacia fuera. Muy bien, ahora, una vez más, no olvidemos volver al estado predeterminado y luego revisar esto y entramos en modo de vista previa. Y ahí tienes la hermosa animación del cambio de tamaño de rotación, cambio de color y el texto moviéndose hacia arriba y hacia abajo. Créeme, si haces presentaciones como esta, todo el mundo se sorprenderá y realmente se siente mucho más profesional que solo simples diapositivas una tras otra. 4. Personalización de atajos del teclado: Entonces como ahora tenemos la animación, volvamos al modo prototipo y seleccionamos este componente, alejemos para pujar, y luego arrastrar hacia fuera la interacción para ir a esta diapositiva de composición. Por cierto, quería mencionar que estas otras pequeñas líneas aquí en realidad están representando esos efectos de hover que acabamos de construir con el pequeño rayo. Eso significa que hay un efecto de hover en este componente, pero eso no va a quitarlo de esta diapositiva. Tiene que ser un toque real que vaya a pasar a la siguiente diapositiva. Y como estamos construyendo las interacciones, déjame mostrarte cómo puedes usar incluso atajos de teclado personalizados para moverte entre las diapositivas. Entonces digamos que agregamos en la diapositiva de dominio y nos gustaría ir a la diapositiva Tipo muy rápido. Si uso esta pequeña flecha, puedo arrastrarla aquí al tipo o diapositiva de topografía. Y luego en vez de tocar esta vez, voy a decir teclas y gamepad. Y entonces sólo podemos usar una llave, en este caso puede ser t, Eso pasará a esa diapositiva. Entonces hagamos lo mismo otra vez. Por lo que una vez más, otra interacción para la que usaremos otra clave, en este caso, C para el color. Y luego una vez más otra para la composición. Bueno, tal vez al, esta vez para el layout, ya que ambos son la misma primera letra. Así que probemos esto. Voy a entrar en modo de vista previa y si presiono T, va ahí. Volvamos a la diapositiva principal. C va a la teoría del color, y cuando presiono L, va a la composición. Brillante. Ahora si quieres ser aún más avanzado, incluso puedes usar comandos de voz para moverte entre las diapositivas. Una vez más, esto puede hacer que tu presentación sea tan divertida y fresca. Entonces si vuelvo a añadir otra interacción, digamos que vaya papá, en lugar de las teclas y el gamepad, ahora voy a elegir voz, y solo puedo entrar al comando de voz y ver color cuando presiono Entrar. Ahora esto también se agrega. Y observa que aquí en la parte superior me dice que hay dos interacciones asignadas entre esta diapositiva, la diapositiva principal y la teoría del color. Uno es ese atajo de teclado que asignamos y ahora este comando de voz. Así que probemos esto. Voy a entrar en preestreno más que Gan. Y hay una pequeña nota en la parte inferior diciendo que que mantener presionada la barra espaciadora si quieres activar comandos de voz. Así que probemos esto. Color. Genial, XD. Entendido lo que quise decir. Muy bien, eso es brillante. Entonces eso es todo lo que quería mostrarte sobre la navegación. Para que puedas usar atajos de teclado, puedes usar tus comandos de voz. Y por supuesto, también puedes usar interacciones con pestañas como hemos visto antes. Ahora si esto no es lo suficientemente cool y quieres ser aún más avanzado, en realidad puedes crear un menú pegajoso. Se puede ver esto aquí en el lado derecho. Así que voy a configurar esto. Este es solo el gráfico predeterminado en este punto, pero lo voy a alinear algún lugar aquí del lado derecho. Sí, creo que eso va a funcionar y probablemente vamos mejor si nos quedamos en modo de diseño divertido ahora que tenemos todos los elementos que necesitamos para esto, y voy a convertir esto en un componente. Por lo que hay un atajo para esa clave de comando o control. Y observa cómo aparecen ahora los contornos verdes. Por lo que ahora podemos agregar un estado de hover para esto. Apenas añadamos eso ahí y luego simplemente moverlo hacia abajo. Cuando entro al área componente aquí y cambio entre los dos estados, nota que no pasa nada. Ahora. Esto se debe a que simplemente moviendo el componente en dos estados, realidad no está registrando su posición. Entonces lo que debes hacer es configurar primero tu posición de estado predeterminada. Sólo subamos aquí donde lo queríamos originalmente. Luego seleccione el estado de desplazamiento, y en este estado, haga doble clic sobre el componente, seleccione todo lo que sea Comando o Control J, luego solo seleccionará cosas dentro de él. Una vez más, recuerda que es como el modo de aislamiento en Illustrator. Y luego manteniendo presionada la tecla Shift, voy a arrastrarla un poco por ahí. Ahora cuando haga clic, vuelva a ello, ahora recordará estos dos estados. Entonces la culpa es cuando está afuera, y luego cuando pase el puntero, la pequeña flecha va a bajar. Ahora, hay otra característica brillante que voy a usar para este menú pegajoso. Y esa es la posición fija al desplazarse. Si enciendo esto y presiono Comando o Control Entrar para probar esto, podremos ver que en realidad se queda ahí en la parte superior. Entonces no importa dónde esté dentro de este tobogán, en este caso, siempre se va a quedar ahí. Pero lo que tenemos que asegurarnos es que también volvemos aquí y lo devolvemos al estado predeterminado. Esto es algo que debes recordar siempre cuando configuras componentes con animación o varios estados, es que si quieres que funcione correctamente, tienes que asegurarte de que lo devuelvas a estado predeterminado antes de probar su prototipo. Así que vamos a probarlo de nuevo. Ahora puedes ver que es sólo una flecha simple ahí en la parte superior. Y cuando me pongo sobre él, el menú baja. 5. Conexión de las diapositivas: Ahora sólo tenemos que configurar las interacciones. Así que cambiemos al modo prototipo. Selecciona esto, y ya estamos en estado de flotación, lo cual es perfecto. Por lo que voy a hacer doble clic dentro de ella. Ahí está el pequeño ícono y solo tenemos que arrastrarlo a esta otra diapositiva. Ahora, asegúrate de que esté configurado para tocar y no voz y siempre recordará tu última interacción usada. Lo mantendré en el grifo y todos los ajustes adicionales están bien. Entonces hagamos lo mismo con este otro ícono. Esto tiene que ir aquí. Entonces porque ya estamos en la teoría del color, tal vez este puede ser un gran alfabeto para eso. Voy a volver a Diseño y tal vez sólo reduzca la intensidad de esto al 50 por ciento, tal vez incluso menos 25. De acuerdo, así que ahora podemos probar esto. Si vuelvo al estado predeterminado y vuelvo a la vista previa, cuando vuelvo el puntero, sale y estos dos están funcionando. Vamos a pasar a la tipografía. Eso es genial. Una vez más, solo voy a volver a la teoría del color, probar el otro ícono que funciona perfectamente también. Entonces ahora lo que tenemos que hacer es copiar todo esto. Entonces selecciono el menú pegajoso que construimos, Comando o Control C, y luego Comando o Control V en este lado. Y yo haré lo mismo con esta diapositiva también. Ahí vas. Y recordará todos los ajustes. Entonces lo que tenemos que hacer ahora es entrar en modo prototipo, cambiar al estado de flotación. Y aquí sólo tenemos que asegurarnos de que tenga la conexión con la diapositiva de la teoría del color también. Así que sólo voy a hacer doble clic y asignar una introducción a esa diapositiva. Pero también volviendo al modo de diseño, me gustaría que esto fuera triste. Dos 100% de opacidad. Y en cambio voy a cambiar éste de la derecha y reducirlo a un 25 por ciento como antes. Ahora podemos volver a poner esto al estado predeterminado y probar las cosas. Entonces cuando pongo el cursor sobre él, surge y podemos ir a la teoría del color donde cuando surge, recuerda los ajustes específicos para esta diapositiva. Por lo que ahora podemos cambiar entre estos dos, lo cual funciona muy bien. Y entonces todavía tenemos que configurar la versión para la tipografía. Así que vamos a ir a ese tobogán. Voy a repetir los mismos pasos. Por lo que selecciono este componente y entraré en estado de hover. Y en este estado, voy a asegurarme de que este ícono aquí, por lo que doble clic sobre él, se reduzca en opacidad al veinticinco por ciento. Y entonces estos otros deben volver a ser un 100%. Y entonces solo tengo que hacer el prototipo ahora. Entonces para el color, tenemos que ir allí y la composición ya está ahí gracias a que fue un componente. Por lo que se ve un poco complicado, pero créeme, una vez que empieces a hacer esto, será de segunda naturaleza y podrás configurar las cosas muy rápida y fácilmente. Así que una vez más, solo probemos las cosas. Si vuelvo a la diapositiva principal, podemos llegar a lo que queramos. Vamos a la tipografía. Y oh sí, me olvidé de volver a poner esto al estado predeterminado. Entonces eso es importante. Volvemos, vamos al estado predeterminado, y así es. Así que ahora si acabamos de empezar aquí, puedo pasar el puntero. Sí, se ve bien. Podemos ir al color, podemos ir a Composición, y podemos volver al tipo y así sucesivamente y así sucesivamente. Por lo que ahora hemos construido varias formas diferentes de navegación. Obviamente tenemos las flechas traseras. Tenemos nuestro menú pegajoso. También tenemos comandos de voz e incluso atajos de teclado. 6. Componentes: Pero si esto todavía no es suficiente, si tienes dos pantallas disponibles cuando estás presentando, también puedes usar el real diseñando el fondo para la navegación. Así que sólo voy a hacer esta ventana un poco más pequeña. Y te mostraré que si hago clic aquí en el fondo en diapositivas específicas, digamos que hago clic en la diapositiva principal. Observe cuán rápido en mi presentación cambia a eso. Por lo que esto también se puede utilizar para moverse muy rápidamente entre diapositivas. Y por supuesto, en el fondo, todavía puedo acercar y alejar y encontrar la diapositiva relevante a la que quiero saltar. Entonces eso es casi como tu tabla de contenidos. Y esto realmente sólo funciona bien si tienes dos pantallas separadas. Si puedes usar el proyector como segunda pantalla y no está espejado a tu laptop, entonces te recomendaría también tal vez usar esta funcionalidad. Desde que hemos visto cómo trabajar con componentes, en realidad tengo un ejemplo genial aquí en esta diapositiva. Si acabo de desplazarse más hacia abajo que construí con componentes, puedes hacer mucho más que simplemente tener animaciones simples para botones y cosas así. En realidad puedes crear juegos interactivos o incluso concursos si quieres. Entonces para kerning, por ejemplo, aquí, creé un efecto de hover que puede mostrar antes y después así textos sin kerning y luego con kerning, lo mismo aquí en el lado derecho también. Entonces todo esto es, es otro componente con cuatro caracteres separados juntos en un grupo. Y luego simplemente, nuevamente tenemos para este componente un estado predeterminado y el estado de desplazamiento, y el color también cambia entre los dos estados. De igual manera a esto en la diapositiva de composición, si solo te muestro esto rápidamente, tenemos otro efecto de hover que puede mostrar cómo la jerarquía puede mejorar un diseño. Eso es antes. Y luego cuando pasamos el cursor sobre él, eso es después. Entonces esta es otra vez, otra gran manera de presentar cosas. Entonces, en lugar de cambiar entre diapositivas, solo puedes usar tu cursor, cursor sobre él, o incluso usar cosas como el comando de voz, Sheryl antes de presumir allí. Y de esa manera podrás interactuar con tus componentes. Como dije, usando estos métodos, en realidad se pueden construir concursos y juegos interactivos realmente geniales. Y si te gustaría que grabara otro video sobre eso, avísame en la sección de comentarios a continuación y me aseguraré de que lo cubriré en un próximo video. 7. Enlaces de anclaje: Pero antes de terminar, déjame mostrarte una cosa adicional. Es otra característica brillante llamada enlaces de anclaje en XD con la que puedes construir lo siguiente. Entonces aquí en la teoría del color, que tenemos una diapositiva larga y tranquila. Y lo que he hecho aquí es que tenemos estos pequeños iconos en la parte superior o imágenes. Y si hago clic en cortesía, está cerca de esa parte dentro de la diapositiva. Si hago clic en analógico, vamos a eso y así sucesivamente y así sucesivamente. Esto es otra vez, algo muy simple que se puede construir. Entonces digamos sólo si queremos usar esto como un enlace de anclaje, o tenemos que hacer es ir al prototipo y luego simplemente hacer clic en la flecha pequeña, no hacer click y arrastrar en este caso, solo click y a continuación, mantenga el gatillo en el grifo, pero cambie el tipo para desplazarse también. Hay montones de diferentes tipos, pero este es el que necesitamos en este caso. Y sólo hay que fijar el destino, que en este caso será la tríada, que creo que es éste, aunque no el color más fácil. Sí, esos son los colores triádicos. Y podemos comprobar esto cómo funciona esto. Entonces si entro en modo de vista previa y hago clic en tríada, desplázate una deuda recta. Ahora el único problema es que no hay espacio en la parte superior, por lo que va completamente a la primera línea de esto, por lo que no da ningún espacio por encima de él. Entonces para evitar ese problema, solo volveré al modo de diseño, seleccionó este párrafo. Y nota que estoy usando el formato de marco o formato de texto de área y no texto de punto. Prefiero trabajar con textos de área siempre. Y con esto, simplemente puedo añadir algunos espacios vacíos antes de estas líneas, posicionarlo donde quería. Y ahora cuando lo volvemos a probar y vamos a probarlo, se puede ver ese espacio vacío por encima de él. Es casi como un margen superior que construyes en tu enlace de anclaje. Y eso es todo lo que quería mostrarte en este video. Pero créeme, literalmente estamos rayando la superficie de lo que se puede hacer con XD cuando se trata de presentaciones. Y nunca he sido un gran fan de PowerPoint. No obstante, también es buena herramienta. Siento que XD está mucho más cerca de mi corazón porque puedo trabajar exactamente de la misma manera que trabajaría para prototipos móviles y usar las mismas herramientas y configuraciones, pero por presentar las cosas en un manera mucho más atractiva e interactiva. 8. Conclusión: Bien hecho para terminar este curso. Espero que te hayas divertido tanto pasándolo como yo lo tuve grabando. Y claro, no te olvides del proyecto de clase. Porque recuerda, la práctica hace la perfección. No puedo esperar a ver tu trabajo, así que asegúrate de presentarlo. Y en caso de que te guste este curso, y te gustaría aprender más de mí, entonces hay muchos otros cursos que puedes encontrar aquí. Ve y compruébalos ya. No puedo esperar a conocerte en la siguiente.