Adobe XD: Diseño de experiencias

Idioma: Alemán

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

Adobe XD hace que tus diseños de aplicaciones y sitios web sean interactivos, ¡sin necesidad de codificación! Convierta sus ideas en prototipos tangibles que podrá comentar inmediatamente, compartir con otras personas y seguir debatiendo. En este tutorial de cinco horas de Adobe XD, impartido por Stefan Riedl, aprenderás a utilizar el software para el diseño de experiencias y la creación de prototipos, paso a paso y con facilidad.

De la idea al prototipo: cómo crear diseños interactivos con Adobe XD
Para empezar fácilmente: aprende a utilizar artboards, colores, kits de interfaz de usuario y mucho más.
Prototipado y wireframing: cómo combinar tus artboards en una experiencia de usuario
Aplicación práctica: Ponga en práctica lo aprendido mediante dos proyectos de ejemplo
Para una colaboración fluida: cómo comentar y compartir tus prototipos con los demás
Trabajar con Adobe XD, resumido por Stefan Riedl en 5 horas orientadas a los objetivos
Bonificación: Todo lo que necesitas saber sobre las nuevas funciones resultantes de la actualización a Adobe XD 19

¡Muestra cómo deberían funcionar tu aplicación y tu página web! - Aprende a usar Adobe XD con el tutorial, ¡y tus diseños serán clicables de inmediato!

detalles

Puede utilizarse con:
Contenido: 5 h Formación en vídeo
Licencia: privada y comercial Derechos de uso

Categorías

Diseño (ilustración, maquetación e impresión)

Creado con amor por:

Stefan Riedl

Ejemplos de aplicación

Abrir galería

Ejemplo: Aprenda a crear diseños de interfaz de usuario y a vincularlos a prototipos interactivos.
Abrir galería

Ejemplo: Aprenda a crear interfaces de usuario para pantallas de smartphone y vistas de escritorio en Adobe XD.
Abrir galería

Ejemplo: Familiarícese con la aplicación específica de Adobe XD en dos proyectos de ejemplo.

Tutorial de Adobe XD: Diseño de experiencia y prototipado.

Gratuito

Adobe XD: 01 | Intro

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

Adobe XD: 02 | UI & UX y diseños de diferentes niveles

¿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í.

Adobe XD: 03 | Introducción, pantalla de inicio y funciones disponibles

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.

Adobe XD: 04 | Crear artboards con diferentes resoluciones

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.

Adobe XD: 05 | Configuración de rejilla para columnas y rejillas rectangulares

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.

Adobe XD: 06 | Preajustes útiles con kits de interfaz de usuario

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.

Adobe XD: 07 | Trabajar con colores

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.

Adobe XD: 08 | Importación de Activos

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.

Adobe XD: 09 | Fuentes y tipografía

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.

Adobe XD: 10 | Formas y Símbolos

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.

Adobe XD: 11 | Inspiración para diseñadores

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.

Adobe XD: 12 | Crear Onepager, Parte 1 - Aprender técnicas

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.

Adobe XD: 13 | Crear Onepager, Parte 2 - Rejilla de Repetición

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.

Adobe XD: 14 | Crear Onepager, Parte 3 - Referencias y pie de página

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.

Adobe XD: 15 | Conceptos básicos en prototipado y wireframing

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.

Adobe XD: 16 | Construir menú para escritorios de forma interactiva

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.

Adobe XD: 17 | Construir menú para smartphones de forma interactiva

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.

Adobe XD: 18 | La función Auto-Animate para prototipos interactivos

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.

Adobe XD: 19 | Creación de un prototipo de alta fidelidad, parte 1 - tienda online para móviles

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.

Adobe XD: 20 | Creación de un prototipo de alta fidelidad, Parte 2 - Detalles del Producto

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í.

Adobe XD: 21 | Creación de un prototipo de alta fidelidad, Parte 3 - Función de superposición

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

