Que es y como funciona el nuevo Adobe Experience Design o Adobe XD

Cuando se crea un diseño multimedia nuestra mente de diseñadores impetuosos y creativos comienza a pensar en la aplicación de millones de plataformas online: webs, tablets, móviles, apps,etc en todas las visualizaciones posibles y en la usabilidad del usuario en cada una, porque dependiendo de donde se vea la información web el usuario actuará diferente. No es lo mismo ver una app en medio de la calle donde buscas información rápida, casi instantánea, pasando las pantalla con el dedo que una web en una pantalla enorme donde te puedes entretener leyendo algo más. Es aquí donde el diseño UX es fundamental para hacer accesible y complacer al usuario en su objetivo, gracias a Adobe Experience Design podrás hacer prototipos de la navegación del usuario con un aspecto muy profesional que ahorrará tiempo y energía. Además de momento es gratuito en el siguiente link.

Adobe XD ayuda a planificar el diseño UX de navegación y tiene la gran ventaja de ser del grupo de Adobe, de forma que permite compartir y crear elementos vectoriales, fotográficos y tipografías que fácilmente podrás modificar con Adobe Illustrator y Adobe Photoshop, las herramientas serán muy familiares y la organización de elementos tipo jerarquía de capas. Adobe pone a disposición del diseñador herramientas familiares y posibilidades profesionales para hacer prototipos rápidos de navegación que convencerá y verá como reales cualquier cliente potencial, ahorrando programación previa y con un diseño avanzado, una placer para cualquier diseñador multimedia.

Funciones de Adobe XD (Adobe Experience Design)

• Inicio: al inicar un nuevo proyecto en Adobe XD puedes indicar qué tipo de formato o tamaño quieres empezar a trabajar, se dan varias opciones: iphone, ipad, tablet o custom (donde puedes personalizar los tamaños concretos que deseas), también puedes ver una demostración en la demo donde hay un modelo aplicado, el que se expone en éste post.

• Visualizaciones: para trabajar en Adobe XD tienes dos tipos de visualización: la de diseño y la de prototipo, las dos opciones las puedes activar en la parte superior derecha del archivo abierto. En la de diseño puedes insertar elementos vectoriales de navegación como iconos, símbolos de home, flechas,etc, además de las imágenes y textos. Mientras que en la pantalla de prototipo se crean los flujos de navegación.

• Herramientas y paneles: Si ya conoces otros programas de Adobe verás muy familiar la distribución de las herramientas y opciones en la interface, en la parte superior el menú general, en la columna izquierda las herramientas y en la columna de la derecha los paneles ampliados de las selecciones, lo único que cambia es la opción de Capas que es más parecido a Adobe Acrobat Professional situado debajo de las herramientas, después el icono de Assets o Estilos utilizados.

Empezando por las herramientas , verás que en éste caso más simplificadas que en otros programas de Adobe, aparecen las básicas vectoriales como elementos geométricos tipo rectángulo, círculo, línea, pluma y texto. Después la herramienta de nueva página o mesa de trabajo, lupa y finalmente estilos y capas. Hay que indicar que las capas se agrupan en carpetas y tienen la misma movilidad organizativa de jerarquía visual que Photoshop.

Cada vez que crees un elemento podrás modificar su aspecto, con las opciones de los paneles de la derecha. Aplicando cambios de situación en el plano xy, tamaño, opacidad,color en marco e interior, etc. Como en Adobe Indesign y Adobe Illustrator se trabaja vectorialmente con contenedores, así que podrás rotar, escalar, duplicar ,etc cada elemento creado al activarlo y aparecer sus nodos activos.

Se ha incorporado las opciones de Buscatrazos para unificar elementos vectoriales sumándolos, restando, seleccionar intersección, etc. Los que trabajamos con elementos vectoriales agradecemos estas opciones que te ayudarán a crear imágenes impactantes en los prototipos sin pasar por Adobe Illustrator o Adobe Indesign.

• Importar elementos: Al igual que otros programa de Adobe puedes incluir elementos de imagen tipo .png, .jpg, .gif, etc. Para importar elementos vectoriales puedes copiarlos directamente de programas vectoriales como Adobe Illustrator y pegarlo en Adobe Experience Design. Los textos de la misma forma que los vectoriales se pueden copiar y pegar, aprovecha que se pueden duplicar con la tecla ALT arrastrándolo para mantener los mismos estilos.

• Textos: el editor es básico pero suficiente para textos cortos, aunque fácilmente se puede editar el espacio interlineal y entre caracteres, se pueden crear líneas y diferentes efectos de color con los contornos, han logrado plantear las herramientas básicas más útiles.

• Crear navegación en prototipo: La gran ventaja de éste programa es crear una navegación fluida con solo arrastrar de cada elemento el hilo o link que activará al hacer un clic en ése elemento. Se pueden hacer en lo elementos vectoriales, imágenes o textos, pudiendo especificar si es en una palabra concreta o en un elemento global. Se crean verdaderos mapas con sin fin de posibilidades, lo importante es saber lo que el usuario necesita y espera de cada elemento, su objetivo, para hacer su paseo por la web o app lo más fluida y fácil posible. Al crear links nuevos podrás escoger formas de movimiento y transición en la ventana extra. Intenta no abusar de las transiciones pero crea dinamismo.

• Visualización del prototipo UX: En el interface del programa puedes visualizar y exportar fácilmente todo el prototipo a la nube, en forma de web si tienes una cuenta de Adobe Cloud. Puedes visualizar el prototipo de tres formas posible: en el móvil si te descargas la app, en el mismo programa Adobe XD en el triángulo de play y exportandolo. Se puede exportar de diferentes formas: estáticas (imágenes PNG, PDF,etc) o animadas con SVG o web real donde se tenga un experiencia instantánea de la navegación.

Una vez que pruebes Adobe Experience Design ya no dejarás de querer probar y jugar con la navegación, por fin Adobe a conseguido un programa agradable y fácil para diseñadores que trabajan en productos online. Es tan tan tentador que solo te apetecerá trabajar con él. ¿Conocías versiones de Adobe Experience Design CC anteriores? ¿Sabías que puedes diseñar en Adobe XD y exportar después a PDF y html, sin tener que diseñar una web en Photoshop? ¡Házmelo saber en tus comentarios!

Curso relacionado: Curso Superior de Diseño Gráfico Multimedia