Qué es Adobe Xd y para qué sirve

Hoy queremos presentaros una de la herramientas que más utilizamos en el departamento de diseño web y también de desarrollo, Adobe Experience Design CC, o más comúnmente llamada Adobe Xd.

Adobe Xd es un herramienta de Adobe para la creación de interfaces. Un programa dedicado íntegramente al diseño y prototipado de aplicaciones web. Recoge todas las herramientas necesarias que usábamos en otros programas de Adobe y lo unifica en esta sencilla pero potente herramienta.

 

Cómo nace Adobe Xd

Allá por octubre de 2015 Adobe anunciaba una nueva herramienta de diseño y prototipado con el nombre de «Project Comet», en una conferencia Adobe MAX. Poco después, en el primer trimestre de 2016 lanzaba una primera versión beta para MacOS llamaba Adobe Experience Design. A finales del mismo año la lanzaban para Windows.  A partir de octubre de 2017 dejó de ser una beta.

Nace para hacer frente a las necesidades de los diseñadore UX/UI para generar bocetos, diseños y prototipos de interfaces, dado el vacío que había dentro de Adobe, sin ningún software específico para generar este tipo de procesos. Antes hubieron otros como Adobe Fireworks (una clásica herramienta absorbida de Macromedia, que desapareció en 2013), y algunos programas se han utilizado para estos fines, sin ser los más apropiados, como Photoshop (programa dedicado al retoque fotográfico) e Illustrator (dedicado al diseño vectorial). Ninguno de ellos es óptimo ni específico para ello. Aunque se les ha intentado agregar herramientas para ello, no eran nada ligeros ni estaban bien optimizadas para ello.

Adiós a Photoshop e Illustrator para diseñar páginas webs o aplicaciones.

También para hacer frente a otros softwares como son Sketch, InVision, o Figma.

Uno de los mejores softwares de diseño de interfaces y prototipado es Sketch, muy conocido dentro del mundo de editores de gráficos y diseño UX UI, que se ha convertido casi en un estándar en el sector. Uno de los factores clave de este software es que solo está disponible para Mac OS.

Adobe tuvo una fuga masiva a este software ya que no cumplía con las necesidades del momento. Ahora (aunque algo tarde) quiere plantarle cara directamente a Sketch, y aunque pensamos que aún le falta bastante recorrido para ello, va por el buen camino.

 

Cómo funciona Adobe Xd

Adobe Experience Design CC – Diseña experiencias, genera prototipos y compártelos.

Tiene una interfaz muy minimalista, sencilla, intuitiva, limpia y clara (blancos y grises claros predominan). Recoge las herramientas necesarias para llevar a cabo los diferentes procesos de trabajo. Desde generar Wireframes y bocetos, con diferentes interacciones y transiciones para poder realizar test de usabilidad, hasta el diseño y prototipado interactivo, y los recursos necesarios para la producción final.

Todo ello mejorando y acelerando los procesos de creación gracias a herramientas muy intuitivas.

En la parte superior encontramos el desplegable del menú único y principal con las diferentes opciones: Nuevo, Abrir, Guardar, Importar, Exportar, etc. Y la barra con los botones para cambiar entre perfil de Diseño y Prototipo, el icono de Vista previa del diseño, y el Botón desplegable de Compartir.

El conjunto de herramientas se sitúa en una barra lateral izquierda:  Seleccionar, Rectángulo, Círculo, Línea, Pluma, Texto, Mesa de trabajo, y Zoom. En la parte inferior está el generador de activos (para crear estilos de colores, texto y símbolos) y el navegador con de capas.

Mientras que las propiedades dinámicas y configuraciones las encontramos en la parte derecha: Alinear, Repetir cuadrícula (grid), Tamaño y posición, Rota y Reflejar, Redimensionado interactivo, Aspecto del elemento.

No importa que software estemos acostumbrados a usar, es muy sencillo acostumbrarse a él.

Podemos diseñar y previsualizar (vista previa) a tiempo real, para comprobar cómo funcionan las interacciones, animaciones y diferentes transiciones, simplemente clicando sobre el icono del “Play” superior derecho.

 

Herramientas de diseño UI

herramientas-diseno-ui

Perfil de Diseño.
Desde aquí podemos generar bocetos y Wireframes para nuestras interfaces, y posteriormente darle diseño y estilo de una forma muy sencilla.

Mesas de trabajo

Permite crear dentro del espacio de trabajo diferentes mesas con tamaños de pantallas ya predefinidas, desde desktop hasta ipad o pantallas de móvil.

