Wireframing y prototipos para diseño web
En diseño web, un wireframe es una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar para comprobar la usabilidad de un sitio web.
La principal ventaja que ofrece es que ofrece una perspectiva basada solamente en la arquitectura del contenido, obviando el diseño y evitando elementos accidentales que puedan distraer (colores, tipografías, imágenes, textos, etc).
Wikipedia
Crédito de la foto: WebDesigner Depot
Herramientas para hacer wireframing y prototipos de páginas web
-
Gliffy
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.
-
Jumpchart
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.
-
MockFlow
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.
-
iPlotz
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.
-
Mocklinkr
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.
-
Pencil Project
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.
-
Lumzy
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.
-
Mockingbird
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.
-
FluidIA
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.
-
Balsamiq Mockups
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.
Fuente: Wireframing Y Prototipos Para Websites: Mejores Herramientas Para Diseñar Tu Sitio Web
Añadimos las herramientas para wireframe encontradas en webdesignledger.com:
MockFlow
MockFlow permite diseñar maquetas de interfaz de usuario para software y sitios web, así como colaborar con otros diseñadores (en tiempo real). Viene con numerosos componentes integrados e iconos.
Axure
Axure permite a los diseñadores de aplicaciones crear wireframes, diagramas de flujo, prototipos, y especificaciones para aplicaciones y sitios web. Permite utilizar widgets prediseñados incluyendo botones, campos de formularios, formas y elementos dinámicos que se pueden editar y dar formato.
Balsamiq Mockups
Utilidad para crear maquetas y bocetos como si estuviesemos dibujando. Permite modificar y reorganizar los controles fácilmente, contando con 75 controles pre-construidos para elegir.
Pencil Project
El Pencil Project es un complemento gratuito para Firefox. Algunas características clave incluyen: built-in plantillas, soporte de documentos de varias páginas, y múltiples opciones de exportación.
HotGloo
HotGloo está completamente basado en web con multitud de posibilidades que permiten arrastrar y soltar elementos, así como modificar su escala con facilidad. También tiene soporte para la colaboración en tiempo real.
Mockingbird
Mockingbird es otra aplicación web con énfasis en la colaboración.
Cacoo
Cacoo es una herramienta de dibujo en línea que te permite crear una variedad de esquemas tales como mapas de sitio, wireframes, diagramas UML y diagramas de red.
ProtoShare
ProtoShare es una herramienta de creación de prototipos basada en Web con un enfoque colaborativo. Los miembros del equipo pueden revisar el trabajo e incluir ideas y sugerencias.
iPlotz
iPlotz permite crear rápidamente maquetas, menús de navegación y wireframes de prototipos de sitios Web y aplicaciones de software.
OmniGraffle
OmniGraffle es una aplicación para Mac OS con un montón de herramientas para crear wireframes y maquetas, pero también es importante para crear todo tipo de cuadros y diagramas.
Actualización: artículo con referencias a ejemplos de wireframes para diseño web con plantillas descargables (Colección de wireframes para diseño web)
Otras páginas de Herramientas:
- Frameworks de desarrollo web gratis
- Herramientas de diseño web para Apple
- CSS: Herramientas para diseño web
- Herramientas SEO
- jQuery: herramientas y ejemplos
- Herramientas para diseño, desarrollo web, seo, optmizacion, etc
- Wireframing y prototipos para diseño web
