Las mejores herramientas para wireframes y mockups online

Los mockups y los wireframes son métodos muy valiosos en la fase inicial del desarrollo de proyectos web para plasmar sobre el papel las primeras ideas. La razón para ello reside en el hecho de que antes de la aplicación técnica en sí, estos métodos de creación de prototipos son de utilidad para presentar ideas y pensamientos visualmente. En este sentido, se producen los primeros bocetos y borradores, que se convierten en los precursores de proyectos futuros y que fomentan el proceso de desarrollo.

Por ello, los mockups y los wireframes no solo están concebidos como métodos de ayuda en la fase de concepción, sino que también son un buen recurso para ilustrar mejor los propios planes e ideas. Por norma general, los primeros esbozos se crean con papel y lápiz o utilizando un editor informático, aunque a menudo también entran en juego programas gráficos como Photoshop o Fireworks en los que, en general, la realización manual no suele ser lo más eficiente. En este sentido es donde ganan importancia las herramientas para crear wireframes y mockups online.

Puedes consultar nuestro artículo para conocer los fundamentos básicos de los mockups y de los wireframes. Ahora bien, ¿qué es lo que diferencia a estos métodos para crear prototipos?

En los wireframes, el llamado diseño de la experiencia del usuario es un factor esencial, ya que se trata de conseguir que el usuario tenga una experiencia óptima. Con la ayuda de un wireframe se pueden crear descripciones de proyectos con las características de un boceto y se pueden representar sus funciones y su diseño. En términos generales, se trata de hacer una primera revisión del concepto y de su viabilidad.

En principio, el mockup es el próximo paso, puesto que se basa en la estructura del wireframe. De todas formas, aquí entra en juego el aspecto del diseño: elcolor, la tipografía, las imágenes y los elementos gráficos muestran cómo sería el diseño provisional de la aplicación web que se ha planificado. Un mockup tiene más detalles que un wireframe, pero todavía está lejos de convertirse en la versión definitiva. A pesar de todo, en el caso del trato con los clientes, el mockup se convierte en una herramienta práctica para reproducir el “look and feel” de la página web en cuestión.

Las prototype tools o herramientas para hacer prototipos que mostramos a continuación son idóneas para crear wireframes, mockups o ambos.

Balsamiq es una de las prototype tools más populares del mercado, cuya atención se centra, principalmente, en el wireframing. Con ella, los usuarios se benefician de una amplia selección de elementos básicos. Junto a los elementos de navegación, de las áreas de video e imagen, de los formularios y de muchas otras funciones, esta herramienta permite su desplazamiento por la superficie de diseño sencillamente arrastrando y soltando, creando así el wireframe. Con ella es posible, además, formatear el módulo (color, tamaño), pero los usuarios también pueden crear sus propios módulos, con lo que poco a poco se va construyendo un wireframe profesional.

Con ayuda de la práctica función para comentarios, los elementos aislados pueden completarse con explicaciones. En términos generales, Balsamiq es muy fácil de usar y destaca por su interfaz clara y por una categorización comprensible de cada uno de los elementos. Sin embargo, las posibilidades de incorporar interacciones en el prototipo son muy limitadas, pero por lo menos sí se pueden enlazar etiquetas entre sí. El diseño sencillo de Balsamiq hace que la aplicación parezca estar hecha a mano. Esta está caracterizada por tener una buena visibilidad sin detalles superfluos y, con ello, se convierte en una solución especialmente adecuada para fases de desarrollo iniciales.

Balsamiq Studios, la empresa encargada del desarrollo de la aplicación, ofrece dos versiones de la wireframe tool: una aplicación para escritorio con el nombre de  “Mockups 3” que puede descargarse para sistemas Windows, Mac y Linux y una aplicación web basada en la nube que se denomina “myBalsamiq”. Tras el registro, los usuarios reciben una cuenta de prueba que pueden utilizar de manera gratuita durante 30 días, pero tras ello, están obligados a abonar una cantidad que aumentará en función del número de usuarios y de proyectos. Quien únicamente quiera integrar sus wireframes online en la web app, puede ejecutar proyectos activos en la versión básica 3.

Aquí puedes adquirir una versión gratuita de prueba.

Moqups es otra de las mockup tools más populares y también está considerada como aplicación web. Moqups es una posibilidad rápida y efectiva para crear mockups online. Al abrir la aplicación creada con HTML5, el usuario se encuentra de inmediato en el entorno de trabajo y ya puede ponerse manos a la obra. También en este caso, la presencia de un menú sencillo, de una estructura clara y de un editor con la función “arrastrar y soltar” permite familiarizarse rápidamente con el programa.

