Las 8 mejores herramientas de wireframe en 2021

Todo diseño brillante comienza como una idea vaga.

El diseño del trofeo del Super Bowl se dibujó por primera vez en una servilleta de cóctel. Lo mismo ocurre con las ideas iniciales de Pixar. Historia del juguete. A partir de esos bocetos primarios, la idea se puede revisar, iterar y pulir, hasta que emerge como un producto terminado.

El mundo del diseño utiliza el término "estructura alámbrica" ​​para referirse al boceto o esquema inicial de su idea, ya sea un sitio web, una aplicación o una página de destino. Una estructura alámbrica está destinada a ser visualmente simple, utilizando formas básicas para indicar bloques de texto, botones e imágenes. Esta simplicidad es intencionada: los elementos se reorganizan fácilmente para una iteración rápida. Una vez que la idea se solidifica, se puede crear un prototipo de alta fidelidad más detallado.

Dado que los wireframes son una parte tan integral del proceso de creación, no debería sorprender que haya una amplia variedad de aplicaciones de wireframe disponibles en el mercado, y hemos realizado horas de investigación y pruebas para reunir una lista seleccionada de wireframe herramientas que le ayudarán a encontrar la que mejor se adapte a sus necesidades.

Las 8 mejores herramientas de estructura alámbrica

¿Qué hace que una herramienta de estructura alámbrica sea excelente?

Comencemos con un descargo de responsabilidad honesto: no necesita una aplicación dedicada para crear un wireframe efectivo. Las aplicaciones de diagrama de flujo, por ejemplo, proporcionan una estructura amplia para una estructura de alambre básica del diseño de un sitio web o la estructura del mapa del sitio. Sin embargo, no se crean pensando en los diseñadores de interfaces y carecen de herramientas de edición visual más avanzadas, como la opacidad de los objetos, lienzos de tamaño predeterminado para tamaños de pantalla receptivos, etc.

Las aplicaciones de estructura metálica, por otro lado, asumen que querrá refinar y mejorar su diseño antes de que esté listo para ser entregado para un mayor desarrollo. Y ahí es donde las aplicaciones diseñadas para wireframing realmente se destacan.

No solo le dan espacio para que cree su boceto preliminar y el flujo de UX, sino que también incluyen algunos elementos destacados como:

• Un kit de interfaz de usuario incluido o la capacidad de cargar uno: En cada una de las siguientes aplicaciones, puede aprovechar una biblioteca de componentes de IU incorporada o cargar kits prediseñados de terceros.

• Varios niveles de fidelidad de la maqueta.: Ya sea que prefiera seguir con los wireframes básicos de baja fidelidad o pasar a maquetas más de alta fidelidad, las aplicaciones de esta lista representan una gama completa de capacidades.

• Opciones de colaboración / comentarios: El trabajo a distancia es una realidad. Todas las aplicaciones de nuestra lista incluyen al menos una forma viable de compartir el diseño virtualmente y recopilar comentarios de compañeros de equipo, clientes de diseño u otras partes interesadas.

• Opciones de exportación / transferencia: Si bien muchos desarrolladores son capaces de trabajar a partir de una captura de pantalla, las mejores aplicaciones de estructura alámbrica incluyen funciones de transferencia que le permiten exportar elementos individuales de su diseño (como iconos), pantallas enteras a HTML o simplemente inspeccionar el diseño para obtener el código CSS. para una implementación de desarrollo más rápida.

---

La mejor herramienta de estructura alámbrica para diseños detallados basados ​​en vectores

Bosquejo (Mac OS)

Desde su lanzamiento en 2010, Sketch ha mantenido un lugar destacado como una herramienta de diseño de vectores potente pero ligera para usuarios de macOS. Por sí solo, se puede usar para cualquier cosa, desde wireframes hasta interfaces de usuario modernas y diseño de vectores de iconos (en un lienzo basado en píxeles, nada menos) y algunos diseños de interacción. Su interfaz es mucho más simple e intuitiva que los pesos pesados ​​del diseño vectorial Affinity Designer y Adobe Illustrator. Gracias a esta simplicidad, Sketch se puede utilizar para crear wireframes rápidamente con una combinación de mesas de trabajo y formas de diseño vectorial.

