¿Wireframe? ¿Mockup? WTF
Acabemos con esto. Un wireframe no es un mockup, y tampoco sirven para lo mismo.
El mockup es un término heredado por nuestros amigos diseñadores anglosajones cuyo significado es «réplica«, «maqueta» o «modelo a escala«. Es decir, un mockup se realiza en una fase de diseño final, donde el cliente ha validad ya nuestro diseño, la UI del producto o cualquier elemento de definición. Estos mockups generalmente se usan para fines comerciales, como por ejemplo los sitios web de producto, kit de prensa, banners, o cualquier elemento de marketing donde podamos representar nuestro producto.
El wireframe
Sin embargo, el wireframe (otro término heredado del inglés) significa «esquema de página«. Y eso es realmente de lo que se trata un wireframe: un elemento gráfico y esquemático que nos ayuda a dar forma a la disposición, composición e interacción de los productos digitales en una fase embrionaria de creación, donde estamos definiendo las partes de las que se va a componer, pero sobretodo, el cómo va a ser utilizada por el usuario.
Cuando estamos realizando el wireframe no tenemos que centrarnos en la calidad del dibujo que estamos realizando, sino en dar forma gráfica en lo que tenemos en nuestra cabeza para dar solución al problema que tenemos delante. Generalmente una interfaz de usuario.
Este proceso debe consistir en crear la mayor cantidad de posibles soluciones, en un proceso ágil, con el fin de descartar las opciones que no sean óptimas hasta que encontremos la solución al problema que estamos resolviendo. Este proceso se llama «ideación gráfica«. O design thinking, como lo llaman algunos ahora.
Usos del wireframe
El wireframe, además de ayudarnos a plasmar en un papel qué soluciones podemos aplicar nos sirve para comunicar a nuestro equipo, a nuestros compañeros de diseño a nuestros clientes, las posibles soluciones a un mismo problema, de forma que entre varias personas y distintas miradas, se puedan trabajar sobre estos wireframes, modificándolos y enriqueciéndolos, pero teniendo siempre en mente que el resultado en esta fase no debe ser bello: estamos trabajando la funcionalidad de nuestro producto, no la estética.
Requisitos de un wireframe
Un wireframe es una herramienta de prueba y error, de trabajo rápido, de desechar unas ideas y de validar otras. Por tanto un wireframe debe ser rápido de crear y un proceso muy ágil.
Por eso, la mejor herramienta para crear wireframes es con papel y lápiz, ya que nos permiten crear nuestros esquemas a la velocidad de la luz, para intentar representar el mayor número de posibles ideas en el menor tiempo posible. Una vez hayamos elegido un camino para el desarrollo de nuestro diseño será el momento de pasar a herramientas más complejas y potentes como Sketch.