Cajas

Formas poligonales vectoriales sobre las que poder enmascarar imágenes. Según cambiemos el tamaño de estas formas la imagen se adaptará de forma automática, al estilo responsive.

Texto

Herramienta muy sencilla pero muy práctica para la inserción del texto en nuestros diseños.
Una funcionalidad que nos encanta es la de poder alternar entre Texto de punto (la caja se adapta al texto) para los títulos, o Área de texto (donde el texto se adapta a la caja) para textos y párrafos.

Grid

Permite la clonación de un bloque de contenido y su posible edición inteligente posterior. Perfecto para generar cuadrículas de elementos.

Panel de Activos (assets): Estilos de colores, carácteres y símbolos

Mediante esta herramienta podemos definir diferentes estilos activos que tenemos en la web, para aplicar a nuestros diseños de forma rápida, y sobre todo el poder editar estos estilos y aplicarlo de forma fácil a todo el proyecto. La creación de símbolos es muy eficaz a la hora de utilizar elementos repetitivos, como por ejemplo, cabeceras y footers, botones, iconos, etc.

Exportar recursos

La herramienta de Exportar (Ctrl + E) nos encanta, ya que exportamos de forma fácil los elementos seleccionados o que queramos, definiendo el tipo de formato, la calidad, etc. Genera automáticamente los recursos necesarios para la fase de producción, incluso en varias resoluciones según lo requiera el proyecto (1x,2x, 3x).
Podemos exportar: imágenes en JPG (elección de calidad), y PNG (imágenes con colores planos). Recursos en SVG (para iconos y logotipos vectoriales), e incluso exportar el diseño en formato PDF.

 

Prototipado interactivo UX

prototipado-interactivo-ux

Pasamos al perfil de Prototipado.
Desde aquí podremos crear las diferentes interacciones entre nuestras mesas de trabajo o pantallas.

Transiciónes y animaciones

Hay 3 tipos: Tocar, Arrastrar o por Voz.

Mediante un sencillo sistema de arrastrar la flechita podemos enlazar las diferentes páginas. Se puede elegir el tipo de transición que queramos desde una transición normal, hasta de autoanimación (para secciones desplegables o carruseles) o superposición (para desplegables,  lightbox o popups por ejemplo).  Aquí tendríamos que profundizar más para ver todas las posibilidades que nos ofrece, ya que son bastante, e interesantes.

Podemos ir viendo desde la Vista previa como van quedando estas interacciones.

 

Compartir tus prototipos y sus especificaciones

compartir-prototipos-especificaciones

Desde aquí podremos compartir nuestros prototipos con los clientes para su feedback y validación, o con otros compañeros. Simplemente con un simple enlace podremos compartir nuestra interfaz con quien queramos.

Desde el botón de Compartir veremos las siguientes opciones.

Compartir archivos

Guarda el documento de Adobe Xd en la nube y podrás acceder a él desde cualquier parte o compartirlo con otras personas para que puedan editarlo.

Compartir para revisión

Desde aquí puedes compartir el prototipo para su revisión. Si quieres conseguir feedback del cliente o de forma interna puedes generar desde aquí un enlace para compartirlo con quien quieras. Tiene algunas opciones de configuración como: Permitir comentarios (muy útil para sugerir cambios), Abrir en pantalla completa, Mostrar sugerencias sobre puntos importantes, o Requerir contraseña.

Para nosotros la parte de compartir para revisión nos es fundamental, y de esta forma nos facilita y acelera el proceso de validación. Además el cliente se hace una idea de cómo quedará el producto final terminado. ¡Se acabó lo de pasar el diseño en JPGs o PDF!

Compartir para desarrollo

Una vez pasado la parte de validación, y tenemos el Ok, pasamos a la parte de desarrollo. Debemos poder saber transmitir toda esta información a los técnicos responsables del desarrollo de la interfaz.
Desde aquí podemos compartir todos los recursos necesarios a nivel estilos (colores, tipografías, tamaños, etc.) para que puedan transformar de forma fiel nuestro prototipo a un producto final definitivo. Generando así un enlace accedemos a todos los recursos necesarios para hacerlo realidad.

Esto junto con la Exportación anterior de los recursos visuales obtenemos un tándem perfecto para los desarrolladores.

 

Integraciones y Kits de recursos para interfaces

recursos-interfaces-adobexd

Adobe pone a nuestra disposición una serie de interacciones y recursos para facilitarnos un poco más el trabajo.

