NUEVOS MEDIOS

WIREFRAMES

Con la AI definimos los contenidos y funcionalidades del producto que estamos desarrollando, así como su sistematización, organización, categorización. Se trata de una estructuración lógica.

Después de esa etapa, con los wireframes definimos de que manera ubicamos estos elementos en el espacio de cada interface y que forma adoptarán, sin entrar a detallar estilos gráficos (colores, texturas, sombras...). Se trata de una estructuración visual (Layout).

Distinguimos diferentes técnicas dentro de esta etapa, cada una de las cuales permite una definición más precisa de los elementos con respecto a la anterior.

Los objetivos son:

• Comunicar ideas en cuanto a estructura, contenidos, funcionalidades, diseño visual interacción, a potenciales usuarios y otros implicados (stakeholders) del proyecto (desarrolladores, marketing, directores de proyecto).
• Irse acercando progresivamente, y de manera segura, a los diseños finales.

Inicialmente podemos trabajar únicamente con papel, lápiz y borrador realizando de manera rápida unos esbozos a mano alzada de escasa precisión, que podemos ir modificando con aportaciones nuestras, de potenciales usuarios u otros implicados en el proceso de desarrollo.

Esta técnica recibe diversos nombres:

• Low Fidelity Wireframes.
• LF Wireframes.
• Wireframes de baja resolución.
• Wireframes generales.
• Paper prototyping.
• Agile prototyping.
• Sketches.

Estos esbozos pueden realizarse sobre diversos soportes.

En todos los casos ofrece una serie de ventajas:

• Premite comunicar ideas de manera fácil y rápida.
• Encaja bien en metodologías de DCU, ya que es fácil realizar pruebas de usuario con ellos.
• Detección y solución temprana de errores.
• Son fáciles y baratos de hacer.
• Aporta retroalimentaciones centradas en conceptos de alto nivel (estructuración, composición) y no en la ejecución (apariencia).
• Propicia múltiples iteraciones.
• Son fáciles de llevar y mostrar.

Los wireframes detallados (o High Fidelity Wireframes) se realizan normalmente con herramientas digitales. Son representaciones de las futuras interfaces que presentan un mayor nivel de detalle que los wireframes detallados.

Por muy detallados que sean, deben carecer de los estilos gráficos que si incluirán los mockups o maquetas gráficas finales (formas y tamaños precisos, adornos como sombras o texturas, colores, tipografías finales...). 

Si deben incluir todas las interacciones posibles.

Aspectos que hay que tener en cuenta para diseñar buenos wireframes:

• Tener en cuenta que todo es más reducido en el mobile design.
• Apoyo visual con elementos iconográfico.
•  Composiciones verticales, muchas veces con una única columna de contenidos.
• Tener en cuenta principios de jerarquía visual y buscar "estar en forma" con las leyes de Gestalt.
• Basarse en el trabajo realizado previamente.
• Dar prioridad a interfaces principales (home) y a las que pueden ser empleados como plantillas par otras.
• Ayudarse de patrones de diseño.