¿Por qué utilizar Adobe XD para el diseño y prototipado web?

A estas alturas es muy probable que ya todos conozcáis Adobe XD, pero por si acaso hay alguien que no sepa de que va este programa, aquí vamos a contaros un poco más sobre está estupenda aplicación. ¡Vamos a ello!

¿Qué es Adobe XD?

Adobe XD no es un programa más para el diseño y prototipado de aplicaciones para la web, es “el programa” que aúna las características de los principales programas que se venían utilizando para este tipo de tareas, como Photoshop, Balsamiq, Sketch, … Además, ha conseguido que con una interfaz sencilla podamos combinar el wireframing, el diseño visual, la interactividad y la previsualización. ¡Todo en uno!

Por otra parte, Adobe XD no es un recién llegado, sino que vio la luz en 2015, con una versión beta con el nombre de Project Comet.

Un año más tarde cambiaron su nombre a «Adobe Experience Design CC», las siglas de XD corresponden precisamente a que este programa te ofrece la posibilidad de experimentar con el diseño antes de su programación. Pero, ¿qué hace de Adobe XD «el programa» por excelencia para diseño y prototipado?

¿Por qué utilizar Adobe XD?

A la hora de trabajar con Adobe XD la experiencia nos resultará muy familiar, ya que se parece a muchos de los programas de edición y diseño de Adobe, con la ventaja de poder realizar con un mismo programa el diseño y el prototipado:

Adobe XD para diseño

Podrás establecer una retícula, decidir los colores, editar las formas, crear estilos tipográficos, modificar las imágenes, generar componentes que se repetirán en diferentes vistas… Es decir, todo lo que visualmente conformará tu proyecto.

Adobe XD para prototipado

Podrás dotar de interactividad a los botones, utilizar el scroll, ir para delante o para atrás, incluso saltar de sección en sección, es decir, dotar a las páginas de los elementos que te permitirán navegar a través del simulador ofreciéndote la posibilidad de realizar los ajustes necesarios antes de pasar el proyecto al equipo de programación!

Y todo esto con el añadido de poder trabajar en línea con tu equipo, guardar el historial de cambios y editar en vivo, haciendo que el trabajo sea mucho más fluido y ágil.

Ventajas de usar Adobe XD

Aunque ya hemos avanzado algunas de las tareas que puedes realizar con Adobe XD, son muchas las ventajas que te ofrece, aquí tienes algunas de ellas:

• Diseñar distintas vistas de un mismo proyecto: para aplicaciones móvil, es muy importante ver las distintas secciones que puede tener, pero es especialmente interesante en los proyectos web donde es necesario no solo diseñar la vista escritorio, sino también la vista móvil de esa misma página pasando por cómo se vería en un dispositivo como un iPad.
• Compartir nuestro proyecto entre las diferentes partes implicadas: todos los que nos hemos enfrentado a un proyecto online sabemos las dificultades que existen a veces para poder incorporar los cambios que se van produciendo, bien por el equipo de programación que les gustaría que un icono tuviera otro formato, bien del equipo de usabilidad que entiende que la posición de tal botón no es lo suficientemente intuitiva, o simplemente del equipo que elabora los textos que ven que falta una coma en una sección … estos son ejemplos de algunas de las tareas que se pueden realizar con las opciones de colaboración.
• Crear proyectos interactivos: Como ya hemos visto, Adobe XD nos ofrece la posibilidad de dotar de interactividad a nuestro diseño de una forma muy sencilla y sin tener conocimientos de programación.
• Presentación al cliente para su aprobación: esto es una cuestión clave a la hora de acometer proyectos web, el cliente deberá ver una versión lo más acabada posible de la aplicación antes de que el equipo de desarrollo empiece a escribir código, lo que nos puede librar de muchos disgustos y horas malgastadas. Normalmente, el cliente no tiene porque estar acostumbrado a imaginarse como va a funcionar todo, y que nosotros le digamos de palabra “este botón cuando se pase el ratón será azul y nos llevará a un formulario”, puede generar confusión, en cambio, si se lo mostramos como una experiencia interactiva, le podemos ofrecer la garantía de que lo está viendo se aproximará mucho al aspecto final que tendrá el proyecto.
• Continuas mejoras para una gran comunidad: Adobe XD está respaldado por una gran comunidad que continuamente están creando mejoras, aportando pluggins, ideas y activos de diseño para que nuestros proyectos sean cada vez mejores.

Desventajas de usar Adobe XD

Como todos los programas, también existen desventajas, aunque algunas de ellas pueden no tener ningún efecto en tu caso:

• Se trata de un programa instalado y no de un programa en la nube.
• Si hay un miembro en el equipo con un Mac no tan moderno, no podrá instalar la última versión y no podrá visualizar documentos realizados con versiones posteriores.
• Aunque es totalmente gratuito, actualmente han añadido ciertas limitaciones, como por ejemplo, el número de exportaciones máximas en pdf para estas versiones gratuitas.

Qué hay que tener en cuenta a la hora de trabajar con Adobe XD

Adobe XD es un programa bastante sencillo de utilizar, si estas acostumbrado a trabajar en el entorno Adobe, sus ventanas, la manera en la que dispone las herramientas y demás nos va a recordar mucho a cualquiera de sus programas como Photoshop o Illustrator. Al iniciar el proyecto es necesario:

• Seleccionar el tamaño preestablecido de las mesas de trabajo.
• Reunir todos los activos, bien desde otras aplicaciones o utilizar las herramientas de dibujo o texto que te ofrece el propio programa.
• Tener en cuenta que podemos mejorar elementos de diseño con las posibilidades que se nos ofrecen, como la alineación, giro, máscaras de elementos, guías de estilo, crear elementos de repetición.
• La opción de tener elementos como componentes nos ayuda muchísimo en la tarea de duplicar páginas y hacer cambios ya que un cambio en un componente se actualiza en todas las mesas de trabajo donde se encuentre dicho componente, y eso es muy útil para cabeceras, footer, secciones…
• Cuando tengas bien definido el proyecto, puedes crear prototipos interactivos y además puedes grabar la interaccion en un formato MP4

¡Esperamos que te hayamos ayudado a decidirte a probar Adobe XD! Para nosotros ya es una herramienta fundamental en nuestro día a día, y estamos seguros de que para ti, si no lo es ya, ¡lo será en cuanto la pruebas! En la página de Adobe XD encontrarás mucha más información y videos donde irán contándote todas las actualizaciones. ¡Disfruta el Adobe XD y cuéntanos tu experiencia!