Informe Pfeiffer • Análisis de Benchmark

Adobe XD CC:
Simplificación del Diseño
de la Experiencia del Usuario
El impacto de la productividad de la integración de
Adobe XD en el flujo de trabajo de desarrollo UX.

Acerca de esta Investigación Resumen Ejecutivo

Este informe presenta los hallazgos de un proyecto de benchmarking de mercadeo
específico llevado a cabo por Pfeiffer Consulting para Adobe. El objetivo principal t Este documento presenta los resultados de un
de la investigación fue documentar los aumentos de eficiencia y productividad proyecto de investigación de benchmarking y
vinculados a Adobe XD (versión 7.0.12.9), comparados con otros métodos que análisis de tecnología comparando Adobe XD
producen resultados comparables, tales como el uso de software de diseño gráfico o con operaciones de creación de prototipos
de imágenes. El benchmark analizó el flujo de trabajo de diseño de la experiencia utilizando aplicaciones gráficas tales como
completa del usuario, del wireframing al prototyping, y el comentan. Photoshop CC e Illustrator CC.

Los benchmarks fueron ejecutados utilizando la Metodología de Benchmarking para t En benchmarks que cubren varias situaciones
Productividad de Pfeiffer Consulting, que ha venido siendo ajustado durante más de frecuentes de flujo de trabajo de prototipos,
una década, y mide el tiempo que los operadores experimentados toman para Adobe XD estuvo en el promedio casi tres
ejecutar tareas específicas. Por favor haga referencia a la sección Metodología en la veces más rápido que otros métodos.
última página de este documento para más información.
t Adobe XD ofreció un aumento de la
Acerca de Adobe XD productividad de cerca de 10x en algunas de
las situaciones comunes de flujo de trabajo
Adobe XD es una adición reciente a la creciente lista de apps y servicios de Creative que fueron comparadas en el benchmarking.
Cloud. Adobe XD ayuda a los usuarios que son diseñadores experimentados a
crear e iterar rápidamente el diseño para aplicaciones móviles y sitios web. El t Creative Cloud Libraries es esencial para
programa permite la creación de prototipos interactivos complejos, ofreciendo una traer contenido existente. Esto permite a los
vista previa del dispositivo y la revisión en línea de un prototipo, y está integrado diseños creados en Photoshop CC e
con las aplicaciones Creative Cloud a través del soporte de CC Libraries. Illustrator CC que se actualicen aún en las
últimas etapas del proyecto de desarrollo UX.
Esto puede acelerar de manera significativa el proceso de diseño de la experiencia
del usuario, como este documento de benchmark: En promedio, basado en 264
benchmarks individuales, utilizando Adobe XD en lugar de métodos
convencionales para lograr resultados comparables era casi tres veces más
rápido.

Resultados Clave de Benchmark: Promedio de 12 Benchmarks de Flujo de Trabajo

Con Adobe XD (38.01%)

sin Adobe XD (100 %)

Cuadro basado en el promedio de 12 escenarios de flujos de trabajo diferentes por solución. Un

total de 264 medidas individuales de benchmark fueron tomadas. Valor de Referencia: Tiempo
promedio cuando se trabaja con métodos convencionales. Más corto es mejor.

Puntos de referencia de productividad de Adobe XD 1

 Eliminación de Cuellos de
Botella en el Diseño de la
Experiencia del Usuario

Las Complejidades del Diseño de Experiencia del Usuario Puntos Principales

Decir que el Diseño de Experiencia del Usuario (o UX Design para abreviar) es
un campo complejo es una subestimación. Aquí tenemos un área próspera de t UX design es un dominio altamente complejo
creatividad humana que apenas existía hace una década, sin embargo, ha que necesita combinar eficiencia y excelencia
engendrado algunos de los flujos de trabajo más complejos y con múltiples en muchos niveles diferentes.
niveles existentes en la actualidad. t La capacidad de transformar un wireframe
La complejidad inherente de UX design reside en el hecho de que éste necesita (Esquema de Pantalla) en un prototipo HiFi
combinar eficiencia y excelencia en varios niveles distintos. En el lado visual, se rápidamente es esencial.
requieren las herramientas más sofisticadas, pero deben estar vinculadas a una
organización estructural que facilite la rápida iteración, la fácil adaptación de un t Los benchmarks muestran que las
diseño a diferentes dispositivos y plataformas, así como la posibilidad de herramientas de Adobe XD UX-centric
simplemente inyectar interactividad en un prototipo que pueda ser probado y proporcionan un aumento de productividad
validado con usuarios potenciales. suministrando características tales como
Repeat Grid y pegar la apariencia de un objeto.
Del Concepto Creativo al Prototipo Susceptible de un Click
t Integración de la retroalimentación y el
Varias fases claramente definidas están involucradas en la creación de un intercambio de especificaciones de diseño
proyecto de una aplicación: Luego de la fase de conceptualización, el siguiente aceleran el proceso de desarrollo de manera
paso es a menudo un prototipo de papel bosquejado rápidamente, que delinee significativa
la arquitectura y las interacciones. Luego sigue la fase de prototipo de
wireframe (Esquema de Pantalla) que utiliza marcadores de posición neutros t La característica Design Specs suministrada
para todas las pantallas y los elementos de diseño de la app. por Adobe XD acelera de forma significativa el
proceso de la entrega de especificaciones de
diseño detalladas a un desarrollador.
Crear Wireframe para aplicaciones móviles
Escala de tiempo en segundos. Más corto es mejor.

