Adobe Xd es la herramienta de creación de prototipos de 2017

Adobe Xd es la herramienta de creación de prototipos de 2017

La creación de prototipos, la creación de un primer modelo utilizable de un sitio web o aplicación, debe ser una cosa por encima de todo: rápido. La herramienta más rápida para este propósito es Adobe Xd.

Hoy, tuve que desarrollar un modelo de estructura alámbrica de una aplicación para teléfonos inteligentes. No se suponía que fuera muy detallado, pero tenía la intención de dar una explicación comprensible del concepto básico y ser presentable en un teléfono inteligente. No me tomó mucho tiempo averiguar qué herramienta debería usar. Inicié Adobe Xd.

Adobe Xd: novato en Creative Cloud

Adobe Xd, también conocido como Adobe Experience Design CC (Beta), es un software disponible como parte de Creative Cloud. Si ya está suscrito, tiene acceso al programa. Como se encuentra actualmente en la versión beta para Mac y Windows, incluso puede usarlo y descargarlo de forma gratuita. La configuración de la ID de Adobe necesaria se puede realizar de forma rápida y gratuita.

Entonces, en el momento actual, no necesitas ser suscriptor de CC para descargar y utilizar Adobe Xd. Ahora es el momento de probarlo.

Una vez que se publique la versión final, una vez que haya concluido la prueba beta, la única forma en que podrá usar AdobeXd es a través de una suscripción CC.

Wireframes rápidos con diferentes detalles

Ahora, ¿por qué inicié Adobe Xd solo para crear una estructura alámbrica de una aplicación? A diferencia de lo que puede sugerir el nombre del producto, Adobe Xd no solo se ocupa de problemas más específicos de los diseñadores de UX. En cambio, es una herramienta general para la creación de diseños para la web y dispositivos móviles.

Pantalla de inicio de Adobe Xd

Adobe Xd es un ayudante rápido cuando se trata de wireframes. Sin embargo, el software también es capaz de crear prototipos interactivos, diseños de pantallas e incluso activos listos para producción. En resumen, Adobe Xd es compatible con todo el proceso de diseño. Puedes elegir el nivel de detalle.

Por supuesto, Xd puede ayudarlo desde el wireframe hasta el producto terminado, simplemente aumentando continuamente la complejidad de su diseño, dependiendo de los comentarios de los clientes.

Adobe Xd: descripción clara de la tarea y división laboral clara

Dependiendo de la etapa de su producto en la que se encuentre, disfrutará de las diversas herramientas que proporciona Adobe Xd. En cualquier momento, es posible exportar la etapa del proyecto para obtener comentarios de los clientes o miembros del equipo. Por ejemplo, puede crear un enlace que permita a todas las personas con acceso al proyecto vinculado ver su diseño, o incluso usarlo, si seleccionó esa opción. Una función de comentarios permite comentarios en tiempo real.

También es posible ver el concepto de su aplicación en dispositivos móviles. Para hacerlo, mueva el archivo Xd a su Creative Cloud, donde puede acceder a él con una aplicación móvil, disponible en las tiendas de aplicaciones de Android e iOS. Luego, el diseño se puede probar en dispositivos móviles. Por supuesto, esto será especialmente impresionante para el cliente. Para una prueba rápida, la conexión del teléfono inteligente a través de USB debería ser la opción más rápida, si desea probarlo en un dispositivo móvil real.

Adobe Xd hace todo lo posible cuando se trata de velocidad. Por lo tanto, la interfaz de usuario del software es muy limpia y está dividida en dos entornos separados.

El diseño de la maqueta se encarga en la sección «Diseño». Aquí es donde seguramente pasará la mayor parte del tiempo. Es donde crea sus borradores página por página y los coloca uno al lado del otro en la pantalla. Todos los elementos visibles de la imagen se diseñan aquí. La sección de trabajo «Diseño» es donde se crea el aspecto completo de la aplicación.

En la sección «Prototipo», se desarrolla la sensación de su aplicación. Aquí, las líneas de conexión simples le permiten elegir qué elemento de la pantalla en qué pantalla conduce a otra pantalla con un toque. Aquí es donde trabaja en toda la estructura de control. Aparte de los objetivos puros, también puedes definir varios efectos de transición, así como las suavizaciones y su duración.

