HerramientasLas Mejores Herramientas

Las 10 Mejores Herramientas de Wireframe Para Hacer Esquemas de Páginas, Maquetas y Prototipos

By 27/08/2019 No Comments
 

Connect resource planning and project management in one solution.
Maximize project performance with Mavenlink.
Get access.

Our friend and supporter

Esto te ayudará a comparar y evaluar rápidamente las mejores herramientas de wireframe (esquema de página) y las herramientas para hacer maquetas.

Una Lista del Mejor Software de Herramientas de Wireframe

No es difícil de conseguir programas de creación de prototipos, pero eso no significa que cualquiera tendrá todas las herramientas UX que necesitas. Aquí tienes mi lista de las mejores herramientas de wireframe:

Diseño de Wireframe – Preguntas Frecuentes

Estas son algunas de las preguntas frecuentes que quería tocar. Sin embargo, si tienes una pregunta que no cubrimos aquí, no dudes en dejarla en los comentarios. Lo más probable es que alguien de la comunidad te eche una mano.

¿Qué es Wireframe UX?

Definición de Wireframe UX

Wireframe UX es la base del diseño de software. Traza visualmente dónde aparecerán diferentes bloques de datos en una pantalla. No incluirá la marca o el diseño, pues solo pretende transmitir una disposición básica de elementos.

¿Qué es el software de Wireframe?

Definición del Software de Wireframe

El software de Wireframe es un software diseñado para ayudarte a simular un diseño de wireframe de la manera más rápida y fácil posible. Muchas herramientas de wireframe te permitirán ‘arrastrar y soltar’ elementos de marcador de posición para imágenes, texto, pancartas y logotipos para ayudarte a tener una idea de tu primer diseño.

¿Qué software usan los diseñadores de UX?

Tipos de Software de Wireframe

Los diseñadores de UX pueden necesitar software de creación de prototipos, software de wireframe, software de diseño gráfico, herramientas para investigación y prueba, software de planificación de arquitectura de información (IA), software de informe de errores y control, y mucho más. Muchas herramientas manejarán dos o más de estas necesidades, como Sketch, en la que puedes editar vectores, crear prototipos, exportar código y trabajar de manera colaborativa con retroalimentación.

¿No estás buscando un programa de diseño de IU en este momento? Consulta nuestras otras listas de software para administrar equipos, recursos y proyectos:

  1. ¿Dónde te encuentras en tu viaje de proyecto UX? Si ya estás inmerso en el proceso de diseño, podrías sacarle provecho a las mejores herramientas de control de errores en el mercado.
  2. Si tienes dificultades para comenzar, entonces, un poco de ayuda para la productividad será tu mayor atajo. Antes de comenzar, debes estar motivado.
  3. Si buscas algunas herramientas de gestión de cartera de proyectos, las cuales actualmente están causando un gran revuelo en la industria, ¡también las tenemos! Las herramientas PPM son esenciales para cualquier proyecto, incluido el diseño de UX.

Antes de decidirte por un logotipo, un mapa del sitio, un contenido bien desarrollado o una fuente, deberás diseñar un wireframe. Tener un wireframe es esencial para mapear cómo será el UX para el usuario final.

¿Dónde se colocarán los elementos esenciales de UX en la pantalla y en relación uno con el otro? ¿Qué verá el usuario primero y cómo el diseño lo guiará a través de la página? ¿Dónde esperarán ver elementos comunes como botones de ayuda / contacto o un menú de opciones? Este es el tipo de preguntas que responderás tú mismo mientras creas una maqueta de wireframe para tu producto.

Wireframe Tools Logo Soup

Compara y Evalúa Rápidamente las 10 Mejores Herramientas de Wireframe

Algunas personas prefieren el método anticuado de lápiz y papel para crear un diseño de wireframe. Personalmente, me gusta ayudar al ambiente y utilizar una aplicación de wireframe dedicada. Elegí algunas de mis favoritas para compartirlas contigo hoy.

En esta publicación, compartiré las mejores herramientas de creación de prototipos para que las incluyas en tu lista de software de wireframe y te explicaré cómo el software UX puede ayudarte a crear una maqueta que impresionará a todos tus clientes. Te diré lo que debes buscar en las herramientas de wireframe y nuestros criterios de evaluación para evaluar cualquier software de maquetas y brindaré una comparación simple de herramientas de maquetas para la IU.