Adobe XD: 22 | Creación de un prototipo de alta fidelidad, Parte 4 - Animación final

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: 23 | Control por voz

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.

Adobe XD: 24 | Anotación de audio en vistas previas

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.

Tutorial de Adobe XD: 25 | Vista previa en dispositivos finales a través de la aplicación

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.

Adobe XD: 26 | Publicar proyecto con especificaciones de diseño

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.

Novedades en Adobe XD 19.

Adobe XD: 27 | Nuevas funciones en la versión 19

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!

Detalles del contenido

Utiliza Adobe XD para que se entiendan tus diseños

Comienza el tutorial y déjate guiar inmediatamente hacia tus primeros diseños interactivos de Adobe XD en cinco claras horas. Tu formador Stefan Riedl tiene en la cabeza la interfaz de usuario, la gama de funciones y el flujo de trabajo para utilizar el software, y ha preparado todo lo que necesitas saber en un formato compacto.

Por eso este tutorial de Adobe XD es perfecto para ti.

Tanto si eres nuevo en UX y UI como si no, el tutorial de Adobe XD está dirigido tanto a principiantes como a novatos . Los objetivos del tutorial son claros: En primer lugar, conocer Adobe XD. En segundo lugar, aprender los fundamentos del diseño de experiencias, wireframing y prototipado . Y en tercer lugar, adquirir los conocimientos y habilidades necesarios para presentar tus diseños de forma interactiva en el futuro:

Ideal para cambiar a Adobe XD: Utiliza el tutorial para cambiar rápidamente de un programa de UX alternativo a Adobe XD.
Perfecto para iniciarse en Adobe XD: Da tus primeros pasos en el diseño de experiencias y crea tus propias interfaces de usuario de inmediato.
Mejor colaboración en equipo: Aprende a compartir tus prototipos con otras personas utilizando Adobe XD. Una gran ventaja para tu colaboración con programadores y desarrolladores, por ejemplo.
Utiliza todo el potencial de Creative Cloud: Al igual que Adobe Dimension CC, Adobe XD es un programa relativamente nuevo. ¡Pruébalo y maximiza las posibilidades de tu suscripción a CC!

Los contenidos: Diseño de interfaces y experiencias, wireframing y prototipado

El tutorial de Adobe XD comienza con los conceptos básicos, te lleva a las aplicaciones prácticas y te deja con las habilidades que necesitas para crear tus propios diseños interactivos de aplicaciones y sitios web en el futuro.

Al principio, conocerás Adobe XD de un vistazo. Echa un vistazo a la interfaz de usuario junto con tu formador y descubre lo que es importante a la hora de trabajar con mesas de trabajo, cuadrículas, colores, activos, formas y los kits de interfaz de usuario disponibles. Estos son los elementos a partir de los cuales crearás tus diseños. Práctica: Stefan Riedl crea el diseño de un one-pager en el tutorial, donde se presentan de nuevo todos los aspectos básicos.

A continuación, abordarás el segundo tema principal de Adobe XD: la vinculación de tus diseños. Con la ayuda de wireframing , se especifica lo que debe suceder en la aplicación o en el sitio web cuando los usuarios pulsan un botón, por ejemplo. Incluye animaciones dinámicas. Esta sección es especialmente importante para que los clientes comprendan rápidamente el aspecto real del flujo de una aplicación. Tu formador profundizará en el diseño de menús para pantallas de smartphone y para la vista de escritorio y completará la sección con la creación parcial de un prototipo de alta fidelidad utilizando un ejemplo de tienda.

Por último, pondrás en práctica las ventajas reales de Adobe XD : Primero te visualizas a ti mismo y luego a los demás cómo funciona tu diseño, cómo se comporta en interacción con el usuario. Crea una vista previa con tus propios comentarios. O bien: comparte tu diseño UX con los participantes en el proyecto para que puedan probar y comentar tu prototipo ellos mismos . También puedes ver y revisar tu prototipo en directo en tu smartphone o tableta para tener una sensación muy realista de la aplicación en un entorno natural.