Los wireframing y su utilidad

Leyendo, cotilleando, rebuscando en blogs de diseño, fui a parar a uno en el que hablaban de estas herramientas.

Al principio creí que no nos sería de gran ayuda, que esbozando sobre papel nuestro esquema de web y pasándola después al Photoshop antes de ponernos a maquetar, ya había suficiente…

¡Qué equivocada estaba!… Es genial poder hacer una pre maquetación usable para enseñar a nuestros clientes.

No entramos en diseño, en estilo, colores, tipografías, imágenes…, lo cual hace que el trabajo sea muy rápido, pero la estructura y la usabilidad quedan patentes.

Os dejamos una lista de algunas de estas herramientas, llamadas wireframing, unas gratis, otras con limitaciones y otras premium. ¿Cuál os gusta más?

1. Lovely Charts

logo

Editor de diagramas que funciona en Flash y que sorprende por lo intuitivo resultada.

Es capaz de generar diagramas de muy distinto tipo:

  • Diagramas de flujo
  • Mapas de sitios
  • Diagramas de red

Para hacer uso del mismo tenéis que registraros pero a cambio de eso, tenéis los diagramas almacenado en la “nube” y además al exportar a PNG sólo marca el resultado con un pequeño logo en la parte inferior derecha.

http://www.lovelycharts.com/

 

2. Cacoo

índice

Es una herramienta en línea gratis y fácil de usar, que te permite crear varios tipos de diagramas – wire frames, mapas de sitio, diagramas de flujo y diagramas de red, etc – incluyendo texto, subiendo imágenes, lo que la hace muy similar a Microsoft Visio.

Múltiples usuarios pueden trabajar simultáneamente en tiempo real.

Como único requisito sólo es necesario que el navegador contenga el Adobe Flash Player instalado para ser visto, ya que es una aplicación hecha en Flash.

https://cacoo.com/

 

3. SimpleDiagrams

logo-bd4d364342aaa51ef97d3aa4b7461c55

SimpleDiagrams hace honor a su nombre: diseñar diagramas con texto e imágenes de una manera lo más simple posible.

Con SimpleDiagrams podrás crear mapas de ideas y diagramas con flechas, texto, dibujos e imágenes propias en pocos pasos y sin complicaciones.

SimpleDiagrams guarda por defecto los documentos en formato XML, aunque incluye la posibilidad de exportarlo a PNG.

http://www.simplediagrams.com/

 

4. Denim

images

En su momento resultó impresionante y muy útil, aunque me temo que ahora mismo dejaría bastante que desear. Era una aplicación que corría en Java y tenia funcionalidad muy limitada.

http://dub.washington.edu:2007/denim/

 

5. Gliffy

Herramienta para wireframing y propotipado en diseño web

Gliffy es una herramienta para wireframing y prototipos de sitios web, con la capacidad de crear wireframes estáticos e interactivos para simular la navegación entre las páginas web y sacar provecho de una amplia biblioteca de símbolos GUI. Puedes colaborar con otros para recibir comentarios en tiempo real sobre tu trabajo. Cuando hayas terminado, puedes exportar tus wireframes para archivos SVG, XML Gliffy, JPG o PNG. La cuenta gratuita permite hasta cinco wireframes Gliffy sin cifrados, pero requiere incluir publicidad.

http://www.gliffy.com/

 

6. Jumpchart

Herramienta para wireframing y propotipado en diseño web

Jumpchart es una aplicación de planificación basada en navegador que te permite dibujar un wireframe para tu sitio web. Puedes crear wireframes estáticos e interactivos para simular la navegación entre las páginas web de tu modelo. Jumpchart también te permite compartir tus proyectos con los clientes para obtener retroalimentación y comentarios sobre tu trabajo sin el uso de adjuntos de correo electrónico. Si es necesario, puedes exportar tus wireframes en CSS / XHTML o en un formato compatible con WordPress. Jumpchart es gratuita para hasta dos wireframes con un máximo de dos colaboradores.

http://jumpchart.com/

 

7. MockFlow

Herramienta para wireframing y propotipado en diseño web

MockFlow es un servicio para prototipos de sitios web, disponible como una aplicación basada en web y como software para Windows y Mac. Los wireframes creados con MockFlow son interactivos y simulan la navegación del usuario a través de las páginas web. Para diseñar tus wireframes, puedes utilizar su gran biblioteca de símbolos GUI. La colaboración en la distribución de wireframes es también totalmente compatible. Cuando hayas terminado, puedes exportar tus proyectos a PPT, PDF o PNG. Las cuentas gratuitas te permiten construir un wireframe en MockFlow con un máximo de cuatro páginas y un máximo de dos colaboradores.