¡Y no olvides consultar mis preguntas frecuentes sobre las herramientas de wireframe del sitio web más abajo! Sin más preámbulos, comencemos:

The Digital Project Manager es financiado por sus lectores. Cuando haces clic en los enlaces de nuestro sitio, podríamos ganar una comisión. Más información.

Criterios Comparativos de Aplicaciones de Wireframe

¿Qué es lo que buscamos en un generador de maquetas? ¿Cuáles son las cualidades que hacen que ciertas aplicaciones de esquemas de página se destaquen sobre el resto? Tenemos un conjunto sólido de criterios que usamos al analizar cualquier herramienta. Aquí hay un desglose rápido de nuestro proceso de evaluación:

  1. Interfaz de usuario (UI): ¿qué tan bien diseñada está? ¿Ofrece vistas claras y navegación intuitiva?
  2. Usabilidad: ¿Es fácil de aprender y dominar? ¿Hay tutoriales y capacitación? ¿La empresa ofrece buena tecnología y soporte al usuario?
  3. Características y funcionalidad: ¿Cuántas de las características y funciones clave del software de diseño de sitios web y aplicaciones ofrece y qué tan potentes son? Específicamente, busqué:
    1. Arrastrar y soltar: agregar y mover elementos fácilmente con la simplicidad de arrastrar y soltar, lo que te permite crear y modificar esquemas de página rápidamente.
    2. Herramientas de colaboración y retroalimentación: es importante poder gestionar fácilmente la retroalimentación en los esquemas de página, con la capacidad de dejar comentarios, marcar wireframes, adjuntar archivos y construir wireframes de manera colaborativa.
    3. Elementos interactivos: permite crear un esquema de página interactivo (a veces llamada “prototipo interactivo”, “maqueta interactiva”, “prototipo interactivo”, etc.) que te permite crear una versión del esquema de página sobre la cual se puede hacer clic para crear prototipos de los elementos interactivos.
    4. Herramientas de presentación: los esquemas de página generalmente se presentan en las fases iniciales de un proyecto, ya sea internamente o a los clientes, por lo que la capacidad de convertir rápidamente los esquemas de página en presentaciones hermosas es importante.
    5. Historial de versiones: ¿Puedes acceder a versiones anteriores para ver los cambios y volver a ellos? Esto ahorra esfuerzo al no tener que volver a hacerlo en caso de cambios.
  4. Integraciones: ¿La aplicación de wireframe se conecta con otras herramientas? ¿Hay integraciones por defecto?
  5. Relación calidad-precio: ¿Cuán apropiado es el precio según sus características, capacidades y usos? ¿Los precios son claros, transparentes y flexibles?
  • freemium version
  • From $8/user/month.

1. Miro – Visual collaboration platform to collaborate and centralize communication as your teams design app wireframes, websites, and more

Miro screenshot - Las 10 Mejores Herramientas de Wireframe Para Hacer Esquemas de Páginas, Maquetas y Prototipos

Ideate, organize insights, design flows, and collect feedback in real time with Miro.

Miro offers an infinite brainstorming canvas, robust set of widgets, prebuilt templates, toolkits for user story or customer journey maps, wireframing, roadmap or sprint planning, retros, and more. This app helps you engage remote teams across formats, tools, and channels with digital workspaces that enable asynchronous and synchronous collaboration.

Miro excels in the way it touches upon our evaluation criteria for value for price (after all, the freemium version is quite handy) and the features and functionality section. For relatively little (or no) cost, you can experiment with decent presentational tools with minimal learning curve.

Integrations listed on their site include Dropbox, Box, Google Suite, JIRA, Slack, Sketch, OneDrive, Zapier, and more.

Though favorable in its offerings, Miro could benefit from a vaster color and typography selection. Furthermore, the addition of UML diagramming templates and other various shapes would help to elevate the platform.

Miro starts at $8/user/month and has a freemium version of the software.

  • 30 days free trial
  • From $6.40/user/month.

2. Microsoft Visio – Software for creating flowcharts, diagrams, org charts, floor plans, engineering designs within the familiar Office system

