¿Qué es un wireframe? Ejemplos y cómo hacer el tuyo

Tener un “plan de pantalla” es relevante para el diseño de sitios web y aplicaciones. La importancia de este proceso, los tipos de prototipos y los programas más usados en el sector.

¿Qué son los wireframes?

Los wireframes son prototipos de páginas web o aplicaciones. También se los conoce como “plan de pantalla”.

Igual que otros elementos conceptuales, se trata de un esquema que anticipa características del producto final. Incluye la estructura básica, los tipos de contenido, su posición, etcétera.

Si bien el término “wireframe” habitualmente es empleado como sinónimo de prototipo, hay sutiles diferencias entre ellos.

El primero define la estructura de un sitio web o app, mientras que el segundo agrega interactividad.

Entre uno y otro aparecen los mockups, que definen las características visuales del proyecto.

¿Cuál es la importancia del wireframe?

El wireframe funciona como una guía en las instancias preliminares del diseño web. Sirve para comenzar a plasmar el trabajo, identificar posibles fallas y cambios deseables.

En ocasiones impulsa modificaciones que no se previeron en primer término.

Cabe notar, asimismo, que los wireframes no son exclusivos de las primeras etapas de trabajo. También se los utiliza al momento de idear cambios en páginas o aplicaciones ya existentes y en funcionamiento.

¿Por qué es importante trabajar con wireframes?

Porque hacer modificaciones en un esquema es mucho más sencillo que hacerlos en un proyecto finalizado.

En ese sentido, porque es un optimizador de recursos (de tiempo, de dinero, etcétera).

Porque involucra a más partes (por ejemplo, el cliente) en las diferentes etapas de diseño web.

Porque es una herramienta que favorece al equipo: puede compartirse con otros diseñadores y programadores, que aportarán a la iniciativa.

Porque es un canal de comunicación que se apoya en la potencia visual.

Porque eluden prácticas no recomendadas, como la puesta en marcha sin instancias de prueba.

Porque es una vía fundamental de validación.

Porque sirve para imaginar los resultados finales y los cambios posibles.

Porque es clave para iniciar el recorrido hacia una experiencia de usuario satisfactoria, de la que hablamos más en extenso en UX: El equipo ideal, roles y tareas.

La importancia de los wireframes se comprende, también, en el siguiente caso frecuente.

Una empresa de desarrollo web cierra un negocio. Luego del briefing, el proyecto se concreta en función de ciertos puntos que se conversaron en reuniones preliminares.

El sitio web es “entregado” al cliente y éste manifiesta su descontento. Implementar los cambios que solicita no será una tarea sencilla ni dinámica.

¿Qué faltó en ese vínculo? Iterar a través de wireframes.

¿Qué tipos de wireframes existen?

Los siguientes son los principales tipos de wireframes con los que se trabaja en diseño web y desarrollo de aplicaciones.

Wireframe de baja fidelidad: Es un modelo simple. Habitualmente, se realiza en forma manual (sí, con lápiz y papel), sin incluir muchos detalles.

Wireframe anotado: Suma elementos al de baja fidelidad. Por lo general incluye anotaciones y un mayor grado de especificidad.

Wireframe de alta fidelidad: Sin dejar de ser un diseño conceptual, se aproxima a la versión final del producto y suma interacción, por ejemplo, botones que admiten clics. Habitualmente se emplean softwares especializados, de los que hablaremos más adelante en este repaso.

Ejemplos de wireframes

Los siguientes ejemplos de wireframes ayudan a comprender las diferencias entre los tipos arriba mencionados.

Este esquema es de baja fidelidad: bien podría realizarse a mano. Incluye escasos detalles y, de ese modo, es un paso preliminar para prototipos más desarrollados.

El ejemplo de wireframe que puedes ver a continuación encuadra con los de carácter intermedio. Añade detalles, por caso la posición de los persos elementos en un sitio web, además de los ítems en un menú.

Un wireframe de alta fidelidad requiere el uso de un software para esta tarea. El ejemplo que aparece a continuación de este párrafo es un esquema del sitio de noticias CNN. Incluye elementos concretos y también la posibilidad de interactuar, por caso con clics en las persas secciones.

Antes de avanzar, ¿qué mejor modo de comprender de qué hablamos aquí que a través del ejemplo del wireframe del sitio web más visitado del mundo, el buscador de Google?

Para diseñar y crear un wireframe es preciso seguir algunas recomendaciones, incluso tratándose de un bosquejo sencillo.Hacer un brief: Es un documento breve que sirve como guía en un proyecto. Se emplea para plasmar los objetivos del cliente y escoger las estrategias adecuadas para alcanzarlos. En el caso de proyectos personales, también es importante crear esta diagramación.

Pensamiento UX: Al diseñar y desarrollar sitios web, no sólo es preciso complacer al cliente; también hay que pensar en el usuario. Los profesionales en UX se abocan a generar experiencias satisfactorias, en este caso en la navegación de un website. Esta variable es esencial para comenzar a elaborar wireframes que sean estéticos y que allanen el camino a la usabilidad.

Jerarquizar la información: Es una de las metas fundamentales del wireframe. Las secciones deben alinearse a los objetivos del sitio web. Por ejemplo, una vidriera de productos debe tener un espacio central en una plataforma de comercio electrónico.

