Aprender los conceptos básicos de Adobe XD en una hora.

Comprender eXperience Design para llevar a cabo sus propios proyectos de diseño

Adobe XD es una de las herramientas gratuitas más utilizadas para el diseño y creación de prototipos UI / UX en el mundo del diseño móvil. Como parte de Adobe Creative Cloud, eXperience Design ofrece muchas opciones y una interfaz intuitiva. Puedes crear y probar tus experiencias mientras previsualizas la interfaz completa de tu aplicación.

Si eres nuevo en el diseño de aplicaciones móviles, también deberías leer mi artículo anterior:

Este artículo lo ayudará a comprender el potencial de Adobe XD y cómo comenzar con su propio proyecto de diseño para Android o iOS. ¡No te llevará más de una hora! Adobe XD está disponible para Windows y Mac OS.

Seguiremos el tutorial oficial de Adobe XD, agregando algunos comentarios, consejos y pasos adicionales para aclarar el uso de esta herramienta. Al final, podremos usar casi todos los aspectos del software. Puede leer este artículo para comprender los pasos, pero será aún mejor si sigue el tutorial utilizando el software al mismo tiempo.

EMPEZANDO CON ADOBE XD

Puede descargar la versión gratuita de XD desde el sitio web de Adobe. Una vez que abra el software, encontrará diferentes plantillas de diseño para sus nuevos proyectos.

En el próximo artículo, crearé un nuevo proyecto desde cero. En este caso, usaré el tutorial de XD para mostrar sus características.

Ventana inicial de Adobe XD. Botón

Presione el botón Comenzar tutorial. Se abrirá la ventana principal, cargando el proyecto Tutorial. La navegación básica en su espacio de trabajo es la siguiente:

  • Para desplazarse: use su panel táctil, o presione la barra espaciadora + mouse, o presione la rueda del mouse.
  • Para hacer zoom: trackpad pellizcado con dos dedos, o Ctrl (Cmd) + rueda del mouse, o Ctrl (Cmd) + (+/-). También puede hacer zoom a un elemento seleccionado presionando Ctrl (Cmd) +3.
  • Para seleccionar: use el clic izquierdo del mouse. Para seleccionar grupos dentro de un área rectangular, haga clic y arrastre.

Use estas simples opciones de navegación para ampliar las pantallas del proyecto y verá algo como esto:

Espacio de trabajo tutorial de Adobe XD

El tutorial está creado para que pueda finalizar la aplicación Campvives, de Talin Wadsworth. A partir de ahora, podemos seguir los pasos del tutorial. Los explicaré y agregaré algunos otros ejercicios nuevos para cubrir lo esencial.

1. VISTA PREVIA DEL DISEÑO ACTUAL

Como dice el tutorial, presione el botón de reproducción para abrir la vista previa de la aplicación. Se abrirá una nueva ventana interactiva que mostrará la primera pantalla de la aplicación.

Ventana de vista previa para la aplicación Campvives.

Esta vista previa será nuestra pantalla prototipo principal con Adobe XD. Podemos probar la aplicación presionando los botones y verificando las diferentes pantallas y transiciones.

Consejo: La pantalla de vista previa se actualizará automáticamente cuando cambie algo en su espacio de trabajo. ¡Puede abrirlo en una segunda pantalla para previsualizar sus cambios en tiempo real!

Por supuesto, la vista previa no es una aplicación funcional. Solo mostrará la IU que definimos en nuestro espacio de trabajo, moviéndose entre las diferentes pantallas de acuerdo con los enlaces del prototipo. Sin embargo, es un buen ejemplo de cómo se verá el diseño final y qué tan buena es la interacción del usuario con nuestra aplicación.

Consejo: puede tomar capturas de pantalla o grabar la pantalla (Cmd + Shift + 5 para Mac o Windows + G para W10) para compartir su vista previa y recibir comentarios. Sin embargo, aprenderemos una mejor manera de compartir la vista previa en el último capítulo.

2. CREA UNA PANTALLA DE SALPICADURAS

Tenga en cuenta que el espacio de trabajo tiene dos pestañas en la esquina superior izquierda: Diseño y Prototipo. De manera predeterminada, el proyecto se abre en la pestaña Diseño, que se usa para crear y modificar las imágenes de la IU.

Seleccione la herramienta Mesa de trabajo en el panel de herramientas (lado izquierdo o acceso directo "A"), y verá que el panel de opciones cambiará para mostrarle diferentes plantillas de mesa de trabajo correspondientes a los dispositivos más utilizados.

En este caso, el proyecto se crea para mesas de trabajo iPhone 6/7/8. Simplemente haga clic dentro del cuadro para agregar la nueva pantalla en blanco. Para diferentes proyectos, puede elegir cualquier otra plantilla para crear una pantalla con las dimensiones exactas de su dispositivo de destino.

Espacio de trabajo de Adobe XD Design. Opciones de herramientas de mesa de trabajo.

Puede cambiar el nombre en la parte superior izquierda de la pantalla haciendo doble clic en él. Renombrarlo con "Splash".