0 200 400 600 800 1000

El Desarrollo del wireframe (Esquema de Pantalla)
con
Adobe XD CC
inicial para una app consiste en la creación de una
sin mesa de trabajo (artboard) por cada pantalla
Adobe XD CC
requerida, y que coloca a los componentes de la
8 min. 27 sec.
interfaz de usuario a través de elementos de diseño
Crear
neutrales simples, que luego son reemplazados con los
Wireframe diseños reales.
para
aplicaciones
móviles
Mientras las operaciones básicas para crear un
wireframe (Esquema de Pantalla) son similares en las
14 min. aplicaciones gráficas y en Adobe XD, la herramienta
de creación de prototipos tiene una clara ventaja de
productividad basada en sus características
simplificadas de organización y diseño, como fáciles
ajustes de artboard, cuadrícula de repetición,
0 200 400 600 800 1000
alineación y ajuste más inteligentes, donde todos
contribuyen a un proceso de diseño más rápido.

Puntos de referencia de productividad de Adobe XD 2

Una vez se completa esto y es validado, el diseñador reemplaza estos
elementos estructurales con los diseños reales, y crea un prototipo de
alta fidelidad (HiFi), si es posible con todos los elementos
interactivos necesarios que pueden ser probados directamente en el
dispositivo de destino.
En otras palabras, las herramientas de UX design necesitan integrarse
de la forma más estrecha posible con las aplicaciones centrales para
trabajo creativo, de forma más notable Photoshop CC e Illustrator CC,
indispensables para sus posibilidades creativas altamente sofisticadas.
Pero mientras aquellas aplicaciones tienen un soporte robusto para
múltiples artboards, capas y ajustes preestablecidos del dispositivo, ellas
tienden a quedarse cortas en términos de funcionalidad en la creación
de prototipos. Aquí es donde entra Adobe XD, permitiendo a los
diseñadores complementar el trabajo que ellos hacen mejor en la app
creativa de su elección con un conjunto de herramientas que apunta
a acelerar algunos de los aspectos que más consumen tiempo del
desarrollo de la app, a saber la transformación de wireframes
(Esquema de Pantalla) en prototipos HiFi, la iteración de
elementos de diseño repetitivos, así como la vista previa del
dispositivo y la entrega a los desarrolladores.
Las CC Libraries, que permiten al diseñador UX colocar elementos
de las apps CC directamente en un prototipo, asegurando que ellas
serán actualizadas automáticamente cuando se requieran cambios
en el diseño. Adicionalmente, los diseñadores pueden elegir un
Proyecto creado en Photoshop que será entregado para
aprovechar Adobe XD, puesto que el programa puede importar
directamente proyectos de Photoshop, conservando la estructura
de capas completa del archivo de Photoshop.

Productividad de Adobe XD: Resultados Clave del Benchmark

t Poblando Elementos de Diseño: Crear y Poblar Múltiples Instancias de una Tarjeta de Contacto
Escala de tiempo en segundos. Más corto es mejor
Comparamos el tiempo necesario
(benchmarked) para crear cinco réplicas de 0 100 200 300 400 500
una tarjeta de contacto en una aplicación con
Adobe XD CC
(app), y llenarlas con fotos de cada persona, su sin
nombre y su función. La característica de 48 sec.
Adobe XD CC

Adobe XD, Repeat Grid, que permite la Crear y Poblar

colocación automática de múltiples imágenes y Múltiples
textos en elementos repetidos, fue casi diez Instancias de
veces más rápida en esta operación logrando una Tarjeta de
Contacto
entonces el mismo resultado en una aplicación 6 min. 59 sec.

gráfica.

0 100 200 300 400 500

