¿Que es el wireframing?

A la hora de realizar una web es muy importante partir de una base.  Si bien a lo largo del desarrollo los colores, efectos y otras características se pueden ir retocando hay ciertos detalles que de primeras hay que tener medianamente claros.

Uno de esos puntos es la estructura de la web, secciones, contenido y lo que nos ocupa aquí, su distribución en la página.  Lo habitual es que cuando nos pongamos a realizar un proyecto, el cliente quiera que la web esté lista para ayer.  Otra cosa es luego la realidad.



Con la metodología de programación estructurada, todo se hace por escalones y hasta que no esté asentado uno no se pasa al siguiente.  Hasta que no se supiera con exactitud todos los requisitos no se pasa al diseño, hasta que no se tenga el diseño completo no se inicia la implementación,... esto además de lento hace que el proyecto sea muy inflexible.

¿Cómo nos ayuda el wireframing?

Con el wireframing lo que conseguimos es el armazón de la web, la estructura inicial sobre la que empezar a trabajar (previamente ha debido de realizarse el índice de contenidos), nos muestra el contenido de las diferentes páginas y su distribución sin entrar en detalle. 

A partir de aquí, el diseñador puede ir por secciones ir centrándose en esos detalles, ya sean colores, tipografía, imágenes,... pero el front-end ya puede empezar a ir creando el HTML que recordemos que es independiente del diseño que se aplicará posteriormente en CSS, sin embargo, hay que tener en cuenta que previamente se ha debido "empaquetar" bien los elementos de la página para que encajen bien en el layout posterior.

¿Por dónde empezar?

Lo primero es tener claras las ideas de como funciona el wireframing.  Así que nada mejor que ver ver algunos ejemplos y eso es posible en: http://www.wireframeshowcase.com/ ahí podéis ver varios wireframing de algunas webs, quizás algunos con excesivo detalle pero resulta bastante exclarecedor la primera imagen en la que se ve el aspecto final y en versión wireframing.

Ya tenemos la idea clara.  Pues lo más sencillo, es coger lápiz y papel y hacer ahí el wireframing, así no tienes ningún problema a la hora de poner iconos o lo que sea, yo soy partidario de este método, uso varios bolis de colores y suelo añadir algunas notas en los laterales o a veces incluso marco zonas de posibles div.  Si te gusta esa idea, pero quieres tener una especie de plantilla en http://sneakpeekit.com/ tienes plantillas de diferentes formatos que puedes imprimirlas y luego ya escribir encima de ellas.

Finalmente, existen programas que te permiten hacer el wireframing la que yo conozco es Balsamiq Mockups http://balsamiq.com/ tiene una versión de escritorio y app de pago y una versión online gratuita que podrás generar tus wireframes y convertirlos o bien en png o bien guardarlos como xml para cargarlos nuevamente en el futuro.  Como ejemplo:

Recordad, que para un correcto wireframing ha de realizarse con las diferentes páginas (que sean diferentes) y a las resoluciones que se entienda que hay un cambio en el layout de la página.