¿Te ha gustado el artículo?
3
¿Te ha gustado el artículo?
3

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.

Wireframe vs. mockup

Si quieres conocer los fundamentos básicos de los mockups y de los wireframes, puedes visitar este artículo. 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: el color, 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

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.

Axure

La herramienta Axure es apta tanto para la creación de wireframes sencillos como para la de prototipos detallados. Axure, que tiene una amplia funcionalidad, está considerada como una de las mockup tools más profesionales y los principiantes que la utilicen deben tener en cuenta que necesitarán un período de adaptación hasta que hayan descubierto todas sus funciones y hayan conseguido obtener una visión clara de la misma.

Esta mockup tool ofrece una gran selección de elementos predefinidos cuya configuración puede llevarse a cabo de manera individual. Además, también da la posibilidad de incorporar acciones sencillas, como por ejemplo, consejos sobre la herramienta, una navegación flyout o Lightbox. De este modo, Axure se convierte en una buena alternativa al llamado prototipo click dummy, que se usa, sobre todo, en las fases iniciales de los tests de usabilidad. Axure no solo está provista de una función para comentarios, sino que las explicaciones y las notas a pie de página pueden exportarse posteriormente en formato CSV o PDF, con lo que de esta manera se obtiene la base ideal para los documentos conceptuales. Otra particularidad de la herramienta es que permite el trabajo en equipo, por lo que varias personas pueden trabajar simultáneamente en un mockup sin interferir en el trabajo de los otros.

Axure pone a disposición de sus usuarios una versión de prueba gratis durante 30 días, pero también ofrece versiones de pago como la Pro, Team y Enterprise y la posibilidad de que los estudiantes hagan uso de la herramienta de manera totalmente gratuita.

Pencil

La herramienta para mockups online Pencil es un proyecto de código abierto y la única versión de escritorio completamente gratuita de nuestra lista. Aunque el programa puede usarse libremente y sin derechos de autor, este pone a disposición de sus usuarios todas las funciones importantes que son necesarias para crear un mockup profesional. Esta herramienta también está provista de una amplia selección de plantillas y, en general, se pueden encontrar hasta más de 300 formas predefinidas, muchas más de las que ofrecen las anteriores prototype tools. En caso de ser necesario, en la página web del desarrollador hay disponibles otras más. Además de numerosas formas, elementos de diagrama y cliparts basados en vectores, también existe la posibilidad de elaborar diagramas y mapas de proceso directamente en la ventana del programa.

A pesar de su amplia funcionalidad, los usuarios pueden orientarse con facilidad en su clara interfaz. Su estructura intuitiva y un práctico editor con la función “arrastrar y soltar” permiten familiarizarse rápidamente con la herramienta. Mientras se crean numerosas páginas y estas se vinculan entre sí, se pueden no solo construir las funciones de la página futura sino también elaborar sencillos procesos de uso.

Pencil es una herramienta de código abierto gratuita, aunque no garantiza, con ello, un desarrollo continuo. Su página web muestra el estancamiento de los últimos años, y es que desde 2013 no se han llevado a cabo actualizaciones ni tampoco se han creado versiones nuevas. A pesar de esta desventaja y de la escasa documentación existente, Pencil sigue siendo una buena alternativa a las herramientas de pago para crear mockups y wireframes online. La versión de escritorio gratuita es compatible con Windows, Mac y Linux y, adicionalmente, hay disponible una extensión para Mozilla Firefox.

Moqups

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.

Mockingbird

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 estructura prá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

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 frames para 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.

Cómo ahorrar tiempo creando mockups y wireframes

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.

Aplicaciones HTML Responsivo