Forma y función: una guía de las principales herramientas de estructura alámbrica

En 1487, Leonardo da Vinci dibujó un esquema llamado "vehículo de combate", diseñado mientras estaba bajo el patrocinio de Ludovico Sforza, el duque de Milán. Aunque la máquina se diseñó a propósito para que no funcionara correctamente, un grupo de ingenieros la recreó en 2010. El esquema de Da Vinci es uno de los primeros ejemplos de una estructura alámbrica básica.

El término wireframe se ha utilizado durante décadas, mucho antes de que fuera adoptado por el mundo del diseño web. Los wireframes se utilizaron originalmente en el software de diseño asistido por computadora (CAD) para ilustrar el diseño de un objeto sin necesidad de detalles. El resultado fue un plano que parecía hecho con cables, ergo, terminamos con estructuras alámbricas.

Pero, ¿qué es un wireframe en diseño y cuál es el propósito de tener uno?

Una estructura alámbrica en diseño digital es una guía visual o esquema de página que está despojado de estilo tipográfico, colores, gráficos y elementos interactivos, y representa un punto específico en el proceso de diseño. Su propósito es mostrar ideas de diseño a nivel de página que representen la funcionalidad, el comportamiento y la prioridad del contenido.

Los diseñadores usan wireframes para conectar estructuras conceptuales subyacentes con el diseño visual de un sitio o pantalla de aplicación. Hay tres tipos diferentes de wireframes:

• Baja fidelidad : un dibujo en etapa inicial sin muchos detalles. Los wireframes de baja fidelidad suelen ser bocetos dibujados a mano o líneas y formas que representan una idea.
• Fidelidad media : estructuras alámbricas que comienzan a mostrar más detalles de los componentes y se centran en el diseño del contenido y la estructura general de la página.
• Alta fidelidad: dibujos de etapa posterior (posteriores a la iteración) que representan representaciones más detalladas y de mayor nivel de los componentes, con características de comportamiento y un enfoque en el diseño del contenido.

Una evolución de los wireframes en el diseño digital es otro artefacto y entregable de UX: el flujo de alambre. Los wireflows son una combinación de wireframes y diagramas de flujo, dos artefactos que los diseñadores de UX han fusionado lentamente en uno para otro propósito: ilustrar y seguir interacciones que representan flujos de tareas en un producto como una aplicación web.

Un problema que encuentran los diseñadores con los wireframes es comunicar el recorrido del usuario. Si bien existen formas más complejas de mostrar los recorridos de los usuarios, existe una tendencia a incluirlos en la simplicidad de una estructura alámbrica. Una herramienta útil para eso es un mapa alámbrico.

Un mapa de estructura alámbrica combina estructuras alámbricas con recorridos del usuario (o flujos de usuarios) para demostrar el recorrido del usuario a través de un producto utilizando estructuras alámbricas.

Las mejores herramientas de estructuración de alambres

Los diseñadores tienen muchas opciones a la hora de decidir qué herramienta(s) de wireframing utilizar. Continuamente ingresan nuevas herramientas al mercado, por lo que puede ser difícil mantenerse al día. Aquí hay algunas características de las excelentes herramientas de wireframing que debe buscar:

• La capacidad de producir una variedad de fidelidades (de menor a mayor)
• Software estable que es fácil de usar y se actualiza con frecuencia
• Plantillas, símbolos y componentes de interfaz de usuario estándar integrados con capacidades complementarias

Algunas de las herramientas de esta guía se centran más en la estructuración de cables, mientras que otras intentan encontrar un equilibrio entre la estructuración de cables y la creación de prototipos, y la funcionalidad de maqueta. Elegir usar una herramienta sobre la otra (o varias juntas) se reduce a la preferencia del diseñador.

Balsamiq

Balsamiq es una herramienta de wireframing de baja fidelidad y fácil de usar favorecida por su facilidad de uso y su aspecto icónico de "dibujado a mano". Viene con un conjunto de plantillas prediseñadas que se pueden usar rápida y fácilmente con un editor de arrastrar y soltar. Los diseñadores pueden agregar sus propios activos y personalizar el diseño.

