Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe XD
Webdesign

Su primer prototipo de sitio web de comercio electrónico con Adobe XD

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Claudia Márquez (you can also view the original English article)

Final product image
What You'll Be Creating

En mi último tutorial, vimos cómo se puede usar Adobe XD para cablear una aplicación móvil. Esta vez compartiré cómo puedes diseñar una maqueta visual y un prototipo.

Adobe XD se puede usar para diseñar tanto para la web como para dispositivos móviles, y ofrece un espacio de trabajo optimizado para diseñar su experiencia al tiempo que incluye una interactividad simple que luego se puede enviar a un desarrollador o presentar a un cliente.

Diseñaremos un sitio web para una tienda de ropa en línea simple; una marca ficticia llamada "Lo-Key", que vende una línea de elementos básicos de temática urbana. Siga adelante para aprender, y siéntase libre de modificar y experimentar con los resultados si está utilizando este tutorial para diseñar su propia tienda.

1. Investiga a tus usuarios

Este tutorial asume que ya has hecho tu tarea. Si eres un negocio, eso significa que ya sabes quién es tu cliente y qué tipo de experiencia web sería la mejor para ellos. Como diseñador, habrá investigado a los usuarios, diseñado o establecido la identidad de la marca, y habrá dedicado una buena cantidad de tiempo a la configuración y revisión.

Por supuesto, si solo quieres probar Adobe XD y usar este tutorial para aprender lo básico para diseñar un prototipo, también puedes hacerlo. ¡No asuma que el proceso descrito aquí es la totalidad de un proceso de diseño de UX real!

Una vez que esté listo para comenzar a desarrollar una maqueta visual e interactiva, puede pasar al siguiente paso.

2. Elija un tamaño de pantalla

Lo primero que Adobe XD te pide es que elijas un tamaño de pantalla. El valor predeterminado para la web es Web 1920 (1920 X 1080 px) pero también puede elegir una de las otras opciones (Web 1280 o Web 1366) o elegir un tamaño personalizado.

picking a screen size in adobe xd

Una vez que haya hecho su selección, el espacio de trabajo de XD le dará la bienvenida, en la vista Diseño de forma predeterminada, y un lienzo blanco limpio ("mesa de trabajo") en el tamaño que elija.

3. Haz duplicados de tu artboard

Estaremos burlándonos de cuatro páginas estándar para una tienda en línea:

  1. una página de inicio
  2. una página de categoría ("camisas")
  3. El carrito (que muestra los artículos que el cliente ha agregado para el pago)
  4. la página Acerca de (que tiene un poco de información sobre la marca)

También necesitaremos cartulinas para un menú desplegable, así como una ventana emergente que muestre más detalles para un producto seleccionado (el efecto "lightbox"), pero podemos crearlos más adelante.

Por ahora, cree tres mesas de trabajo más eligiendo la función de la mesa de trabajo en el panel izquierdo y haciendo clic en cualquier lugar al lado de su primera mesa de trabajo.

creating more artboards in adobe xd

Como alternativa, también puede hacer clic en la primera mesa de trabajo para seleccionarla y elegir Editar > Duplicar. Cambie el nombre de cada uno tocando dos veces los títulos predeterminados (visibles en la parte superior izquierda de cada mesa de trabajo).

4. Colocar imágenes y agregar texto

Para nuestra página de inicio, vamos a hacer algo que es bastante popular en los sitios web de la industria de la moda y el comercio minorista. Elegiremos una imagen grande para ser todo nuestro fondo.

Sugerencia: puede informar a Adobe XD que una mesa de trabajo es su página de inicio seleccionando la mesa de trabajo completa y haciendo clic en la etiqueta gris que aparece en la parte superior izquierda. Se volverá azul para mostrar que esta es la página de inicio o de inicio de su experiencia.

