Que mejor ejemplo que asomarte a la ventana de tu oficina y ver como empiezan a construir un edificio: hacen un gran hueco y vierten todo el cemento. El tener unos buenos cimientos es la clave de una buena construcción.

Pues igualmente, sucede en el desarrollo de un WebSite, primero necesitamos un plano, hecho a mano (o a software) en la que puedes dibujar como te la imaginas el producto terminado, la cabecera, el cuerpo, el sidebar, entre otras cosas.

Pero entonces… qué es un Wireframe?

El Wireframe es una herramienta de comunicación que ayuda a los programadores, maquetadores, diseñadores e incluso hasta el mismo cliente a “aluscinar” como va a quedar su WebSite. Por ejemplo, uno de los wireframes mas publicados fue el de Terra.

Ventajas de usar Wireframes

• Claridad en el diseño.
• Fomenta la imaginación.
• Mejora la calidad de las funcionalidades del sistema.
• En el desarrollo, participan muchos activamente.

Qué debe contener un Wireframe?

• Inventario del contenido (categorías, pages, post).
• Capas de la pagina (o layouts).
• Elementos del WebSite.
• Diseño estructural.
• y hasta el comportamiento.

Cuántos Wireframes por Website debo hacer?

Todas las que sean necesarias, entendieron? TODAS!. Del Home, de cada página estática importante, igual con las pàginas dinámicas, la de error, la del search y la de ingreso de datos.

Cómo empiezo a desarrollar un Wireframe?

• Primero toma lapiz y papel, luego traza el navegador.
• Empieza a armar los bloques (o capas) que va a tener tu WebSite (header, content, sidebar, footer, etc)
• Ahora empieza a llenar cada capa con sus respectivas funciones, por ejemplo en el sidebar puedes poner el apartado de fans de facebook, las categorias, algunos sponsors, etc
• Trata de “dibujar” cada cosa detallosamente, si por ejemplo quieres dibujar la ventanita de youtube, pues trata de dibujar tb su imagen de la ventana, su “play”, su barra del video, etc. Cada detalle es importante.
• Mientras dibujas enumera cada cosa y a la derecha del gráfico explica que significa cada uno de esos numeritos.
• Si puedes usar regla (sólo si te sientes cómodo) pues úsala.
• Si estas pensando en un trazo que no debe ir, Atrevete! trazalo y fijate como queda.

Hay algún software para esto?

Personalmente el que uso más es el OpenOffice Draw pues me facilita algunos trazos, pero si uds tiene  facilidad con otras herramientas : firework, corel, gimp, etc, pues es mejor usar la que uno conoce.

He visto en la red que usan Axure parece ser una buena herramienta para este tipo de trabajos, es cosa que lo prueben.

Navegando por ahi encontré, una web que tiene bocetos del browser ya dibujado listo para imprimir y hacer tus wireframes más sencillo aun, personalemnte lo uso y lo recomiendo.

Artículos Relacionados:
»Dey Alexander Consulting : Wireframes
»Rediseño del Blog: El factor Humano
»Blog GoPymes : Que necesito para tener mi Página Web

El pasado miercoles 11, en el colegio de Ingenieros se llevo a cabo el Adobe Latin Flash Tour (valga la redundancia), el cual es un evento donde vienen los evangelistas de Adobe de la division Flash y en este caso gente de Influxis que fueron los auspiciadores del evento.
Entre los temas que se  tocó fueron el Flash CS5, el Flash Player 10.1, y el que más me impresionó fue el Flash Catalyst, que según los expositores ayuda a crear las prototipos más rápidamente, al generar las interfaces gráficas apartir de las imágenes hechas en Adobe Photoshop (esto me ayudaria bastante puesto que actualmente los hago en papel y luego tengo que explicar y explicar hasta que me entiendan mis demás compañeros de trabajo =p,  solo tengo el inconveniente que no sé manejar Photoshop T.T, pero bueno habrá que aprender =D).

Otro de los temas fue el Flash CS5 para iPhone (pense que no se podia colocar flash en el iPhone, estarán enterados los de Apple?)

Para terminar rescato la frase dicha por uno de los expositores “creatividad mata herramienta”, y “la creatividad consiste en encontrar algo que exista, mejorarlo o agregar algo”.

NOTA: evangelista en el mundo de la tecnología significa, persona que va a los eventos a promocionar y explica sus nuevas herramientas o las mejoras que esta tiene, así como las ventajas con respecto a otras tecnologías.