Sei sulla pagina 1di 3
Herramientas para crear bocetos de sitios web Junio 2014 Luego de realizar el pliego de

Herramientas para crear bocetos de sitios web

Junio 2014

Herramientas para crear bocetos de sitios web Junio 2014 Luego de realizar el pliego de condiciones

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?los profesionales en la realización de un proyecto web. Herramientas y programas de wireframing ¿Para qué

Herramientas y programas de wireframingweb. ¿Qué es el wireframing o boceto del sitio web? ¿Para qué profesionales? Algunas herramientas gratuitas

¿Para qué profesionales?del sitio web? Herramientas y programas de wireframing Algunas herramientas gratuitas para la creación de bocetos

Algunas herramientas gratuitas para la creación de bocetos Pencil Projecty programas de wireframing ¿Para qué profesionales? Lumzy MockFlow Cacoo Algunas herramientas para la

gratuitas para la creación de bocetos Pencil Project Lumzy MockFlow Cacoo Algunas herramientas para la
Lumzy

Lumzy

MockFlow

MockFlow

Cacoo

Cacoo

Algunas herramientas para la creación de bocetos de pago Balsamiq Mockingbird iPlotzde bocetos Pencil Project Lumzy MockFlow Cacoo ¿Qué es el wireframing o boceto del sitio web?

la creación de bocetos de pago Balsamiq Mockingbird iPlotz ¿Qué es el wireframing o boceto del
la creación de bocetos de pago Balsamiq Mockingbird iPlotz ¿Qué es el wireframing o boceto del
la creación de bocetos de pago Balsamiq Mockingbird iPlotz ¿Qué es el wireframing o boceto del

¿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.por diferentes tipos de profesionales y en numerosos casos: Los profesionales de la comunicación y del

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.con los diseñadores web en la fase de diseño del proyecto. Utilización sin conexión a internet:

Utilización sin conexión a internet: presentación de diagramas o de esquemas (por ejemplo: árboles de ideas).y necesitan representar esquemáticamente el proyecto. Algunas herramientas gratuitas para la creación de bocetos

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

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

Este documento intitulado « Herramientas para crear bocetos de sitios web » de Kioskea (es.kioskea.net) esta puesto a diposición bajo la licencia Creative Commons. Puede copiar, modificar bajo las condiciones puestas por la licencia, siempre que esta nota sea visible.