Una vez que haya decidido la imagen que desea usar, seleccione Archivo > Importar (como alternativa, presione Cmd + Shift + I) para ubicar esa imagen en su disco e importarla a su lienzo. Si su imagen es más grande que la cartulina, manténgala presionada y arrástrela para encontrar la posición que desee.

Continuando con nuestra estética minimalista, mantendremos nuestro texto corto y limpio, solo el nombre de la marca (o el logotipo), un eslogan y una barra de navegación.

Seleccione la herramienta Texto en el panel de la izquierda y haga clic en el lugar que desee en la primera mesa de trabajo para comenzar a escribir. Para el texto de nuestro logotipo, estoy empezando por debajo de la mitad, pero puedes moverlo como desees haciendo clic y arrastrando. Por supuesto, también puede importar una imagen de logotipo de la misma manera que importamos nuestra imagen de fondo.

Bajo el texto del logotipo, puede usar la herramienta de texto nuevamente para escribir el lema de su marca.

homepage design

Adobe XD ofrece muchas opciones de formato estándar para su texto. Puede seleccionar cualquier bloque de texto y cambiar su fuente, estilo, color, tamaño y otros atributos. La siguiente captura de pantalla muestra el formato del texto de navegación en la página de inicio.

text formatting in adobe xd

Las fuentes en este ejemplo siguen una armoniosa escala 1: 2 que puede aprender en esta guía sobre tipografía efectiva para la web:

Utilice lo que ha aprendido en esta sección para agregar los títulos de las páginas de las cuatro páginas restantes y colocar las imágenes y el texto del cuerpo de las páginas Carro y Acerca de.

cart page in our ecommerce design

5. Haz un símbolo

Pasemos a la página Acerca de.

Encuentre el ícono de navegación que le guste (como el que se encuentra en este conjunto) y colóquelo junto al logotipo, en la esquina superior izquierda, en la página Acerca de (o en cualquiera de las otras dos páginas, además de la Página de inicio).

menu icon
Ejemplo de icono de menú

Como también necesitará el icono y el logotipo de las otras páginas, puede convertirlos en un símbolo. Haz clic derecho y selecciona Crear símbolo (o pulsa Cmd + K). Puedes acceder a cualquier símbolo que hayas hecho haciendo clic en el ícono de Activos en la página izquierda. Desde allí, puede arrastrar y soltar un símbolo en cualquiera de sus mesas de trabajo. De esta manera, no tendrás que copiar y pegar cada vez.

Puede vincular su símbolo Lo-Key a la página de inicio usando el método en el siguiente paso.

6. Crea tu primer enlace

Cambia al modo Prototipo desde la barra en la parte superior. Zoom en su primer tablero de arte (Inicio) y seleccione el texto Acerca de. Una flecha azul aparecerá junto a ella. Presiona hacia abajo y arrástrala hacia afuera. Un alambre azul seguirá obedientemente donde quiera que vaya su cursor.

blue wire

Arrástrelo a su segundo tablero de arte (Acerca de) y déjelo allí. Ahora ha creado un enlace entre las dos páginas y, asegurándose de que la pestaña Transición esté seleccionada, puede elegir el tipo de transición y la facilidad con la ventana emergente que aparece cuando suelta el cable. Por ahora, puede mantener la transición a ninguno porque queremos que la página Acerca de reemplace inmediatamente la página de inicio tan pronto como se presione el botón Acerca de.

transition settings

Puede repetir este método para agregar enlaces a cualquier otra página.

7. Use Superposiciones para agregar un menú desplegable y Lightbox

Agreguemos ahora nuestro menú desplegable de navegación.

Cree un nuevo tablero artístico, titulado Nav, y modifique sus dimensiones según sus requisitos utilizando los controles de Ancho y Alto que se muestran en el panel derecho. La mesa de trabajo de Nav que se muestra a continuación es 210px X 275px.

Usando las herramientas Texto y, opcionalmente, Línea en el panel izquierdo, diseñe su menú desplegable. Este menú aparecerá cuando su cliente haga clic en el ícono de la hamburguesa.