El usuario puede elegir los elementos que más se adapten a sus preferencias de entre una selección de marcos y plantillas predeterminados, pero también tiene la posibilidad de ordenarlos y de configurarlos a su gusto. Las posibilidades de configuración de Moqups están muy definidas. La organización individual de cada uno de los elementos y de todos los mockups se realiza gracias a las muchas funciones, características adicionales y opciones de diseño que abarca la herramienta. Esta mockup tool ofrece menos elementos predefinidos que otras aplicaciones de características similares, aunque, si bien es cierto, sí ofrece numerosas funciones para su adaptación. Además, con esta herramienta también es posible administrar varias páginas de manera paralela y enlazarlas entre sí, y es apta para la creación de mockups y de click dummies sencillos.  

En la versión gratuita, los usuarios tienen que renunciar a ciertos factores. Su mayor desventaja es que no se pueden exportar los esbozos creados. Para guardar mockups en formato PDF o JPG, hay que recurrir a la versión de pago, que contiene todas las funciones. A este respecto, hay tres packs diferentes y, entre ellos, el pack básico permite realizar 10 proyectos y tiene una capacidad de almacenamiento de 1 GB.

La prototyping tool Mockingbird es también una aplicación y no requiere la instalación local. Se trata de un programa ideal con el que incluso los usuarios con menos experiencia pueden crear mockups.

Al inicio, el usuario selecciona los elementos predefinidos que mejor se adapten a sus necesidades y los arrastra de manera sencilla hasta colocarlos en la posición correcta por drag and drop. En general, la herramienta ofrece una selección de 90 módulos y componentes diferentes, pero algunos de los aspectos más llamativos de Mockingbird es su estructurapráctica y la posibilidad de llevar a cabo una categorización lógica, amén de ofrecer, asimismo, una práctica función de búsqueda. Con todo ello, el usuario puede administrar varias páginas, aunque no es posible vincularlas o conectarlas entre sí. 

Una característica especial de esta herramienta para crear mockups es que Mockingbird permite emplear lo que se conoce como sistema de rejilla y aplicarlo a todas las páginas creadas. Los sistemas de rejilla forman parte de casi todas las páginas web modernas. Si se tiene en cuenta el ráster ya en una fase temprana, esto supondrá un ahorro de tiempo considerable en la posterior elaboración del diseño. Mockingbird está disponible para usarse en su versión gratuita, aunque al igual que Moqups, hay muchas funciones como por ejemplo, guardar y exportar, que solo están presentes en la versión de pago. El pack básico tiene capacidad para 3 proyectos.

Wireframe.cc es una herramienta minimalista para crear wireframes sólidos y precisos. En comparación con las otras wireframing tools de la presente lista, su funcionalidad es algo menor, por lo que ofrece la posibilidad de familiarizarse con ella con rapidez y de manera sencilla. Con Wirefrrame.cc se pueden crear diseños personalizados y precisos a pesar de la inexistencia de una gran gama de elementos predefinidos.

En Wireframe.cc, el usuario puede abrir fácilmente con el ratón una ventana en el tamaño y la forma deseados. En el menú desplegable que aparece a continuación, hay que seleccionar el tipo de elemento adecuado, como por ejemplo slider, campo de texto o elemento de imagen y, gracias a poder elegir entre diferentes tamaños de página, se pueden crear marcos o framespara escritorio o para terminales móviles. En cuanto a la adaptación de los elementos, también se puede hacer una selección partiendo de una lista con diferentes opciones que la herramienta recomienda. Por medio de la limitada paleta de funciones y posibilidades de diseño se pone de relieve la importancia de la funcionalidad de las páginas web. Se trata de centrarse en la idea y evitar distracciones, de ahí que compartir y comentar en equipo se pueda llevar a cabo tan fácilmente. Los wireframes resultantes están provistos de un URL y pueden guardarse y enviarse.

Esta prototyping tool tiene una versión básica gratuita, así como una versión Premium que consta de funciones adicionales para la interacción, el protocolo, los procesos de trabajo y la exportación obligatoria a las que se puede acceder tras el pago de una cantidad determinada, como en el caso de las herramientas anteriormente mencionadas. La fase de prueba tiene lugar durante 7 días y el precio de los diferentes packs aumenta en función del número de usuarios y de la capacidad necesaria.

Para no invertir más tiempo del necesario en el desarrollo y modificación manual de proyectos, es recomendable utilizar herramientas para crear wireframes y mockups online, ya que estas permiten que el trabajo se realice con eficiencia. Con ellas, además, no solo es posible elaborar los primeros esbozos rápidamente, sino que estas plantean más posibilidades posteriormente en lo referente a la realización del feedback (de los clientes). Tampoco hay que olvidar que una herramienta de prototipos también se ocupa de hacer una mejor representación de los aspectos conceptuales, de los contenidos y de las funciones antes de centrarse propiamente en los elementos creativos. Aquellos que trabajen en un equipo podrán sacar beneficios de la gran cantidad de funciones de las herramientas previamente mencionadas.