El Salvador, Centro América
+503 70398489

Wireframes: Que son y como crearlos

Que levante la mano el desarrollador web que no se ha pasado unas cuantas horas preparando un diseño para un cliente y este ha llegado, lo ha visto y ha dicho que no le gusta.

Tanto si creas una web para otro, como si la creas para ti mismo, es bueno hacer un mínimo de planificación para detectar posibles problemas y evitar trabajos innecesarios.

¿Qué es un Wireframe?

Un wireframe o prototipo no es más que un boceto donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de una página web.

El objetivo de estos es definir el contenido y la posición de los diversos bloques de tu web. Esto incluye menús de navegación, bloques de contenido, etc… Además, te permite como interactuarán estos elementos entre sí.

En los wireframes no se utilizan ni colores, ni tipografías ni cualquier elemento gráfico. Lo importante es centrarse en la funcionalidad del sitio y la experiencia del usuario. La prioridad son los contenidos de la web.

Al ser representaciones tan simples, te permiten crear múltiples versiones de un mismo proyecto de una forma rápida, así como aplicar cambios o nuevas ideas que aparezcan a posteriori. Lo importante es tener clara la estructura de la web o aplicación antes de empezar con el HTML y el CSS para comprobar que no haya fallos importantes de base que luego te podrían suponer muchas horas de trabajo subsanar.

Y como casi siempre, una imagen vale más que mil palabras:

Wireframing realizado por ordenador

Wireframe a máquina.

Ventajas de usar Wireframes

  • Rápidos y baratos de crear: Como son bocetos esquemáticos son rápidos de crear y tienen un coste muy bajo. Esto te permite realizar múltiples versiones hasta encontrar la adecuada sin que ello suponga un problema de tiempo o dinero.
  • Detectar y corregir los problemas antes: Al ser sencillos y rápidos de realizar te permiten exponerlos rápidamente a feedback y resolver problemas básicos relacionados con la usabilidad y funcionalidades propuestas.
  • Mejoras sencillas: En poco tiempo podrás mostrar los primeros Wireframes a amigos, clientes o repasarlos tu mismo para repasar las mejoras que se puedan realizar en el diseño, el posicionamiento de los elementos o la estructura de los contenidos.
  • Mejor usabilidad: Planear previamente la estructura y los elementos de la página web te permitirá ofrecer una mejor usabilidad al no improvisar sobre la marcha y haber definido previamente estos elementos.

Herramientas para crear Wireframes

Yo los hago de tres formas distintas. Dependiendo de la complejidad y el destinatario de los wireframes. Aunque tengo que reconocer que el papel y el lápiz me tiran mucho. Para mí los wireframes hechos a mano son una forma de pasar un rato entretenido y de desconectar un poco la vista de tanta pantalla, que también lo agradece.

Wireframes creados a mano

Es la forma más sencilla y económica de crear wireframes. Solo necesitas papel y lápiz y un poco de imaginación. No hace falta ser un Picasso, ni siquiera parecerlo de lejos. Cualquiera sabe dibujar cuatro líneas y dibujar un esquema sencillo como el que hemos visto un poco mas arriba.

Puedes utilizar diferentes tamaños de papel para representar los distintos dispositivos en los que se verá la web y crear así diferentes estructuras para planear un diseño responsive.

Wireframe realizado a mano en una hoja de papel.

Wireframe a mano.

Utilizar plantillas imprimibles para wireframes

La segunda opción, también barata y muy sencilla es imprimirse algunas plantillas predeterminadas para crear los wireframes.

Hay multitud de ellas en la web. Para que no tengas que buscar mucho, te dejo una pequeña selección para que escojas la que más te guste.

Web sketching template

Esta plantilla esta pensada para imprimir en A4 y para diseñar paginas web a una resolución de 1024×758.

Plantilla wireframing web

Paper Browser

Esta plantilla en pdf también esta pensada para diseñar páginas web de 1024x780px, pero cuenta ademas, con unas guías para diseños de 960px o 800px. Cuenta además con un grid de 32x32px para facilitarte la labor de crear los elementos y ajustar las proporciones.

Leave a comment

¿Te ha gustado el artículo?

Suscríbete al boletín y recibe cada semana los contenidos en tu email.

Shares