Spanish (Español) translation by Itzel Alvarez (you can also view the original English article)
XD(Diseño de Experiencia) es un programa de Adobe para el diseño de experiencia de usuario, en webs y móviles. En este tutorial, mostraré cómo usarlo para crear wireframes de tu próxima web o aplicación para móviles.
Diseñaremos una simple app, inventada, llamada "Bucket" que permitirá a los usuarios visualizar y añadir una lista vital (la típica lista "Cosas que hacer antes de morir").
Continuamos diseñando para aprender la manera básicas de prototipar el proyecto.
1. Comienza pensando a fondo en tu idea
El diseño para experiencia de usuario es una disciplina amplia, pero para el alcance de este artículo (y para cualquier diseñador novato), quiero que sigas un principio: haz una cosa (¡y hazla bien!) en cada pantalla en la que uses mallas metálicas y diseñes.
Para hacer el formato de tu diseño y flujo centrado en el usuario, piensa en la necesidad esencial del usuario que buscas satisfacer en cualquier pantalla y concéntrate en la manera más simple y efectiva de hacerlo. Un error de novato es meter muchas características en una sola pantalla. En su lugar, agrega minuciosamente más capas de funcionalidad cuando la experiencia principal esté lista.
Tip: para ver un buen ejemplo en acción, échale un vistazo a la aplicación Shopify POS, que simplifica el proceso de integrar una tienda en línea con otra fuera de línea.
Para nuestra aplicación Bucket, vamos a diseñar la malla metálica de su página de registro, una pantalla que muestra la lista actual y una pantalla para agregar un nuevo deseo.
2. Elige un tamaño de pantalla
Cuando inicias Adobe XD, te pide que elijas un tamaño de pantalla. Para este tutorial seleccionaremos las dimensiones de iPhone 6/7/8 (375 x 667), pero puedes iniciar fácilmente con los tamaños de iPad, página web o personalizado.
Claro que puedes empezar a bosquejar tus ideas (una práctica común para la mayoría de los diseñadores), pero en lo personal me parece útil diseñar el ambiente planeado desde el inicio. Si vas a diseñar una pantalla de 1920x1080, es más difícil tener una percepción adecuada de la escala desde un bosquejo.
Cuando ya hayas elegido, aparecerá la mesa de trabajo de XD y un lienzo nuevo en el tamaño que elegiste.
3. Cómo duplicar una mesa de trabajo
Comenzaremos haciendo duplicados de la mesa de trabajo.
Vamos a diseñar la malla metálica de tres pantallas, así que crea dos mesas de trabajo más eligiendo la función de mesa de trabajo desde el panel izquierdo y haciendo clic en cualquier lugar al lado de tu primera mesa de trabajo.
Como alternativa, también puedes hacer clic en la primera mesa de trabajo para seleccionarla y luego ve a Editar > Duplicar.
Puedes cambiar el nombre a las pantallas haciendo doble clic sobre los títulos predeterminados que se muestran en la parte superior izquierda de cada mesa de trabajo.
4. Objetos sencillos
Para la primera pantalla tendremos un marcador de posición para un logotipo, y dos botones: uno para registro (para usuarios no registrados) y otro para iniciar sesión (para usuarios registrados).
Selecciona la herramienta de Texto desde el panel a la izquierda y haz clic donde quieras sobre la primera mesa de trabajo para empezar a escribir. Necesitamos un marcador de posición para el logotipo de la aplicación, así que comenzaré cerca de la parte superior, pero tú puedes ponerlo donde desees haciendo clic y arrastrando. Para el texto en sí, puedes escribir "Logotipo" por ahora. Cualquier gráfico para el logotipo de marca puede agregarse después en el proceso de diseño.
Bajo el texto del logo, usa de nuevo la herramienta de Texto para escribir "ingresa" y "regístrate", uno arriba del otro (pero deja espacio suficiente para trazar círculos a su alrededor.
Selecciona la herramienta de Elipse desde el panel a la izquierda y traza círculos alrededor de tus botones. También puedes copiar y pegar tu primer círculo.
Ve a Objeto > Disposición > Enviar atrás para colocar los círculos detrás del texto y no sobre él. De manera alternativa, puedes seleccionar los círculos de manera individual y usar la sección de Apariencia en el panel a la derecha para eliminar su relleno para obtener el mismo efecto.
Como otros productos de Adobe, XD tiene guías automáticas que te ayudarán a colocar cualquier elemento. Si quieres cambiar las coordenadas exactas, puedes seleccionar cualquier elemento y usar el panel a la derecha para cambiar su posición (también el tamaño y la rotación).
5. Las maravillas de Repetir cuadrícula
Para la pantalla de la lista usaremos una característica de XD llamada Repetir cuadrícula. Si tu malla metálica consiste en repetir elementos o listas de contenido, la característica de Repetir cuadrícula te permite hacerlo mientras permite hacer cambios que actualizan de manera automática en toda la cuadrícula.
Usa la herramienta de Rectángulo del panel a la izquierda para trazar un rectángulo de 150 px x 150 px, y luego usa la herramienta de Relleno del panel a la derecha para cambiar su color a un gris claro para indicar que es un marcador de posición de imagen. Agrega una descripción debajo de la forma con la herramienta de Texto. Selecciona la forma y el texto al mismo tiempo y haz una copia al lado para crear una fila de contenido.
Puedes usar texto de marcador de posición (como el estándar de diseño Lorem Ipsum) para tu lista de contenido, pero a mí me gusta agregar un toque de personalización para emparejar mis mallas metálicas, ya que hacerlo me ayuda a tener una idea de la experiencia completa desde el inicio. Ahora nuestra lista de cosas por hacer tiene elementos como "Volar en un globo aerostático" y "Visitar País".
Ahora selecciona todos los elementos en tu fila y haz clic en Repetir cuadrícula en el panel a la derecha (o ve a Objeto > Repetir cuadrícula). Un contorno y deslizadores verdes aparecerán alrededor de tu selección, lo que te permite extender tu lista de contenido en cualquier dirección (en nuestro caso, verticalmente). Por ahora, haz clic y arrastra lo suficiente para tener una fila más (aunque claro que puedes crear más).
Puedes usar la herramienta de Texto de nuevo para escribir un mensaje de bienvenida (como en la imagen de abajo) y copiar y pegar uno de los botones de la primera pantalla para transformarlo en el botón de "agregar" (haz doble clic sobre el texto para cambiarlo). También puedes cambiar el texto por cualquiera de los elementos en tu cuadrícula.
6. Practica con más texto y formas
Para terminar, diseñemos la malla metálica de una pantalla para que nuestro usuario agregue un nuevo elemento a su lista de cosas por hacer.
La repetición es la clave para aprender cualquier concepto nuevo, así que vamos a repetir algunas de las habilidades que ya usamos. Usa la herramienta de Texto para escribir un elemento en progreso ("Ir a Coachella" en la imagen debajo) y, de manera opcional, insertar la barra vertical desde tu teclado al final del texto para que se vea como un cursor (y comunicar que este texto lo ingresa el usuario).
Usa las herramientas de Texto y Rectángulo como antes para agregar el resto de los elementos en esta mesa de trabajo. Transforma el botón de las pantallas anteriores en el botón de "hecho", que le permitirá al usuario terminar de agregar un elemento nuevo.
Y ya está, ¡ahora puedes tachar "aprender a usar mallas metálicas" de tu lista de cosas por hacer!
Mostrar tu trabajo (Opcional)
Adobe XD te permite compartir fácil y rápido cualquier proyecto que estés haciendo con tus colaboradores o las personas interesadas.
Si estás trabajando en una aplicación o sitio web para un cliente, puedes compartirle un enlace para que vea tu proyecto de diseño al seleccionar Archivo > Compartir > Publicar prototipo. Esto es completamente voluntario, pero la colaboración es importante en las mallas metálicas, así que no temas compartir lo que has hecho y recibir comentarios.
Conclusión
Las mallas metálicas son el ejercicio perfecto para aprender sobre las herramientas de Adobe XD, y solo hemos visto lo básico en este tutorial. Para obtener más recursos de aprendizaje sobre este tema, visita los siguientes enlaces.
