Por Matt Rae
¿Q
ué es Adobe XD? Adobe XD, diseñado desde el principio para conseguir un rendimiento superior, te ayuda a crear prototipos casi idénticos a la versión real, para que puedas comunicar tu idea de diseño y mantener la alineación del equipo de forma eficaz. Adobe XD es una plataforma de diseño de experiencias basada en vectores poderoso y fácil de usar que ofrece a los equipos herramientas necesarias para crear las mejores experiencias del mundo de forma colaborativa. XD está disponible para sistemas Mac y Windows e integra a los miembros del equipo, independientemente del lugar desde donde estén trabajando, gracias a la compatibilidad con plataformas múltiples.
Adobe XD ofrece funciones y flujos de trabajo que ahorran tiempo y te permiten centrarte en el proceso creativo, desde la concepción hasta la entrega de recursos. Los diseñadores y los equipos de diseño de todo el mundo emplean Adobe XD para colaborar en el proceso de diseño, desde la concepción y el diseño de mallas metálicas hasta la entrega a los desarrolladores. Los integrantes del equipo pueden compartir vínculos a diseños y especificaciones, así como ver y dejar opiniones de forma sencilla, directamente a través de la sección de comentarios en el explorador.
Diseña a la velocidad del pensamiento
Tanto si te encuentras en las etapas iniciales del planteamiento de una idea como si estás dando los toques finales a diseños listos para producción, Adobe XD viene equipado con funciones que te ayudan a articular estas ideas de manera eficaz y eficiente.
Componentes y estados
Créalos una vez y empléalos en todas partes. Los componentes de Adobe XD simplifican el proceso de reutilizar elementos comunes como botones y navegación, y los mantienen sincronizados durante todo el diseño. Una vez que se creó un componente principal, cualquier cambio que se realice en el elemento principal aparecerá automáticamente en todas las instancias.
Los estados de componentes permiten crear variaciones en un solo componente y agregar interacciones entre los estados que se aplican a todas las instancias. Emplea los estados de componentes para crear interacciones de paso del puntero, clic o carga en un botón, o para agregar efectos de conmutación a botones de opción y conmutadores. Los estados también te ayudan a limpiar el lienzo, limitando el número de mesas de trabajo necesarias para lograr los mismos efectos y flujos.
Pilas y Relleno
Si estás trabajando con contenido dinámico como, por ejemplo, variando las etiquetas de los botones, reorganizando secciones de contenido o explorando simplemente las variaciones de un diseño modal, Pilas y Relleno te permitirán ahorrar mucho tiempo.
El relleno es una función de diseño según el contenido que mantiene el espaciado entre el contenido de un grupo y los límites exteriores o el fondo. Con el relleno activado, al cambiar la etiqueta de un botón o al agregar contenido a un grupo, el espaciado exterior de ese grupo se mantiene coherente. ¡Se acabaron los ajustes de pixeles molestos cada vez que se actualiza una etiqueta de llamada a la acción!
Las pilas se basan en el relleno y permiten reorganizar los grupos de contenido simplemente haciendo clic y arrastrando. ¿Deseas agregar más elementos al grupo? El espaciado entre elementos se mantiene automáticamente y se puede ajustar de forma individual o global en toda la pila.
Cuadrícula de repetición
La creación de contenido repetido, como un carrusel de tarjetas, una tabla de datos o una galería de fotografías, a menudo puede absorber tiempo en el proceso de diseño. A medida que se produce la iteración, actualizar ese contenido y mantener las copias sincronizadas puede llevar un tiempo valioso que sería mejor dedicar a otra cosa.
La cuadrícula de repetición está aquí para ayudar. Al hacer clic en un botón, puedes automatizar el tedioso proceso de repetición de contenido. Una vez habilitado, cualquier objeto o grupo de objetos se puede repetir horizontal y verticalmente. El texto y las imágenes se pueden modificar arrastrando imágenes y archivos de texto a la cuadrícula de repetición, lo que facilita la transición de la malla metálica a diseños de máxima fidelidad.
Transformaciones 3D
Agrega perspectiva a tus diseños fácilmente con transformaciones 3D. La creación de experiencias para realidad virtual y aumentada, sistemas de infoentretenimiento de automóvil o la simple exhibición de trabajo de formas atractivas es aún más factible gracias a los intuitivos controles espaciales y la sencillez de las transformaciones 3D.
Bibliotecas compartibles
Hacer que los activos estén disponibles en un equipo o en varios equipos no debería ser un obstáculo. Con las bibliotecas de Adobe XD, puedes aprovechar la potencia de Bibliotecas Creative Cloud con la posibilidad de compartir un sistema de diseño en toda la organización que recibe actualizaciones a medida que se realizan cambios en los colores, estilos de marca o componentes. Las bibliotecas facilitan más que nunca la alineación entre disciplinas y garantizan una experiencia coherente para tus clientes.
Redimensionado interactivo
El mundo es dinámico, al igual que la tecnología para la que diseñamos. Desde relojes inteligentes, hasta tabletas y televisores, el software que diseñamos viene en todas las formas y tamaños. El redimensionado interactivo comprende tus diseños de forma inteligente, para que diseñar para un nuevo formato sea tan sencillo como arrastrar hasta que encaje.
Complementos
Los complementos son fantásticos para ampliar la potencia de Adobe XD y adaptarla a tus necesidades. Si necesitas un acceso rápido a conjuntos de iconos o imágenes de archivo, quieres rellenar tus diseños con datos reales y copiar, o deseas cerciorarte de que trabajas con combinaciones de color accesibles, Adobe tiene un complemento que se adapta a tus necesidades.
Puedes crear prototipos interactivos sofisticados
Presentar prototipos que se asemejen a la realidad no tiene por qué ser un desafío. Las funciones de Adobe XD, centradas en la creación de prototipos estables y realistas, permiten crear prototipos rápidos y fáciles que parecen productos terminados.
Animación automática
Animación automática libera la inteligencia integrada en Adobe XD y te proporciona las herramientas para introducir movimiento y microinteracciones en tus diseños. Da vida a un diseño estático, agrega realismo a las pruebas de usuario y deja comentarios visuales en los flujos de usuarios con Animación automática.
Tanto si agregas un estado de paso del puntero a un botón como si animas una secuencia de carga de panel, los controles de Animación automática son intuitivos a la vez que eficaces para articular la visión de diseño.
Grupos de desplazamiento
Desde galerías de imágenes horizontales hasta gráficos, tablas y mapas, los grupos de desplazamiento te proporcionan un nivel de interacción completamente nuevo en los prototipos de Adobe XD. Agrega rápidamente secciones con desplazamiento, ya sea horizontal o vertical, y da vida a mapas y otras áreas desplazables con la opción de desplazamiento horizontal y vertical. Tanto si estás diseñando la próxima aplicación social que se convertirá en todo un fenómeno, como si estás creando paneles de análisis estables, los grupos de desplazamiento te ayudarán a hacerlo realidad.
Vínculos de anclaje
Puedes crear transiciones perfectas y navegación de una sola página con vínculos de anclaje. Ahora puedes navegar a las secciones y elementos de tu mesa de trabajo, lo que lo convierte a una experiencia similar a navegar por una aplicación de una sola página.
Activadores e entradas
La participación ocurre de diferentes formas en la actualidad, desde las entradas tradicionales hasta las interfaces táctiles y de voz, por lo que los diseños deben adaptarse y considerar diversos tipos de interacción. Gracias a la compatibilidad con diferentes tipos de activadores y entradas, Adobe XD ayuda a capturar cómo interactúan los usuarios con el prototipo. Desde un simple toque o arrastre, hasta activadores más avanzados de voz, controladores de mando de juego a través de Bluetooth o pulsaciones de teclado, lo diseñarás todo, desde aplicaciones móviles hasta juegos de video.
Prototipos para voz
Como la primera plataforma de diseño de experiencias que ofrece funcionalidad para la interacción de voz, Adobe XD te permite crear experiencias de voz enriquecidas para diseñar asistentes de voz, aplicaciones accesibles y mucho más. En Adobe XD, se puede diseñar un flujo de usuario completo de solo audio, empleando los comandos de voz combinados con la reproducción de voz y audio. Si estás creando una habilidad o un flujo de trabajo para Alexa o Google Assistant, estos prototipos se pueden previsualizar directamente en un dispositivo compatible.
Vista previa en tiempo real
Es muy importante comprender cómo quedará el diseño en el dispositivo de destino, pero no siempre tendrás un dispositivo a tu disposición. Adobe XD ofrece dos poderosas funciones de diseño con vistas previas en tiempo real. Si estás diseñando en un smartphone o tableta, puedes conectar el dispositivo al equipo y obtener una vista previa en tiempo. Si no dispones del dispositivo para el que estás realizando un diseño, puedes emplear la ventana de vista previa de Adobe XD para generar vistas previas en tiempo real, a medida que las diseñas.
Comparte lo que necesitas
La obtención y recopilación de comentarios es una parte fundamental del proceso iterativo de diseño. Si compartes información con un equipo ejecutivo, realizas pruebas de usuario o preparas tu trabajo para el desarrollo, Adobe XD viene equipado con herramientas que harán tu vida más fácil y te permitirán comunicarte de forma más eficaz.
Enlaces de uso compartido personalizados
Gracias a varios tipos de uso compartido preconfigurados entre los que elegir, puedes preparar rápidamente el archivo para pruebas de usuario en pantalla completa, una revisión de diseño o para su entrega a equipos de desarrollo compartiendo especificaciones de diseño desde el modo de uso compartido. Cada vista muestra exactamente lo que necesitas, ya sean comentarios, una vista en pantalla completa para las pruebas de usuario o especificaciones, variables y activos durante la entrega a un equipo de desarrollo.
Comentarios, chinchetas y menciones
Mantente informado con comentarios en los vínculos de uso compartido Revisión de diseño y Desarrollo. Mientras que los integrantes del equipo revisan los diseños, pueden dejar y anclar comentarios, y recibirás una notificación a través de Creative Cloud sobre la conversación en curso, lo cual es ideal para revisiones asincrónicas y para documentar los comentarios.
La función de mención te permite a ti y a tus colegas captar la atención de otras personas al mencionarlas en la sección Comentarios para los elementos que requieren una respuesta más rápida. En conjunto, estas funciones te ayudan a documentar los comentarios y hacer un seguimiento de estos. Marca los comentarios como resueltos o contesta en línea para almacenarlo todo en un solo lugar.
Vínculos únicos
Lo que compartas puede cambiar en función de con quién compartes el contenido. No querrás que tus usuarios de prueba vean el trabajo preliminar, por lo que cada vínculo que crees será único y tendrá su propio título y licencias de uso compartido. Puedes actualizar este vínculo cuando consideres oportuno y no tendrás que preocuparte de que el trabajo se vea hasta que hagas clic en “Actualizar”.
Historial del documento
A veces es necesario volver a una versión anterior de un diseño o a exploraciones anteriores. Con el Historial del documento en los documentos en la nube de Adobe XD, hacer un viaje en el tiempo está a un solo clic. Marca las versiones para almacenarlas en el historial para siempre o examinar los últimos almacenados para encontrar lo que buscas. Podrás abrir la versión anterior con un solo clic.
¿Para qué se emplea Adobe XD?
Adobe XD está diseñado y creado teniendo en cuenta las experiencias sitio web y celulares, pero sus usos van mucho más allá. A nivel global, los equipos de diseño emplean las poderosas funciones de Adobe XD para su proceso de diseño de experiencia completa y mucho más.
Pizarrón electrónica y flujos de usuario
Adobe XD dispone de varios complementos, una interfaz sencilla y se adapta bien a sesiones de intercambio de ideas presenciales y en remoto. Mantén tus ideas en el mismo archivo que los diseños y colabora con ellos. Emplea herramientas como el complemento de pizarrón electrónica para generar flujos de usuario y plantillas de taller para mantener tu equipo alineado.
Diseño de mallas metálicas
Atrás quedan los días en los que la pizarrón electrónica y el diseño de máxima fidelidad debían hacerse en aplicaciones independientes. Con los kits de interfaz de usuario de malla metálica, puedes crear rápidamente mallas metálicas interactivas para probar tu diseño y recorrer los flujos de usuario. Si creas componentes durante el proceso, lo único que debes hacer cuando estés listo para crear el diseño es actualizar los componentes.
Diseño de interfaz de usuario
Adobe XD proporciona a los diseñadores de interfaz de usuario las herramientas que necesitan para realizar su trabajo lo mejor posible, desde la creación de detalles delicados de la interfaz, como la iconografía y la tipografía, hasta la búsqueda del equilibrio de diseño perfecto. Con las integraciones con otras aplicaciones de Creative Cloud, como Photoshop e Illustrator, los activos se pueden arrastrar y colocar fácilmente en Adobe XD. Emplea las guías integradas de XD para conseguir precisión de colocación y ajustar el diseño a la perfección.
Diseño de interacción y animación
Crear prototipos que representen la apariencia de un producto real es fundamental para crear productos asombrosos. Equipos como Microsoft emplean Adobe XD para crear prototipos y probar sus experiencias con usuarios reales con el objeto de encontrar y corregir puntos de fricción antes de la creación.
Diseño de experiencia del usuario
Adobe XD facilita el diseño de las experiencias del usuario. Si estás diseñando mallas metálicas o conectando recursos de alta fidelidad con voz, puedes iterar rápidamente, probar interacciones y flujos, y conocer mejor los puntos de fricción para fallar más rápido y tener éxito antes. Descubre cómo WestJet transformó sus esfuerzos de diseño de experiencia con la ayuda de Adobe XD.
Prototipos
Pasa de un diseño estático a un prototipo de apariencia real directamente desde Adobe XD. Con funciones enriquecidas como Animación automática y Voz, se requiere menos esfuerzo para crear un diseño de prototipo con el que los usuarios puedan navegar e interactuar, lo que mejora las experiencias de prueba de los usuarios.
Entrega a desarrolladores
Los modos de uso compartido de Adobe XD te permiten colaborar con los equipos de desarrollo desde el primer día, desde los pasos iniciales hasta la concepción. Si empleas una grabación de voz en off para guiar tu diseño o compartes especificaciones para el desarrollo, XD te mantiene estrechamente conectado.
Colaboración en equipo
Los archivos en la nube y la coedición en tiempo real hacen que trabajar en Adobe XD en equipo sea muy sencillo. Tanto si estás creando un lenguaje de diseño para emplearlo en toda tu organización, como si estás explorando conceptos de próxima generación para tu producto, la mejor opción es diseñar de forma colaborativa.
Administración de sistemas de diseño
La administración de activos compartidos como Sistemas de diseño se agiliza con Bibliotecas en Adobe XD. Almacénalo todo en un solo lugar, desde activos de marca y materiales de marketing hasta componentes de interfaz y bibliotecas de patrones. Gestiona quién tiene acceso a la edición y envía actualizaciones a los activos para que los equipos siempre tengan los últimos recursos al alcance de la mano.
¿Qué se puede crear con Adobe XD?
Desde la concepción hasta el diseño final, los equipos y las personas crean experiencias asombrosas con Adobe XD. Aunque muchos equipos emplean Adobe XD para crear sus experiencias de diseño sitio web y celular, XD se emplea para mucho más. A continuación se muestran algunas de las experiencias que se crearon en Adobe XD.
Diseño de sitios web
El diseño de sitios web y Adobe XD combinan a la perfección, desde la arquitectura de la información hasta el diseño y la creación de prototipos. Al emplear funciones de productividad como Pilas, Relleno y Cuadrícula de repetición, los conceptos y las ideas se pueden combinar fácilmente para articular los patrones de navegación, el desplazamiento y mucho más para el sitio web.
Diseño de aplicaciones
El diseño de aplicaciones para teléfonos móviles, aplicaciones de escritorio o incluso aplicaciones sitio web implica interacciones dinámicas, diversos patrones de navegación y una gama de tamaños de pantalla a los que adaptarse. Gracias a funciones como Redimensionado interactivo, los tamaños de mesa de trabajo generados previamente para dispositivos típicos y las funciones de creación de prototipos como Animación automática y los activadores de arrastre, Adobe XD facilita la creación de experiencias de aplicaciones para tu próximo proyecto.
Diseño del asistente de voz
Poderosos controles de voz, combinados con integraciones con Amazon Alexa y Google Assistant, que te permiten obtener una vista previa de experiencias, convierten a Adobe XD en un colega esencial para quienes diseñan asistentes o habilidades virtuales que acompañan productos y servicios. Observa cómo VERSA está poniendo en práctica los Prototipos por voz creando experiencias para voz y sonido.
Campañas de marketing
El uso de componentes, el redimensionado interactivo y las funciones de diseño según el contenido, como Pilas y Relleno, te permitirán diseñar tu próxima campaña de marketing en Adobe XD en un instante y, por lo tanto, ahorrar tiempo y energía. Importa fácilmente activos de Illustrator y Photoshop, y prepáralo todo, desde anuncios en redes sociales hasta banners digitales y páginas de destino. Almacenar todas las entregas en un solo lugar y de forma sincronizada facilita la iteración y garantiza la coherencia del mensaje.
Diseño de juegos
Conecta un mando de juego compatible a través de Bluetooth y lleva tu diseño de interfaz de juego al siguiente nivel. Gracias a la compatibilidad con activadores de mando de juego, podrás diseñar y probar menús de juego, ajustes y otros elementos de la interfaz directamente en Adobe XD. Importa ilustraciones de juego para que cobre vida y haz que los usuarios interactúen directamente con el mando como lo harían en el juego real, antes de escribir una línea de código. Descubre cómo DICE empleó Adobe XD para dar vida a Battlefield V.
El diseño de la experiencia implica un amplio espectro de diseño, desde la concepción hasta la entrega de activos listos para producción. Donde quiera que tu equipo y tú estéis trabajando en el proceso, Adobe XD ofrece las herramientas para pasar de concepto a prototipo a velocidad de tus ideas.
Gracias a las integraciones de Creative Cloud, Adobe XD se conecta a tu flujo de trabajo, lo que permite importar rápidamente los activos de otras herramientas que estés empleando, y facilita darles vida con una gran funcionalidad de creación de prototipos y diseño de interacción. Descarga Adobe XD y lleva tu flujo de trabajo de diseño de experiencia a nuevas cotas, para que puedas dedicarle menos tiempo a lidiar con pixeles y más a crear experiencias asombrosas.
