Cómo acelerar el proceso de wireframing con Photoshop y Adobe XD

Antes de empezar cualquier proyecto de diseño, hay una palabra que seguro te sigue desde el principio: wireframing . Hoy aprenderemos cómo crear una estructura alámbrica en Adobe XD y cómo implementar algunos gráficos de Photoshop simplemente usando bibliotecas.

Pero primero, ¿qué es exactamente un wireframe?

Un wireframe es una representación visual de la estructura de su proyecto. Define los huesos, los elementos que funcionarán en su diseño y la ubicación del contenido para su prototipo.

Lo bueno del wireframing es que es una combinación de elementos simples que te hacen concentrarte en la funcionalidad de tu proyecto. En esta etapa, puedes dibujar sin pensar demasiado en el estilo y el diseño.

Solo tienes que averiguar cuáles son los objetivos de tu proyecto y cómo desarrollarlos a través de wireframing utilizando elementos simples. A medida que avanza en la creación de esquemas, desarrolla las mejores soluciones como componente del equipo, hace comentarios y sugerencias sobre su boceto.

El primer paso es crear un proyecto y nombrarlo "secciones", luego hacer una lista de "elementos" que necesita para completar los diferentes pasos, hasta la creación de la "arquitectura" final.

Crear un wireframe “a mano” primero tiene mucho sentido. Te ayuda a desarrollar toda la idea en papel (sin límites digitales), y también permite que tus conceptos fluyan fácilmente. Para aquellos de ustedes que trabajan en equipo, trabajar con papel no parece el mejor enfoque si desea compartir sus nociones con todos los involucrados en el proyecto, especialmente si trabaja con su equipo en línea.

En este tutorial, cubriremos los siguientes pasos:

1. Cree una estructura alámbrica, seleccione e inserte activos de PS a través de bibliotecas;
2. Actualice los archivos PS y vea los resultados en Adobe XD.

Crearemos un conjunto de objetos para usar en nuestra estructura alámbrica. Los pondremos a un lado en nuestros activos ya que teníamos un panel adicional desde donde podemos tomar nuestras herramientas.

Una vez que haya terminado con él, puede guardarlo y reutilizarlo para proyectos futuros, usando los mismos elementos nuevamente y agregando algunos objetos más también.

Necesitará estos elementos de Photoshop que preparé para usar en nuestra estructura alámbrica.

Esto es lo que crearemos:

1 . Cree una estructura alámbrica y seleccione e inserte activos de PS a través de bibliotecas

El mejor lugar para comenzar a desarrollar una estructura alámbrica desde cero es dibujarlo a mano primero.

En este proyecto, quiero crear una página de inicio para un sitio de cursos en línea. Sé que necesito comunicar información esencial en él. No tiene que ser perfecto la primera vez, pero al final, su efectividad depende en gran medida de cómo organicé la estructura metálica y qué tan cerca se alinea con el propósito inicial.

Primer paso : Aquí están mis propios wireframes dibujados a mano.

Como puedes ver, no hay mucha información sobre ellos. La primera intención es solo mostrar cómo se compondrá el diseño y qué elementos se considerarán. Limpio y sencillo.

Segundo paso : Vuelva a enviar el wireframe en un tamaño más pequeño y con algunas notas al margen que utilizo para explicar los elementos y su uso:

Tercer paso : comencemos a crear nuestro modelo de alambre digital con Adobe XD.

Abra Adobe XD y elija "Web 1920" en la ventana abierta.

Guarde su proyecto como "Wireframe" seleccionando Archivo → Guardar como .

Una vez que haya guardado su archivo, cree también otra mesa de trabajo para iPhone ⁶ ⁄ ₇ Plus.

Haga clic en el botón A (mesa de trabajo) en el lado izquierdo y elija "iPhone 6/7/8" en la barra lateral derecha.

Y aquí están nuestras dos mesas de trabajo: una para escritorio y otra para dispositivos móviles.

Ahora podemos comenzar a crear nuestros objetos de estructura alámbrica. Siguiendo nuestros bocetos dibujados a mano, ahora crearemos los mismos objetos en XD.

Imagen de héroe
Seleccione la herramienta Rectángulo ( R ) y dibuje una forma donde debería estar su imagen de héroe. Luego toma la Herramienta Línea ( L ) y dibuja dos líneas uniendo los vértices. Este tipo de forma representa nuestro marcador de posición de imagen.

