Adobe XD: Porqué utilizarla si eres diseñador web - acceseo (2023)

(Video) Diseño de Sitio Web Desde CERO en Adobe XD

5/5 - (3 votos)

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

Tabla de contenidos

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.

(Video) Cómo crear y usar Design Systems en Adobe XD.

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

Adobe XD: Porqué utilizarla si eres diseñador web - acceseo (1)

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

Adobe XD: Porqué utilizarla si eres diseñador web - acceseo (2)

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

(Video) ¿Qué es Adobe XD? - Primeros Pasos en Experience Design

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

Adobe XD: Porqué utilizarla si eres diseñador web - acceseo (3)

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

Adobe XD: Porqué utilizarla si eres diseñador web - acceseo (4)

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.

(Video) Pasar tus diseños de adobe XD a codigos funcionales | Transformar tus diseños UI a codigos front-end

Muy recomendable ver todos los recursos que nos ofrecen.

5 Plugins recomendados para Adobe Xd

Adobe XD: Porqué utilizarla si eres diseñador web - acceseo (5)

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

Adobe XD: Porqué utilizarla si eres diseñador web - acceseo (6)

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.

(Video) Diseño de una pagina web - Estilo startup con Adobe XD | Designicode

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?

FAQs

Adobe XD: Porqué utilizarla si eres diseñador web - acceseo? ›

Entre muchas otras cosas porque Adobe XD permite la interacción entre pantalla, de esta manera es mucho más sencillo recibir un feedback claro del cliente o público objetivo y en el momento del lanzamiento de tu sitio web o app será un éxito.

¿Por que usar Adobe XD? ›

Adobe XD permite a los diseñadores de UX diseñar experiencias de usuario interactivas para aplicaciones web y móviles, utilizando una sola aplicación. Puede realizar diseños rápidos y sencillos en las mesas de trabajo de XD.

¿Qué funcionalidades de Adobe XD nos facilitan la creación de un diseño Responsive? ›

Para resolver este problema de los usuarios, Adobe XD ha desarrollado una función denominada redimensionamiento inteligente que permite cambiar el tamaño de los objetos manteniendo simultáneamente las relaciones espaciales en diferentes tamaños, para adaptarse mejor a múltiples tamaños de pantalla.

¿Cuánto cuesta el Adobe XD? ›

Precio de Adobe XD

Adobe XD funciona por suscripción, pero no tiene un sistema de niveles como Figma. Lo que sí ofrece es la posibilidad de comprar XD de forma aislada por 12,09€ al mes o el conjunto de aplicaciones de Creative Cloud (en las que se incluyen, por ejemplo, Photoshop e Illustrator) por 60,49€ al mes.

¿Quién fue el que creó el XD? ›

Adobe XD
DesarrolladorAdobe
Lanzamiento inicial5 de octubre de 2015
Versiones
Última versión estable56enero de 2023
6 more rows

¿Debo usar Adobe XD para el diseño web? ›

Adobe XD es una herramienta poderosa y versátil para diseñadores web . Ofrece una amplia gama de funciones para crear sitios web receptivos que se ven geniales y funcionan bien en todos los dispositivos. XD. también facilita la creación de prototipos de diseños, para que pueda probar diferentes ideas antes de comprometerse con un diseño final.

¿Adobe XD es suficiente para el diseño web? ›

Sí, Adobe XD se puede utilizar para el diseño de UX .

Es una poderosa herramienta que brinda a los diseñadores todo lo que necesitan para crear estructuras alámbricas, prototipos y diseños de alta fidelidad. También es fácil de usar, por lo que los diseñadores de todos los niveles pueden usarlo para crear diseños de nivel profesional.

¿Qué busca el Diseño Web Responsive? ›

El Responsive Design o diseño adaptativo es la técnica que se usa en la actualidad para tener una misma web adaptada a las diferentes plataformas que nos brinda la tecnología: ordenador, tablet, Smartphone, iPad, Kindle y, en resumen, todas las resoluciones de pantalla existentes.

¿Qué quiere decir Responsive Design? ›