Cuando descargue la aplicación Sketch en su Mac, notará que no hay componentes de interfaz de usuario integrados. Si bien ciertamente podría diseñar sus propios componentes para usarlos como parte de su proceso de estructura alámbrica, existe una vasta comunidad en línea de diseñadores que han creado y compartido muchos kits de diseño de estructura alámbrica gratuitos. Con un solo clic para descargar, tendrá una gran cantidad de botones, íconos y otros elementos de diseño que se pueden usar dentro de su archivo Sketch.

Como la mayoría de las aplicaciones de escritorio, Sketch hace que la colaboración sea un poco complicada, ya que no hay forma de permitir que varios diseñadores trabajen simultáneamente en un archivo de diseño. Sin embargo, puede sincronizar su diseño con Sketch Cloud, lo que le permite compartir un enlace a la versión más reciente de su diseño, recopilar comentarios y otros comentarios, sin tener que perder tiempo con un largo proceso de exportación.

Cuando llegue el momento de la transferencia, puede utilizar el Exportar opción para guardar sus diseños completos y / o elementos individuales. O bien, aproveche la gran variedad de integraciones para enviar su estructura alámbrica más adelante en el proceso de diseño.

Precio del boceto: $ 99 / año para usuarios individuales (cuando termine el año, puede continuar usando la herramienta, pero ya no recibirá actualizaciones de software), o $ 9 / mes para miembros del equipo que utilicen Sketch Cloud.

La mejor herramienta de estructura alámbrica para principiantes

Adobe XD (macOS, Windows)

Si bien los productos de Adobe son conocidos por tener muchas funciones y ser complicados de aprender, Adobe XD realmente se destaca como una opción fácil de usar para proyectos de diseño de interfaces y wireframing. Todo, desde el wireframing hasta la creación de prototipos básicos, puede suceder dentro de XD. Y en comparación con otras herramientas de Adobe ricas en funciones, la interfaz mínima de XD es un soplo de aire fresco.

En el momento en que abre la aplicación, un conjunto de cajas de luz integradas interactivas lo ayuda a orientarse rápidamente con las herramientas de diseño a su alcance. La interfaz limpia y la incorporación rápida son invaluables para los principiantes que desean utilizar una herramienta de estructura alámbrica profesional, sin perder demasiado tiempo tratando de aprender el software.

Las herramientas básicas de diseño de vectores de estructura metálica se encuentran fácilmente en la navegación de la izquierda. Los elementos de la interfaz de usuario no están incluidos, pero puede encontrar una variedad de opciones gratuitas con una búsqueda rápida en Google. XD está lleno de ayudas de diseño receptivas, ya sea que elija crear varias mesas de trabajo, superponer una cuadrícula de Bootstrap de 12 columnas o usar la herramienta de cambio de tamaño receptiva para crear variaciones de cada elemento.

Para muchas aplicaciones, los archivos de diseño de la interfaz deben exportarse a una herramienta diferente antes de poder crear un prototipo interactivo. Adobe XD hace posible crear la estructura alámbrica, la maqueta y el prototipo en el mismo archivo de diseño, por lo que no tiene que integrar varias herramientas o reexportar docenas de veces con cada iteración. Luego, puede usar XD para publicar su prototipo, ya sea una estructura básica o un prototipo interactivo completo, y compartir el enlace con otros para que puedan ver y hacer comentarios.

Como beneficio adicional, AdobeXD también realiza un seguimiento del CSS y HTML básicos para sus diseños, por lo que puede tomar el código directamente dentro de la interfaz cuando se lo entregue todo a su equipo de programación.

