Herramientas para crear bocetos de sitios

web
Junio 2014
Luego de realizar el pliego de condiciones del sitio web y la
arborescencia de su sitio web, comienza la fase de bosquejo,
tambin llamada wireframing. Una etapa indispensable para
hacerse una idea ms precisa de la ergonoma del sitio web.
Numerosas herramientas de wireframing gratuitas o de pago estn
disponibles para realizar esta tarea. Simples de utilizar, son particularmente tiles para los
profesionales en la realizacin de un proyecto web.
Qu es el wireframing o boceto del sitio web?
Herramientas y programas de wireframing
Para qu profesionales?
Algunas herramientas gratuitas para la creacin de bocetos
Pencil Project
Lumzy
MockFlow
Cacoo
Algunas herramientas para la creacin de bocetos de pago
Balsamiq
Mockingbird
iPlotz

Qu es el wireframing o boceto del sitio web?
El "wireframing" es la etapa que consiste en representar esquemticamente la organizacin de
un sitio web (por ejemplo: arborescencia), as como su interfaz grfica (interactividad y
ergonoma). Esta etapa de esquematizacin se hace despus de la realizacin del pliego de
condiciones del sitio web y antes de la fase de diseo web propiamente dicha. Puede ser
realizada por diferentes personas que participan en el proyecto. Permite entre otras cosas
someter a un test la ergonoma del sitio, evaluar el tiempo necesario para la realizacin del
proyecto y estimar los costos de realizacin.
Herramientas y programas de wireframing
Las herramientas de wireframing estn destinan a los profesionales que realizarn un proyecto
de creacin de un sitio web, sean o no tcnicos. Estas herramientas facilitan la realizacin del
bosquejo de las etapas de diseo de un sitio web, de un blog o de una aplicacin web o mvil,
para asegurar una buena comprensin entre los diferentes actores (cliente, jefe de proyecto
web, webdesigner, desarrollador, etc.). Estas herramientas estn dotadas de diferentes
funcionalidades (por ejemplo: arrastrar y soltar), que permiten disponer fcilmente de los
elementos grficos de un sitio en diferentes pginas, trabajar la dimensin de estos, definir la
colocacin de los mens, 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 creacin de un sitio web, blog o sitio de comercio
electrnico, desean presentarle a su cliente un boceto del proyecto conforme al pliego de
condiciones de este ltimo: arborescencia y nmero de pginas, disposicin de los mens,
plugins, ergonoma, etc. Las herramientas de wireframing tambin facilitan la
comunicacin con los diseadores web en la fase de diseo del proyecto.
Los profesionales de la comunicacin y del marketing: que, internamente dentro de la
empresa y sin recurrir a una agencia web especializada, emprenden un proyecto de
creacin de un sitio web o blog profesional, y necesitan representar esquemticamente el
proyecto.
Utilizacin sin conexin a internet: presentacin de diagramas o de esquemas (por
ejemplo: rboles de ideas).

Algunas herramientas gratuitas para la creacin de bocetos

Pencil Project
Esta extensin de cdigo 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 grficos (plantillas) para construir el esquema de las
pginas y tambin permite: - La creacin de pginas mltiples. - La creacin de enlace entre las
pginas. - La edicin de texto directamente en el boceto. - La exportacin a los formatos HTML,
PNG, OpenOffice.org, Word y PDF. - Operaciones estndares: alineacin, rotacin, cambio de
tamao. Pencil Project
Lumzy
Esta herramienta colaborativa de creacin de bocetos online (prototipos de sitio web) ofrece
varios elementos grficos (botones, listas, ventanas de texto, barras de navegacin, figuras
geomtricas, etc.), para disponerlos libremente en un espacio de trabajo. Soporta por supuesto
la creacin de pginas mltiples (pestaas separadas). Una ventana ofrece herramientas de
formato asociada a cada elemento grfico (alineacin, colores...) para facilitar la personalizacin
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 imgenes,
una mensajera instantnea, y numerosos botones de acciones estndares (duplicacin de
tems, superposicin, bloqueo de los iconos registrados) Lumzy
MockFlow
En versin gratuita, esta herramienta de wireframing online es abierta slo para proyectos de 4
pginas, con 2 colaboradores mximo. Una configuracin suficiente para la creacin de
pequeos sitios web (escaparate). Pone a disposicin numerosos elementos que hay que
insertar en el boceto para esquematizar numerosos proyectos: aplicacin web, formulario de
contacto, software, etc. MockFlow
Cacoo
Esta herramienta de creacin de diagramas online polivalente ofrece numerosos elementos para
incluir en el boceto y funcionalidades para crear de manera fcil los mapas del sitio web
(sitemaps). Tambin permite a varios usuarios trabajar juntos y simultneamente en el mismo
proyecto. Cacoo
Algunas herramientas para la creacin 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 tambin ofrece 187 iconos insertables, lo que lo hace una de las herramientas de
wireframing ms completas. Balsamiq est disponible a 79 dlares. Balsamiq
Mockingbird
Esta herramienta de creacin 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 dlares) o online (pagando para un
proyecto de ms de 5 pginas), iPlotz permite modelizar y estructurar eficazmente las interfaces
de sitios aplicaciones web. iPlotz est dirigido ms a los usuarios expertos, pero tambin se
puede hacer usos simples. iPlotz
Este documento intitulado Herramientas para crear bocetos de sitios web de Kioskea (es.kioskea.net) esta
puesto a diposicin bajo la licencia Creative Commons. Puede copiar, modificar bajo las condiciones puestas por la
licencia, siempre que esta nota sea visible.