Wireframes: qué son y para qué sirven

En este mundillo nuestro usamos muchos anglicismos que a veces se autodescriben pero a veces no aportan información sobre lo que son.

Wireframes, mockup, prototipo, esquema o plano de página… tienen muchos nombres aunque son poco conocidos por el público en general y por los entornos de desarrollo web poco profesionales. 

Los wireframes (nosotros siempre usamos éste término, costumbres…) son la primera aproximación a lo que será la web, imprescindible en la fase de conceptualización del proyecto, sobretodo si es un poco complejo. Es un esquema en el que no se aplica (y esto es muy importante tenerlo claro) la propuesta gráfica, ya que ésta se hace en función de las necesidades reflejadas en el prototipo.

Los wireframes son, sobretodo, un esquema de la interacción en el que se detallan los elementos que el usuario va necesitar para realizar las acciones que planteamos para nuestro sistema: el espacio de acceso al área privada, el botón para añadir un producto a la lista de favoritos, el formulario de finalización de compra, el espacio dónde se va a reproducir un video…

De ésta manera nos aseguramos de que no se nos pase por alto ningún elemento necesario para que, en la fase de diseño, todos guarden coherencia gráfica entre ellos (que no haya pegotes ni elementos metidos con calzador en el diseño final). La idea es que los wireframes sean exhaustivos y que recojan los itinerarios de interacción: el usuario hace click aquí y se abre un desplegable, cuando escoge una opción ocurre esto o aquello… y así sucesivamente.

La idea es plantear ya la arquitectura de la información del site: qué información va contener, de qué tipo va a ser (texto, foto, video, descargas…) y dónde la vamos a encontrar, y las rutas que estableceremos entre las diversas páginas (al hacer click aquí se abre tal o cual página), planificándola de modo que el usuario la encuentre con la máxima facilidad es decir, nos permiten definir al detalle la experiencia de usuario.

En el caso de proyectos web complejos son una herramienta fundamental, para no encontrarnos (ni desarrolladores ni cliente) con que a mitad del desarrollo y con el diseño cerrado hace tiempo, tenemos que añadir elementos, lo que puede resultar costoso una vez el proceso ya está en marcha.

Para el cliente, a veces significan un esfuerzo de abstracción ya que a menudo los wireframes son esquemas poco vestidos y centrados en organizar información, más que en quedar bonitos. Aunque nosotros somos de los que preferimos darle un poco de vidilla y, aunque sea en banco y negro, agregar imágenes dónde se supone que habrá imágenes y aunque sea, lorem ipsums donde habrá texto justamente para ayudar a nuestros clientes a hacerse una idea de cómo estamos planteando su web, pueden ser incluso bocetos sobre papel.

Los wireframes son una herramienta de diseño funcional y, sobre la información que éstos aportan, trabajará el equipo de diseño web.

La pregunta al final es ¿por qué se hacen maquetas y prototipos? Seguro que nuestros amigos especialistas en el tema Fuhtah :), responderían con más claridad a la pregunta, pero en el caso de una web, antes del toque mágico del diseño, es fundamental definir como se va a estructurar la información para que el usuario la encuentre y la comprenda, el flujo de navegación, es decir, plantear una estructura que ayude a comprender al usuario la relación existente entre los enlaces es un punto importantísimo ya que una web puede tener diversos itinerarios de navegación y, finalmente, definen la interfaz del sitio: qué elementos (menús, botones, campos para email, teléfono, desplegables, selección múltiple…) van a estar presentes y como se organizaran, priorizando la usabilidad y la eficacia de éstos.   

Así son los wireframes y así se los hemos contado. Si tienen algo que añadir, ¡cometen por favor!