Precio de Adobe XD: Gratis para un prototipo y 2 GB de almacenamiento; desde $ 9.99 / mes para el plan de aplicación única que incluye prototipos ilimitados y 100GB de almacenamiento.

La mejor herramienta de estructura alámbrica gratuita

Figma (Web, macOS, Windows, Linux)

Figma se destaca como una poderosa alternativa basada en la nube a herramientas como Sketch y XD. Y la mejor parte: no se detiene para los usuarios gratuitos, ya que ofrece un conjunto de características que funcionan bien, ya sea que sea un diseñador independiente o parte de un equipo más grande.

El proceso real de wireframing con Figma es sencillo y rápido. Tendrá que diseñar sus propios componentes de la interfaz de usuario (o agregarlos desde un kit prediseñado por separado), pero es fácil crear sus mesas de trabajo, agregar formas y texto, e incluso agregar algunos prototipos para que pueda tener una mejor idea de el flujo. El panel de la izquierda lo ayuda a mantener todo organizado, desde capas hasta mesas de trabajo y páginas separadas dentro del mismo documento de diseño. Para un diseño receptivo, puede aplicar una superposición de columnas (si prefiere el sistema de cuadrícula Bootstrap), o puede usar las restricciones de Figma, que le indican a cada elemento cómo debe responder cuando el diseño cambia de tamaño para imitar varios tamaños de pantalla.

Otra área en la que Figma se destaca es en las oportunidades de colaboración en equipo. Debido a que es una aplicación basada en la web, varios miembros del equipo pueden iniciar sesión y acceder al archivo de diseño simultáneamente, ya sea para modificar el diseño o agregar contenido. La característica más atractiva es la capacidad de un equipo para mantener una conversación completa dentro del archivo de diseño, dejando comentarios similares a notas adhesivas que otros compañeros de equipo pueden responder o marcar como completos.

Cuando llega el momento de que su equipo de desarrollo se haga cargo, los desarrolladores pueden tomar el código CSS del interior del archivo de diseño y exportar elementos individuales para usarlos según sea necesario.

Precio de Figma: Gratis para hasta tres proyectos; desde $ 12 / usuario / mes (facturado anualmente) para el plan Professional que incluye proyectos ilimitados.

La mejor herramienta de estructura alámbrica para entregar documentación de diseño a los desarrolladores

UXPin (Web, macOS, Windows)

UXPin es un favorito eterno entre los diseñadores de interfaces y, por lo general, una de las primeras herramientas recomendadas para cualquiera que esté aprendiendo a usar wireframe. Si bien su rico conjunto de funciones puede ser un poco desafiante para un nuevo diseñador, el esfuerzo dedicado a aprender UXPin definitivamente vale la pena.

Con UXPin, puede iniciar sus wireframes con una biblioteca incorporada de elementos de la interfaz de usuario que puede arrastrar y soltar directamente en su lienzo. El beneficio de esta estructura alámbrica de una fidelidad ligeramente superior es que puede realizar un ajuste más preciso del flujo y la funcionalidad sin perder mucho tiempo rediseñando los componentes de la pantalla. Y, dado que UXPin puede leer archivos de Sketch y Photoshop, siempre puede usar esas herramientas para convertir sus wireframes básicos en prototipos de alta fidelidad, antes de importar el diseño pulido de nuevo a UXPin para aprovechar las otras características de la herramienta: agregar interacciones, presentar a un equipo y entregar las especificaciones de diseño a un desarrollador.

A pesar de las excelentes características de diseño de interfaz y wireframe, son las capacidades de presentación y documentación en vivo las que hacen que UXPin se destaque en un campo abarrotado de herramientas de prototipos de wireframe>. Si bien muchas aplicaciones le permiten enganchar CSS, HTML o incluso JSON de su diseño, UXPin le facilita la presentación de un prototipo funcional de su diseño, recopilar comentarios e incluir especificaciones / documentación de una sola vez a través del modo Vista previa.