Agrupe la forma y las líneas y llame al grupo "Héroe":

Ahora continuemos con la sección “Iconos”. Coloco algo de texto antes de mis íconos, y lo voy a representar visualmente con algunas líneas. Tome la herramienta Línea ( L ) nuevamente y dibuje una sola línea horizontal. Haga clic en la herramienta Repetir cuadrícula ( ⌘ + R en Mac o CTRL + R en Windows) y arrastre su línea hasta que tenga tres.

Necesitamos tres símbolos para nuestros íconos, así que haga clic en Ellipse Tool / E ) y dibuje un círculo. Haga clic nuevamente en la herramienta Repetir cuadrícula ( ⌘ + R en Mac o CTRL + R en Windows) y cree tres círculos. Luego selecciona el espacio entre los círculos y arrastra para hacerlo más ancho.

Sección de características
Cree un fondo gris claro ( #F8F8F8 ) usando la herramienta Rectángulo ( R ). Repita los pasos de la sección Imagen principal anterior para crear un marcador de posición de imagen, luego repita los pasos de la Sección de iconos (también arriba) para crear una línea para el texto. Finalmente, cree un botón simple con la ayuda de la herramienta Rectángulo ( R ).

Este es el resultado final:

Para la Sección de testimonios, repita los mismos pasos que antes para crear un marcador de posición de imagen y algunas líneas de texto. Como puede ver en la imagen de estructura alámbrica completa, hay un símbolo de comillas que tenemos que insertar.

Vamos a hacerlo usando Photoshop.

Abra el archivo de Photoshop que proporcioné haciendo clic en este enlace.

Quiero insertar esta imagen como un símbolo usando Libraries CC.

En Photoshop, asegúrese de ver el panel Bibliotecas yendo a Ventana → Bibliotecas . Cree una nueva biblioteca haciendo clic en el pequeño icono en la parte superior derecha (ver imagen):

Llamé a mi biblioteca "Wireframe". Siéntase libre de darle a su biblioteca el nombre que desee.

Ahora haga clic y arrastre el símbolo que desea tener en su biblioteca:

Vuelva a XD y vaya a Archivo → Abrir bibliotecas CC y verá el último símbolo que acaba de cargar a través de Photoshop y la biblioteca que creó.

Arrastre el símbolo de la cita a su estructura alámbrica en XD y colóquelo donde lo necesite.

Para las secciones "Precios, Suscripción y Pie de página", las representaremos usando casillas y líneas adicionales como las que ves en la imagen a continuación.

Nota : puede encontrar el ícono de correo electrónico en el archivo de Photoshop que proporcioné aquí ).

Siga los pasos descritos en la sección Característica para insertar el símbolo en la biblioteca a través de Photoshop, ábralo en XD y arrástrelo a su mesa de trabajo de estructura alámbrica.

Este es el resultado:

Una última cosa que debemos hacer antes de continuar es ordenar nuestras capas. Asegúrese de que sus capas estén activadas haciendo clic en el icono de capa ( ⌘ + Y para Mac o CTRL + Y para Windows).

Agrupe todos los elementos de la sección en carpetas (les asigné el mismo nombre de la sección que representan). De esta forma, tendrás todos tus elementos ordenados y no tendrás ninguna dificultad para encontrarlos rápidamente (ver imagen).

¡Ya hemos terminado con nuestra estructura metálica!

En el siguiente paso, construiremos nuestro diseño utilizando nuestro modelo de alambre y descubriremos cómo modificar los elementos de las bibliotecas al instante.

2. Agregar una capa de fidelidad a su estructura metálica

Acabamos de terminar nuestra estructura alámbrica y, en este punto, podemos volver a verificarla para ver si nos hemos perdido algo. Una vez que estemos seguros de que tenemos toda la información necesaria incluida en el esquema, podemos compartirla con el equipo del proyecto.

Estamos listos para seguir adelante y actualizar nuestra estructura alámbrica para que esté "en vivo" con imágenes, color y copia de marcador de posición.

Anímate y crea tu diseño. Duplique su estructura alámbrica guardándola con otro nombre (p. ej., "Diseño de estructura alámbrica").

Primero, necesitaremos una imagen para nuestra sección Héroe (seguí adelante y usé esta de Priscilla Du Preez de Unsplash).