Interacciones

Integración para conectar Xd con tus aplicaciones y servicios favoritos: Microsoft Teams, Jira, Slack, ProtoPie, Avocode, Zeplin, Sympli, Kite App.

Kits de recursos para interfaces

Nos facilitan kits de recursos personalizados para las principales plataformas: Apple Design, Material Design (Google), y Microsoft UWP Design.
A parte de estos hay una especie de kits/plantillas de todo tipo, desde plantillas para diseñar apps de Smartwatch, hasta para Amazon Alexa, pasando por kits ecommerce.

Muy recomendable ver todos los recursos que nos ofrecen.

 

5 Plugins recomendados para Adobe Xd

plugins-adobe-xd

Otro de los fuertes de Adobe Xd es que cuenta con una fuerte comunidad detrás que desarrolla plugins interesanes para implementar en nuestro Adobe Xd, y el propio Adobe Xd nos los facilita desde el propio programa para instalarlos. Te recomendamos para empezar que pruebes los siguientes.

UI Faces

Para generar avatares aleatorios en una interfaz, dentro de cualquier tipo de forma.

Artboard Plus

Ordena automáticamente tus mesas de trabajo. Para los más desorganizados.

Lorem Ipsum

Si vas a poner texto de ejemplo este plugin es el más cómodo para generar el famoso Lorem Ipsum.

Icondrop

Para integrar iconos, ilustraciones o fotos de stock directamente en Adobe Xd.

VizzyCharts

Para generar gráficas reales en nuestra interfaz.

 

Precio y disponibilidad

precio-adobe-xd

Es uno de los puntos fuertes de este programa, ya que es GRATIS (para particulares), y está disponible tanto para Mac OS como para Windows. Adobe quiere aprovechar el aumento de público en el campo de UX / UI y equiparar sus tarifas a competidores como Firgma.

Eso sí, a la hora de compartir estaremos limitados, ya que solo nos dejará compartir a la vez un prototipo y uno de especificaciones. Si tenemos cierto volumen de trabajo de interfaces recomendamos ciegamente pagar la versión de pago para equipos de diseño, ya que es bastante rentable.

Podremos acceder a nuestros prototipos desde diferentes dispositivos (según aseguran): Android, iPad, iPhone, etc. Aunque a nosotros personalmente nos da algún problema en Android.

Adobe Xd >>

 

Conclusión

Hace ya bastantes meses que trabajamos con Adobe Xd y ha supuesto uno de los cambios más importantes de los últimos años en el proceso que va desde el diseño hasta el desarrollo de la interfaz a nivel UX/UI. Lo hemos notado a la hora de mejorar los tiempos y los métodos de trabajo en nuestro departamento, y en la calidad del producto final. Nos facilita mucho los procesos, desde el bocetado, wireframes, diseño y prototipado, hasta la parte de desarrollo, con la generación de recursos y assets de una forma muy eficaz y práctica.

Unos de los puntos clave es la de compartir para revisión, y ahora mismo no sabríamos vivir sin esta opción para la validación, nos facilita mucho la vida.

Creemos que aún tiene bastantes limitaciones y faltan algunas herramientas clave para poder generar mejores prototipos, pero aun así desde acceso apostamos por Adobe Xd como herramienta de diseño y prototipado UX/UI. ¿Y tú que herramienta utilizas? ¿Has probado ya Adobe Xd? ¿Quieres que diseñemos tu nueva interfaz?

 

Affinity, la alternativa a Adobe por precio y calidad

Hoy os traemos un artículo imprescindible para creativos, hablamos de Affinity, una alternativa muy interesante a los principales softwares de Adobe (el gran todopoderoso del diseño) tanto por el coste, como por la calidad. En este post te contamos nuestra experiencia y por tanto nuestra opinión sobre Affinity.

Adobe vs Affinity

Adobe siempre ha tenido grandes rivales de peso, muchos de los cuales han sido absorbidos por la empresa estadounidense (PageMaker transformado en InDesign; Macromedia Freehand evolucionado a Illustrator, entre otros), por lo que siempre ha estado en la cima. Uno de sus puntos más críticos es el coste, ya que no siempre los usuarios creativos están dispuestos o tienen la posibilidad de costearlo. ¿Es Affinity un rival digno para Adobe?