La creación de prototipos básicos se puede lograr mediante la vinculación de maquetas para crear experiencias de clic simples para pruebas de usabilidad al mostrar el proyecto en el modo de presentación de pantalla completa o como un PDF exportado.

Balsamiq se ofrece como versión de escritorio (Windows y Mac), servicio en la nube o como complemento para Google Drive, Confluence y JIRA.

moqups

Moqups es otra herramienta de colaboración creativa que se centra en la creación de esquemas, pero también se puede utilizar para la creación de prototipos. A diferencia de Balsamiq, está puramente basado en la web y está destinado a hacer wireframes para aplicaciones web y móviles.

La principal diferencia entre Moqups y Balsamiq es la fidelidad de los wireframes. Mientras que Balsamiq produce un aspecto "dibujado a mano", Moqups ofrece plantillas y kits a todo color para aplicaciones móviles y diseño web, incluidos iOS, Android y Bootstrap.

Moqups se distingue de Balsamiq en algunas otras formas. El software permite la edición de objetos finitos y la gestión de páginas, lo que brinda a los diseñadores la capacidad de definir objetos "maestros", lo que puede ahorrar mucho tiempo al realizar cambios en los esquemas durante el proceso de iteración.

Por ejemplo, un diseñador crea un objeto de botón maestro con un tamaño, forma y color específicos. Este botón se usa varias veces a lo largo de la estructura alámbrica. Más tarde, en el proceso de iteración, si el diseñador necesita cambiar el color del botón, en lugar de cambiar cada objeto de botón, puede cambiarlo una vez y todos los objetos de botón secundarios se ven afectados de inmediato.

pidoco

Pidoco es una de las mejores herramientas de wireframing enfocada en entregables de baja fidelidad con cierta interactividad básica. También basado en la nube, utiliza componentes reutilizables y se distingue de Balsamiq y Moqups con una experiencia de estructura alámbrica de clics más sólida.

Pidoco es útil para aplicaciones móviles y diseño web porque tiene vistas móviles integradas para que los diseñadores puedan ver cómo se verán las páginas de sus aplicaciones en varios tamaños de pantalla. Otra característica incorporada es la función de exportaciones y especificaciones . Esto ayuda a los diseñadores a pasar de la estructura alámbrica al prototipo/maqueta sin necesidad de un complemento o extensión.

Picoco se ve y se siente de baja fidelidad, pero incluye varias características que normalmente se encuentran en herramientas de diseño más complejas. Funciona bien para los diseñadores que están haciendo Lean UX y necesitan iterar rápidamente con ciclos de retroalimentación más cortos.

Gliffy

Gliffy es una herramienta de wireframing de fidelidad media con algunas características únicas que la diferencian de Balsamiq y Mockups. Una característica única es la capacidad de crear flujos de cables. Gliffy tiene capacidades integradas de diagramas de flujo y diagramas con plantillas, mapas mentales y modelado de procesos comerciales incluidos.

Al igual que las otras herramientas de wireframes, Gliffy proporciona una biblioteca de formas, íconos y la capacidad de compartir wireframes de forma nativa con Confluence, Slack, Basecamp, Trello y WordPress de Atlassian.

Esta es una herramienta de diseño de estructura alámbrica UX relativamente nueva, sin embargo, cuenta con una gran base de suscriptores de diseñadores profesionales que buscan integraciones y capacidades simples más allá de una estructura alámbrica estática.

Estructura alámbrica.cc

Wireframe.cc es una herramienta básica de wireframing muy parecida a Balsamiq. Tiene una interfaz limpia sin muchas barras de herramientas e íconos que distraigan. A diferencia de muchas de las otras herramientas, le permite "dibujar" estructuras alámbricas con un mouse.

Wireframe.cc proporciona una biblioteca de plantillas y un manejo de objetos limpio y sin complicaciones. Un elemento útil que Wireframe.cc ofrece cuando se trabaja con Lean UX es una URL para cada página de estructura metálica para que pueda compartirse para obtener comentarios de forma rápida y sencilla.

