¿Qué es un wireframe?

En la creación de wireframes, cuanto antes empieces, mejor. (dentro de lo posible, por supuesto). Los distintos proyectos exigen distintos flujos de trabajo pero, como regla general, debes dibujar tu primer wireframe en la fase inicial o en la fase de planificación del ciclo de vida del proyecto.

Si empiezas a crear wireframes en la fase de inicio, deberías empezar con wireframes de baja fidelidad. La fase de inicio es un momento para la experimentación: tuviste una idea para un sitio web o una aplicación, pero no sabes exactamente cómo será. Los wireframes de baja fidelidad son fáciles y rápidos de crear, por lo que son la herramienta perfecta para la lluvia de ideas. Anota tus ideas, envíaselas a otros interesados para que opinen y luego regresa al tablero de dibujo.

A medida que tu proyecto avanza hacia la fase de planificación, deberás empezar a generar wireframes de media y alta fidelidad. La fase de planificación es en la que se concretan los diseños, y necesitarás wireframes robustos antes de poder continuar a la siguiente fase: la ejecución.

Tus wireframes deben tener cada vez más complejidad y pulirse a medida que el proyecto avanza en esas dos primeras fases. Para cuando entregues los diseños al equipo de desarrollo para la programación (la fase de ejecución), deberás haber terminado el proceso de generación de wireframes.

Elementos de un wireframe

Los wireframes lucen simples en la superficie: desde el punto de vista estético, no aportan mucho. En parte, por ese motivo son tan efectivos. En el desarrollo web y de aplicaciones, es tentador adentrarse rápido en el mundo de las fuentes y los colores, antes de haber planificado adecuadamente la experiencia del usuario. En la generación de wireframes, dejas estas distracciones de lado y, en su lugar, te concentras en tres aspectos fundamentales de tu producto: diseño de la información, diseño de la navegación y diseño de la interfaz.

Diseño de la información

A medida que los usuarios interactúan con tu aplicación o con tu sitio web, constantemente reciben información: ¿Qué tipo de sitio web están visitando? ¿Cómo pueden interactuar con él? ¿Cuál es el "objetivo" del sitio? Este proceso es automático y, en gran medida, subliminal. Como diseñador, tú facilitas esta interacción: tú eliges cómo presentar la información en una página.

¿Cómo luce esto en práctica?

Por ejemplo, si tu sitio web ofrece un servicio de mensajes, la mayoría de los que visiten el sitio corresponderán a una de dos categorías: usuarios recurrentes o usuarios nuevos. Los usuarios recurrentes probablemente querrán iniciar sesión, y los que lo visitan por primera vez querrán crear una cuenta o simplemente informarse sobre tu servicio. En tu página de inicio, debes tener presente a cada tipo de visita y brindarles suficiente información para que logren sus respectivos objetivos. Tal vez esta información se comunique mediante botones: iniciar sesión, registrarse y más información. El diseño de la información es decidir qué incluir y dónde colocarlos.

Diseño de la navegación

Todos hemos pasado demasiado tiempo buscando el menú de "Configuración" en una u otra aplicación. Y todos hemos sentido la sensación de que un sitio web nos está llevando en círculos: ese momento en que sientes que la página de "Información de la cuenta" está a un clic de distancia, solo para terminar de regreso en la página de inicio o, peor, en la página de error 404. La cuestión es que, como usuarios, experimentamos un mal diseño de navegación todo el tiempo.

Tal como el nombre sugiere, el diseño de la navegación determina las maneras en las que los usuarios se mueven en tu aplicación o en tu sitio web. Desde cualquier pantalla, un usuario puede navegar hacia una cantidad de otras pantallas. No obstante, no lo sabrán a menos que se los digas: los menús desplegables, los enlaces en los que se puede hacer clic y las barras de desplazamiento son ejemplos de elementos visuales que permiten que el usuario navegue por tu producto.

Diseño de la interfaz

El diseño de la interfaz reúne todo: la información, la navegación y, en definitiva, todo lo demás que contenga tu wireframe. Tanto el diseño de la navegación como el diseño de la información tienen componentes en la pantalla (botones, menús, etcétera). El diseño de la interfaz se refiere a cómo esos elementos se incorporan en la interfaz del usuario como un todo, la que incluye otros elementos, como recuadros de texto, imágenes del encabezado y barras laterales.

