Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
En mi último tutorial de Adobe XD, vimos cómo este software puede ser utilizado para esbozar una aplicación móvil. Hoy compartiré cómo puedes diseñar un mockup y un prototipo de página web.
Adobe XD puede usarse parea diseñar tanto para la web como para dispositivos móviles, y ofrece un espacio de trabajo optimizado y ágil en el que diseñar tu experiencia de usuario al mismo tiempo que incluyes interacciones sencillas que posteriormente puedan ser enviadas a un desarrollador o presentadas a un cliente.
Vamos a diseñar un sitio web de comercio electrónico de accesorios de una marca ficticia denominada “Lo-Key”, que vende una línea de artículos básicos para la vida urbanita. Continúa leyendo para aprender cómo usar Adobe XD para este prototipo de página web, y siéntete libre de modificar y experimentar con los resultados en caso de que estés usando este tutorial de Adobe XD para diseñar el prototipo de tu página web en concreto.
1. Haz un estudio sobre el usuario objetivo de tu página web de eCommerce
Este tutorial de Adobe XD asume que ya has hecho los deberes. Si tienes un negocio, eso implica que ya conoces quiénes son tus clientes y qué tipo de experiencia web es la más adecuada para ellos. Como diseñador, habrás realizado una investigación, habrás diseñado o establecido tu identidad de marca, e invertido una buena cantidad de tiempo creando tus bocetos y revisándolos.
Investigación UX: Cómo Construir una Guía de Entrevista
Cómo realizar mejores preguntas de investigación de UX
Por supuesto, si solo deseas probarlo y usar este tutorial de Adobe XD para aprender los conceptos básicos para diseñar un prototipo de página web, también puedes hacerlo. Simplemente, ¡no asumas que el proceso aquí descrito constituye el proceso completo del diseño real de la experiencia de usuario de una página web de eCommerce!
Una vez estés preparado para empezar a desarrollar un mockup visual e interactivo, puedes pasar al siguiente paso.
2. Selecciona un tamaño de pantalla
Lo primero que te solicita Adobe XD es que elijas un tamaño de pantalla. El tamaño predeterminado para el prototipo de una página web es Web 1920 (1920 X 1080 píxeles), pero también puedes usar una de las otras opciones (Web 1280 o Web 1366), u optar por un tamaño personalizado.
Una vez hayas elegido una opción, el software te dará la bienvenida al espacio de trabajo de Adobe XD, por defecto con la vista de diseño activa, y con un limpio lienzo en blanco ("artboard" o mesa de trabajo) cuyo tamaño coincide con la elección que hiciste.
3. Crea duplicados de tu mesa de trabajo
Vamos a crear mockups de cuatro páginas estándar para una tienda online:
- Una página de inicio
- Una página de categoría “Shirts” (camisetas)
- el carrito (el cual muestra los artículos que el cliente haya añadido para finalizar su compra)
- Una página de Sobre nosotros (que contendrá algo de información sobre la marca o la empresa)
También necesitaremos elementos de diseño para el menú desplegable de tu página web de eCommerce, así como un popup que muestre más detalles sobre el producto seleccionado (el efecto "lightbox"), pero podemos crearlos más adelante.
De momento, crea tres mesas de trabajo más eligiendo la función de mesa de trabajo del panel de la izquierda y pulsando en cualquier zona próxima a tu primera mesa de trabajo.
Alternativamente, podrían hacer clic sobre la primera mesa de trabajo para seleccionarla y elegir Editar > Duplicar. Renombrar cada una dando un rápido doble clic sobre sus títulos predeterminados que aparecen en la parte superior izquierda de cada mesa de trabajo.
4. Cómo usar Adobe XD para colocar imágenes y añadir texto
Para nuestra mesa de trabajo, vamos a hacer algo bastante popular en cualquier sitio web de comercio electrónico perteneciente al sector de la moda y los minoristas. Elegiremos una amplia imagen para todo nuestro fondo.
Consejo: puedes dejar que Adobe XD sea consciente de qué mesa de trabajo es tu página de inicio seleccionando la totalidad de dicha mesa y a continuación pulsar la etiqueta gris que aparece en la parte superior izquierda. Cambiará a color azul para mostrar que esta es la página inicial o página de aterrizaje de la experiencia de usuario que estás diseñando.
Una vez hayas decidido qué imagen usar, selecciona Archivo > Importar (también puedes hacerlo con el atajo de teclado Cmd + Shift + I) para localizar esa imagen en el disco de tu equipo e importarla a tu lienzo. Si tu imagen es más grande que la mesa de trabajo, haz clic con el botón del ratón sobre ella y mantenlo pulsado para arrastrarla y encontrar la ubicación que deseas para ella.
Continuando con nuestra estética minimalista, vamos a mantener nuestro texto breve y limpio, simplemente usaremos el nombre de la marca (o su logotipo), un eslogan, y una barra de navegación.
Selecciona la herramienta Texto del panel situado a la izquierda y haz clic en cualquier sitio de la primera mesa de trabajo para empezar a escribir. Para el texto de nuestro logotipo, voy a empezar un poco más abajo de la altura media, pero tu puedes empezar allí donde quieras haciendo clic con la herramienta y arrastrando para crear un cuadro de texto. Por supuesto, también puedes importar la imagen de tu logotipo de la misma forma en la que importamos nuestra imagen de fondo.
Bajo el texto del logotipo de nuestra primera página web de eCommerce, puedes usar de nuevo la herramienta Texto para escribir una línea de eslogan para tu marca.
Adobe XD ofrece muchas opciones de formato estándar para tu texto. Puedes seleccionar cualquier bloque de texto y cambiar su fuente, su estilo, su color, tamaño y otros atributos. La siguiente captura de pantalla muestra cómo está formateado el texto de los elementos de navegación de nuestro prototipo de página web.
Las fuentes de este ejemplo tienen una armoniosa escala de 1:2 sobre la que puedes aprender en este tutorial sobre cómo crear tipografías eficaces para la web:
Utiliza todo lo aprendido en esta sección del tutorial de Adobe XD para añadir los títulos del resto de las cuatro páginas y coloca las imágenes y el cuerpo del texto para las páginas Carrito y Sobre nosotros.
5. Cómo usar Adobe XD para crear un símbolo
Volvamos a la página Sobre nosotros.
Encuentra un icono de menú de navegación que te guste (como el que puedes encontrar en este conjunto de iconos) y colócalo junto al logotipo, en la esquina superior izquierda de la página Sobre nosotros (o en cualquiera de las otras dos páginas, además de la página de inicio).
Como también vas a necesitar el icono y el logotipo para el resto de páginas, puedes convertirlos en un Símbolo. Pulsa con el botón derecho del ratón y selecciona Crear símbolo (o pulsa las teclas Cmd + K). Puedes acceder a cualquier símbolo que hayas creado haciendo clic sobre el icono Recursos en la parte izquierda de la página. Desde ahí, puedes arrastrarlo y soltarlo a cualquiera de tus mesas de trabajo. De esta forma, no tendrás que copiarlos y pegarlos cada vez que desees un duplicado del mismo.
Puedes vincular tu símbolo Lo-Key con la página de inicio de tu sitio web de comercio electrónico usando el método que explicamos en el siguiente paso.
6. Crea tu primer vínculo
Cambia al modo Prototipo desde la barra superior. Aumenta el porcentaje de visualización de tu primera mesa de trabajo, la de la página de inicio, y selecciona el texto Sobre nosotros. Aparecerá junto a él una flecha de color azul. Pulsa sobre él y sin soltar el botón del ratón arrastra alejándote del mismo. Verás que una línea azul seguirá fielmente a tu cursor allí donde lo lleves.
Arrastra la línea hasta la segunda mesa de trabajo (la de la página Sobre nosotros) y suéltala allí. Acabas de crear un enlace entre las dos páginas y, asegúrate de tener abierta la pestaña Transición, puedes elegir el tipo de transición y su suavizado mediante la ventana emergente que aparecerá cuando sueltes la línea. De momento, puedes mantener el ajuste de transición a ninguna dado que deseamos que la página Sobre nosotros sustituya de inmediato a la de inicio, es decir, en cuanto presionemos sobre el botón con el texto Sobre nosotros.
Puedes repetir este método para añadir enlaces a cualquier otra página.
7. Usa capas de superposición para añadir un menú desplegable y un lightbox
Añadamos ahora nuestro menú de navegación desplegable.
Crea una mesa de trabajo, denomínala Nav, y modifica sus dimensiones según sean tus necesidades usando los controles Anchura y Altura ubicados en el panel de la derecha. La mesa de trabajo Nav de la siguiente imagen tiene unas dimensiones de 210px por 275px.
Usando la herramienta Texto y, opcionalmente, la herramienta Línea del panel izquierdo, diseña tu menú desplegable. Este menú aparecerá cuando tus usuarios hagan clic sobre el icono de hamburguesa de tu menú.
Vuelve de nuevo al modo Prototipo, arrastra la línea azul desde el icono del menú hasta la mesa de trabajo Nav. En la caja que aparece, cambia a la pestaña Superposición. Aparecerá una caja de color verde que muestra cuándo aparecerá la superposición. Arrastra el ratón para moverla hasta situarla bajo el icono de tu menú. Selecciona Ninguna como ajuste de transición, o experimenta con el resto de opciones a tu gusto.
Ahora pulsa el icono de Reproducción situado en la parte superior derecha de la ventana. Aparecerá tu página de inicio en una ventana de previsualización. Pulsa el botón Sobre nosotros para ir a la correspondiente página. Ahora pulsa sobre el icono del menú. Esto desplegará tu menú desplegable. Pulsa sobre él nuevamente y este desaparecerá.
Puedes vincular los elementos o los títulos de página del menú desplegable con sus correspondientes páginas empleando el mismo método usado en el paso 6 de este tutorial sobre Adobe XD. Esto lo convertirá en un funcional sistema de navegación para todas las páginas de tu prototipo.
8. Usa la función de Repetir cuadrícula para crear filas y columnas de objetos
Para la página de nuestras Camisetas, necesitamos múltiples filas de productos.
Para generarlas, vamos a usar la función de Adobe XD denominada Repetir cuadrícula. Si tu diseño requiere la repetición de elementos o listas de contenido, la función Repetir cuadrícula te permitirá lograrlo al mismo tiempo que realizas cambios ágilmente que se actualizan automáticamente a través de la cuadrícula completa.
Usando la herramienta Rectángulo situada en el panel de la izquierda, dibuja un rectángulo de 450px por 300px y después usa la herramienta Relleno del panel derecho para aplicarle un color gris claro que indique que es una celda para incluir una futura imagen.
Ahora selecciona el rectángulo y en el panel de la derecha pulsa sobre Repetir cuadrícula (o selecciona el menú Objeto > Repetir cuadrícula). Alrededor de tu selección aparecerán un marco y selectores de desplazamiento en color verde, los cuales te permitirán ampliar el contenido de tu selección en cualquier dirección (tanto vertical como horizontalmente). De momento, haz clic y arrastra la selección lo suficiente como para que incluya dos filas de tres columnas cada una.
Selecciona tu cuadrícula repetida y después sitúa el puntero sobre los espacios en blanco entre sus rectángulos. Cuando cambien a un color rosado, puedes arrastrarlo hacia arriba o abajo para cambiar el espacio entre estas celdas.
Para llenar tu cuadrícula con imágenes de productos, arrastra las fotografías de los mismos desde una carpeta a tu retícula en Adobe XD. Se distribuirán sobre el diseño automáticamente.
Puedes utilizar el mismo método de superposición del paso 7 para crear el lightbox de productos que aparece cuando haces clic sobre la imagen de una camiseta o cualquier otro producto de tu página web de eCommerce.
9. Paso opcional: ¡Comparte!
Adobe XD te permite compartir rápida y fácilmente cualquier cosa en la que estés trabajando con colaboradores y terceras partes involucradas con tu proyecto.
Si estás trabajando en una aplicación o en una página web de eCommerce para un cliente, puedes compartir con ellos un enlace hacia tu proyecto de diseño seleccionando Archivo > Compartir > Publicar prototipo.
También puedes publicar las Especificaciones de diseño que permitirán a los desarrolladores (o a cualquiera que los necesite) visualizar el formateado y otros ajustes de tu prototipo en un navegador. Además, podrán descargar cualquier recurso, como por ejemplo, imágenes o gráficos vectoriales, que hayas marcado para su exportación (dirígete a Ver > Capas). Incluso puedes seleccionar cualquier elemento y pulsar sobre el icono junto a él, o hacer un clic con el botón derecho sobre cualquier elemento de la lista y seleccionar Marcar para exportación en lote).
Conclusión
¡Hemos terminado! Ya sabes cómo usar Adobe XD para diseñar un prototipo de página web para un sitio web de comercio electrónico. Podrás compartirlo con terceras partes implicadas en el proyecto o recopilarlo por separado para que los desarrolladores trabajen con él. Echa un vistazo a los siguientes enlaces para aprender más sobre cómo usar Adobe XD, ¡o prueba nuestro tutorial de Adobe XD sobre animación automática!
By
