Wireframe: Ayuda para bocetar un diseño web

La Aplicación Wireframe.com

Si no sabes lo que es un Wireframe… ve un poco más abajo. Aquí empezamos comentando una  aplicación de Wireframes que es FREEMIUM (con opción gratuita o de pago) donde podrás empezar a dibujar inmediatamente desde su web Wireframe.cc.

El uso es simple y directo. Tan simple como mover el ratón y crear las zona de un elemento: “Aquí una imagen, que si ahora aquí un vídeo grandote… y claro, un texto o una lista; y el menú aquí arriba, sí!!!

¿Para qué usar esto mejor que un simple papel?

• Podrás guardar y compartir tu wireframe con cualquier persona vía online.
• No trabaja en tiempo real como GOOGLE DOCS pero te permite hacer cambios y comunicarlo a la otra persona.
• Puedes crear anotaciones.
• Puedes crear enlaces e interacciones.

La versión PRO, de 12, 39 ó 99 dólares te ofrece bastantes más opciones para trabajar más cómodamente. Es decir, paga por tener una super “servilleta de bar” con tus anotaciones, y que además ofrece…

• Exportación a PDF.
• Multipáginas.
• Zona de trabajo privada.
• Sistema de Revisiones

Qué son los Wireframes

Un Wireframe es un esquema o un boceto básico en la construcción de un sitio web. Básicamente sirve para ver la estructura, arquitectura y disposición general de los elementos en una página web. No habla de colores, ni de tipografía ni mucho menos de detalles de pixeles. Pero es un principio básico para construir sobre lo que realmente quiere el cliente.

“Es la conexión entre lo estético y la arquitectura de la información.”

Lo qué debe incluir un Wireframe

El Wireframe debe ayudar a entender la interacción entre las diferentes páginas. Es donde las ideas y propuestas para el proyecto empiezan a plasmarse en “papel”. Por lo que además de la estructura visual que tendrá el diseño, también deberá concretar el tipo de información (imagen, vídeo, texto, iframes, etc) que irá en cada parte de la web.

El uso de los Wireframes

Los diseñadores web ven los wireframes bajo el uso como herramienta de UI (User Interface), es decir, donde se pueda intuir y mejorar la usabilidad del sitio. Sin embargo, los desarrolladores web verán el wireframe como la suma de necesidades tecnológicas o funcionalidades que requerirá el proyecto.

A veces, como te puedes imaginar, el Wireframe puede provocar un cambio significativo en el presupuesto. Por eso, si el proyecto es muy complicado, quizás te convenga preparar un buen wireframe con diseñadores web y desarrolladores antes de cerrar un precio.

Detalle y Fidelidad de los Wireframes

• BAJA FIDELIDAD

Pocos detalles y con alto nivel de abstracción: contenidos de prueba, textos falsos y datos no reales para poder tener esqueleto en dos pinceladas.

• ALTA FIDELIDAD

Se parecen más a un diseño definitivo que a un borrador. Incorporan material real o final, tanto de fotos como de textos y demás posibles funcionalidades. Lo malo es que toman mucho más tiempo y son más complicados de variar, por lo que a veces pierden un poco su propio sentido.