Microsoft Visio connects your flowcharts and diagrams to real-time data, meaning that changes made to data present in Microsoft 360 or Vision will automatically be reflected in your design. They have a browser-based version so that you can access your charts remotely. You can also share your work as a secure web-based link, attachment, image, or PDF.

Being that it comes from such a large, well-known brand, the evaluation criteria segments in which Visio excels are UI and usability. It’s very well designed and laid out with many familiar elements of Office software built-in. There are tutorials and online support aplenty so it really does work for any team without the resources for additional training.

As you would expect, MS Visio integrates with Microsoft 360. However, there seem to be no other third-party integrations to speak of.

The fact that Visio doesn’t offer real-time collaboration functionality is a huge negative for an otherwise robust app. It also seems to be missing custom stencil support, which is a key tool offered with many competitors software. Unless you love the Microsoft/Windows landscape, you will want to look elsewhere for wireframing tools, as Vision performs best amidst that family of software.

Microsoft Visio starts at $6.40/user/month and has a 30-day free trial.

  • freemium version
  • From $9.99/user/month.

3. Adobe XD – App for wireframing, designing, prototyping, and sharing experiences for web, mobile, voice and more

Adobe XD screenshot - Las 10 Mejores Herramientas de Wireframe Para Hacer Esquemas de Páginas, Maquetas y Prototipos

Add components, linked assets, and other design elements to ensure brand consistency.

Creative teams can design at scale with the Adobe XD toolkit, which includes a unified assets panel for brand consistency, features for easy replication of lists and other elements, responsive resizing of content, collaborative presentation and chat features, tooling, and APIs to enable custom integrations, and more.

As for our evaluation criteria specifics, it doesn’t get much more well designed and functional than Adobe software. While Adobe tends to have a steep learning curve, they are also top-notch at providing training videos and written tutorials so you will never feel left in the dust.

App integrations and/or plugins include Airtable, Trello, UserTesting, Google Sheets, CloudApp, Overflow, Stark, Angle, UI Faces, and dozens more.

As for some minor critiques, the animations and auto-animations features are not as fully-functional as they could be. Also, there is no way to include micro-interactions and links between prototypes, which leaves users piling artboards into a single file, significantly slowing down the program as it grows.

Adobe XD starts at $9.99/user/month but also has a freemium version.

  • freemium version
  • 15 days free trial
  • From$19/user/month.

4. Justinmind – All-in-one prototyping tool for web and mobile apps with an assortment of free wireframing tools to get started right away

Design the style, size and layout distribution of any UI element to fit the look and feel of any screen. Justinmind lets you create lifelike iOS and Android prototypes, integrate with apps like Sketch and JIRA, access UI kits with over 4000 elements, and more. They also offer free UI kits and free wireframing tools so that you can try before you buy.

In our evaluation criteria we always consider usability in so much as we want to know that there is a wealth of tutorials and “How Tos” available for the average user to self-teach. Justinmind has plenty of interactive walkthroughs complete with text and video instruction, Q&A forums available to the public, as well as further support options for paid plan customers.

Justinmind integrates with Sketch, Adobe Suite, and JIRA.

The integrations work best when you make changes and import into external software rather than vice versa. For example, if you make changes to a design in Sketch and reupload it into Justinmind, you might have to make some adjustments after-the-fact. This isn’t ideal but is pretty easy to work around, however may still be a deterrent for some.

Justinmind starts at $19/user/month and has a 30-day return policy. A 15-day free trial, as well as a freemium version of the software, are available.

  • 14 days free trial. 30 days return policy.
  • From $149.99 for a Standard license.

5. Omnigraffle – Powerful and easy to use app with a noteworthy selection of stencils to create beautiful diagrams and save time

Omnigraffle screenshot - Las 10 Mejores Herramientas de Wireframe Para Hacer Esquemas de Páginas, Maquetas y Prototipos

Omnigraffle provides many template resources to quickly begin a wireframe.

Artboard presentation mode, keyboard shortcuts for import/export, interactive actions, mouseless editing, non-destructive shape combinations, conversion of text into shapes, diagramming subgraphs, and more combine to make this intuitive wireframing software a robust choice for any sized team.