drop down menu design

De vuelta en el modo de prototipo, arrastre un cable desde el menú de hamburguesas al tablero de arte de navegación. En el cuadro que aparece, cambie a la pestaña Superposición. Aparecerá un cuadro verde que muestra dónde aparecerá la superposición. Arrastre para moverlo hasta que esté debajo de su menú de hamburguesas. Elija Ninguno como su configuración de transición (o experimente con las otras opciones).

Ahora haga clic en el icono de reproducción en la ventana superior derecha. Tu página de inicio aparecerá en una ventana de vista previa. Haga clic en el botón Acerca de para ir a la página Acerca de. Ahora, haga clic en el icono de la hamburguesa. Se mostrará su menú desplegable. Haga clic en él de nuevo y desaparecerá.

Puede vincular los artículos / títulos de página en el menú desplegable a sus respectivas páginas usando el mismo método que en el Paso 6. Esto lo convertirá en una navegación de trabajo para todas las páginas en su prototipo.

8. Use la función "Repetir cuadrícula" para crear filas y columnas de objetos

Para nuestra página de Camisetas, necesitamos múltiples filas de productos.

Para eso, usaremos una función XD llamada Repeat Grid. Si su diseño implica la repetición de elementos o listas de contenido, la función Repetir cuadrícula le permite hacerlo sin dejar de hacer cambios que se actualizan automáticamente en toda la cuadrícula.

Use la herramienta Rectángulo en el panel izquierdo para dibujar un rectángulo de 450 x 300 píxeles y luego use la herramienta Rellenar en el panel derecho para colorearlo en gris claro para indicar que es un marcador de posición de imagen.

Ahora seleccione el rectángulo y haga clic en Repetir cuadrícula en el panel derecho (u Objeto > Repetir cuadrícula). Un contorno verde y controles deslizantes verdes aparecerán alrededor de su selección, permitiéndole extender su lista de contenido en cualquier dirección (tanto vertical como horizontal en nuestro caso). Por ahora, haga clic y arrastre el tiempo suficiente para hacer dos filas con tres columnas cada una.

repeat grid feature

Seleccione su cuadrícula de repetición y luego coloque el cursor sobre los espacios en blanco entre sus rectángulos. Cuando se vuelven de color rosa, puede arrastrar hacia arriba y hacia abajo para cambiar el relleno entre las celdas.

padding between grid cells

Para poblar su cuadrícula con imágenes de productos, arrastre las fotos de sus productos desde una sola carpeta a su cuadrícula en XD. Ellos llenarán la cuadrícula automáticamente.

images in the grid

Puede usar el mismo método de superposición del Paso 7 para crear la caja de luz de su producto que aparece cuando hace clic en una camisa / producto.

pop up overlay

9. Paso opcional: ¡Comparte!

Adobe XD le permite compartir de manera rápida y fácil cualquier cosa en la que esté trabajando con colaboradores y otras partes interesadas.

Si está trabajando en una aplicación o sitio web para un cliente, puede compartir un enlace a su proyecto de diseño con ellos seleccionando Archivo > Compartir > Publicar prototipo.

publish options

También puede publicar Especificaciones de diseño que permitan a los desarrolladores (o cualquier otra persona) ver el formato y otras configuraciones de su prototipo en un navegador. También pueden descargar cualquier elemento, como imágenes o gráficos, que marque para exportar (vaya a Ver > Capas. Puede seleccionar cualquier elemento y hacer clic en el icono que se encuentra a su lado o hacer clic con el botón derecho en cualquier elemento de la lista y seleccione Marcar para exportación por lotes).

Design Specs in a web browser
Especificaciones de diseño en un navegador web

Conclusión

¡Y hemos terminado! Ahora ha diseñado un prototipo para una tienda en línea simple. Se puede compartir con las partes interesadas, o desarmarse y construirse por los desarrolladores. ¡Revise los enlaces a continuación para obtener más información sobre Adobe XD!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.