t Prototipo de LoFi a HiFi: Reemplazar los Aplicar Estilo Predefinido a 3 Objetos de Marcador de Posición
Escala de tiempo en segundos. Más corto es mejor
elementos de diseño neutros de un wireframe
(Esquema de Pantalla) con los diseños finales 0 20 40 60 80 100
puede llevar mucho tiempo. Hemos con
Adobe XD CC
comparado el tiempo necesario para sin
Adobe XD CC
reemplazar tres marcadores de posición con 9 sec.
elementos completamente diseñados.
Utilizando el panel Recursos en Adobe XD, Aplicar Estilo
Predefinido a 3
usted puede aplicar formato de color y tipo a Objetos de
los objetos de marcador de posición, dando al Marcador de
1 min. 24 sec.
programa una ventaja de productividad de Posición
casi 10x en esta operación.

0 20 40 60 80 100

Extraer y Compartir Valores de Color HEX con un Desarrollador

t Transferencia del Desarrollador: Compartir Escala de tiempo en segundos. Más corto es mejor.
especificaciones de diseño precisas con un
desarrollador es una parte esencial del 0 50 100 150 200 250 300 350 400
proceso de creación de prototipos. Adobe con
Adobe XD CC
XD puede compartir detalles de un diseño sin

tales como los valores del color y los estilos

Adobe XD CC

Extraer y 1 min. 45 sec.

de caracteres/personajes en diferentes Compartir
formatos. Este también permite a los Valores de Color
desarrolladores acceder a las mediciones de HEX con un
Desarrollador
objetos a solicitud, y copiar el contenido de
texto en un solo click. Esto da al programa 6 min. 35 sec.

una ventaja de productividad significativa

sobre el logro de las mismas metas utilizando
una aplicación de gráficos. 0 50 100 150 200 250 300 350 400

Puntos de referencia de productividad de Adobe XD 3

 Acelerando el Flujo
de Trabajo de UX

La Fase Crucial de Prototipado Puntos Principales

La eficiencia del diseño UX depende del aspecto más importante del prototipado,
a saber, la capacidad de convertir un diseño estático en una versión funcional de
t Con el fin de ser eficiente, los flujos de trabajo
de prototipado necesitan dar soporte a la
la app futura. Ser capaz de visualizar como se verá es importante; pero con el fin iteración de un gran número de objetos de
de probar cómo funcionará realmente, y como los usuarios responden a la app diseño similares. Adobe XD da soporte a este
antes de que inicie el trabajo pesado de desarrollo de código real, es esencial para flujo de trabajo con Símbolos, sin que requiera
evitar costos y retrasos innecesarios. la intervención individual para cada instancia
En otras palabras, cualquier herramienta que se utilice para dar forma a la de un diseño.
apariencia de una app, en un momento dado, las partes interesadas detrás del
proyecto, necesitarán ver cómo trabaja, y ser capaz de recoger los comentarios de t Puesto que los cambios en los diseños pueden
los usuarios. Los diseñadores de UX alrededor del mundo utilizan toda clase de ocurrir incluso en las últimas etapas del
métodos para lograr tal meta: algunos recurren a HTML, otros confían en los desarrollo de prototipado, la estrecha
programas de presentación. Pero cada vez más, las herramientas de diseño UX integración con Photoshop CC e Illustrator
dedicadas están siendo utilizadas para convertir las docenas o cientos de mesas CC es esencial.
de trabajo (artboards) en prototipos interactivos.
t El soporte de CC Libraries permite a Adobe XD
Iteración e Integración integrar los cambios de diseño tan tarde como
durante la fase de vista previa del dispositivo.
Los flujos de trabajo de prototipado son particulares en un aspecto: ellos
requieren iteraciones frecuentes en un gran número de elementos de diseño
similares o conectados. La coherencia visual es clave, y cualquier cambio t La combinación del conjunto de herramientas
efectuado incluso aspectos menores de un diseño, tal como la modificación UX-centric y las características de gestión
suministradas por Adobe XD con la excelencia
Benchmark de Prototipado: Crear/Interacciones de Documento Basadas en Diagrama de Flujo gráfica de Photoshop e Illustrator es clave para
Escala de Tiempo en segundos. Más corto es mejor.
la construcción de un flujo de trabajo de
0 100 200 300 400 500 600 700 800 prototipado optimizado.
con
Adobe XD CC
sin
Adobe XD CC

3 min. 30 sec. Este benchmark compara el tiempo para

inyectar interactividad en un prototipo Adobe
Crear/ XD con el tiempo necesario para indicar las
Interacciones de
Documento interacciones requeridas utilizando una app
Basadas en diseñada completamente en Photoshop. En
Diagrama de
Flujo 11 min. 37 sec. ambos casos, hemos utilizado el diagrama de
flujo subyacente a la app como una base.
(Mientras estas operaciones no sean
directamente comparables, ambas constituyen
un paso indispensable cuando se mueve un
0 100 200 300 400 500 600 700 800 prototipo a la etapa de desarrollo.)