Ahora, elija la herramienta Selección en el panel de herramientas (lado izquierdo o acceso directo "V") y arrastre el logotipo a la pantalla de inicio. Ahora, haga clic en el nombre "Splash" o haga doble clic en la pantalla de bienvenida. Podemos cambiar el fondo en las opciones de Apariencia desde el menú del lado derecho. Se abrirá una ventana común de selección de color. Podemos tomar nota de algunas cosas aquí:

  • Ahorro de colores. Cuando seleccionamos cualquier color, podemos guardarlo para su uso posterior presionando el botón "+". Si queremos eliminar cualquier color de nuestra paleta de proyectos, simplemente arrástrelo fuera de la ventana.
  • Usando gradientes. Al hacer clic en la pestaña "Color sólido", abrirá el menú de degradados. Puede usarlos para crear un fondo degradado.
  • Cuentagotas. Por supuesto, puede usar la herramienta Cuentagotas para seleccionar cualquier color disponible en su pantalla.
Menú de paleta de colores, desde las opciones de Apariencia.

Si selecciona el logotipo de Campvives, verá opciones adicionales para Apariencia. Puede elegir no solo el relleno sino también los bordes de cualquier imagen. En el caso de formas creadas en Adobe XD, puede seleccionar los detalles de los trazos. Le ayudará a cambiar el estilo de la marca de su aplicación, probando diferentes formas redondeadas o puntiagudas.

Edición de apariencia de formas.

TAMAÑO Y POSICIONAMIENTO

Es posible que haya notado también la opción Tamaño de respuesta, directamente encima de las opciones de Apariencia. Esta función viene con la actualización de septiembre de 2018 y permite que grupos de objetos mantengan su ubicación y escalabilidad al cambiar el tamaño.

Para obtener una explicación más detallada sobre cómo usar el tamaño de respuesta, le recomiendo que pase 4 minutos viendo el video oficial de Adobe CC en Youtube.

En la parte superior del menú de la derecha, encontrará algunos botones para cambiar fácilmente el tamaño o la ubicación de los objetos. A menudo le ahorran tiempo cuando busca dimensiones o posiciones exactas en su diseño. Otras herramientas de ayuda son las opciones de Cuadrícula que encontrará en la parte inferior del menú derecho, al seleccionar el nombre de la mesa de trabajo. Puede elegir mostrar el diseño de la pantalla o una cuadrícula de celdas cuadradas para ayudarlo con el posicionamiento y las proporciones.

Diseño y visualización de cuadrícula.

3. ESCOJA UNA IMAGEN DE PERFIL

En esta sección, mostraremos cómo ajustar las imágenes a las formas y cómo crear formas personalizadas.

Puede arrastrar directamente a la forma una imagen desde su computadora o desde su espacio de trabajo en Adobe XD. El ajuste de relleno se ajusta a la forma, pero puede hacer doble clic en la imagen para cambiar su tamaño, y solo se mostrará la parte de la imagen ubicada en la forma.

Enmascarar imágenes y editar formas

Podemos reemplazar el rectángulo inferior con uno nuevo. Seleccione el rectángulo y presione Supr, o haga clic derecho + Eliminar. Para crear un nuevo rectángulo, elija la herramienta Rectángulo del panel de herramientas (lado izquierdo o acceso directo "R").

Seleccione el punto de partida para la forma y arrastre el mouse a la esquina opuesta. Puede seleccionar cualquier opción de Relleno, Borde u Sombra para su nuevo rectángulo. Por ejemplo, podemos arrastrar otra imagen como lo hicimos con el círculo de perfil.

Consejo: si selecciona el rectángulo, notará pequeños puntos dentro de un círculo cerca de sus esquinas. Puede arrastrarlos a la imagen para redondear las esquinas, haciendo una forma suavizada. ¡De esta forma, es realmente fácil crear botones!

Más que la herramienta Rectángulo, también puede probar las herramientas Elipse (acceso directo "E"), Línea (acceso directo "L") y Lápiz (acceso directo "P") para crear formas libres.

4. AMPLÍE LA LISTA DE PUBLICACIONES DE BLOG

En esta sección, aprenderá a repetir cuadrículas agrupadas. Esto se usa comúnmente para crear repeticiones de la misma estructura, por ejemplo, al crear menús, entradas de blog, listas ...

Simplemente seleccione toda la cuadrícula y presione el botón Repetir cuadrícula en el menú de la derecha. La cuadrícula se resaltará con líneas de puntos verdes. Puede seleccionar y arrastrar cualquiera de los botones de borde para extender la cuadrícula, que repetirá su contenido.

Rejilla extensible.

Usando Pro Tip del tutorial, puede actualizar rápidamente todas las imágenes. Si desea modificar la cuadrícula de los elementos por separado, puede presionar el botón Desagrupar cuadrícula.

5. DEJARLO DESPLAZARSE

¿Qué pasa si queremos crear pantallas de desplazamiento? Podemos hacerlo, pero solo por direcciones verticales por ahora. El desplazamiento horizontal todavía está en desarrollo.

