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í:

Desktop

De 1025px a más 1440px

Tablet

De 1025px a 641px

Mobil

De 640px a O

Sistema de grillas

Computer

12 Columnas

Margin 62px

Gutter 24px

Tablet

8 Columnas

Margin 32px

Celular

4 Columnas

Margin 16px

Gutter 16px

Tamaños adecuados

Si es el tamaño del HEADER O TITULAR es 96px el line-height es 96*1,1 O 96*1.3

Si es el tamaño del body es 920px el line-height es 20*1,4 0 20*1.5

Alineación

Si el titular está centrado el body también, no mezclarlos.Si algo tiene más de tres líneas se alinea a la izquierda.

Longitud adecuada para párrafos de 50 a 70 caracteres