Cuando utilizamos el término “responsive” (adaptable), nos referimos principalmente a “responsive design” (diseño web adaptable). Esto significa hacer que un sitio web sea accesible y adaptable en todos los devices: tabletas, smartphones, etc.

¿Qué cosa es diseño responsive? ›

Ahora mismo, te lo contamos: Un diseño web responsive es aquel tipo de diseño web que, de forma automática, se adapta a las diferentes pantallas de dispositivos electrónicos: ordenadores portátiles, teléfonos inteligentes, PCs, tablets, smart TVs…

¿Qué es mejor XD o Figma? ›

La elección depende sobre todo de tus preferencias. Si prefieres un software flexible y, sobre todo, muy colaborativo, opta por Figma. Pero si buscas un software de creación de prototipos, decántate por Abode XD.

¿Adobe se deshace de XD? ›

Adobe XD ya no está disponible para su compra como una sola aplicación, pero seguirá siendo compatible con los usuarios existentes. XD seguirá estando disponible como parte de nuestra suscripción a Adobe Creative Cloud All Apps.

¿Dónde se guardan los archivos de Adobe XD? ›

Los archivos de Creative Cloud se guardan en la nube y están accesibles desde cualquier dispositivo conectado. Los cambios que realice se sincronizan automáticamente.

¿Qué quiere decir la palabra XD? ›

Pues la respuesta es bien sencilla: es un emoticono que se emplea comúnmente para expresar risas o carcajadas. Si lo miras girando la cabeza, es mucho más fácil ver qué esconde XD. La X representa unos ojos cerrados, mientras que la D es una boca muy abierta que expresa una enorme sonrisa.

¿Qué significa XD en el texto en español? ›

Argot de Internet en español que se usa para describir la risa incontrolable .

¿Cuál es el significado de XD en Whatsapp? ›

Se usa para expresar alegría, diversión, humor o sarcasmo. Por ejemplo: Me he caído de la silla y me he hecho un chichón. XD. ¡Qué gracioso eres! XD.

¿Cuál es el propósito de Adobe? ›

Cambiando el mundo a través de experiencias digitales personalizadas . Fundada hace 40 años con la simple idea de crear productos innovadores que cambien el mundo, la tecnología revolucionaria de Adobe permite a todos, en todas partes, imaginar, crear y dar vida a cualquier experiencia digital.

¿Adobe XD es de uso gratuito? ›

Adobe XD es tanto gratuito como de pago, según sus necesidades . Hay dos versiones de Adobe XD: una versión gratuita y una versión de pago con funciones adicionales. La versión gratuita de Adobe XD incluye herramientas de diseño básicas y la capacidad de crear una cantidad limitada de mesas de trabajo, diseños y prototipos.

¿Qué es Adobe dimensión y para qué sirve? ›

Dimension es la aplicación de Adobe para crear y renderizar composiciones 3D de forma fácil, usando herramientas conocidas por los diseñadores y evitando la terminología y procesos complejos.

Videos

1. Cómo pasar de Adobe XD a HTML y CSS
(Francisco Aguilera G.)
2. Web Export - Complemento Adobe XD para Exportar HTML y CSS
(Francisco Aguilera G.)
3. Artboards & How Wide Should My Website or App be in Adobe XD
(Bring Your Own Laptop)
4. Diseña una página web estilo NETFLIX en Adobe XD
(FalconMasters)
5. Tips para diseño UI con ADOBE XD - #EDtaller 146
(EDteam)
6. ¿Qué es Zeplin ? Convierte tu Adobe XD a código !
(Maycol Nay)
Top Articles
Latest Posts
Article information

Author: Annamae Dooley

Last Updated: 08/10/2023

Views: 6355

Rating: 4.4 / 5 (45 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Annamae Dooley

Birthday: 2001-07-26

Address: 9687 Tambra Meadow, Bradleyhaven, TN 53219

Phone: +9316045904039

Job: Future Coordinator

Hobby: Archery, Couponing, Poi, Kite flying, Knitting, Rappelling, Baseball

Introduction: My name is Annamae Dooley, I am a witty, quaint, lovely, clever, rich, sparkling, powerful person who loves writing and wants to share my knowledge and understanding with you.