Sketch y wireframes en el diseño web

El objetivo de usar estas herramientas antes de ponerse a diseñar podría compararse a tener un proyecto de vida facilita las cosas, se crean rumbos, un horizonte que se proyecte con facilidad y no un laberinto donde los usuarios se extravíen y desesperen.

Entonces entrando en materia:

 Sketch o wireframe de baja densidad:

Bocetos donde se define el número de columnas con las que se creará la web y la información que tendrá el header, el contenido y el footer. La distribucion visual de los elementos principales del sitio, en función de generar la mejor experiencia para el usuario, y también para la mas eficiente comunicación de lo que contiene dicho sitio,  favorecer estrategias de mercadeo y venta, prever comportamiento de uso y navegación para que la  web al ser usada rinda con la mayor efectividad.

 Wireframe

El wireframe es una representación estática en baja calidad de un diseño en la que se redifine el concepto de cómo la web funcionará usando cuadros a escala grises. Se maneja un mayor detalle, definiendo el tamaño, la colocación y el orden de los elementos. Se determinan todos elementos de la página de arriba a abajo, no sólo los conceptos básicos. Al terminar el wireframing el concepto de interfaz debe ser más claro y refinado.

– ¿qué? Los principales grupos de contenido
– ¿dónde? La estructura de la información
– ¿cómo? La descripción y visualización básica del usuario – interacción de la interfaz.

Lo ideal es trabajar con textos reales para tener en cuenta que tan largo serán los textos.

 El entregable es una imagen – Wireframe

Ejemplo de un wireframe creado para el hotel Aluna de Villa de Leyva.

Elementos de UX – Construcción de Wireframes

 Wireframes y responsive design

Para responsive design se hacen wireframes donde se determinan cómo se mostrará a info en tablet y celulares y a cuántas columnas se mostrará el contenido así: