Las mejores he­rra­mie­n­tas para wi­re­fra­mes y mockups online

Los mockups y los wi­re­fra­mes son métodos muy valiosos en la fase inicial del de­sa­rro­llo 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 apli­ca­ción técnica en sí, estos métodos de creación de pro­to­ti­pos son de utilidad para presentar ideas y pe­n­sa­mie­n­tos vi­sua­l­me­n­te. En este sentido, se producen los primeros bocetos y bo­rra­do­res, que se co­n­vie­r­ten en los pre­cu­r­so­res de proyectos futuros y que fomentan el proceso de de­sa­rro­llo.

Por ello, los mockups y los wi­re­fra­mes no solo están co­n­ce­bi­dos como métodos de ayuda en la fase de co­n­ce­p­ció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 uti­li­za­n­do un editor in­fo­r­má­ti­co, aunque a menudo también entran en juego programas gráficos como Photoshop o Fireworks en los que, en general, la rea­li­za­ción manual no suele ser lo más eficiente. En este sentido es donde ganan im­po­r­ta­n­cia las he­rra­mie­n­tas para crear wi­re­fra­mes y mockups online.

Puedes consultar nuestro artículo para conocer los fu­n­da­me­n­tos básicos de los mockups y de los wi­re­fra­mes. Ahora bien, ¿qué es lo que di­fe­re­n­cia a estos métodos para crear pro­to­ti­pos? En los wi­re­fra­mes, el llamado diseño de la ex­pe­rie­n­cia del usuario es un factor esencial, ya que se trata de conseguir que el usuario tenga una ex­pe­rie­n­cia óptima. Con la ayuda de un wireframe se pueden crear de­s­cri­p­cio­nes de proyectos con las ca­ra­c­te­rí­s­ti­cas de un boceto y se pueden re­pre­se­n­tar sus funciones y su diseño. En términos generales, se trata de hacer una primera revisión del concepto y de su via­bi­li­dad. En principio, el mockup es el próximo paso, puesto que se basa en la es­tru­c­tu­ra del wireframe. De todas formas, aquí entra en juego el aspecto del diseño: el color, la ti­po­gra­fía, las imágenes y los elementos gráficos muestran cómo sería el diseño pro­vi­sio­nal de la apli­ca­ción web que se ha pla­ni­fi­ca­do. Un mockup tiene más detalles que un wireframe, pero todavía está lejos de co­n­ve­r­ti­r­se en la versión de­fi­ni­ti­va. A pesar de todo, en el caso del trato con los clientes, el mockup se convierte en una he­rra­mie­n­ta práctica para re­pro­du­cir el “look and feel” de la página web en cuestión. Las prototype tools o he­rra­mie­n­tas para hacer pro­to­ti­pos que mostramos a co­n­ti­nua­ción son idóneas para crear wi­re­fra­mes, mockups o ambos.

Balsamiq es una de las prototype tools más populares del mercado, cuya atención se centra, pri­n­ci­pa­l­me­n­te, en el wi­re­fra­mi­ng. Con ella, los usuarios se be­ne­fi­cian de una amplia selección de elementos básicos. Junto a los elementos de na­ve­ga­ción, de las áreas de video e imagen, de los fo­r­mu­la­rios y de muchas otras funciones, esta he­rra­mie­n­ta permite su de­s­pla­za­mie­n­to por la su­pe­r­fi­cie de diseño se­n­ci­lla­me­n­te arra­s­tra­n­do 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 co­n­s­tru­ye­n­do un wireframe pro­fe­sio­nal. Con ayuda de la práctica función para co­me­n­ta­rios, los elementos aislados pueden co­m­ple­tar­se con ex­pli­ca­cio­nes. En términos generales, Balsamiq es muy fácil de usar y destaca por su interfaz clara y por una ca­te­go­ri­za­ción co­m­pre­n­si­ble de cada uno de los elementos. Sin embargo, las po­si­bi­li­da­des de in­co­r­po­rar in­ter­ac­cio­nes 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 apli­ca­ción parezca estar hecha a mano. Esta está ca­ra­c­te­ri­za­da por tener una buena vi­si­bi­li­dad sin detalles su­pe­r­fluos y, con ello, se convierte en una solución es­pe­cia­l­me­n­te adecuada para fases de de­sa­rro­llo iniciales. Balsamiq Studios, la empresa encargada del de­sa­rro­llo de la apli­ca­ción, ofrece dos versiones de la wireframe tool: una apli­ca­ción para es­cri­to­rio con el nombre de  “Mockups 3” que puede de­s­ca­r­gar­se para sistemas Windows, Mac y Linux y una apli­ca­ción web basada en la nube que se denomina “my­Ba­l­sa­miq”. 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 úni­ca­me­n­te quiera integrar sus wi­re­fra­mes 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á co­n­si­de­ra­da como apli­ca­ción web. Moqups es una po­si­bi­li­dad rápida y efectiva para crear mockups online. Al abrir la apli­ca­ció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 es­tru­c­tu­ra clara y de un editor con la función “arrastrar y soltar” permite fa­mi­lia­ri­zar­se rá­pi­da­me­n­te con el programa. El usuario puede elegir los elementos que más se adapten a sus pre­fe­re­n­cias de entre una selección de marcos y pla­n­ti­llas pre­de­te­r­mi­na­dos, pero también tiene la po­si­bi­li­dad de or­de­nar­los y de co­n­fi­gu­rar­los a su gusto. Las po­si­bi­li­da­des de co­n­fi­gu­ra­ción de Moqups están muy definidas. La or­ga­ni­za­ción in­di­vi­dual de cada uno de los elementos y de todos los mockups se realiza gracias a las muchas funciones, ca­ra­c­te­rí­s­ti­cas adi­cio­na­les y opciones de diseño que abarca la he­rra­mie­n­ta. Esta mockup tool ofrece menos elementos pre­de­fi­ni­dos que otras apli­ca­cio­nes de ca­ra­c­te­rí­s­ti­cas similares, aunque, si bien es cierto, sí ofrece numerosas funciones para su ada­p­ta­ción. Además, con esta he­rra­mie­n­ta también es posible ad­mi­ni­s­trar varias páginas de manera paralela y en­la­zar­las 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 de­s­ve­n­ta­ja 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 di­fe­re­n­tes y, entre ellos, el pack básico permite realizar 10 proyectos y tiene una capacidad de al­ma­ce­na­mie­n­to de 1 GB.

