12 June 2010

Wireframing Y Prototipos Para Websites: Mejores Herramientas Para Diseñar Tu Sitio Web

Servicios de wireframing y creación de prototipos para sitios web pueden ayudar a esbozar tu proyecto y armar la estructura general de tu sitio sin tener que contratar un diseñador web para ello. Por esta razón, el wireframing es el primer paso que debes considerarse al diseñar un sitio nuevo. En esta guía de MasterNewMedia, encontrará las mejores herramientas disponibles en el mercado para hacer wireframes y prototipos para tu sitio.

Crédito de la foto: WebDesigner Depot

En general, un wireframe debería ser un prototipo del proyecto visual del diseño de la interfaz, para dibujar la arquitectura de un sitio web y las relaciones entre sus páginas, todo ello sin tener que preocuparte de los detalles de tu diseño gráfico. Es por eso que se llama "wireframe", ya que sólo se describen las áreas y componentes clave de la futura página web sin detallar los colores, gráficos y características específicas.

Sin embargo, históricamente, el wireframing se origina en el mundo de la computación gráfica, cuando el término describe una representación de objetos 3D, con tan sólo la exhibición de su wireframe, para tener una vista rápida de las imágenes más complejas sin mucha demora.

Pero los wireframes no sólo son excelentes para simplificar la complejidad del diseño y ahorrar tiempo, pero tus beneficios van más allá de la reducción en el diseño de exposiciones y tiempo de producción.

Aquí están algunas otras ventajas prácticas de la utilización de wireframes y prototipos para el diseño de tu sitio:

Consistencia: Las herramientas de wireframing hacen fácil probar y probar diferentes variaciones de una solución de diseño sin necesidad de mucho tiempo y recursos. Es fácil de experimentar con diferentes diseños y no te costará una fortuna.

Planeamiento: Los sitios con diseño de wireframes son también muy útiles cuando se tiene la necesidad de comunicar ideas del diseño inicial con colegas, clientes y desarrolladores. El prototipo de un sitio web puede actuar como una base sólida para considerar las mejoras en el diseño y estructura de contenidos, el diseño general, las posiciones de los elementos clave, y otros requisitos.

Facilidad de navegación: Un wireframe ayuda a que el designer planee la colocación de elementos de navegación para proporcionar una mejor experiencia para los visitantes del sitio. A través del desarrollo de wireframes y de la impresión de las páginas del prototipo, se puede fácilmente hacer un pre-test y análisis con antelación de qué tipo de soluciones más adecuadas adoptar.

Undo infinito: La creación de prototipos y servicios permiten invertir y trazar la historia completa de los cambios de diseño y retornar a cualquier punto anterior.

Realismo: Los modelos pueden ser creados para ser utilizados en las pruebas iniciales con los usuarios y se asemejan a un sitio web normal.

Colaboración y compartimiento: Todo el mundo puede participar, con la colaboración con otros diseñadores o colegas para obtener comentarios. Puedes compartir tu proyecto en wireframe fácilmente con tus clientes y consumidores para ilustrar la evolución del trabajo del diseño.

Gratis: Ahorra dinero. Sí: no necesitas pagar nada para utilizar estos servicios de prototipos gratis que aparecen en esta guía.

Para ayudarte a seleccionar e identificar el servicio gratuito de prototipos o wireframing para sitios web, aquí están seleccionados y organizados todos los datos necesarios para que puedas comparar y seleccionar el servicio online más adecuado para tus necesidades.

A continuación, encontrarás un mapa mental interactivo, un cuadro comparativo y una serie de mini-revisiones para hacer tu evaluación lo más eficaz posible.

Estos son los criterios utilizados para esta comparación:

Tipo de software: Para descargar / herramienta basada en web (en caso de descarga, el sistema operativo compatible se especifica).

Biblioteca de símbolos GUI: gratuito, botones fácilmente disponibles, barras de desplazamiento, menús y otros objetos para elaborar wireframes.

Wireframes interactivas: Los modelos que simulan la navegación entre las páginas web donde se puede hacer clic.

Colaboración en tiempo real: Interacción con los clientes y los empleados para recibir información en vivo.

Formatos de exportación: Formatos soportados para exportar los proyectos en wireframes.

Limitaciones de cuentas: Restricciones en cuenta gratuita (si las hay) y tiempo de uso, número de wireframes que puedes crear, etc

NB: Este artículo acerca de herramientas para wireframing gratuitas está aún incompleto. Es posible que desees hacer bookmark de esta página (basta con pulsar CTRL + D en el teclado o Windows CMD + D en Mac), a medida que nuevos servicios se añadan en las próximas semanas.

Aquí está la guía completa en detalle:

Herramientas Para Wireframing Y Prototipos De Sites - Tabla De Comparación

Herramientas Para Wireframing Y Prototipos De Sites

Gliffy

Gliffy es una herramienta para wireframing y prototipos de sitios web basada en la web que permite seguir a tu sitio, 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 es compatible con anuncios.

http://www.gliffy.com/
Jumpchart

Jumpchart es una aplicación de planificación basada en navegador que te permite dibujar un wireframe para tu sitio. 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 para el compartimiento. No está disponible la biblioteca GUI.

http://jumpchart.com/
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. Ten en cuenta que con la cuenta gratuita, todos tus archivos se exportarán como filigrana. 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 para el compartimiento.

http://www.mockflow.com/
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 la 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/
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 disponibiliza función de exportación, tampoco una biblioteca GUI de símbolos está disponibles.

http://www.mocklinkr.com/
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.

http://www.evolus.vn/Pencil/Home.html
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. Los modelos interactivos no son compatibles.

http://www.lumzy.com/
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.

http://gomockingbird.com/
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.

http://www.fluidia.org/
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.

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