Categorías
Diseño

¿Cómo convertimos mapas de navegación en wireframes?

En los procesos de diseño de la arquitectura de información hay dos transiciones complejas e importantes. La primera corresponde al paso de los contenidos sueltos a la creación de un mapa de navegación. La segunda es el salto desde ese mapa a una propuesta de wireframes. Lo sé, parece haber un abismo desconocido en medio de estos […]

La entrada ¿Cómo convertimos mapas de navegación en wireframes? aparece primero en Agencia digital IDA Chile | Estrategia para el éxito de tu negocio.

En los procesos de diseño de la arquitectura de información hay dos transiciones complejas e importantes. La primera corresponde al paso de los contenidos sueltos a la creación de un mapa de navegación. La segunda es el salto desde ese mapa a una propuesta de wireframes.

Lo sé, parece haber un abismo desconocido en medio de estos dos entregables, así que en este artículo trataremos de construir un puente entre ellos.

Mapa de contenidos

Imagen 1: Ejemplo de mapa de navegación inicial

Metodología para crear wireframes

La metodología para traducir la información del mapa de navegación a los esquemas de página o wireframes está estructurada en 4 pasos:

Diferenciación

Tenemos nuestro mapa de navegación y conocemos sus contenidos. Ahora debemos notar que hay páginas que son más importantes que otras, ya sea por su contenido o porque tienen necesidades especiales, como que requiere un formulario. Estas páginas generalmente las nombramos plantillas. Por ejemplo, una página simple de texto será una plantilla que se usará en varias ocasiones en el sitio.

Entonces, en esta etapa diferenciamos los tipos de página que componen nuestro mapa. Al final de este paso deberíamos tener una lista con las plantillas para hacer en wireframes, ojalá con anotaciones sobre  las cualidades que las distinguen entre sí.

Identificación de páginas principales en un mapa de contenidos

Imagen 2: Identificación de plantillas claves del mapa

Verificación

Lo siguiente es hilar más fino. Ahora debemos distinguir qué otras páginas usarán las plantillas que identificamos en el paso anterior. En este paso recomendamos imprimir los mapas, discutir, rayar y acordar con el equipo. La importancia de este paso es que nos permite asegurarnos de que estamos diseñando lo justo y necesario. Si no especificamos esto, podemos terminar usando mucha energía en diseñar wireframes muy parecidos e innecesarios.

Antes de terminar, hay que verificar que todas las páginas del mapa tengan una plantilla asignada. Si no lo hacemos, algunas páginas no serán diseñadas y probablemente tenga que ser resuelto a última hora por el desarrollador. Debemos evitar que cosas de diseño de interacción se decidan por los programadores al final del proyecto. ¡Para eso estamos nosotros!

Asignación de plantillas a todas las páginas del mapa

Imagen 3: Asignación de plantillas a todas las páginas del mapa

Diagramación

Para comenzar a diagramar los primeros wireframes, se recomienda siempre partir trabajando en grupo en papel o pizarra. Así se podrá discutir sobre los puntos claves de las plantillas, en base a las anotaciones previas sobre sus necesidades específicas.

Estos wireframes de baja intensidad nos ayudarán a enfrentar la intimidante página en blanco inicial con confianza y certeza de que no se está dejando nada importante afuera. Cabe destacar que en esta etapa debemos concentrarnos en definir jerarquías del contenido a nivel micro, detallando funcionalidades, títulos, ubicación de fotografías, texto e iconografía relevante para el proyecto.

Wireframe de baja intensidad en pizarra

Imagen 4: Wireframe de baja intensidad en pizarra

Digitalización

Luego de decidir en grupo los grandes rasgos de nuestras plantillas, podemos comenzar a digitalizar. En este paso se diseñan todas las minucias de nuestra propuesta, con la precisión del pixel en la pantalla. Existe mucha información acerca de cómo crear wireframes, debes escoger las herramientas análogas y digitales que te servirán para estos últimos 2 pasos.

Wireframe digital

Imagen 5: Wireframe digital

Al abordar de forma metodológica y en equipo los saltos de un estado del proyecto a otro, podemos apoyarnos e ir perfeccionando nuestro trabajo en conjunto, para enriquecer la entrega final de los wireframes. Para esto es fundamental mantener siempre el foco en que estamos diseñando la interacción entre persona y sistema, por lo tanto estamos diseñando para la experiencia.

La entrada ¿Cómo convertimos mapas de navegación en wireframes? aparece primero en Agencia digital IDA Chile | Estrategia para el éxito de tu negocio.