Cómo hacer un wireframe

Una vez comprendida la teoría sobre wireframes que te ofrecemos en esta guía, es momento de llevar el conocimiento a la práctica. Estos son algunos pasos para empezar a crear wireframes:

1. Crea un plan

Independientemente de si estás creando un wireframe para una aplicación o un sitio web, hay algo de lo que puedes estar seguro: deberás crear más de un wireframe. Los wireframes se tratan acerca del flujo de los usuarios. ¿Cómo se mueve el usuario en tu aplicación? ¿Hay algún lugar al que quieres que lleguen?

Antes de empezar con tus diagramas, mapea las posibles rutas que puede tomar un usuario y enumera cada nueva pantalla que pueden encontrar. Para cada pantalla adicional, necesitarás otro wireframe.

Este trabajo preliminar puede parecer exagerado, pero vale la pena. Empezar el trabajo de creación de wireframes sin una idea clara del flujo del usuario da lugar a diagramas confusos y desordenados.

2. Empieza a añadir las figuras básicas

Después de una sesión detallada de diseño, o dos, deberías poder empezar a bocetar. Empieza por seleccionar una "estructura" para tu diagrama. Si estás creando un wireframe para una aplicación, selecciona una figura similar a la pantalla de una aplicación para dispositivos móviles. Para el wireframe de un sitio web, elige una figura que se asemeje a la ventana de un navegador. La mayoría de los programas para hacer wireframes tienen ambas estructuras básicas disponibles en su biblioteca de figuras.

A continuación, añade los elementos más grandes del wireframe. Estos deben ser las figuras básicas y los contenedores, lo que representan elementos tales como una barra del encabezado, una columna lateral, una casilla de texto, etcétera. No hay necesidad de incluir textos o imágenes en este momento; solo establece el diseño general.

Repite este proceso para cada wireframe que debas crear.

3. Añade botones y vincula los wireframes

Una vez que hayas elegido el diseño de tus wireframes, es momento de agregar alguna funcionalidad. En cualquier pantalla de tu producto, es probable que haya varios botones que dirigirán al usuario a una pantalla nueva. Tal vez los hayas añadido como figuras en el último paso pero, si no lo has hecho, selecciona una figura básica para que represente a cada botón y añádela ahora. También puedes añadir el texto que aparecerá en el botón ("página de inicio", por ejemplo).

Si tu programas para hacer wireframes incluye capacidades de vinculación, vincula cada botón con el wireframe al que debería dirigir al usuario.

Consejo: Selecciona una fuente para tu wireframe. Aplica negritas y cursiva si corresponde, pero deja todo el resto del estilo del texto para las simulaciones y los prototipos.

4. Reúne comentarios y edita

Has invertido horas en tus wireframes. El diseño se ve bien y los has vinculado para simular el flujo del usuario. Ahora es momento de compartirlos con otros. Es probable que algunos aspectos de tus wireframes puedan mejorarse, y por eso es importante que los presentes ante ojos frescos antes de que les añadas otros detalles.

Tal vez uno de los botones quedó un poco desubicado. O quizás la barra del menú es demasiado grande y domina la página. No importa cuáles sean los comentarios de tus colegas: escúchalos y ten en cuenta sus ideas; este es un proceso de colaboración.

Aplica los cambios sugeridos que mejoren tus wireframes. Limpia y repite hasta que tus diseños hayan sido aprobados por todos los que deban hacerlo.

5. Añade los detalles

En este momento, es probable que tus diagramas sean wireframes de media fidelidad. Con el diseño básico aprobado, puedes empezar a refinar los detalles. Añade imágenes y texto. Usa colores para diferenciar los distintos elementos en tu página, pero sin salir de la escala de grises. Asegúrate de que todo tenga el tamaño adecuado, hasta el nivel de píxeles.

6. Comparte tus wireframes

Ahora deberías tener un conjunto de wireframes funcionales y de alta fidelidad. Compártelos con los interesados en el proyecto y con los equipos que correspondan.