Adobe XD - Diseño de experiencias y creación de prototipos

Bienvenido al gran tutorial de Adobe XD. En esta introducción, me presento como su entrenador.

¿Cuál es la diferencia entre experiencia de usuario (UX) e interfaz de usuario (UI)? ¿Qué tipos de diseño de niveles existen y para qué es mejor usar Adobe XD? La respuesta está aquí.

Abre Adobe XD por primera vez y ya tienes numerosas opciones entre las que elegir. Este vídeo ofrece un breve calentamiento para Adobe XD, una visión general del programa y una introducción a la pantalla de inicio de XD y sus funciones.

Las mesas de trabajo (artboards) se pueden crear en Adobe XD para diferentes resoluciones y dispositivos en un abrir y cerrar de ojos. En este tutorial descubrirás qué peculiaridades hay que tener en cuenta.

Las distintas configuraciones de la rejilla nos facilitan la disposición ordenada de los elementos y objetos entre sí. Para ello, dispone de una cuadrícula rectangular y un diseño de columnas para columnas.

Google, Apple y Microsoft ofrecen prácticos kits de interfaz de usuario para empezar rápidamente. Estos artboards ya hechos nos ayudan enormemente en el diseño posterior de prototipos para distintas plataformas.

Los colores juegan un papel muy importante en casi todos los diseños. En este vídeo aprenderás cómo trabajar con colores en Adobe XD, cómo importarlos y qué fuentes prácticas existen para recopilar armonías de color ya hechas.

Existen numerosos métodos para importar activos como imágenes, archivos, documentos de texto, etc. a Adobe XD. En este vídeo, presento algunos métodos. Sin embargo, como XD forma parte de Creative Cloud de Adobe, por supuesto es extremadamente cómodo y fácil trabajar con las bibliotecas.

El tema de las fuentes y la tipografía es un elemento fundamental en nuestro viaje por Adobe XD. En este vídeo aprenderás a utilizar las fuentes de forma correcta y eficaz.

Las formas se pueden importar muy fácilmente a Adobe XD o crearlas uno mismo con la herramienta de trazado. Si un objeto se utiliza más de dos veces, también es aconsejable añadirlo a la lista de activos como símbolo.

Diseñar tiene mucho que ver con la inspiración y las aportaciones del exterior. Esto incluye tanto el entorno analógico como el mundo digital. Aquí presento algunos portales que me gusta visitar.

Empecemos con un pequeño y fino proyecto práctico. En este tutorial y los próximos dos vídeos, vamos a crear un one-pager.

La rejilla de repetición es una de las características más importantes de Adobe XD. Nos ayuda a escalar grupos de objetos una vez creados y a rellenarlos individualmente.

En la última parte del diseño del one-pager, nos ocuparemos del pie de página y de un área para referencias. Aquí utilizaremos prácticos archivos SVG y conoceremos otras técnicas de diseño.

En esta lección, examinaremos la cuestión de cómo pueden conectarse interactivamente las distintas mesas de trabajo. Aclararemos las opciones para elegir la transición y qué otras modificaciones podemos hacer en el prototipo.

Todo sitio web necesita un punto de anclaje para la navegación. En este vídeo, nos centramos exclusivamente en crear una navegación principal en la zona de cabecera y la conexión interactiva entre ellas.

Esta formación se basa en el capítulo anterior y muestra cómo adaptamos el menú de escritorio que creamos para un smartphone. El icono de la hamburguesa y los elementos del menú se mejoran con interesantes animaciones.

Una de las herramientas más poderosas para la mejor visualización posible es la función Auto-Animate de Adobe XD. En este ejemplo explico cómo adaptar el principio de la función Auto-Animate a cualquier escenario imaginable.

En los siguientes vídeos aprenderemos a crear un prototipo para una tienda online. Aprenderemos formas de crear prototipos visualmente atractivos y de alta fidelidad a partir de simples artboards. Parte 1 de 4.

En la segunda parte, nos ocupamos de la presentación de las descripciones detalladas, añadimos controles deslizantes para las imágenes y vinculamos las mesas de trabajo entre sí.

La función de superposición para la creación de prototipos interactivos nos ofrece interesantes posibilidades para mostrar y ocultar información directamente.

Un buen diseño de usabilidad siempre ofrece al usuario información sobre el estado del sistema. Incorporaremos este feedback en una bonita animación al final del proyecto.

Adobe XD también domina la interacción mediante comandos de voz en su proceso de creación de prototipos. Así, los comandos verbales conducen a acciones del sistema que podemos definir nosotros mismos. Te mostraré cómo funciona en este tutorial.

Cuando se colabora con otros departamentos y personas implicadas, el comentario de audio es una función muy valiosa para presentar el estado del proyecto de forma comprensible.

Probar un prototipo en un entorno virtual es una cosa, pero presentarlo en directo en un dispositivo final es otra muy distinta. Y eso es exactamente lo que Adobe XD hace que sea fácil de hacer, ya sea a través de USB o a través de una conexión Creative Cloud. Para ello, utilizamos la aplicación Adobe XD de la tienda de aplicaciones.

Durante la colaboración, es esencial intercambiar información sobre el estado del proyecto con otros departamentos. El prototipo puede publicarse mediante la función de publicación para que los revisores, desarrolladores y clientes puedan hacerse una idea visual del proyecto. En este punto, comienza el ciclo de procesamiento entre los departamentos especializados para llevar el proyecto a su madurez.

Adobe XD sigue siendo un programa muy joven y cambia cada vez más con cada actualización. En este vídeo explico qué nuevas funciones se han añadido en el salto de la versión 18 a la 19, cómo se utilizan y en qué situaciones son útiles. Entre ellas están: Componentes en lugar de símbolos, redimensionamiento responsivo, guías, herramienta de polígonos, más opciones para el formato de texto y mucho más. ¡Diviértase!