Simplemente seleccione la mesa de trabajo y cambie la opción de Desplazamiento a Vertical. A continuación, expanda la parte inferior de la mesa de trabajo hasta el punto que desee. ¡Hecho! Puede verificar el desplazamiento en la ventana Vista previa.

Creando un desplazamiento vertical.

OBJETOS DE FIJACIÓN

Es posible que desee arreglar objetos durante el desplazamiento, por ejemplo, barras superiores o inferiores. Simplemente seleccione los elementos y marque la opción "Fijar posición al desplazarse".

Consejo: asegúrese de que los elementos fijos estén en las capas superiores de su diseño, de modo que no estén cubiertos por objetos de desplazamiento. Para verificar esto, vaya al menú Capas en la esquina inferior izquierda de su espacio de trabajo (Ctrl [Cmd] + Y).
Vista previa de desplazamiento con objetos fijos en la parte superior.

6. HAZLO INTERACTIVO

Es hora de aprender sobre el modo de creación de prototipos. Comience haciendo clic en la pestaña Prototipo en la esquina superior izquierda de su espacio de trabajo.

Puede conectar sus pantallas, para que luego pueda obtener una vista previa de cómo los usuarios interactuarán con su aplicación. Utilizará la ventana Vista previa para probar la experiencia del usuario a partir de las conexiones del prototipo.

Creación de prototipos de conexiones en Adobe XD.

Cada objeto se puede vincular a otra pantalla. Cuando hace clic en él, puede definir la conexión arrastrando la flecha azul a su destino.

Una vez que crea una conexión, puede definir varios parámetros:

  • Desencadenar. Describe cuándo comienza la acción. Por defecto, ocurre cuando se toca el objeto. También puede definir un tiempo de espera, de modo que la pantalla cambie automáticamente al destino después de un tiempo.
  • Acción. El estado predeterminado es Transición. Hace que la aplicación cambie la pantalla de destino. Otra acción es Overlay, que se puede usar para acceder a menús o pantallas no completas sobre la pantalla actual. Veremos la acción de superposición con más detalle más adelante. La última acción es la mesa de trabajo anterior, que hace que la pantalla regrese a la anterior cuando se produce la condición de activación.
  • Destino. Es la siguiente pantalla, el final de su flecha azul.
  • Animación. Describe el efecto transitorio de una pantalla a otra. Puede seleccionar la relajación y la duración del efecto.

CREACIÓN DE MENÚS SUPERIORES

Para crear una superposición de menú, debe diseñar una nueva mesa de trabajo con fondo transparente. puede ajustar la opacidad del color de fondo desde las opciones de Apariencia en el menú de la derecha.

En esta mesa de trabajo, puede crear su menú. Si desea descargar recursos de diseño gratuitos, como plantillas de menú o iconos, le recomiendo que consulte mi artículo anterior donde encontrará información y enlaces útiles.

Como el menú que diseñamos no cubre toda la pantalla, podemos usarlo como una superposición. Para eso, solo tenemos que definir la conexión en el espacio de trabajo de Prototype y seleccionar la acción Superposición.

Superposición de conexión de menú y vista previa.

7. COMPARTE TU PROTOTIPO PARA COMENTARIOS

Este es el capítulo final del tutorial. Hasta ahora, hemos estado verificando nuestro progreso en la ventana de Vista previa en nuestra computadora. Sin embargo, la funcionalidad para compartir le permite crear un enlace público o privado para abrir la Vista previa de su aplicación en su navegador.

La documentación oficial de Adobe es realmente excelente en este caso, y puede leer más sobre las opciones de publicación aquí.

Consejo: cuando publique la vista previa de su aplicación, puede enviarse el enlace por correo electrónico para abrir la vista previa directamente desde su teléfono inteligente. ¡Probarás tu aplicación desde el dispositivo móvil!

8. CAPÍTULO ADICIONAL: EXPORTACIÓN DE TUS IMÁGENES

Esta es una de las partes más fáciles e importantes de su trabajo. Si desea que alguien use su diseño de interfaz de usuario en su desarrollo, debe exportar las imágenes a los formatos correctos.

Adobe XD admite la exportación de imágenes y pantallas completas para diferentes especificaciones de dispositivos. Puede seleccionar los activos de salida y XD generará los archivos de imagen en carpetas separadas de acuerdo con las densidades de pantalla de destino.

Puede seleccionar y exportar objetos específicos desde el espacio de trabajo, o hacer una exportación general de todas las pantallas en el proyecto.

CONCLUSIONES

Siguiendo estos pasos, debería haber aprendido los conceptos básicos de Adobe XD. El software está en constante desarrollo y cada actualización trae nuevas capacidades, por lo que debemos estar atentos a las futuras versiones.

Adobe XD es una herramienta muy simple, intuitiva y potente para crear las interfaces de su aplicación, así como para diseñar y crear prototipos de la experiencia del usuario.

Si tiene más preguntas, ¡no dude en hacerlas!

La innovación siempre gira hacia adelante. Como un taladro.