La pro­to­t­y­pi­ng tool Mo­c­ki­n­g­bi­rd es también una apli­ca­ción y no requiere la in­s­ta­la­ción local. Se trata de un programa ideal con el que incluso los usuarios con menos ex­pe­rie­n­cia pueden crear mockups. Al inicio, el usuario se­le­c­cio­na los elementos pre­de­fi­ni­dos que mejor se adapten a sus ne­ce­si­da­des y los arrastra de manera sencilla hasta co­lo­car­los en la posición correcta por drag and drop. En general, la he­rra­mie­n­ta ofrece una selección de 90 módulos y co­m­po­ne­n­tes di­fe­re­n­tes, pero algunos de los aspectos más lla­ma­ti­vos de Mo­c­ki­n­g­bi­rd es su es­tru­c­tu­ra práctica y la po­si­bi­li­dad de llevar a cabo una ca­te­go­ri­za­ción lógica, amén de ofrecer, asimismo, una práctica función de búsqueda. Con todo ello, el usuario puede ad­mi­ni­s­trar varias páginas, aunque no es posible vi­n­cu­lar­las o co­ne­c­tar­las entre sí.  Una ca­ra­c­te­rí­s­ti­ca especial de esta he­rra­mie­n­ta para crear mockups es que Mo­c­ki­n­g­bi­rd 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 co­n­si­de­ra­ble en la posterior ela­bo­ra­ción del diseño. Mo­c­ki­n­g­bi­rd está di­s­po­ni­ble 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 he­rra­mie­n­ta mi­ni­ma­li­s­ta para crear wi­re­fra­mes sólidos y precisos. En co­m­pa­ra­ción con las otras wi­re­fra­mi­ng tools de la presente lista, su fu­n­cio­na­li­dad es algo menor, por lo que ofrece la po­si­bi­li­dad de fa­mi­lia­ri­zar­se con ella con rapidez y de manera sencilla. Con Wi­re­frra­me.cc se pueden crear diseños pe­r­so­na­li­za­dos y precisos a pesar de la in­e­xi­s­te­n­cia de una gran gama de elementos pre­de­fi­ni­dos. En Wireframe.cc, el usuario puede abrir fá­ci­l­me­n­te con el ratón una ventana en el tamaño y la forma deseados. En el menú de­s­ple­ga­ble que aparece a co­n­ti­nua­ción, hay que se­le­c­cio­nar el tipo de elemento adecuado, como por ejemplo slider, campo de texto o elemento de imagen y, gracias a poder elegir entre di­fe­re­n­tes tamaños de página, se pueden crear marcos o frames para es­cri­to­rio o para te­r­mi­na­les móviles. En cuanto a la ada­p­ta­ción de los elementos, también se puede hacer una selección partiendo de una lista con di­fe­re­n­tes opciones que la he­rra­mie­n­ta re­co­mie­n­da. Por medio de la limitada paleta de funciones y po­si­bi­li­da­des de diseño se pone de relieve la im­po­r­ta­n­cia de la fu­n­cio­na­li­dad de las páginas web. Se trata de centrarse en la idea y evitar di­s­tra­c­cio­nes, de ahí que compartir y comentar en equipo se pueda llevar a cabo tan fá­ci­l­me­n­te. Los wi­re­fra­mes re­su­l­ta­n­tes están provistos de un URL y pueden guardarse y enviarse.
Esta pro­to­t­y­pi­ng tool tiene una versión básica gratuita, así como una versión Premium que consta de funciones adi­cio­na­les para la in­ter­ac­ción, el protocolo, los procesos de trabajo y la ex­po­r­ta­ción obli­ga­to­ria a las que se puede acceder tras el pago de una cantidad de­te­r­mi­na­da, como en el caso de las he­rra­mie­n­tas an­te­rio­r­me­n­te me­n­cio­na­das. La fase de prueba tiene lugar durante 7 días y el precio de los di­fe­re­n­tes 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 de­sa­rro­llo y mo­di­fi­ca­ción manual de proyectos, es re­co­me­n­da­ble utilizar he­rra­mie­n­tas para crear wi­re­fra­mes y mockups online, ya que estas permiten que el trabajo se realice con efi­cie­n­cia. Con ellas, además, no solo es posible elaborar los primeros esbozos rá­pi­da­me­n­te, sino que estas plantean más po­si­bi­li­da­des po­s­te­rio­r­me­n­te en lo referente a la rea­li­za­ción del feedback (de los clientes). Tampoco hay que olvidar que una he­rra­mie­n­ta de pro­to­ti­pos también se ocupa de hacer una mejor re­pre­se­n­ta­ción de los aspectos co­n­ce­p­tua­les, de los co­n­te­ni­dos y de las funciones antes de centrarse pro­pia­me­n­te en los elementos creativos. Aquellos que trabajen en un equipo podrán sacar be­ne­fi­cios de la gran cantidad de funciones de las he­rra­mie­n­tas pre­via­me­n­te me­n­cio­na­das.