Puntos de referencia de productividad de Adobe XD 4

 Adobe XD y CC Libraries
Uno de los aspectos clave de la integración entre
Adobe XD y otras aplicaciones de Creative Cloud
es el soporte de CC Libraries. En pocas palabras,
CC Libraries permite a un usuario compartir una
variedad de elementos de diseño – imágenes de
trama y vector, sino también colores y estilos de
texto, entre muchos otros – que pueden ser
insertados en otra aplicación CC. CC Libraries
mantiene un vínculo entre el elemento colocado y
el original almacenado en la biblioteca; cuando el
original es actualizado o modificado, los cambios
son aplicados inmediatamente a todas las copias
colocadas, a menos que el usuario haya
desvinculado el elemento de su original.
Esto puede incrementar la eficiencia del
intercambio de datos entre las diferentes
aplicaciones CC de manera significativa. Esto es
particularmente útil en el trabajo en equipo: CC
Libraries puede ser compartido con otros
miembros de un equipo o colaboradores externos.
Esto significa por ejemplo, que un logotipo, que es
creado por un diseñador en Londres será
automáticamente actualizado en la app prototipo
que es creada en California.
En lo que respecta a Adobe XD, CC Libraries es la
columna vertebral de la integración con Photoshop
y con Illustrator, que permite elaborar gráficos que
permanezcan en su ambiente nativo y asegurarse
que cualquier cambio en ellos es aplicado
inmediatamente a través de todos los artboards de
un prototipo.
de un color, ancho de trazo o tipo de letra, tendrá que abarcar docenas o cientos de
mesas de trabajo (artboards). En otras palabras, la iteración es uno de los cuellos de
botella más importantes en el prototipado. Adobe XD acelera este proceso de
manera significativa a través de símbolos que de forma instantánea reflejan la
aplicación de cambios a través de múltiples mesas de trabajo (artboards).
Construyendo el Flujo de Trabajo de Diseño UX Ideal
Lo que diferencia a Adobe XD de otras soluciones de prototipado es su
integración con Creative Cloud. Esto permite un flujo de trabajo que combina
las inmensas posibilidades creativas de Photoshop e Illustrator (entre otros) con
las herramientas y las características de administración que son
desarrolladas desde cero con las necesidades de diseño UX en mente.
Esto significa que por primera vez, Los diseñadores UX tienen la posibilidad
de integrar aquellos conjuntos de características diferentes en una forma que
puede hacer que el flujo de trabajo de prototipos sea significativamente más
eficiente, como estos benchmarks muestran. La cuestión esencial es, por
supuesto: cuál es la forma más eficiente de combinar estos programas? Gracias a
CC Libraries (ver barra lateral), es posible utilizar las herramientas de diseño
creativas hasta la totalidad de sus capacidades, sin perder la posibilidad de
cambiar elementos claves de diseño incluso en una etapa tardía del proceso de
prototipado. Tal modificación de diseño podría incluso ocurrir en medio de
una sesión de prueba de usuario de un prototipo interactivo.
Finalmente, está la cuestión de la entrega al desarrollador: La característica de
Especificaciones de Diseño de Adobe XD suministra a los desarrolladores por
solicitud acceso a las medidas, los valores de color y aún el corte y pegado de
textos a través de una interfaz en línea.
En otras palabras, la nueva aplicación de Adobe claramente no apunta a
reemplazar a Photoshop o a Illustrator, sino a complementarlas con un juego
de herramientas e integración de flujo de trabajo que puede disparar la
eficiencia cuando se trata de las muchas complejidades del desarrollo de la
experiencia del usuario moderno.

Comparing Solutions: Optimizing the Prototyping Workflow

Wireframing
Diseño Prototipo Prueba y Validación
(Esquema de Pantalla)

t Wireframing Excelente y
gestión del artboard
Adobe XD CC
t Excelente gestión de
elementos repetitivos
t Funcionalidad de diseño
UX-centric
t Fuerte integración con las
apps CC hasta las CC Libraries
t Fuerte integración con
Photoshop CC
t Importación de archivos
Sketch nativos
t Excelente funcionalidad para
iteración rápida y
modificación de diseños y
elementos repetitivos
t Inserción fácil de
interacciones
t Corte y pegado de
interacciones y apariencia
t Vista previa del dispositivo con
interacciones completas en iOS y
Android
t Compartir y comentar basados en
la red
t Característica de Especificaciones
De Diseño basadas en la red
t Exportar como video

