¿Cómo debes leer wireframes?

El diseño de wireframes es una parte fundamental en las etapas iniciales de un proyecto, ya sea en la construcción de un sitio o una aplicación.

La diagramación de objetos permite jerarquizar la estructura visual, definiendo el orden de los contenidos, los sistemas de navegación y los puntos que determinarán las interacciones.

Por tratarse solo del esqueleto, los wireframes no muestran estilos tipográficos, colores o imágenes. En nuestra experiencia, este es el punto de confusión más crítico, ya que muchos de nuestros clientes intentan dilucidar cómo se verá el sitio web. El principal objetivo de este entregable es exponer la funcionalidad, comportamiento y jerarquía de los contenidos, no el diseño ni los contenidos finales de la página.

Sean dibujados con lápiz y papel, en una pizarra, o presentados mediante un software, su aporte es esencial, por lo que es importante sacarles el mayor provecho interpretando y corrigiendo sus alcances de forma adecuada.

¿Cuál es su utilidad? ¿Qué debo buscar en ellos?

La principal utilidad de la creación de wireframes es alcanzar un entendimiento común sobre lo que se hará y lo que se omitirá. Como en un proyecto digital intervienen profesionales de diversas disciplinas, cada uno entenderá e interpretará la información que considere relevante respecto a su área e intereses.

La lectura de un wireframe según cada área será:

• Desarrollo: Buscarán una aproximación concreta de las funcionalidades de la plataforma para construir el software que soportará a un sitio o aplicación.
• Diseño: Aquí la preocupación rondará en el estilo visual, la interfaz del usuario, la correcta aplicación de los mapas de navegación y las partituras de interacción.
• Gestión de proyectos: La atención estará en estimar presupuestos y tiempos de trabajo para coordinar el calendario.
• Contenidos: Entenderán dónde irá cada elemento, qué relevancia tendrá y cuál es el formato sugerido.

Desde la otra vereda, los clientes explorarán las ideas y aprovecharán esta instancia para hacer modificaciones. Los wireframes se presentan en la etapa más temprana del diseño para conseguir un visto bueno ágil para el proyecto. Cambiar la ubicación de un video o un formulario en un esquema es mucho más sencillo y barato que en el html, cuando el código está avanzado.

Por esto, es fundamental obtener sugerencias proactivas del mandante. La tarea de conseguir estos acuerdos es compleja pero no imposible. Si los wireframes fueron aprobados se da por entendido que todos los miembros del equipo comparten la misma visión sobre el proyecto.

Evita errores explicando cada elemento, ubicación y decisiones aplicadas, así ahorrarás tiempo y dinero.

¿Qué significa cada elemento de un wireframe?

En un esquema de página encontrarás:

• Contenidos: Formatos y tipo de información pensados para el diseño final.
• Jerarquía de información y funciones: Representada a través de cabeceras, títulos, listas, imágenes, formularios, negritas y texto de mayor tamaño.
• Elementos de navegación: Enlaces representados de forma genérica aplicando escalas de grises y subrayado, junto a los menús propios de la cabecera, pie de página y barras laterales.
• Elementos visuales: Normalmente representados por una caja con una X y un texto descriptivo. Pueden ser imágenes, videos y marcas. En algunas situaciones también se usan logos en escala de grises, aunque no es recomendable para evitar confusiones.
• Texto: Puede ser representado con contenido real o simulado, como el estándar Lorem ipsum. Recomendamos usar ejemplos de texto “real”; esto es, títulos, extractos y resúmenes, sin caer en la obsesión de poblar un wireframe.
• Notas para apoyar la lectura del esquema: Estas aclaraciones indican el comportamiento de cierto elementos y las decisiones tomadas para dibujar el esquema.

Todos estos elementos, junto con los espacios en blanco, constituyen la plantilla de la página.

¿Cuál es la función de cada parte?

Al mirar un esquema de pantalla, lo primero que debes hacer es identificar qué plataforma y tipo de página representa. Estas son las más comunes:

• Fragmento de página: Normalmente es fácil identificarlos porque tienen una línea gris en zig-zag indicando que se trata de una parte de algo más.
• Ventana modal: También llamadas light boxes. En wireframes se verán exactamente como un pop-up, con una parte oscurecida en la página que está detrás de ella.
• Página normal: Las páginas tradicionales que despliega un navegador.
• Dispositivos móviles: Es fácil identificarlos por la forma y dimensiones de la pantalla graficada.

Conjuntos de elementos

Por otro lado, los esquemas pueden dividirse en conjuntos de elementos. Existen algunas convenciones sobre la distribución de estos, por ejemplo:

• El logo va en la esquina superior, ya sea en la izquierda o centrado.
• La navegación se ubica en la parte superior de la página y/o la columna izquierda.
• La columna derecha muestra widgets, enlaces relacionados al contenido en la página o publicidad.
• El pie de página o footer muestra información legal (copyright, condiciones y términos, preguntas frecuentes), ofertas de trabajo, datos de contacto (formulario) y un mapa de navegación con las secciones como enlaces.

El centro de la página mostrará contenidos, variando según el tipo de proyecto y lo que ofrece el sitio al usuario. Los más comunes son:

• Página de inicio/landing page: Concentrará la oferta de contenidos de un sitio o un llamado a la acción para un producto o servicio específico.
• Página de aterrizaje: Responde a las preguntas ¿Dónde estoy? ¿Qué puedo hacer aquí? ¿Para qué sirve esta página?.
• Vista menú: Muestra todas las opciones para las distintas cosas que se pueden hacer en el sitio o aplicación, considerando los menús desplegables de cada página.
• Artículo o post: Es la unidad básica de información en un sitio. Mostrará contenidos detallados sobre un tema específico con elementos complementarios de navegación.
• Formulario: Recolecta información sobre el usuario a través de un registro, transacción, etc.
• Portadillas: Cada página interior del sitio que agrupa elementos como artículos, productos, carros de compra, perfiles de usuario, entre otros.

Al representar la función de cada página, un wireframe también determinará en cierto nivel de cómo el usuario interactuará con la interfaz. Sin embargo, como es un dibujo plano y atemporal, es esencial complementarlo con partituras de interacción, que reflejarán de mejor forma las respuestas de la plataforma a una intervención de los usuarios.