Para utilizar esta función, haga clic en el Avance en la barra de herramientas superior, decida qué tipo de acceso le gustaría otorgar a los espectadores (por ejemplo, la capacidad de ver comentarios, especificaciones, documentación, etc.), luego comparta el enlace proporcionado. Esta opción para compartir todo en uno significa que la revisión final, las aprobaciones y la entrega de la documentación de diseño se pueden realizar en el mismo lugar, de modo que nadie se quede en la oscuridad cuando su diseño llegue a la recta final.

Precio del UXPin: $ 23 / usuario / mes (facturado anualmente) para el plan de Prototyping que incluye herramientas básicas de wireframing; desde $ 39 / mes para el plan del sistema que incluye funciones de colaboración avanzadas y entrega de documentación.

La mejor herramienta de estructura alámbrica para bocetos de colaboración en equipo en un lienzo similar a una pizarra

InVision Freehand (Web)

InVision Freehand es la aplicación más básica de esta lista, pero vale la pena intentarlo, especialmente si prefiere crear o marcar sus wireframes en una pizarra donde todos puedan contribuir y revisar.

Invite a su equipo a una colaboración de estructura alámbrica, donde puede agregar imágenes y formas básicas o dibujar la estructura alámbrica con el cursor del mouse. Dado que es una aplicación en la nube, varios diseñadores y partes interesadas pueden iniciar sesión y escribir al mismo tiempo.

Por sí mismo, Freehand es una herramienta de estructura alámbrica buena, aunque simplista, que se parece a cualquier otra aplicación de pizarra. Pero dado que ofrece sincronización en tiempo real con Sketch y Photoshop, su equipo puede optar por dibujar y anotar directamente en prototipos pulidos, lo que hace que la etapa de diseño de iteración sea mucho más fácil. Y, dado que es parte de la suite InVision, sus bocetos de colaboración se almacenan junto con los prototipos funcionales y los paneles de estado de ánimo para una referencia rápida a medida que avanza en su proyecto de diseño.

Freehand funcionará bien para los diseñadores que quieran colaborar con los miembros del equipo en un boceto inicial de wireframe y / o comentar sobre wireframes / prototipos más refinados.

Precio InVision Freehand: Libre

La mejor herramienta de estructura alámbrica para estructuras alámbricas detalladas basadas en píxeles

Adobe Photoshop (macOS, Windows)

Photoshop es el peso pesado de la industria cuando busca un software de diseño avanzado basado en píxeles. Puede manejar casi cualquier cosa, desde la edición de fotografías hasta la pintura digital, y es amado por la mayoría de los profesionales del diseño gráfico solo por esa razón. La ventaja de usar Photoshop para sus wireframes (especialmente el diseño basado en web, donde dependerá más de los gráficos de píxeles) es que puede crear fácilmente una maqueta de alta fidelidad sin cambiar los sistemas de diseño.

Para crear una estructura alámbrica, puede agregar cualquier cantidad de mesas de trabajo que se correspondan con las dimensiones del tamaño de su pantalla (y agregar un diseño de cuadrícula que corresponda con sus puntos de interrupción de respuesta, si lo desea). Puede diseñar los componentes de la interfaz de usuario usted mismo con Photoshop o descargar un kit en línea para elementos estándar como teclados iOS. Y, si bien las herramientas de diseño vectorial (Sketch, Illustrator, Designer, etc.) son excelentes para una gran cantidad de trabajo de diseño, ninguna herramienta supera a Photoshop por sus capacidades de edición de imágenes rasterizadas, lo cual es invaluable cuando eventualmente convierte sus wireframes en maquetas y comienza agregar fotos y otros gráficos.