Omnigraffle truly excels in the usability category of our evaluation criteria. They have a whole section of their site dedicated to manuals and each document is offered in different formats to cater to users’ needs. They also have tutorial videos available, prominent support contacts displayed generously across the website (email, phone, and social media), and dedicated Slack channel.

Omnigraffle does not support any integrations that we are aware of, which is a major con of the software.

Like Sketch, Omnigraffle is only available for Apple OS, which is a con for any Windows-dedicated user. Furthermore, the collaboration and communication functions in-app could be expanded, as real-time feedback and engaged group work is essential to any planning/design project.

Omnigraffle starts at $149.99 for a Standard license and has a free 14-day trial as well as a 30-day return policy.

  • free trial.
  • $199/year.

6. Mockplus – Desktop-based tool for prototyping mobile, web and desktop apps easily and quickly

Mockplus screenshot - Las 10 Mejores Herramientas de Wireframe Para Hacer Esquemas de Páginas, Maquetas y Prototipos

Modern-looking UI and plenty of space to work makes Mockplus a stand-out wireframe tool.

Mockplus comes with nearly 200 components and more than 3,000 icons to save you much time and effort on design. Drag-and-drop elements in order to build interactive prototypes on an intuitive working canvas with a clean, spacious interface. Simply scanning a QR code lets you test your prototypes on actual devices or you can publish the project to cloud and receive a shareable weblink.

Our evaluation criteria has a sharp focus on collaboration, which Mockplus does well in a variety of ways. It supports multi-users working on the same project, easy markup/reviewing, and sophisticated page editing organization.

There was no third party software integration available that we saw during our foray into the offerings of Mockplus, which is always a disappointment for an otherwise promising application.

Other than the above con, we also noticed that multiple people cannot work on the same project simultaneously, which would be a huge asset to a program that already offers a host of collaborative and social capabilities.

Mockplus starts at $199/year and has a free trial.

  • user / month / editor

7. ProtoPie – Piece interactions together to create realistic prototypes for any digital product in the most familiar way to you.

Piece interactions together to create realistic prototypes for any digital product in the most familiar way to you.

  • freemium version
  • From $4.95/month.

8. Lucidchart – App configured to pull data from Google Sheets to create professional flowcharts and automate your work

Lucidchart screenshot - Las 10 Mejores Herramientas de Wireframe Para Hacer Esquemas de Páginas, Maquetas y Prototipos

Easily build simple mind maps and flowcharts to upscale any planning process with Lucidchart.

Used by BP, L’Oréal and BMW, Lucidchart simplifies app making software with a large template library, drag-and-drop functionality, real-time collaboration, in-app chat, automatic sync and save, and more. Being a web-based app, there are no downloads or installations needed and it works on any device, browser or operating system.

When diving into our specific evaluation criteria, usability and value for cost are definitely strengths of Lucidchart. The low per-month cost combined with the use-anywhere, browser-hosted app makes this one of the easiest wireframing tools to get started with.

Lucidchart integrates with Microsoft Office apps; has free add-ons for Google Docs, Sheets, and Slides; and integrates with the likes of Atlassian, Salesforce, LinkedIn Sales Navigator, Slack, Amazon Web Services (AWS), Jive, GitHub, BambooHR, Quip, and more, including many through Zapier.

Although we love the ease of a browser-hosted tool, if you want a desktop app you’re out of luck. That means that no data/wifi means no work, which might not work for certain workplaces. The exact limitations of the freemium version are also a little difficult to suss out, meaning that some users might bump up against a paywall when they are not expecting it.

Lucidchart starts at $4.95/month and has a freemium version of the software.

  • 30 days free trial
  • From $9/month

9. Balsamiq – Low-fidelity wireframing tool for designing great web apps, desktop software, websites and user interfaces

Balsamiq screenshot - Las 10 Mejores Herramientas de Wireframe Para Hacer Esquemas de Páginas, Maquetas y Prototipos

Drag and drop items, icons and symbols for a quick design mockup with Balsamiq.

Balsamiq is a rapid low-fidelity UI wireframing tool that reproduces the experience of sketching on a notepad or whiteboard but using a computer. Their focus on structure and content lets you get the foundational ideas sketched out before narrowing in on the specifics. Balsamiq also open source parts of their code and tools for users to modify as needed.

