Uno de las primeras tareas que hacemos en Go!Pymes, apenas luego de tomar una decisión, de formar los objetivos [fb-share] y las necesidades de un WebSite es la de crear Wireframes.

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