A pesar de la variedad de características, existen algunas desventajas en el uso de Photoshop para sus wireframes. No solo la curva de aprendizaje es bastante empinada, sino que también puede ser un poco torpe de usar si necesita hacer wireframes en flujos de múltiples pantallas, estructura del sitio, etc. Afortunadamente, muchas herramientas de creación de prototipos (como Proto.io, InVision o Adobe XD , por ejemplo) le permiten importar archivos de Photoshop directamente, por lo que puede moverse hacia adelante y hacia atrás entre las herramientas para crear un diseño más pulido que se puede utilizar para la creación de prototipos, pruebas de usuario o simplemente pasar a los desarrolladores para su implementación.

Precio de Photoshop: Desde $ 9.99 / mes para el plan de fotografía Creative Cloud que también incluye acceso a Lightroom.

La mejor herramienta de estructura alámbrica para estructuras alámbricas interactivas y realistas

Justinmind (macOS, Windows)

Justinmind no solo es fácil de aprender y agradable de usar; también mantiene un enfoque en capacitarlo para crear una estructura alámbrica que pueda probarse como un prototipo funcional desde el principio. Lo hace al incluir algo que otras aplicaciones simplemente no se han molestado en desarrollar: elementos prototipo interactivos (entradas de texto, botones de radio, menús desplegables, etc.). Incluso en un nivel básico de estructura alámbrica, un menú desplegable de trabajo requeriría tres o más pantallas para configurar en una herramienta como Sketch o Figma. Justinmind le permite agregarlo a su estructura alámbrica con un solo clic.

De hecho, la facilidad con la que puede crear y compartir wireframes realistas puede ahorrarle horas o días de trabajo en cualquier proyecto. Esto hace que Justinmind sea una gran herramienta para cualquiera que quiera obtener comentarios reales y en profundidad sobre los diseños mucho antes en la etapa de estructura alámbrica (con un esfuerzo mínimo).

Aparte del contenido de los elementos en sí, el diseño de Justinmind es muy fácil de entender: todos los elementos de su diseño están en el lado izquierdo; los elementos de la organización (como carpetas, lista de pantallas, etc.) están a la derecha. Todo se siente muy intuitivo, lo que nos encanta.

Precio de Justinmind: Gratis para la aplicación de escritorio con capacidades de estructura alámbrica; desde $ 19 / mes para el plan Professional, que incluye prototipos ilimitados y funciones avanzadas de creación de prototipos.

La mejor herramienta de estructura alámbrica para proyectos complejos

Mockplus (Web, macOS, Windows)

En este punto, hemos cubierto una gran variedad de aplicaciones de diseño de estructura alámbrica realmente sólidas que pueden facilitar mucho sus tareas de diseño. Pero hay un área del proceso de diseño que la mayoría de las aplicaciones tienden a ignorar: todas las tareas administrativas y organizativas que acompañan al diseño de una nueva interfaz.

Esa es exactamente la razón por la que Mockplus nos impresionó lo suficiente como para merecer un lugar en esta lista.

No solo puede agregar notas y documentación a cada elemento en su diseño, sino que el área de su proyecto en Mockplus también tiene espacio para que usted cree y guarde documentación en un editor de texto, guarde su guía de estilo (para que todos estén en la misma página), e incluso crear y asignar tareas a su equipo. Dado que las tareas se pueden vincular a un proyecto (e incluso reducirse a un diseño individual dentro del proyecto), realmente puede marcar su proceso de comentarios de revisión y sentirse seguro de que nada se perderá a medida que perfecciona su estructura alámbrica.

Finalmente, si bien hay una aplicación de escritorio disponible, Mockplus es similar a Figma en el sentido de que puede hacer todo el diseño de su estructura alámbrica desde su navegador web y tenga la seguridad de que siempre está trabajando con la versión más actualizada.

Precio de Mockplus: Gratis para el plan Básico ruidoso con hasta 10 usuarios y 10 proyectos; desde $ 5.95 / usuario / mes para proyectos ilimitados en el plan de nube. Mockplus Classic, una aplicación de creación de prototipos de escritorio, comienza en $ 199 / año para el plan Individual.

