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