t Excelente apoyo para t Ninguna funcionalidad de t Vista previa del dispositivo y

Flujo de Trabajo artboards t Funcionalidad de diseño validación en línea de prototipos
inigualable (Second-to-none) prototipado
de Diseño t Capas anidadas no disponible
t La creación de prototipos
Estándar t Integración excelente con t Compartir prototipos depende
(Photoshop CC, interactivos requiere la entrega
t El conjunto de características Adobe XD CC y otras apps CC de la exportación de artboards
Illustrator CC) no concebido originalmente a través de las CC libraries a herramientas o servicios
como archivos PDF o archivos de
para el desarrollo de UX especializados. imagen.
t La funcionalidad de Diseño t El prototipado de la t Los métodos de prueba y
t En general buenas depende del servicio o la validación dependen del
funcionalidad depende del
herramientas de wireframing
aplicación utilizada servicio o de la aplicación servicio o la aplicación
prototipado t El soporte de las plataformas
t El soporte de los archivos PS/ t El soporte de las plataformas
Soluciones UX t Concebido para Diseño UX AI depende del vendedor dependen del vendedor
depende del vendedor
de 3a Parte t Los servicios únicamente en línea t Los servicios que están en línea
t La Nueva herramienta t El diseño y el prototipado
Pueden ser más lentos que las únicamente pueden ser más lentos que
requiere costo adicional y aplicaciones con base en el escritorio
están de forma típica en las aplicaciones con base en el escritorio
curva de aprendizaje cuando se trabaja en grandes proyectos aplicaciones diferentes cuando se trabaja en grandes proyectos

Configurar el flujo de trabajo de diseño UX puede ser complicado: Mientras muchos diseñadores inician con la aplicación de gráficos que ellos
sienten más familiar, este es usualmente necesario para cambiar a una herramienta de prototipado dedicada en un punto. Mientras existen
muchas aplicaciones y servicios especializados, Adobe XD ofrece la integración más fuerte con Photoshop e Illustrator a través de CC Libraries.

Puntos de referencia de productividad de Adobe XD 5

 a
Metodología
Este proyecto de benchmark fue encargado por Adobe y ejecutado de
forma independiente por Pfeiffer Consulting.

Todas las medidas de productividad presentadas en este documento están

basadas en ejemplos de los flujos de trabajo del mundo real, diseñados y
ejecutados por profesionales con muchos años de experiencia con los
programas y los flujos de trabajo involucrados.
t Cómo diseñamos los benchmarks
El enfoque básico es simple: con el fin de evaluar las ganancias en
productividad que un programa o solución puede (o no puede) ofrecer,
comenzamos analizando el número mínimo de pasos necesarios para
lograr un resultado dado en cada una de las aplicaciones o flujos de trabajo
que tienen que ser comparados.

Una vez esta lista de acciones ha sido claramente establecida, comenzamos

a ejecutar la operación o flujo de trabajo en cada solución, con la ayuda de
profesionales experimentados que tienen una larga experiencia en el
campo y con las soluciones que son probadas.

Cada conjunto de pasos es ejecutado tres veces, se utiliza el promedio de

las tres medidas.
t Acerca de Pfeiffer Consulting
Pfeiffer Consulting es un instituto independiente de investigación
tecnológica y benchmarking de la operación enfocada en las necesidades
de publicación, producción de contenido digital, y nuevos profesionales de
medios.

Para más información, por favor póngase en contacto con

research@pfeifferreport.com

Todos los textos e ilustraciones © Pfeiffer Consulting 2018. Se prohíbe la reproducción

sin previa aprobación escrita. Para información adicional, por favor póngase en contacto
con research@pfeifferreport.com.
Los datos presentados en este informe son evaluaciones y simulaciones genéricas y son
comunicadas para fines de información únicamente. La información no pretende
suministrar, ni puede reemplazar la investigación de productividad específica y los
cálculos existentes o situaciones de flujo de trabajo. Pfeiffer Consulting rechaza cualquier
responsabilidad por el uso o el curso de acción emprendido sobre la base de cualquier
información, consejo o recomendación contenida en este informe, y no se hace
responsable por la compra, equipo o inversión o cualquier otra decisión y compromiso
con base en los datos provistos en este informe o cualquier documento asociado.
Adobe, el logo logo, Creative Cloud, Illustrator y Photoshop son marcas registradas o
marcas de Adobe Systems Incorporated en los Estados Unidos y/o otros países. Todas las
demás marcas son propiedad de sus titulares respectivos.

Puntos de referencia de productividad de Adobe XD 6