Tecnología y Coaching para Emprendedores

Por Qué Deberías Utilizar una Herramienta de Wireframing

wireframing

Cuando nos iniciamos al mundo del diseño web, lo primero que tendemos a hacer es empezar directamente a crear nuestra web con código HTML y CSS. Es un error de principiantes que creo que prácticamente todos hemos cometido. Por eso creé un artículo con los 10 pasos a seguir en el diseño de una web. En este post vimos que antes de nada, debíamos definir nuestros objetivos, así como los contenidos que queríamos publicar, pues un error típico es primero definir el diseño y después adaptar los contenidos al diseño. El diseño web se ha de adaptar a nosotros, no nosotros al diseño de la web. Vimos entonces que como tercer paso valía la pena hacer un sketch con papel y lápiz, ¿la razón? Es más fácil pensar sobre papel que sobre la pantalla. Y después vimos que antes de maquetar en Photoshop vale la pena utilizar una herramienta de wireframing. En este post vamos a ver el por qué deberíamos utilizar una herramienta de wireframing.

 

Qué es una herramienta de wireframing

La primera pregunta que muchos nos vamos a plantear es qué es una herramienta de wireframing y para qué sirve. Básicamente una herramienta de wireframing nos permite crear el árbol de nuestra web y hacer un prototipo de cómo será cada página. Un prototipo es una idea visual de cómo va a quedar la estructura de la web con indiferencia del diseño final que le apliquemos. Existen muchas herramientas de wireframing, yo ahora mismo estoy utilizando Axure, una herramienta de wireframing premium, o sea, de pago, pero que me encanta por lo fácil de aprender que es y los tutoriales que hay.

Así, como comentaba, con una herramienta de Wireframing vamos a poder crear el árbol o sitemap de nuestra web, lo cuál nos va ayudar mucho en la estructuración de la arquitectura de la información de nuestra web. Por ejemplo, yo ahora estoy trabajando en la nueva web de CreativaSfera, y de momento ya tengo el nuevo sitemap estructurado con Axure. Gracias a los diferentes colores, he podido destacar en rojo los apartados que todavía no existen.

wireframing con axure

Futuro sitemap de CreativaSfera

Este árbol me ayuda mucho a pensar en los puntos que me dejo o faltan, porque hay mil cosas que nos olvidamos cuando estamos creando un nuevo diseño web, como es la página de error 404, el apartado de protección de datos en envío de formularios (al loro con la LOPD si vives en España), la página de resultados, etc.. Y a partir de aquí, puedes crear la estructura de cada página del sitio web:

prototipo web

Por qué utilizar una herramienta de wireframing

Utilizar una herramienta de wireframing es como empezar la casa por los cimientos, mientras que ponerse directamente con el HTML y CSS es empezar la casa por el tejado. Debo ser sincera, y es que hasta ahora no me había puesto nunca en serio con el tema de las herramientas de wireframing, pero desde que he descubierto Axure veo que es algo casi imprescindible. Porque incluso a tus clientes les puedes mostrar la estructura antes de matarte con la maquetación en Photoshop, por lo que aunque a primera vista parezca una pérdida de tiempo, a la larga acaba siendo una herramienta que te va a ahorrar muchos dolores de cabeza, te lo digo.

A partir de aquí, con una herramienta de wireframing podemos hasta exportar el diseño a html, con botones que funcionen a la perfección, lo que si por ejemplo estamos haciendo un formulario y van a salir unos mensajes de error si no se completa correctamente, podremos ver cómo queda antes de incluso maquetarlo con Photoshop. El código HTML que genera no es apto para producción, sólo para desarrollo, pero nos va a ser muy útil para crear el prototipo de nuestra web.

Como comentaba, hay muchas herramientas de wireframing gratis y premium, por lo que vale la pena buscar la que más se adapte a nuestras necesidades, yo estoy trabajando con Axure y la verdad es que estoy muy contenta. Porque aunque durante mucho tiempo pensé que utilizar una herramienta de wireframing era una pérdida de tiempo, me he dado cuenta que para crear sitios web profesionales es una herramienta imprescindible.

Conclusión

Muchos son los que se llaman a si mismos diseñadores web, pensando que saber hacer cuatro cosas les convierte en un diseñador web. Por eso yo en su momento creé un artículo con 15 razones para convencer a nuestros clientes que necesitan un diseñador web profesional, pues si quieren que les haga la web el vecino del quinto adelante, pero que se atengan a las consecuencias. Más todavía, y me salgo un poco del tema, una web profesional ha de estar optimizada para SEO, porque sino es el ejemplo que le pongo siempre a mis clientes, pueden tener una web super bien diseñada pero que sólo sirva para alimentar su ego, porque si no está optimizada para buscadores web, entonces es como tener una tienda de Armani en un pueblo perdido junto al cementerio.. va a ir sólo tu madre a verla, con todo el cariño por tu madre. Por eso creo que si queremos ser verdaderos profesionales del sector, hemos de aprender a utilizar las herramientas que tenemos a nuestro abasto, como son las herramientas de wireframing.


Comentarios

  • denry

    Hola, muy bueno el artículo y el blog. Pero te cuento que no están cargando las imágenes y capturas del post. Parece que no quedaron bien subidas porque si entro en la opción “Abrir imagen en una pestaña nueva” del menú contextual me aparece una página de error 404.

    Por ejemplo si entro a: http://www.esandra.com/file/2013/01/prototipo-web.jpg

    Me aparece “uppss…
    palabrita que yo no he sido

    Esta página no existe”

    Saludos

  • leonardo

    Excelente post. Este error, se encuentra muy fácilmente, en la mayoría de los diseñadores jr. De todos modos, creo que, mientras cada uno tenga sus tecnicas y herramientas, para ser eficientes, esta bien. Es interesante lo que planteas, estoy mirando el sitio de axure. Saludos