Herramientas para crear bocetos de sitios web

El Wireframing (Diseño de Estructura) es una etapa indispensable para trabajar la ergonomía de tu sitio web. Existen numerosas herramientas gratuitas o de pago que permiten realizar este procedimiento. Son simples de utilizar y particularmente útiles para los profesionales en la realización de un proyecto web.

¿Qué es el Wireframing?

Es la etapa que consiste en representar esquemáticamente la organización de un sitio web, así como su interfaz gráfica (interactividad y ergonomía). Se lleva a cabo después de la realización de establecer las condiciones del sitio web y antes de la fase del diseño web. Además, permite evaluar el tiempo necesario para la realización del proyecto y estimar los costos de realización.

¿Qué son las herramientas y programas para el Wireframing?

Las herramientas de Wireframing están destinadas a los profesionales que realizarán un proyecto de creación de un sitio web, sean o no técnicos. Estas herramientas facilitan la realización de las etapas de diseño de un sitio web, de un blog o de una aplicación web o móvil para asegurar una buena comprensión entre los diferentes actores (cliente, jefe de proyecto web, webdesigner, desarrollador, etc.).

Están dotadas de diferentes funcionalidades (por ejemplo: arrastrar y soltar) que permiten disponer fácilmente de los elementos gráficos de un sitio en diferentes páginas, trabajar la dimensión de estos, definir la colocación de los menús, etc.

¿A qué profesionales está destinado el Wireframing?

Las herramientas de Wireframing pueden ser utilizadas por diferentes tipos de profesionales, por ejemplo:

• Jefes de proyecto web: aquellos que antes de la creación de un sitio web, blog o sitio de comercio electrónico, desean presentarle a su cliente un boceto del proyecto: arborescencia, número de páginas, disposición de los menús, plugins, ergonomía, etc. Las herramientas de Wireframing también facilitan la comunicación con los diseñadores web en la fase de diseño del proyecto.
• Profesionales de la comunicación y marketing: aquellos que dentro de la empresa, sin recurrir a una agencia web especializada, emprenden un proyecto de creación de un sitio web o blog profesional y necesitan representar esquemáticamente el proyecto.

¿Qué herramientas gratuitas existen para crear de bocetos?

• Pencil Project

Esta extensión de código abierto para el navegador Firefox permite crear diagramas y realizar interfaces de usuario con la ayuda de una gran cantidad de herramientas. Ofrece numerosos elementos gráficos (plantillas) para construir el esquema de las páginas y también permite:

1. La creación de páginas múltiples.
2. La creación de enlace entre las páginas.
3. La edición de texto directamente en el boceto.
4. La exportación a los formatos HTML, PNG, OpenOffice.org, Word y PDF.
5. Operaciones estándar: alineación, rotación, cambio de tamaño.

Puedes obtenerlo aquí: Pencil Project.

• MockFlow

En versión gratuita, esta herramienta de Wireframing online está disponible sólo para proyectos de 4 páginas, con dos colaboradores máximo. Una configuración suficiente para la creación de pequeños sitios web (escaparate).

Además, pone a disposición numerosos elementos que hay que insertar en el boceto para esquematizar numerosos proyectos: aplicación web, formulario de contacto, software, etc.

Puedes obtenerla aquí: MockFlow.

• Cacoo

Esta herramienta de creación de diagramas online polivalente ofrece numerosos elementos para incluir en el boceto y funcionalidades para crear de manera sencilla los mapas del sitio web (sitemaps). También permite a varios usuarios trabajar juntos y simultáneamente en el mismo proyecto.

Puedes obtenerla aquí: Cacoo.

¿Qué herramientas de pago existen para la creación de bocetos?

• Balsamiq

Esta herramienta colaborativa (Windows, Apple y Linux) permite realizar prototipos de aplicaciones o de sitios web. Su interfaz ofrece 75 órdenes y acciones integradas. Balsamiq también ofrece 187 iconos insertables, lo que lo hace una de las herramientas de Wireframing más completas.

Puedes obtenerla aquí: Balsamiq.

• Mockingbird

Esta herramienta de creación de mockups online es muy intuitiva y se paga mensualmente (ofrece dos proyectos con colaboradores ilimitados).

Puedes obtenerla aquí: Mockingbird.

• iPlotz

Se puede obtener mediante descarga (Linux o Windows) o de manera online (pagando para un proyecto de más de 5 páginas). iPlotz permite modelizar y estructurar eficazmente las interfaces de sitios aplicaciones web. Está dirigido más a los usuarios expertos.

Puedes obtenerlo aquí: iPlotz.