Las conexiones entre las áreas de dibujo se representan mediante líneas.

La forma más rápida de la vista previa es la funcionalidad del programa simplemente llamada «vista previa». Abre su maqueta en una ventana separada, que tiene el tamaño de la resolución objetivo. Esto debería ser suficiente para la primera revisión y para sus propios fines. Las distribuciones a través de enlaces o la presentación por teléfono solo valen la pena una vez que otros participantes del proyecto entran en juego. En una versión posterior, será posible colaborar en tiempo real utilizando Creative Cloud, como lo muestran Google Docs u Office365.

Adobe Xd: la eficiencia es clave

Lo que más me impresiona son las eficaces herramientas que presenta Adobe Xd en la sección “Diseño”. Por ejemplo, está el panel de control «Elementos». Aquí, puede depositar elementos de diseño, como colores o fuentes, para que pueda recuperarlos en un momento posterior de su diseño. Aquí también es donde guarda los llamados símbolos. Estos podrían ser iconos, por ejemplo, que luego se pueden ajustar a lo largo de todo el proyecto simplemente editando el símbolo almacenado.

En general, puede transferir el formato de cualquier objeto a otros objetos copiándolo. También es útil saber que la herramienta de texto siempre mantiene la configuración del texto anterior. Por lo tanto, puede agregar rápidamente texto en el formato correcto, de los cuales, como diseñador de sonido, solo tiene tres o cuatro.

¡Muy limpio! En Adobe Xd, puede ver todos los componentes de diseño a la vez.

La llamada cuadrícula de repetición le permite agregar rápidamente una cuadrícula o una lista formateada sin tener que agregar manualmente cada elemento de la lista o tabla. Todo lo que necesita hacer es crear un objeto y multiplicarlo con la cuadrícula de repetición.

Hablando de cuadrículas. Adobe Xd ofrece muchas formas de nivelar sus elementos de diseño. Varias líneas de ayuda le indican dónde está posicionado actualmente su elemento dentro del diseño. Se puede alinear fácilmente con el borde superior o inferior.

Simplemente arrastre las imágenes que desea usar en el diseño al área de dibujo respectiva mediante la función de arrastrar y soltar. Máscaras específicas aseguran que sus imágenes se ajusten automáticamente a los parámetros de diseño definidos.

Como lo conocemos por otras aplicaciones de Adobe, las partes de diseño se pueden agrupar, lo que le permite editar estos grupos en un paso posterior, al tiempo que evita que los elementos individuales del grupo se muevan o alteren de otras formas.

Una vez que su prototipo ha madurado hasta el punto en que es el momento de producir los activos para el desarrollador de las partes del código de su aplicación, entra en juego la función de exportación de Adobe Xd. Dependiendo de la plataforma de destino (Web, iOS o Android), el software se asegura de que se exporten todos los activos necesarios. La exportación se realiza como SVG o PNG. Una exportación de PDF adicional le permite distribuir el concepto en formato lector.

Adobe Xd: rápido, pegadizo y disponible para ambos sistemas operativos grandes

La maqueta de mi aplicación me llevó media hora. No contenía ningún activo listo para producción, ya que era un wireframe clásico. No obstante, la presentación en mi teléfono inteligente pudo ilustrar mis ideas lo suficientemente bien para todos los miembros del proyecto. ¿Mencioné que he sido suscriptor de Creative Cloud durante años? Para mí, esta suscripción ha ganado mucho valor con Adobe Xd.

Si desea mencionar Sketch como alternativa, vayamos a esto de inmediato. Claro, Sketch es un producto excelente. Sin embargo, lleva mucho más tiempo llegar a un resultado, ya que se centra más en la creación de activos listos para producción que en la creación rápida de prototipos. Además de eso, solo está disponible para macOS, mientras que Adobe Xd se ejecuta tanto en macOS como en Windows.

Para un inicio rápido, Adobe ofrece una gran cantidad de tutoriales en video. De esta forma, le llevará un máximo de 19 minutos poder utilizar el software de forma productiva.

Puede encontrar la aplicación móvil para la presentación en teléfonos inteligentes aquí:

#Adobe #herramienta #creación #prototipos

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.