No hay creación de prototipos ni interactividad incorporada, ya que se centra únicamente en la estructuración de alambres de baja fidelidad.

Caprichoso

Llamado "Documentos de Google" para estructuras alámbricas, Whimsical imita herramientas de creación de diagramas como OmniGraffle y Visio. No se enfoca en la creación de prototipos/maquetas, ya que su enfoque principal está en la creación de diagramas de alambre y diagramas de flujo, lo que lo convierte en un gran candidato para producir flujos de alambre.

Al igual que Gliffy, Whimsical es una herramienta de wireframing de fidelidad media e incluye una gran biblioteca de elementos configurables (botones, entradas, casillas de verificación, etc.).

La colaboración ilimitada en el mismo documento de estructura alámbrica al mismo tiempo es una excelente función integrada para los equipos de diseño remotos.

adobe xd

Adobe XD recientemente llamó la atención de los diseñadores debido a su interfaz simple, vínculos profundos con otros productos de Adobe, facilidad de uso y funcionalidad integrada que reduce la necesidad de depender de complementos y extensiones.

Hay dos formas de crear estructuras alámbricas en Adobe XD. Se pueden construir usando líneas y formas para crear objetos y elementos, o se pueden construir usando kits de interfaz de usuario prefabricados de fuentes como behance.net y XD resources.

Una función de ahorro de tiempo de Adobe XD es la capacidad de crear componentes "maestros" (llamados Símbolos en Sketch), que son útiles al realizar cambios, ya que todos los componentes instanciados desde el maestro heredarán los cambios.

Otra ventaja de usar XD como herramienta de creación de esquemas es la capacidad de cambiar al modo de creación de prototipos con un clic del mouse. El modo de creación de prototipos está integrado en XD y funciona en segundo plano para que los diseñadores no pierdan tiempo al pasar de los esquemas alámbricos a los prototipos.

Bosquejo

Sketch, una popular herramienta de diseño para diseñadores de UX/UI, proporciona una plataforma para la edición de vectores, la creación de prototipos y la colaboración, y tiene una biblioteca cada vez mayor de cientos de complementos que amplían su funcionalidad.

Wireframing en Sketch es muy parecido a Adobe XD con el uso de kits/plantillas y herramientas de dibujo. Sketch hace un uso extensivo de símbolos , que son componentes reutilizables que se pueden definir una vez y usar varias veces (botones, etc.). Los Símbolos instanciados también asumen cualquier cambio realizado en el Símbolo "maestro". Esto es ventajoso para los diseñadores, ya que a menudo hay muchos cambios que deben realizarse a lo largo del proceso de estructuración de cables.

Sketch permite a los diseñadores crear estructuras alámbricas, prototipos y maquetas de alta fidelidad. No es una aplicación basada en la nube y una de las posibles desventajas es que solo funciona con macOS.

pin UX

UXPin es una herramienta superior de estructura alámbrica que admite estados interactivos, lógica y componentes programáticos que brindan a los diseñadores la capacidad de codificar interacciones condicionales, variables y expresiones.

UXPin va mucho más allá de la creación de tramas, centrándose principalmente en la creación de prototipos con bibliotecas de componentes de interfaz de usuario, símbolos, herramientas de dibujo vectorial y coedición.

Hay una versión para Windows, macOS y nube/navegador. Para wireframing de alta fidelidad, UXPin funciona de manera muy similar a Sketch y Adobe XD. No es arrastrar y soltar como Balsamiq, pero lleva la creación de prototipos y maquetas al siguiente nivel para los diseñadores que buscan permanecer dentro de un solo ecosistema.

Maravilla

Marvel, otra popular herramienta de diseño que facilita la creación de esquemas y prototipos, brinda a los diseñadores una interfaz familiar de arrastrar y soltar para crear esquemas de baja a alta fidelidad.

Marvel no requiere complementos ni extensiones, ya que todos los activos están incluidos. La plataforma está completamente basada en la nube, lo que hace que compartir wireframes con otros miembros del equipo de diseño o clientes sea rápido y fácil.