http://www.mockflow.com/

 

8. iPlotz

Herramienta para wireframing y propotipado en diseño web

iPlotz es una herramienta que te permite crear prototipos de sitios web y aplicaciones de software. iPlotz está disponible como un servicio basado en web y cómo software se puede descargar para Windows y Mac. El servicio cuenta con una amplia biblioteca de símbolos GUI que proporciona botones listos para el uso, barras de desplazamiento, barras de menús y otros objetos que se pueden utilizar el diseño de tus modelos. También puedes compartir tus proyectos en tiempo real y recibir información en vivo, además de comentarios. Una vez concluido el proyecto, puedes exportar tus wireframes a PDF, PNG, JPG y archivos de HTML. La cuenta gratuita de iPlotz te permite crear un wireframe con un máximo de cinco páginas navegables.

http://www.iplotz.com/

 

9. Mocklinkr

Herramienta para wireframing y propotipado en diseño web

Mocklinkr es un servicio basado en web para la creación de prototipos para tu sitio, el diseño de wireframes interactivos puede ser navegado como lo harías en un sitio real. También puedes compartir tu wireframing con otros desarrolladores para proporcionar comentarios directamente utilizando Mocklinkr. La cuenta gratuita permite hasta diez wireframes con páginas ilimitadas. No ofrece una función de exportación, tampoco una biblioteca GUI de símbolos.

http://www.mocklinkr.com/

 

10. Pencil Project

Herramienta para wireframing y propotipado en diseño web

The Pencil Project es un complemento de navegador de código abierto de Firefox que te permite crear wireframes y prototipos dentro de Firefox. Puedes crear un wireframe interactivo que simula la navegación web y también utilizar la biblioteca de símbolos para agregar objetos GUI, botones, barras de desplazamiento y otros dispositivos para hacer tu wireframe más realista. Todos los wireframes creados pueden ser exportados a HTML, PDF, PNG o MS Word compatible con archivos y OpenOffice.org. No trae funciones de colaboración.

http://www.evolus.vn/Pencil/Home.html

 

11. Lumzy

Herramienta para wireframing y propotipado en diseño web

Lumzy es una herramienta para crear maquetas gratuitas que te permiten diseñar el prototipo de su sitio. Una amplia biblioteca de símbolos para la interfaz gráfica del usuario está disponible para agregar gráficos a tu prototipo con el fin de añadir más realismo a tu proyecto. Además, puedes invitar a que otros colaboren en tu proyecto y recibir retroalimentación del modelo. Los formatos de exportación disponibles son: PDF, PNG, JPG.

 

12. Mockingbird

Herramienta para wireframing y propotipado en diseño web

Mockingbird es una herramienta de wireframing interactivo gratuita basada en la web que te permite crear prototipos de tu sitio. Puedes crear un sitio dentro de tu navegador, aprovechando una gran biblioteca de interfaz gráfica de usuario con varios objetos para personalizar tu modelo. Una vez que el trabajo esté terminado, puedes compartir tu diseño con otros desarrolladores o exportarlo en los formatos PDF y JPG.

http://gomockingbird.com/

 

13. FluidIA

Herramienta para wireframing y propotipado en diseño web

FluidIA es una herramienta para el wireframing de sitios web y para la creación de prototipos de interfaces de usuario. En una etapa inicial de desarrollo, FuidIA sólo funciona correctamente con Firefox 2.5. Las funciones de colaboración están disponibles en FuidIA, para que puedas compartir e interactuar con otras personas. No hay biblioteca GUI disponible, tampoco la exportación de recursos o wireframes interactivos son compatibles.

http://www.fluidia.org/

 

14. Balsamiq Mockups

Herramienta para wireframing y propotipado en diseño web

Balsamiq Mockups es una herramienta que te permite dibujar wireframes y prototipos interactivos. Balsamiq Mockups está disponible como una aplicación basada en la web y cómo software se puede descargar para Windows, Mac y Linux. El servicio cuenta con una amplia biblioteca de símbolos para interfaz gráfica de usuario con botones listos para usar, barras de desplazamiento y otros objetos que se pueden utilizar para diseñar tus modelos. La colaboración también te permite compartir tu proyecto para recibir comentarios y observaciones en tiempo real. Al terminar, puedes exportar tus wireframes para archivos XML, PDF, PNG. La cuenta gratuita te permite crear wireframes ilimitados durante siete días.

http://www.balsamiq.com/products/mockups

 

Visto en: eSandra / AlmacenPlantillasWeb

Anuncios