La suite de Affinity está desarrollada por Serif, una empresa con más de 20 años desarrollando softwares para Windows. Plantean una nueva gama de software gráfico profesional. Presumen de desarrollar estas aplicaciones desde cero teniendo muy en cuenta el actual flujo de trabajo de los diseñadores y creativos, por lo que crean un código totalmente nuevo para hacer frente a las aplicaciones actuales de mayor calidad de diseño creativo. Entre algunas de sus características presumen de las siguientes:

  • Extremadamente rápida, sacándoles todo el partido a nuestra CPU y GPU.
  • Contemplan las tres disciplinas principales: la edición fotográfica, el dibujo vectorial, y la editorial. Recogen a la perfección las herramientas necesarias para el mundo creativo.
  • Usan el mismo formato de archivo entre las distintas aplicaciones, lo cual vemos de lo más interesante.
  • Creación del concepto ‘persona’ para organizar la interfaz en diferentes perfiles dependiendo del caso, pensamos que el nombre no está bien escogido, más que persona debería ser perfil, por ejemplo.

 

Affinity Photo

Tras 5 años de desarrollo presentan la suite de Affinity

Cuentan actualmente con 3 aplicaciones:

  • Affinity Designer: el equivalente natural a Adobe Illustrator, para creaciones gráficas, una solución de lo más completa. También pensado para diseño Web. Con versión de prueba de 10 días.
  • Affinity Photo: el equivalente a Adobe Photoshop, para revelado y edición fotográfica digital. Con versión de prueba de 10 días.
  • Affinity Publisher (en fase beta): el equivalente a Adobe InDesign, para el diseño y maquetación editorial. Al estar en versión beta actualmente podemos utilizarla de forma gratuita hasta que saquen una primera versión, la cual ya será de pago, creemos en unos meses.

 

Nuestra experiencia con la suite Affinity

Nosotros hemos probado las tres aplicaciones y os podemos decir que desde un primer momento las sensaciones son muy buenas. Os comentamos algunos pros y contras de nuestra experiencia:

Affinity Designer

Pros:

  • La interfaz de las 3 aplicaciones son muy similares a las de adobe, por lo que el salto es realmente sencillo, no necesitas mucho tiempo para hacerte a ellas. Sí que es cierto que al estar adaptado al 100% a las aplicaciones de Adobe, a veces algunas cosas debemos indagar un poco hasta poder resolverlas, pero nada complicado, es muy fácil adaptarse, es cuestión de horas. La buena usabilidad las hace muy intuitivas.
  • La compatibilidad entre las 3 es genial, ya que tratan de igual forma tanto textos, como imágenes y sobretodo, el tema vectorial, algo que nos ha encantado. Destacar que los comandos son iguales en las 3 aplicaciones, nos parece genial unificar estos atajos.
  • El precio, sin duda, es un factor muy importante, y con Affinity nos olvidamos del pago mensual, este coste que a veces las empresas pequeñas, freelance, o usuarios creativos no pueden costearse. Con un pago único, y creemos incluso muy barato, actualmente unos 55€ por aplicación, tenemos licencia para utilizar dicho software, sin ningún tipo de pago extra ni suscripción mensual. También somos realistas y no creemos que el precio lo es todo, pero en este caso la calidad de estas herramientas compensa su coste sin ningún tipo de duda, y lo hace una alternativa interesantísima.
  • La suite de Affinity es compatible tanto con Windows como para macOS, por lo que no tendremos problema para utilizar en cualquiera de los dos sistemas operativos. Eso sí, cada versión es un pago diferente, pero dado el coste no lo vemos como un contra.
  • Aplicación para el Ipad, para poder realizar cualquier edición o creación gráfica estés donde esté. El coste para esta plataforma es de unos 22€.
  • El trato de las mesas de trabajo nos ha gustado mucho, muy intuitivo.
  • La calidad y el resultado es profesional. Desde nuestro punto de vista no echamos en falta ninguna funcionalidad a un nivel medio de trabajo. Al principo tal vez nos cueste un poco, pero enseguida hemos podido coger el ritmo normal en el flujo de trabajo.
  • Trata todos los perfiles y formatos que creemos son necesarios (ej.: a la hora de exportar nos da opciones de PNG, JPG, GIF, PSD, PDF, SVG, WMF, EPS, EXR, HDR), de momento no hemos echado en falta ninguno.
  • La importación y edición de archivos de Adobe es muy buena.
    Aunque hemos tenido que modificar luego alguna cosa, sobretodo en tema de agrupación de textos, y el tratado de los bloques de texto, pero nada importante en principio. Para ser justo debemos decir que ha sido en la versión Beta de Publisher, e importando archivos de Illustrator, por lo que no lo damos como un contra.
  • Tienen versión de prueba de 10 días, para probar la aplicación durante unos días completamente gratis. Affinity Publisher actualmente está en versión beta y podemos utilizarla de forma gratuita hasta que saquen una primera versión.
  • El tratado de la pluma en Designer nos ha encantado, como modificar los vectores y los nodos nos ha enamorado. Creemos mucho más sencilla e intuitiva que en Illustrator, a opinión personal.
  • Al haber creado todo el código del software desde cero, se parte desde una base limpia y adaptada a las necesidades actuales del flujo de trabajo creativo, en contra de lo que pasa en Adobe, que al final son mejoras y actualizaciones que vienen de una base algo más antigua, y que a veces dan ciertos problemas. Creemos que esto hace que Affinity sea más fluido y rápido que Adobe.

 