Una de las razones por las que los diseñadores eligen Marvel para el wireframing es su integración con otras plataformas como Jira, Sketch, Confluence, Dropbox, Slack y muchas otras. Para la colaboración con desarrolladores, equipos de diseño remotos y clientes, esta función ahorra mucho tiempo a los diseñadores.

Marvel también tiene un producto llamado Pop que ayuda a transformar bocetos de alambre y papel en prototipos interactivos de iPhone y Android. Pop permite a los diseñadores tomar una foto de sus bocetos y convertirlos en wireframes interactivos.

Axure RP

Axure RP ha existido durante mucho tiempo y es una gran herramienta para crear wireframes estáticos (así como prototipos altamente interactivos). No está basado en la nube, aunque funciona tanto en Windows como en macOS.

El wireframing se puede hacer utilizando su biblioteca masiva de componentes de arrastrar y soltar, sin embargo, Axure RP es una herramienta compleja que va mucho más allá del wireframing. Utilizando las características programáticas de Axure RP, los diseñadores pueden crear prototipos avanzados con funcionalidad que refleja una aplicación completamente funcional.

Dada la alta curva de aprendizaje de Axure, no tendría sentido usarlo únicamente para wireframes estáticos. Sin embargo, si el objetivo es producir prototipos muy pulidos y funcionales, entonces sería la herramienta perfecta para los diseñadores de productos.

Herramientas favoritas de Wireframe de los diseñadores de Toptal

Nos pusimos en contacto con algunos diseñadores de Toptal para averiguar qué herramientas de wireframing usan los diseñadores profesionales y por qué. Esto es lo que tenían que decir.

“Mis favoritos son Adobe XD y UXPin. Estoy empezando a elegir XD como favorito porque es fácil hacer wireframes rápidos y probar ideas, y a partir de ahí puedo comenzar el diseño e incluso crear prototipos en la misma plataforma”. -Michael Craig

“Mi favorito es Pop porque es muy rápido. De todos modos, siempre dibujo mis estructuras alámbricas en papel, por lo que funciona muy bien y no tengo que manejar nada dos veces. También creo que es bueno para todo el asunto de 'no te enamores de la solución' porque es claramente de baja fidelidad". -Nicola Rushton

“Uso Axure prácticamente todo el tiempo para mi trabajo de diseño. Es una herramienta muy subestimada para el trabajo de diseño integral, con una complejidad muy alta” - Andi Omtvedt

“En realidad, ya no hago wireframe per se, ya que creo que las herramientas son lo suficientemente fuertes como para producir prototipos de baja fidelidad, casi combinando el wireframe inicial con una mejor imagen. He adoptado Framer X desde enero de este año y me encanta”. -Charlie Williams

Resumen

Dada la capacidad de producir prototipos sofisticados, ¿sigue siendo relevante el wireframing? Algunos diseñadores profesionales argumentarán que los wireframes son una reliquia del pasado, mientras que otros defenderán firmemente su importancia continua en el proceso de diseño.

Hoy en día hay una gran cantidad de herramientas de estructura alámbrica que facilitan el proceso de diseño. Algunos continúan enfocándose únicamente en la estructura de alambre, incluso cuando la tendencia se está moviendo hacia productos híbridos que comienzan con la estructura de alambre pero también incluyen la capacidad de crear prototipos y, en muchos casos, producir maquetas completamente funcionales.

Aunque ha evolucionado de un producto de baja fidelidad a uno de media o alta fidelidad, Wireframing ciertamente no va a desaparecer.

Lectura adicional en el blog de diseño de Toptal:

• Mapeo de estructura alámbrica: cómo evitar el desplazamiento del alcance
• Muerte al Wireframe. ¡Directo a la alta fidelidad!
• Enfrentamiento de herramientas de diseño: Adobe XD vs. Sketch (2019)
• Domina tu oficio con estas herramientas UX superiores
• Los 10 entregables de UX que usan los mejores diseñadores