Abra la imagen en Photoshop y reduzca el tamaño de la imagen haciendo clic en Imagen → Tamaño de la imagen y establezca el ancho en 3000px:

Guarde su imagen y luego arrástrela a sus Bibliotecas.

En XD, arrastre la imagen desde Bibliotecas a su mesa de trabajo. Deje que encaje con la forma que acabamos de crear como marcador de posición de la imagen.

Voy a agregar un logotipo y algo de texto a esta imagen; Necesito que la imagen sea un poco más oscura para que la información sea fácil de leer. Vuelva a las Bibliotecas de Photoshop y haga doble clic en la imagen en el panel. Una vez que la imagen esté abierta, vaya al panel Capa, seleccione la capa de la imagen y haga clic en Agregar un estilo de capa en la parte inferior del panel. Establezca una superposición de color con la configuración que se muestra a continuación:

Guárdelo y se guardará automáticamente en todas sus bibliotecas. Vuelva a XD y verá la imagen en su mesa de trabajo actualizada (no es necesario arrastrarla nuevamente desde la biblioteca).

Nota : según el tamaño de la imagen, las bibliotecas pueden tardar un poco más en actualizarse.

Ahora vamos a insertar nuestro logo. Abra el archivo de Photoshop y arrastre el botón "¡Aprender!" logotipo en las bibliotecas. Esta es la fuente que usé.

Como nuestro fondo es oscuro, necesitaremos un logo blanco. Vuelva a Photoshop y haga doble clic en el logotipo de Bibliotecas.

Tome la herramienta Tipo, resalte el texto del logotipo y hágalo blanco. Guárdelo y también se guardará automáticamente en su mesa de trabajo XD.

Inserta texto y un botón para completar la sección Héroe.

A continuación, voy a completar la siguiente sección agregando texto e íconos. Los que usé son de un paquete gratuito que creé para Smashing Magazine que puedes encontrar aquí.

Como se hizo anteriormente, abra los íconos y agréguelos a sus bibliotecas en Photoshop, luego vuelva a XD para colocarlos en su estructura alámbrica. Aquí está el resultado:

Ahora vamos a pasar a la sección de funciones . Como antes, arrastraremos una imagen al marcador de posición de la imagen (utilicé esta imagen de Sonnie Hiles que encontré en Unsplash). Agregue algo de texto y un botón como le mostré en los pasos anteriores.

Abra el archivo de Photoshop que proporcioné y agregue el símbolo de verificación en sus Bibliotecas. Abra Bibliotecas en XD y coloque el icono cerca del texto. Use la cuadrícula de repetición para hacer tres copias de ella:

Ahora cambiemos el color del símbolo de verificación. Regrese a Photoshop, ábralo desde las Bibliotecas y dele una Superposición de color como se muestra a continuación:

Guárdelo y vea sus iconos en XD directamente actualizados.

Ahora vamos a terminar nuestro diseño.

Para la sección Testimonio , agregue texto y una imagen para el testimonio (tomé el mío de UI Faces).

Finalmente, agregaremos información para la sección Precio , la sección Suscribirse y el pie de página. Puede encontrar tablas de precios en el archivo de Photoshop que proporcioné. Arrástrelos a sus Bibliotecas en Photoshop, luego abra Bibliotecas en XD y arrástrelos a su mesa de trabajo. Siéntete libre de modificarlos como quieras.

Y… ¡hemos terminado!

Conclusión

En este tutorial, hemos aprendido cómo trabajar con Photoshop y Adobe XD para crear una estructura alámbrica y luego cómo agregarle fidelidad rápidamente modificando los elementos de las Bibliotecas. Para su referencia, he creado una estructura alámbrica móvil que puede usar para practicar y seguir este tutorial. Siga los pasos como lo hicimos para la versión de escritorio para agregar texto e imágenes.

¡Déjame ver tu resultado en los comentarios!

Este artículo es parte de la serie de diseño de UX patrocinada por Adobe. La herramienta Adobe XD está diseñada para un proceso de diseño de UX rápido y fluido, ya que le permite pasar de la idea al prototipo más rápido. Diseñe, cree prototipos y comparta, todo en una sola aplicación. Puede ver más proyectos inspiradores creados con Adobe XD en Behance y también suscribirse al boletín de diseño de experiencia de Adobe para mantenerse actualizado e informado sobre las últimas tendencias y conocimientos para el diseño de UX/UI.