Documentos de Académico
Documentos de Profesional
Documentos de Cultura
25 de Diciembre de 2007
La diagramación en la
arquitectura de información
Ronda León, Rodrigo
Introducción
El primer paso en el diseño de objetos o procesos es la representación mediante
diagramas de su estructura, funcionamiento y comportamiento, concretando así las
primeras ideas abstractas. En el caso de productos interactivos con interfaz, como por
ejemplo los sitios web, esta interfaz también es objeto de diagramación, especificando
cuál será la organización y estructuración visual de los diferentes elementos.
Los diagramas se deben realizar a partir de la información recogida durante las etapas de
investigación de la audiencia, en las que se estudia a los usuarios con el objetivo de crear
un producto que satisfaga sus necesidades.
Los diagramas a los que se refiere este artículo son los que se usan en arquitectura de
información para proponer cómo será el producto final. Esencialmente se refieren a la
organización de los contenidos del producto, al funcionamiento básico del mismo, y la
ubicación que tendrán estos contenidos en la interfaz.
Los autores angloparlantes, pioneros en los temas del diseño y representación del
software, dividen estos diagramas en 2 tipos:
• Blueprints
• Wireframes
Como sustituto del término Blueprint a veces se usa el de Architecture Map, que significa
Mapa de Arquitectura.
https://www.nosolousabilidad.com/articulos/diagramacion.htm 2/12
12/6/22, 10:00 La diagramación en la arquitectura de información
También como término similar a wireframe se usan otros términos como mockup y
prototype (maqueta y prototipo). (Rosenfeld & Morville, Wodtke, Snyder)
El primer grupo de diagramas (blueprints), tiene como objetivo representar "las
principales áreas de organización y rotulado" (Rosenfeld & Morville), y están enfocados a
los aspectos estructurales y de funcionamiento del producto. Generalmente se
representan con textos, cajas y flechas.
Christina Wodtke conceptualiza los Blueprint como: "Un plano de diseño es justamente
una buena idea llevada a la realidad a través de la escritura".
El segundo grupo de diagramas (wireframe, mockup o prototype) tienen el objetivo de
"mostrar el contenido de las páginas" (Rosenfeld & Morville), concretando los elementos
que se plantearon en los primeros planos (blueprints) y ubicándolos en las páginas o
pantallas del producto final.
Este segundo grupo de diagramas están comprendidos como prototipos de baja fidelidad,
ya que se realizan en "blanco y negro" y no muestran el diseño gráfico del producto ni la
funcionalidad de sus códigos de programación.
Los niveles de prototipos son:
https://www.nosolousabilidad.com/articulos/diagramacion.htm 3/12
12/6/22, 10:00 La diagramación en la arquitectura de información
Estos tipos de diagramas se realizan también de forma iterativa con el usuario y demás
miembros del equipo de desarrollo.
pensados para diagramación, pero que también pueden usarse con este objetivo ya que
son poderosas herramientas de diseño gráfico.
Algunas aplicaciones software que fueron ideadas para hacer diagramas:
• SmartDraw (http://www.smartdraw.com)
• Microsoft Visio (http://www.microsoft.com)
• Freemind (http://freemind.sourceforge.net/)
• OmniGraffle (OSX) (http://www.omnigroup.com)
Sistemas de diagramación en la AI
Una notación muy usada por arquitectos de información y diseñadores de interacción
para hacer la diagramación de sitios web es la propuesta por Jesse James Garret
(http://www.jjg.net), y que consiste, según el propio autor, en un "vocabulario visual para
describir arquitectura de información y diseño de interacción" (Garret, trad. Velasco.
2002). El sistema de diagramación está compuesto de símbolos geométricos, flechas y
líneas.
El vocabulario visual de Garret es muy útil para representar tanto el diseño de interacción,
como la estructura conceptual y organizativa del contenido. (Garret, trad. Velasco. 2002).
Esta notación gráfica está concebida para realizar un diseño de lo general a lo concreto, ya
que sigue el principio de la simplificación de representación a partir de cajas (boxes) y
flechas (arrows). Este principio es el que le facilita a cualquier diseñador comunicar
arquitecturas de información de forma fácilmente comprensible.
https://www.nosolousabilidad.com/articulos/diagramacion.htm 5/12
12/6/22, 10:00 La diagramación en la arquitectura de información
YAHOO!
http://billsportfolio.com
Por otro lado Dan Brown propone otro vocabulario muy útil para la distribución de los
elementos dentro de las pantallas.
http://www.greenonions.com
Where the Wireframes Are: Special Deliverable #3.
http://www.boxesandarrows.com/view/where_the_wireframes_are_special_deliverable_3
Garrett Dimon creó basándose en la propuesta de Dan Brown una serie de iconos para el
proceso de diagramación:
http://v1.garrettdimon.com/resources/templates-stencils-for-visio-omnigraffle
La propuesta de Nick Finck también es diversa y útil en la confección de diagramas para
sitios web.
http://www.nickfinck.com/stencils.html
Peter Van Dijk's es autor de otra propuesta que se puede encontrar en:
http://iabook.com/template.htm
Joaquín Márquez Correa propone una serie de gráficos en Visio para la realización de
diagramas:
http://www.jmarquez.com/documentos/jmarquez%20wireframe%20shapes.zip
Un propuesta propia
https://www.nosolousabilidad.com/articulos/diagramacion.htm 6/12
12/6/22, 10:00 La diagramación en la arquitectura de información
Se proponen tres tipos de diagramas de acuerdo a las funciones principales que cumple
un arquitecto de información en el diseño de un producto digital:
Esta clasificación no significa que estos diagramas sean excluyentes. Debe existir una
interrelación entre los mismos, de manera que cada diagrama creado complemente al
anterior, y se convierta en apoyo de los siguientes. Igualmente la división por grupos de
estos diagramas no significa que haya que hacer rígidamente tres.
Además, esta propuesta no excluye a ningún otro modelo de diagramación.
Perfectamente podría complementarse con el vocabulario visual de Garret, con la
propuesta de Dan Brown, o cualquier otro modelo de los anteriormente mostrados.
Propuesta de iconos
Para hacer los diagramas de organización se proponen una serie de iconos simples,
iguales que los que propone Garret. Se basan en cajas y flechas o conectores.
https://www.nosolousabilidad.com/articulos/diagramacion.htm 7/12
12/6/22, 10:00 La diagramación en la arquitectura de información
Propuesta de diagramas
Los diagramas de organización consisten en la representación de los grupos organizados,
y de los elementos básicos que contienen, siendo el diagrama básico para entender la
estructura general del producto.
https://www.nosolousabilidad.com/articulos/diagramacion.htm 8/12
12/6/22, 10:00 La diagramación en la arquitectura de información
https://www.nosolousabilidad.com/articulos/diagramacion.htm 9/12
12/6/22, 10:00 La diagramación en la arquitectura de información
Conclusiones
Los diagramas son mecanismos esenciales en la arquitectura de información de sitios
web, libros electrónicos, sistema de información, etc.
Esta técnica alivia el coste de producción, al ser más fácil y económico rectificar un diseño
sobre el "papel" que sobre el producto implementado.
Bibliografía
Brown, Dan. Representing data in Wireframes. Disponible en:
http://www.greenonions.com/portfolio/dbrown_ia2005_wireframes.pdf (consultado: mayo
2006)
https://www.nosolousabilidad.com/articulos/diagramacion.htm 10/12
12/6/22, 10:00 La diagramación en la arquitectura de información
Brown, Dan. The Visual Vocabulary Three Years Later: An Interview with Jesse James
Garrett. Disponible en:
http://www.boxesandarrows.com/view/... (consultado: diciembre 2005)
Brown, Dan. Where the Wireframes Are: Special Deliverable #3. Disponible en:
http://www.boxesandarrows.com/view/where_the_wireframes_are_special_deliverable_3
(consultado: enero 2006)
Garret, Jesse James. A visual vocabulary for describing information architecture and
interaction design. (enero 2001). Disponible en: http://www.jjg.net/ia/visvocab/
(consultado: febrero 2005)
Garret, Jesse James. Un vocabulario visual para describir arquitectura de información y
diseño de interacción. Traducción: Javier Velasco (marzo 2002). Disponible en:
http://www.jjg.net/ia/visvocab/spanish.html (consultado: abril 2005)
Océano Grupo Editorial. Enciclopedia didáctica de computación. Madrid: Océano Grupo
Editorial, 1998
Olsen, Henrik. Visio - the interaction designer's nail gun. How to use Visio for rapid
prototyping. Disponible en:
http://www.guuui.com/issues/02_03_02.php (consultado: junio 2007)
Ronda León, Rodrigo. Productos electrónicos: principios y pautas. Editorial Félix Varela, La
Habana, 2005
Rosenfeld, Louis & Morville, Peter. Information architecture for the World Wide Web.
O’Reilly & Associates. 1998.
Scott, Bill. Storyboarding Rich Internet Applications with Visio. Disponible en:
http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio
. (consultado: enero 2007)
Zinder, Carolyn. Paper prototyping. The fast end easy way to design and refine user
interfaces. Morgan Kaufman, 1ra edición, abril 2003.
Wodtke, Christina. Information architecture, blueprints for the web. New Riders, octubre
2002.
Colaboraciones
Diseñador de la iconografía:
Irelio Alonso Torres [irelio1@yahoo.com]
https://www.nosolousabilidad.com/articulos/diagramacion.htm 11/12
12/6/22, 10:00 La diagramación en la arquitectura de información
Especialistas consultados:
Keilyn Rodríguez [keilyn@infomed.sld.cu] (Cuba) http://www.infomed.sld.cu
Jorge Barahona [jbarahona@ayerviernes.com] (Chile) http://www.ayerviernes.com
Citación recomendada:
Ronda León, Rodrigo (2007). La diagramación en la arquitectura de información. En: No Solo Usabilidad, nº 6,
2007. <nosolousabilidad.com>. ISSN 1886-8592
https://www.nosolousabilidad.com/articulos/diagramacion.htm 12/12