Wireframe la manera correcta de diseñar

Escrito por Mario German Reyes (@mager19), de imaginandolaweb.com para la iniciativa blogger invitado, vos también podes participar.

Todos los que de una u otra forma diseñamos webs, tenemos la tendencia de realizar nuestro diseño en vivo por así decirlo, creamos nuestra imagen directamente en un software especializado, pasamos a maquetar, y armamos nuestro sitio sin ni siquiera tener un diseño en papel. Para dar a entender lo que esto significa podemos imaginar a un arquitecto que inicia un edificio sin tener planos. Sé que muchos van a decir esto es básico la pregunta es en serio debe tomarse como algo básico, este artículo mostrara que es un wireframe y la manera correcta de hacerlos.

¿Qué son wireframes?  Son un conjunto de dibujos que representan cómo estarán organizados los elementos en las páginas, sin elementos gráficos, de tal manera que implementan aspectos generales del sistema sin entrar en detalle, por ejemplo podemos crear la página principal y definir en donde ira nuestro menú sin necesidad de saber de una vez como va quedar, solo tenemos su ubicación y orden.

Entonces para colocarlo en nuestras palabras es la forma gráfica previa al diseño en la cual sabemos dónde van a estar puestos los elementos, la manera más práctica de plasmar lo que tenemos en nuestra cabeza cuando imaginamos un diseño web.

¿Qué elementos deben incluirse en nuestro wireframe?

  • Elementos de navegación: menús, enlaces.
  • Elementos de información: contenidos de texto e imágenes.
  • Elementos de interacción: herramientas o funcionalidades que el usuario puede realizar, slides, banners, widgets.
  • Elementos de apoyo: ítems de ayuda y orientación, como mapas de navegación o faqs.
  • Elementos promocionales: espacio dedicado a banners publicitarios o a destacados internos del propio producto.

¿ Que ventajas tenemos de usar un wireframe en el momento de diseñar?

  • Se tiene la visión clara de hacia donde va enfocado el proyecto gráficamente hablando.
  • Si se trabaja en equipo se pueden delegar funciones teniendo claro que estándar se va manejar.
  • Tener un registro grafico para realizar cambios radicales en el diseño, o en el caso que se vaya a realizar un rediseño se cuenta con una base para iniciar el trabajo.
  • El cliente puede ver la forma básica que tendrá su web, lo que permitirá realizar cambios antes de realizar todo en el software.
  • Mejorar sensiblemente la forma en que se trabaja, se tiene una calidad grafica mejor, y es una nueva forma de mostrar que cuentas con estándares de diseño.
  • Cuando un wireframe es aprobado por el cliente, los comentarios posteriores sobre la presentación de una página pueden estar asociados a la percepción de diseño, uso de colores, tipografía, etc. Pero ya no debiera cuestionarse la estructura y disposición de elementos de una página (todos sabemos que el cliente cambia de opinión de una noche para otra esto evitara ese tipo de cosas).
  • Personalmente colecciono los wireframes de proyectos realizados, para recurrir a ellos cuando te faltan las ideas, o simplemente a modo de satisfacción.

¿En que tipos de proyectos se pueden usar los wireframes?

Bueno es aplicable a todo tipo de proyectos desde una web sencilla, un newsletter, pasando por los blogs, las webs empresariales, y grandes proyectos que involucren diseño y programación.

En estos últimos incluso se tiene la buena práctica de enlazar simuladamente los wireframes lógicamente con sus nombres o referencias.

Ejemplos de wireframes:

¿ Como se realizan los wireframes?

Bueno creo que la mejor forma de realizarlos es mano, por que te da el contacto con lo que estas diseñando, usar reglas o simplemente con tu pulso, claro que también existen herramientas especializadas para realizar este tipo de trabajos, las cuales mencionaremos en otro post.

¿Qué nos queda?

Que un wireframes es un dibujo en el que mostramos la ubicación de los elementos de un sitio,  que deben estar todos los elementos que se usaran en el diseño, que tiene la ventaja de estar enfocados respecto al aspecto grafico, el equipo de trabajo tiene un norte común y que el cliente debe aprobar nuestro wireframe para asi comenzar con el diseño.

¿Qué te parecen los wireframes, los usas? Por que no nos lo comentas.

Hernan Cabrera

Argentino, blogger y laburante de Internet desde 2005, tengo el placer de vivir de lo que me gusta. Hoy ocupo mi tiempo en mantener una red de sitios multitematica y buscar nuevos nichos de mercado. Me pueden seguir en Twitter @HernanMDQ

4 comentarios en «Wireframe la manera correcta de diseñar»

  • el 02/08/11 a las 14:27
    Enlace permanente

    si es una buena pratica ahorra mucho dolores de cabeza,
    y nos quitas pero de los clientes

  • el 03/08/11 a las 1:11
    Enlace permanente

    Tienes mucha razón, son muy especiales para dar una idea clara al cliente para proseguir a el diseño y programación en si.

    Muy buen post!

  • el 12/08/11 a las 12:27
    Enlace permanente

    Hola, gracias por comentar. Un buen artículo. Qué bien que haya evangelización por la arquitectura de la información y la usabilidad en los sitios web. Bien.

  • el 22/09/11 a las 17:25
    Enlace permanente

    Yo no abro el photoshop sin tener el wireframe, es como querer pintar sin antes hacer un boceto de lo que se quiere.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.