Contras:

  • Si trabajamos con Affinity Designer y tenemos que enviar el archivo a una tercera persona, que solamente utiliza Illustrator, seguramente habrá que hacer algún ajuste. Esto nos pasará igual con Affinity Publisher con InDesign. Tal vez el que menos problema de sea Affinity Photo con Photoshop, ya que la integración entre ambas es mejor.
  • Hemos probado que algunas ilustraciones vectoriales más complejas de Illustrator al abrirlas en Designer pueden cambiar su apariencia, nada que no se pueda arreglar con ciertas modificaciones, pero hay que tenerlo en cuenta.
  • No hemos profundizados en las herramientas y acciones más complejas, pero creemos que Adobe sigue estando por encima a un nivel más alto de profesionalidad, y nos ofrece más herramientas. Aun así creemos que es cuestión de tiempo, ya que Affinity está constantemente actualizando y mejorando sus softwares, y creemos que pueden estar en muy poco tiempo a un mismo nivel.

 

Affinity Design

Las ’Personas’ en Affinity

Utilizan los diferentes perfiles, llamados ‘persona’ para utilizar diferentes herramientas dependiendo de la necesidad del momento.

Por ejemplo, Affinity Designer tiene tres perfiles diferentes:

  • Dibujo: para tratar elementos vectoriales.
  • Pixel: para tratar elementos principalmente imágenes rasterizadas y operaciones con trazos de pincel.
  • Exportación: enfocado a la exportación de elementos de diseño.

Por su parte Affinity Photo tiene cinco modos de trabajo:

  • Foto: para la edición de imágenes.
  • Licuado: para la distorsión de áreas de las imágenes.
  • Revelado: para el revelado de fotografías RAW.
  • Asignación Tonal: para el mapeo de tonos.
  • Exportación: enfocado a exportación de áreas específicas.

Designer tiene una integración muy buena respecto a herramientas de edición de imágenes, y Photo también puede editar elementos vectoriales, por lo que la integración de ambas es muy buena.

 

Tutoriales de Affinity

El propio Affinity tienen tutoriales muy interesantes para aprender a utilizar sus herramientas, os dejamos enlace a sus respectivas páginas:

Desde aquí podéis obtener más información sobre las aplicaciones, a modo de manual (herramientas, operaciones, espacios de trabajo, métodos abreviados de teclado, etc.): https://affinity.help/

 

Conclusión y opinión

Hace bastante tiempo que oímos hablar de ellos, aunque llevamos apenas unos meses utilizándolas, pero el tiempo que llevamos utilizando esta suite estamos muy satisfechos, la interfaz es muy agradable e intuitiva, las herramientas son muy precisas y útiles, y el resultado es profesional.

Si eres creativo del mundo del diseño o la fotografía te recomendamos encarecidamente que los pruebes, no te defraudarán. Aunque al principio nos sentimos un poco “fuera de casa”, tiene algo que engancha, un aire fresco que nos motiva a seguir utilizándolo. Podemos compararlo como cuando nos cambiamos de casa, que nos tenemos que hacer durante unos días, pero que en nada estaremos de nuevo como en casa, o incluso mejor.

 

¿Cuál creéis que debería ser el siguiente software de Affinity? ¿Affinity Video?

 

¿Tienes alguna incidencia?

Cuéntanos qué ocurre
y nos pondremos con ello lo antes posible.

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.
Sucríbete a
nuestra newsletter

para estar al día en el mundo online

¡Cuéntanos tus ideas!
+34 96 653 19 14
+info@acceseo.com
He leído y acepto la política de privacidad

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.