Wireframe I

Diferentes autores, investigadores y expertos han contribuido a desarrollar la Arquitectura de Información y han dado a conocer elementos relevantes en su aplicación, los cuales esencialmente se encuentran orientados a la correcta estructuración de contenidos.

Uno de los elementos importantes de esta disciplina son los wireframe (el paso final antes de llegar al diseño y programación del sitio) conocidos también como Mockup (maqueta) o prototype (prototipo), estos según Rosenfeld y Morville poseen como objetivo principal “mostrar el contenido de las páginas” , o como bien define Daniel Brown “es una aproximada ilustración que presenta, a mayor o menor medida, el contenido de cada pantalla”, de estas formas se entiende como un wireframe permite visualizar en su estructura la información, la recopilación obtenida a través de elementos previos como card sorting, mapas mentales, blue-print, etc.

Los wireframe a través del tiempo se les a otorgado diferentes niveles de complejidad, los autores siempre coinciden en dividir esta herramienta de diseño en 3 niveles, primero está el más simple, en el se observa un bosquejo de forma general que marca los espacio que ocupara cada elemento del sitio, luego se desarrolla un modelo mediano que permite visualizar rotulaciones, espacios, estructuras y bosquejos de presentación de cada página del sitio, y por último  se presenta un modelo avanzado que muestra en detalle los anteriores, incluyendo el diseño final que poseerá el sitio mostrando  colores, tipografías, textos e iconos a utilizar.

Es ideal presentar estos tres niveles al momento de diseñar un sitio web para ir visualizando de forma gradual en complejidad cada espacio a ocupar con la información pertinente, siempre pensada en el usuario que navegara por el sitio, pero si no se cuenta con la presencia de un diseñador  con conocimientos en arquitectura de información que pueda desarrollar el modelo avanzado, es preciso realizar solo los dos primeros niveles para no caer en errores que pueden afectar de forma trascendental al proyecto solo por querer abarcar competencias de las cuales se carecen.

Pensando en estos niveles de desarrollo y modelo es que se observa y detalla la postura de referentes en la Ai que han estructurado estas formas de presentación de contenidos:

Rosenfeld y Morville definen los niveles como diferentes fidelidades:

  • wireframe de baja fidelidad (Centra la atención en el plano global, local, contextual y elementos de navegación de la página)
  • wireframe de mediana fidelidad (Muestra algunos aspectos de contenido, diseño y navegación)
  • wireframe de alta fidelidad (aproximación de la página real, mostrando información que contiene, gráficos e imágenes)

La asociación de Diseño e Interfaz web Luledesign define los niveles en:

  • wireframe básico (expresa elementos de una pantalla genérica, aplicable a todo un sistema)
  • wireframe tipo (expresa estructura de pantallas de una misma categoría, como canales o páginas terminales)
  • wireframe detallado (especifica la composición de páginas especificas, aplicado especialmente en la pantalla donde observamos la realización de acciones)

La filóloga Olga Carrera muestra solo dos niveles, definiéndolos de forma más drástica:

  • Prototipo de baja fidelidad o wireframe o storyboard (conjunto de dibujos que presentan la organización de la página, implementando aspectos generales del sistema sin entrar en detalles)
  • Prototipo de alta fidelidad o maqueta o mockup (representa aspectos más precisos, detalla el proceso interactivo global de una o varias tareas, es una maqueta dinámica normalmente en html que simulan o tienen implementadas partes del sistema final a desarrollar)

Observando estas definiciones de diferentes tipos de investigadores y desarrolladores de Arquitectura de Información para la Web, es como se puede plantear la importancia de esta herramienta que permite graficar elementos de navegación (menú, accesos directos, e hipervínculos), elementos de información (texto, imágenes), elementos de interacción (herramientas o funcionalidades), elementos de apoyo (ayuda, mapas de navegación), elementos promociónales (publicidad).

Es importante tener en cuenta que, para desarrollar un wireframe independiente su nivel de complejidad es necesario utilizar previamente herramientas de análisis (benchmarcking, card sorting, encuestas) y diseño (mapas mentales, blue-print) que permiten llegar a una correcta estructuración de contenidos, mostrando en estas maquetas un sitio orientado cien por ciento a su audiencia, ligando estos contenidos con los objetivos y misión de los clientes.

Bibliografía:

  1. BROWN M., DANIEL. Communicating design: Developing web site documentation for design and planning. United Satate od America: Pearson of Education, 2007.
  2. CARRERA, Olga. Blog Usable y Accesible. [en línea] [Consulta: 20-diciembre-2008]. Disponible en: <http://olgacarreras.blogspot.com/2007/02/wireframes.html>
  3. LULADESIGN. Wireframe. [en línea] [Consultada: 19-diciembre- 2008]. Disponible en:<http://www.arquitecturadeinformacion.cl/como/wireframe.html>
  4. NOSOLOUSABILIDAD. La diagramación en la arquitectura de información. [en línea] [Consultada: 17-diciembre-2008].  Disponible en: <http://www.nosolousabilidad.com/articulos/diagramacion.htm>
  5. ROSENFELD, LOUIS Y MORVILLE, PETER. Arquitectura de la información para la www. México: O’Reilly, 2000. ISBN 970-10-2628-4.
  6. SIDAR. Prototipazo. [en línea] [Consultado: 21-diciembre-2008].  Disponible en:<http://www.sidar.org/recur/desdi/traduc/es/visitable/maner/Prototipado.htm>

Leave a Reply

Your email address will not be published.

Before you post, please prove you are sentient.

el color del pasto es..?