Our evaluation criteria almost always highlight collaborative functions and in this category, Balsamiq is somewhat lacking. However, they partially make up for this by nailing the usability category, as we found that it is an intuitive program that even wireframing beginners will be able to pick up on.

Balsamiq integrates with Google Drive, Confluence and Jira. Also, as mentioned before, they have opened parts of their code so that you can manipulate it as needed, which isn’t an integration per-se but definitely adds a certain level of functional flexibility.

While Balsamiq covers all the basics, it’s not as in-depth as its competitors as far as features and functionality goes. Wireframes export as static files rather than dynamic ones, which might be inadequate for many projects.

Balsamiq starts at $9/month and has a 30-day-free trial.

  • 90 days free trial.
  • From $9/user/month.

10. Sketch – An intuitive vector editor designed to make collaborative prototyping fast, available for download on Mac

Sketch screenshot - Las 10 Mejores Herramientas de Wireframe Para Hacer Esquemas de Páginas, Maquetas y Prototipos

View all available documents and projects in your team’s Sketch workspace.

With an intuitive vector editor, lightning fast prototyping and powerful collaboration tools, Sketch can help you turn your brainstorms into ready-to-code project designs. They offer pixel perfect precision, hundreds of plug-in options, non-destructive editing, export presets, code exports, and more.

If you read our evaluation criteria, you probably noticed that in features and functionality we are looking for drag and drop capabilities, collaborative feedback options, interactive elements, presentation tools, and revision history. Sketch covers all of these bases with ease.

They have tons of integration options listed on their site as well as plugins that they offer for Sketch users. Integrations include but are not limited to Crystal, Drafta, Invision, Lingo, Marvel, Overflow, Proto.io, UXPin, Wake, and Zeplin.

The biggest con of Sketch is that there is no Windows version of the software, only OS X, which will alienate many potential users right off the bat. In order to get the most out of the software, you will probably find yourself installing a lot of plugins, which might be tedious for teams who are looking for a “ready to go” app.

Sketch for Teams starts at $9/user/month and has a 90 day free trial.

The Best Wireframe Tools Comparison Chart

Otras Herramientas de Diseño de Wireframe

No tienes que estresarte si aún no encuentras el mejor software de wireframe para tus necesidades. Hay para todos los gustos, solo hay que seguir experimentando hasta encontrar el ideal.

¿Necesitas Ayuda Para Reducir las Opciones?

Esta herramienta es bastante útil. Nos hemos asociado con Crozdesk para brindarte acceso a su “Buscador de software”.

Si ingresas algunos de los detalles sobre tu proyecto y las funciones que buscas en una herramienta de administración de proyectos, generará una lista de herramientas que coinciden con tus preferencias. Sólo debes proporcionar tu correo electrónico y te enviarán una bonita guía en PDF con un resumen de las mejores coincidencias.

¿Qué Opinas de Nuestras Listas de las Mejores Herramientas de Wireframe?

Toda buena idea comienza con un buen wireframe, lo que hace que los wireframe sean un paso importante en el diseño web. Antes de especificar, debes trazar los elementos más grandes de cualquier proyecto de interfaz de usuario. Las herramientas anteriores te ayudarán con eso.

¿Qué herramienta de maqueta del sitio web nos recomendarías? ¿Cuál utilizas actualmente? ¿Qué buscas en una herramienta de creación de prototipos de sitios web? ¡Nos encantaría saber! Deja tu opinión en los comentarios.

 

Our friend and supporter:

Connect resource planning and project management in one solution.
Maximize project performance with Mavenlink.

GET ACCESS
Ben Aston

About Ben Aston

Soy Ben Aston, gerente de proyectos digitales. He estado en la industria durante más de 10 años trabajando en el Reino Unido en las principales agencias digitales de Londres, incluidas Dare, Wunderman, Lowe y DDB. He entregado de todo, desde videos virales a CMS, juegos flash, anuncios publicitarios y eCRM a sitios de comercio electrónico. He tenido la suerte de trabajar en una amplia gama de grandes clientes; marcas automotrices como Land Rover, Volkswagen y Honda; Empresas de servicios públicos como BT, British Gas y Exxon, y de bienes de consumo como Unilever, así como también marcas de productos electrónicos, como por ejemplo Sony.

Deja un comentario