Herramientas para crear bocetos de sitios web

Noviembre 2016


Luego de realizar el pliego de condiciones del sitio web y la arborescencia de su sitio web, comienza la fase de bosquejo, también llamada wireframing. Una etapa indispensable para hacerse una idea más precisa de la ergonomía del sitio web. Numerosas herramientas de wireframing gratuitas o de pago están disponibles para realizar esta tarea. Simples de utilizar, son particularmente útiles para los profesionales en la realización de un proyecto web.



¿Qué es el wireframing o boceto del sitio web?


El "wireframing" es la etapa que consiste en representar esquemáticamente la organización de un sitio web (por ejemplo: arborescencia), así como su interfaz gráfica (interactividad y ergonomía).

Esta etapa de esquematización se hace después de la realización del pliego de condiciones del sitio web y antes de la fase de diseño web propiamente dicha. Puede ser realizada por diferentes personas que participan en el proyecto. Permite entre otras cosas someter a un test la ergonomía del sitio, evaluar el tiempo necesario para la realización del proyecto y estimar los costos de realización.

Herramientas y programas de wireframing


Las herramientas de wireframing están destinan 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 del bosquejo 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.).

Estas herramientas 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.

¿Para qué profesionales?


Las herramientas de wireframing pueden ser utilizadas por diferentes tipos de profesionales y en numerosos casos:
  • Jefes de proyecto web: 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 conforme al pliego de condiciones de este último: arborescencia y 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.
  • Los profesionales de la comunicación y del marketing: que, internamente dentro de la empresa y 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.
  • Utilización sin conexión a internet: presentación de diagramas o de esquemas (por ejemplo: árboles de ideas).

Algunas herramientas gratuitas para la creación de bocetos

Pencil Project


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

- La creación de páginas múltiples.

- La creación de enlace entre las páginas.

- La edición de texto directamente en el boceto.

- La exportación a los formatos HTML, PNG, OpenOffice.org, Word y PDF.

- Operaciones estándares: alineación, rotación, cambio de tamaño.

Pencil Project

Lumzy


Esta herramienta colaborativa de creación de bocetos online (prototipos de sitio web) ofrece varios elementos gráficos (botones, listas, ventanas de texto, barras de navegación, figuras geométricas, etc.), para disponerlos libremente en un espacio de trabajo. Soporta por supuesto la creación de páginas múltiples (pestañas separadas).

Una ventana ofrece herramientas de formato asociada a cada elemento gráfico (alineación, colores...) para facilitar la personalización del proyecto.

El creador del proyecto puede invitar a terceros a participar en el proyecto para colaborar en tiempo real.

Lumzy integra por otro lado una herramienta de retoque de imágenes, una mensajería instantánea, y numerosos botones de acciones estándares (duplicación de ítems, superposición, bloqueo de los iconos registrados)

Lumzy

MockFlow


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

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.

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 fácil los mapas del sitio web (sitemaps). También permite a varios usuarios trabajar juntos y simultáneamente en el mismo proyecto.

Cacoo

Algunas herramientas para la creación de bocetos de pago

Balsamiq


Esta herramienta colaborativa (cliente desktop para Windows, Apple y Linux) permite realizar prototipos de aplicaciones o de sitios web. Su interfaz ofrece 75 órdenes y acciones integrados. Balsamiq también ofrece 187 iconos insertables, lo que lo hace una de las herramientas de wireframing más completas. Balsamiq está disponible a 79 dólares.


Balsamiq

Mockingbird


Esta herramienta de creación de mockups online es muy intuitiva y está disponible a partir de 9$ al mes (dos proyectos, con colaboradores ilimitados).

Mockingbird

iPlotz


Mediante descarga (en OS Linux o Windows, licencia de 75 dólares) o online (pagando para un proyecto de más de 5 páginas), iPlotz permite modelizar y estructurar eficazmente las interfaces de sitios aplicaciones web. iPlotz está dirigido más a los usuarios expertos, pero también se puede hacer usos simples.

iPlotz

Consulta también :
El documento «Herramientas para crear bocetos de sitios web » de CCM (es.ccm.net) se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo siempre y cuando respetes las condiciones de dicha licencia y des crédito a CCM.