¿Qué aplicación de estructura metálica debería utilizar?

Si bien Sketch y Photoshop son los nombres más importantes, eso no significa que esté limitado a usarlos para su propia herramienta de estructura alámbrica. Elija algo que se adapte al resto de su pila de tecnología para que su proceso de diseño pueda avanzar fácilmente.

Al elegir el mejor software de wireframe para usted y su equipo, comience por considerar su proceso de diseño y su objetivo para los wireframes en sí. ¿Necesita incluir elementos de respuesta para dispositivos móviles? ¿Quiere funciones de colaboración sólidas? ¿Planea convertir su estructura alámbrica en prototipos interactivos completos de alta fidelidad? ¿Presentará cada uno de sus wireframes a una junta directiva o se pasarán directamente al equipo de desarrollo para su implementación?

Dado que cada herramienta tiene su propia fuerza única, es normal crear una pila de tecnología con varias herramientas en esta lista para que todo el proceso de diseño pueda funcionar sin problemas. Por ejemplo, dado que muchas de las aplicaciones de escritorio ofrecen un conjunto de funciones más sólido, puede comenzar su estructura alámbrica allí, antes de pasar a una aplicación basada en la nube que permite que varios diseñadores colaboren en tiempo real. Todo depende de lo que necesite lograr con su estructura alámbrica y de lo que suceda después.

Glosario de términos

• Gráfico vectorial: Un gráfico vectorial es una imagen que se compone de puntos, líneas y curvas que se basan en puntos matemáticos. Debido a esto, puede escalar infinitamente sin volverse "borroso". La mayoría de los gráficos de iconos y logotipos se crean inicialmente con herramientas de diseño gráfico vectorial.

• Gráfico de trama (píxeles): Las imágenes ráster se componen de mapas de bits o cuadrículas de pequeños píxeles cuadrados individuales. Si se amplía una imagen rasterizada pequeña (o se escala para que quepa en un lienzo grande), la calidad de la imagen disminuirá y hará que se vea borrosa. Las fotografías son una forma común de imagen rasterizada.

• Componentes de la interfaz de usuario: Los componentes de la interfaz de usuario (UI) más utilizados son botones, casillas de verificación, barras de progreso, menús de navegación, etc. Al comenzar un diseño, es posible que prefiera utilizar un kit de componentes de interfaz de usuario listos para usar para hacer que el proceso inicial de estructura alámbrica sea más rápido.

• Mesa de trabajo: Muchas aplicaciones de diseño le permiten crear una o más mesas de trabajo en el mismo archivo de diseño. Piense en cada mesa de trabajo como un lienzo o papel individual. Son útiles cuando necesita crear varios diseños separados pero no desea cambiar de archivo cada vez.

• Bosquejo: Mientras que una estructura alámbrica generalmente consta de texto básico y formas que sirven como marcadores de posición, una maqueta es una interfaz completamente diseñada que incluye colores e imágenes.

• Prototipo: Un prototipo es una maqueta o estructura alámbrica interactiva que permite a los usuarios hacer clic y "usar" el diseño incluso antes de que los desarrolladores lo hayan traducido al código. Esto es útil cuando su diseño requiere datos de prueba de UX antes de implementarlo.

• Baja fidelidad: Los diseños toscos y simplificados (como una estructura alámbrica) se consideran de baja fidelidad.

• Alta fidelidad: Los diseños afinados y pulidos que parecen similares o idénticos al producto terminado se consideran de alta fidelidad.

• Interfaz de usuario: UI significa interfaz de usuario y se refiere a cómo los usuarios ven una aplicación o diseño (piense: escala de color y tipo).

• UX: UX significa experiencia del usuario y se refiere a cómo un usuario interactuará con una aplicación o diseño, como la ubicación óptima de los botones o el flujo lógico de una sección a otra.

Este artículo se publicó originalmente en diciembre de 2018.