Incentivar la retroalimentación: El feedback es clave en todas las instancias del desarrollo web, y la creación de wireframes no escapa a esta lógica. Este proceso involucra al cliente, a sus colaboradores y al equipo interno, en el que habitualmente también hay programadores web.

¿Qué se necesita para crear un wireframe?

Para crear un wireframe es posible empezar con lo más básico: lápiz y papel. Como hemos visto, esto servirá especialmente para los de baja fidelidad, que también pueden ser diseñados con softwares básicos de ilustración.

Para los wireframes de alta fidelidad será necesario echar mano a programas especializados y contar con conocimientos en diseño web.

En cualquier caso, son siempre apreciables las siguientes habilidades para crear wireframes:

Capacidad de escucha, a clientes, colegas y compañeros de equipo.

Apertura hacia el trabajo colaborativo.

Predisposición a los cambios.

Valoración de la escalabilidad del proyecto, que inicia como un prototipo que, paso a paso, añade detalles.

Creatividad, siempre relevante para este tipo de trabajos.

Conocimiento de los softwares especializados.

¿Qué es un software o programa para hacer wireframes?

Luego de la instancia del lápiz y el papel, los diseñadores habitualmente echan mano a programas para crear wireframes.

Hay una amplia variedad en este terreno. Es posible usar softwares generales (que tienen muchas opciones para diseño y edición) y otros programas específicos para hacer wireframes.

Tal como señalan en el sitio Marketing4Ecommerce, la elección de la herramienta para crear wireframes dependerá de los recursos, necesidades y nivel de destreza.

A continuación, repasamos las características de los programas más conocidos para crear estos prototipos en diseño web.

Mejores herramientas y programas para hacer wireframes

Tal como notamos anteriormente, existen numerosas herramientas para hacer wireframes a las que es posible echar mano.

Veamos algunas de las opciones más destacadas.

Adobe XD: Desarrollada por la compañía detrás de softwares reconocidos en diseño como Photoshop e lllustrator, este programa hace foco en los wireframes. Permite crear prototipos interactivos con pocos clics, centrándose en la experiencia del usuario. Tiene una versión de prueba y luego hay que pagar para usarlo.

Wireframe.cc: Se destaca por la facilidad de uso y por su carácter minimalista. Es tan simple como arrastrar, mover, achicar o agrandar secciones. También requiere una suscripción.

NinjaMock: Los resultados parecen dibujados a mano y por eso es una herramienta útil para wireframes de baja fidelidad.

¿A favor? El uso es sencillo. ¿En contra? No incluye opciones avanzadas, por ejemplo de interacción con los elementos del boceto. También hay que pagar para usarlo.   

Axure: Se trata de una de las opciones más elegidas para crear wireframes. Su uso requiere el pago de una suscripción.

Hotgloo: Permite crear wireframes 100% interactivos y de alta fidelidad. Puede probarse gratis, y hay que suscribirse para usarlo en forma definitiva.

Balsamiq: Es una herramienta especializada en wireframes. Su ventaja es la disponibilidad de una mesa de ayuda y una comunidad de usuarios. Ofrece una prueba gratis y luego hay que pagar.

InVision: Es una opción gratuita para hacer wireframes. Permite hacer anotaciones en los prototipos que son visibles para los integrantes del equipo de diseño, e incluye opciones para incluir elementos interactivos.

En el listado de programas para hacer wireframes también aparecen otras opciones especializadas como Whismical,

Miro, Cacoo y Moqups, y alternativas más generalistas como Canva e incluso Photoshop y Powerpoint.

¿Cómo elegir herramientas de wireframes?

La elección de la herramienta para crear wireframes varía en función de los siguientes aspectos.El presupuesto disponible: Hemos visto que hay opciones gratuitas y otras de pago.

Las necesidades del proyecto: En algunos casos, será necesario usar softwares avanzados que incluyen más opciones, por ejemplo elementos interactivos.

La instancia del diseño: Hemos hablado anteriormente acerca de los tipos de wireframes. En tanto, elegir un programa para este propósito también dependerá de qué variante de boceto se necesite.

Para elegir el programa adecuado para tu wireframe debes responder las siguientes preguntas:

¿Qué tan real debe ser el prototipo? La respuesta determina qué tan avanzado debería ser el software.

¿Necesitarás compartirlo? Algunas herramientas cuentan con opciones para exportar en persos formatos, y otras son más limitadas en este aspecto.

¿Qué plataformas usan los integrantes del proyecto? Algunas empresas prefieren soluciones en la nube.

¿Buscas una opción con plantillas? Algunas alternativas para crear wireframes incluyen esquemas que facilitan el trabajo y permiten ahorrar recursos.

¿Por qué aprender a hacer wireframes?

A lo largo de este artículo hemos verificado que la creación de wireframes es una instancia clave en el diseño y desarrollo de sitios web y aplicaciones.

Especialistas del área coinciden, no sólo en su relevancia: aseguran que se trata de un paso indispensable para los profesionales del sector. A fin de cuentas, los beneficios que estos prototipos ofrecen son sustanciales.Permiten ampliar las ideas, anticipar un proyecto de diseño con un panorama general y evitar errores en el proceso.