El Salvador, Centro América
+503 70398489

Wireframes: Que son y como crearlos

20170425_090712

Wireframes: Que son y como crearlos

ubiraci November 9th, 2017

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.

Wireframes con paper browser

Zurb Responsive Scketches

Estos son los que más me gustan. Están pensados para diseñar páginas web responsive y en un mismo pack encontrarás diversas plantillas para que escojas la más adecuada para cada proyecto.

Wireframes con Zurb

Si quieres hacer wireframes en papel con aspecto profesional o eres un poco friki (si, yo también lo soy, un poco), puedes pasarte por Sticky Jots. Una empresa creada por dos estudiantes de diseño donde podrás encontrar unos kits de prototipado bastante curiosos. Al menos échales un vistazo que están divertidos.

Utilizar un programa o aplicación

Por desgracia algunas de las mejores aplicaciones son de pago. Aunque no muy caras y funcionan de maravilla. Podrás crear unos wireframes para tus páginas web muy profesionales y son muy sencillos de usar. Para que te hagas una idea, Balsamiq por ejemplo, tiene aplicación para iPad, con lo que solo necesitarás una pantalla táctil para crear prototipos de muy buena calidad.

Incluyen ademas infinidad de elementos predeterminados, con lo que crear un elemento será tan fácil como arrastrarlo hasta su posición, seleccionar el tamaño y editar los detalles si es necesario.

Mockflow

Mockflow es una aplicación para crear wireframes en la nube. Sólo necesitas un navegador y una cuenta para empezar a crear tus prototipos. Tiene una versión gratuita, que aunque con limitaciones, te permitirá empezar a sumergirte en el mundo del diseño de prototipos. Sus versiones de pago empiezan desde 14$ al mes, así que si vas a utilizarla con frecuencia, puede ser una buena opción.

Wireframes con Mockflow

Balsamiq Mockups

Balsamiq Mockups es otra gran aplicación para crear tus wireframes o prototipos. Me atrevería a decir que casi casi es la aplicación por excelencia. Dispone de versión de escritorio, para Windows y Mac con un coste único de 89$, una versión para tablets al mismo precio y una version web como Mockflow a partir de 12$ al mes.

Wireframes con Balsamiq Mockups

Las dos son muy buenas opciones. Si quieres mi consejo, yo probaría las dos. Mockflow te permite crear una cuenta gratuita y Balsamiq Mockups te da 30 dias de prueba gratis de sus productos.

¿Habrá que aprovechar no?

 

Notas Relacionados

Escribe un Comentario

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…

¿Te ha gustado el artículo?

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

Shares