Arquitectura de información

Repositorio de recursos para la creación de wireframes

Diseño 2 min. de lectura

La coherencia de los elementos entre los wireframes es tan importante como la coherencia requerida en las etapas de diseño, front y desarrollo. En IDA construimos un repositorio para la creación de estos elementos y te contamos de qué se trata.

Dentro de la arquitectura de información y la creación de prototipos digitales (aplicaciones, sitios web, landings, etc) siempre es útil contar con un repositorio o banco de elementos que puedan ser reutilizados para no comenzar desde cero cada vez que tenemos un nuevo proyecto.

La utilidad de “normar” u “ordenar” estos elementos no implica que la estructura o la creación de los wireframes sea rígida y no podamos adaptarlos, sino que apunta a tener una base estándar desde la cual comenzar, que nos permita ordenar las distintas versiones y visualizaciones de un mismo proyecto.

Por ejemplo, al crear una plantilla de un sitio para escritorio, se requiere además la realización de su vista móvil y/o tablet. En ese traspaso muchas veces las jerarquías de títulos se pierden o los elementos varían a tal punto que pueden confundir a quien utiliza los wireframes como guía (generalmente el diseñador de interfaz o al desarrollador).

Elementos de un wireframe que se deben considerar

wireframes

Fuente: Chris Bannister (https://dribbble.com/)

En IDA realizamos nuestro propio repositorio y trabajamos continuamente para mantenerlo actualizado. En él puedes encontrar los siguientes elementos:

Encabezados

Corresponde a recomendaciones de tamaños tipográficos y sus variaciones al transformarse el tamaño de la pantalla. Cada proyecto puede variar estas características pero el comportamiento y las jerarquías de los títulos y elementos de texto debe ser consecuente transversalmente en el sitio o software.

Formularios

Esta sección presenta tipos de inputs mediante los cuales el usuario puede ingresar información al sistema. En general estos se encuentran dentro de formularios complejos, con varios campos de diferente índole.

Comentarios

Las cajas de comentarios permiten a los usuarios interactuar con los sistemas, dejando una ventana abierta para ingresar información y expresar sus opiniones. Se suelen usar en páginas dinámicas como noticias, eventos, posts y artículos, entre otros.

Pasos o explicaciones

Corresponden a divisiones en procesos o formularios complejos, que ayudan a separar en etapas el flujo completo de una actividad. En ocasiones sólo basta con una indicación visual de cuántos pasos hay y en cuál estoy, mientas que a veces será necesario crear un módulo o caja con los pasos.

Menús

Los menús de navegación suelen ubicarse en el header o encabezado de página. Pueden tener diferentes jerarquías de contenido.

Navegación

  • Botones y complementos de navegación: Además de los elementos de navegación transversales, también se usan botones y breadcrumbs que dan libertad de desplazamiento por el sitio y dentro de la página.
  • Navegación contextual: Módulos con navegación contextualizados, usualmente ubicados en los sidebar laterales de páginas interiores.
  • Navegación de contenido: Elementos que permiten agrupar grandes cantidades de información y navegarla dentro de una página.

Listas

Listas numeradas y no numeradas utilizadas para indicar ordenar contenido.

Imágenes y videos

Contenido multimedia utilizado en distintos contextos, por ejemplo, como contenido principal, en galerías, en módulos donde acompañan a título o texto, etc.

Tablas

Agrupación de contenido dispuesto de manera simple y compleja, variando en cantidad de columnas, filas y contenido anidado.

Personas

Estos módulos presentan a personas en diferentes contextos para diferenciarlos de un listado común. Cada proyecto puede requerir información variada de las personas, como nombre, cargo, enlace a un currículum o sitio, teléfono, mail, etc.

Este archivo no sólo nos sirve para utilizarlo en el computador, sino que también nos ayuda en el ejercicio de prototipar fuera de este.

Un ejemplo concreto de lo anterior fue el IDA Workshop AI que realizamos hace algunos días, donde los participantes debían crear dos wireframes para un sitio. Optamos por este método porque no todos tendrían las herramientas bases para utilizar el repositorio (notebook + sketch) y de este modo la creación de los prototipos sería mucho más fluida, evitando que comiencen a “diseñar” o a darse vueltas en cómo deben ser los módulos, cuando el enfoque principal es diagramar la información en el lienzo.

Acerca del Autor

Investigamos las tendencias en proyectos y estrategias digitales para complementarlas con nuestra experiencia en artículos informativos. Nuestro objetivo es aportar al desarrollo del área, discutiendo la efectividad de las tecnologías y técnicas aplicadas.

Agregar un comentario

Eduardo

hace 7 años

Gracias por el artículo, muy útil.

Responder