Sketching & Wireframes

¿Qué es?

El Sketching es el primer boceto que se realiza sobre el proyecto digital que queremos realizar. Son unos trazos sencillos sobre una hoja de papel, o un tablero, que reflejan las ideas generales sobre el proyecto. 

El Sketch no tiene un trabajo conceptual muy extenso. Aquí prima la creatividad, la experiencia y el deseo del diseñador.

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

El objetivo es definir el contenido y la posición de los diversos bloques de la web. Además, te permite visualizar 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.

En definitiva, los wireframes son una representación básica (en escala de grises) del proyecto, donde se definen con mayor precisión:

  • Zonas de contenido
  • Uso de elementos HTML (marcado semántico)
  • Servicios de navegación y ayuda
  • Flujos de navegación (cómo se conectan las unidades de información)

Son el primer paso en firme en el diseño del proyecto digital

Hay dos tipos de wireframes:

De baja fidelidad

Es un boceto rápido, con pocos detalles. La abstracción es alta, pero sirve para empezar a colaborar en equipo e intuir las necesidades del proyecto. 

De alta fidelidad

Se acerca al diseño final de una página web. Incorpora textos e imágenes reales, prácticamente es el diseño final. Es el paso previo a empezar a trabajar la UI y es imprescindible que el cliente los apruebe antes de continuar con el proyecto.

¿Para qué se usa?

Cuando estamos diseñando debemos considerar varias opciones, para quedarnos finalmente con la mejor. El Sketching nos permite generar tantas ideas como queramos. A partir de ahí y ya que todas no se pueden desarrollar, escogemos algunas de ellas, las que veamos que son más eficientes para cumplir con su tarea. Sobre ellas, se trabaja cierto detalle que nos permite quedarnos con la opción óptima y descartar las demás.

Los wireframes son rápidos y baratos de crear. Esto te permite realizar múltiples versiones hasta encontrar la adecuada sin que ello suponga un problema de tiempo o dinero.

Al ser sencillos y rápidos de realizar puedes exponerlos rápidamente a feedback y resolver problemas básicos relacionados con la usabilidad y funcionalidades propuestas. 

En poco tiempo podrás mostrar los primeros wireframes para repasar las mejoras que se puedan realizar en el diseño, el posicionamiento de los elementos o la estructura de los contenidos.

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.

Los wireframes nos 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.

¿Cuándo se usa?

El Sketching es un aspecto crucial del diseño para la experiencia del usuario, aunque a menudo es pasado por alto. Es muy útil cuando estamos planteando el proyecto y una vez realizada la fase de research, plasmar las ideas en un papel o en una pizarra y comprobar que realmente lo que estás diseñando puede funcionar.

Los wireframes hay que hacerlos siempre cuando estamos diseñando un producto digital.  Con estas sencillas líneas, ya podrás hacer de todo: desde visualizar su estilo de diseño hasta comentar los contenidos necesarios con el cliente y equipo.

Los wireframes funcionan como un seguro de nuestro trabajo, tenerlos validados por el cliente te garantiza que no va a haber cambios importantes de última hora cuando ya tienes terminada la UI.