Subir
 

Desarrollo web: ¿cómo crear wireframes?

Antes de contestar la pregunta del titular vayamos a lo básico: ¿qué son los wireframes? Son guías visuales que representan la estructura de un sitio web. Sirven para graficar elementos de navegación (menús, slides, secciones), recursos de interacción (‘call to action’) o referencias proporcionales (banners publicitarios, productos destacados).

Todas ellas son estructuras simples que están enfocadas a visualizar la distribución de contenidos dentro de la pantalla. A los desarrolladores web les sirven como boceto para definir los contenidos y las posiciones de los diversos bloques de una web.

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

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 podrían suponer muchas horas de trabajo subsanar.

  1. A mano

La forma más sencilla y económica de crear wireframes. Solo se necesita papel y lápiz. Y un poco de imaginación. Podemos recurrir a distintos tamaños de papel para representar los distintos dispositivos en los que se verá la web.

Podremos hacer un boceto simple de dónde estará el menú, banners, vídeos, llamadas a la acción…

  1. Plantillas imprimibles

Otra opción sencilla y sin costo es imprimir plantillas predeterminadas. Existen varias de ellas en la Red. Como por ejemplo Web sketching template, Paper Browser, Zurb Responsive Scketches.

  1. Aplicaciones o programas

Los hay de los más variados. La mayoría, de pago, aunque no muy caras. Con ellas podremos crear wireframes sencillos pero muy profesionales. Repasamos dos:

  • Mockflow. Es una app para diseñar en la nube. Tiene una versión gratuita, con limitaciones. Sus versiones de pago empiezan desde 14 U$S al mes.
  • Balsamiq Mockups. Otra gran app, que cuenta con versión de escritorio, para Windows y Mac. También de pago.

 

Ventajas de los Wireframes

Los wireframes nos permiten realizar bocetos esquemáticos rápidos y sin coste. Podemos realizar versiones diferentes para mostrárselos rápidamente a los clientes. Nos permiten, también, detectar y corregir problemas previos.

Con ellos podremos tener una perspectiva de usabilidad, cuestión vital en el diseño de una página web.

Últimos comentarios

Lo sentimos, los comentarios estan cerrados en este momento.