¿Qué herramientas de wireframing de sitios web están disponibles en línea o autohospedadas?

Estoy buscando una herramienta de wireframing fácil de usar. He oído hablar de gliffy , ¿hay otros?

Específicamente, me gustaría algo que sea

  • Fácil de usar
  • Apoya la colaboración
  • exportar a html y css
  • me permite mostrar los wireframes al cliente. Permitir anotaciones sería una buena característica.
  • bajo costo, o gratis

Creately

Creately no es realmente gratis, pero puedes pagarles el precio que creas correcto (incluso $ 1). Algunas características (del sitio web oficial):

Diagtwigs de negocios

* Process Flow (BPMN) * Online Flowcharts * Concept Maps * Mind Maps * SWOT Diagrams * Organizational Chart 

Diseño de interfaz de usuario

 * Wireframe for Website * UI Mockup Wireframe * Web Flow Charts * Online Sitemaps * Mockup Screens * Desktop Software Mockup 

Diagtwigs de software y sistemas

 * System Diagram and Design * ER Diagrams (Entity) * Data Flow Diagram (DFD) * UML Diagrams * Class Diagram * UML State Charts 

Diagtwigs de red y más

 * Home Network Diagram * Office Network Diagram * Data Center Design Layout * Capacity Planning models * Digital Circuits 

Ejemplo de Creately

sinsonte

Otra opción es Mockingbird . Su “lema” es:

  1. Imagínate rápido. Arrastre y suelte los elementos de la interfaz de usuario en la página, luego reorganice y cambie el tamaño. Pasa de la idea a la maqueta en minutos.

  2. Hacer enlaces Vincule múltiples maquetas juntas y visualícelas de forma interactiva para tener una idea del flujo de su aplicación.

  3. Comparte con un clic. Compartir maquetas con colegas o clientes es tan simple como enviar un enlace. No más carpetas de correo electrónico de imágenes desordenadas.

Ejemplo de Mockingbird

Mockingbird está hecho usando el marco Cappuccino .

Balsamiq, no completo gratis pero puedes trabajar con él.

Balsamiq

Usted podría simplemente wireframe en HTML.

En serio, no ignore las ventajas de lo que el wireframing HTML directo puede ofrecerle al proceso o las herramientas que existen para hacerlo más fácil y efectivo. Cosas como jquery y polypage convierten a HTML en una herramienta de creación de prototipos y de ttwigdo de cables muy potente y capaz.

Hace un tiempo escribí una publicación en el blog que explica algunas de las ventajas y herramientas del enrutamiento HTML directo (lo siento por la autopromoción gratuita).

Otra gran herramienta de maqueta / maqueta de un sitio web es Mockingbird … es colaborativo y realiza exportaciones decentes.

Plugin de lápiz de Firefox

http://mockflow.com

Mockflow es el mejor con el que he trabajado hasta ahora y lo he intentado con bastantes. Basado en la web y gratis para un proyecto. Muy amigable para los no diseñadores con mentalidad de usuario

Microsoft Expression Blend. No es gratis, pero la función Sketchflow en la versión 3 no solo le permite crear wireframes, sino que también le permite publicarlos en la web, donde los usuarios pueden comentarlos y anotarlos, y recostack los comentarios y los devuelve al equipo de diseño.

Hay una versión de prueba de 60 días que es gratuita y tutoriales de Sketchflow en el sitio.

ProtoShare está basado en la web, por lo que funciona con todas las plataformas y sus clientes no tienen que descargar el software para poder ver y hacer comentarios. No es gratis, pero los planes comienzan en $ 19 / mes con una prueba gratuita de 30 días.

Además de los clientes que tienen la capacidad de comentar, los diseñadores también pueden anotar los wireframes. En este momento, no puede exportar a HTML o CSS, pero puede usar CSS en la aplicación para obtener el mensaje y el estilo correctos. Sin embargo, la exportación de HTML está llegando.

¡Buena suerte en tu búsqueda!

Con LucidChart puedes crear wireframes interactivos. Tienen una versión gratuita con un subconjunto limitado de las capacidades de wireframing, pero sus precios de suscripción son muy razonables.