Iconografía para el diseño de interacción y la arquitectura de la información

Podemos dividir la tarea de prototipado y defenición de la funcionalidad de un site en dos grandes bloques consecutivos:

• Blueprint
• Wireframe

Blueprint: En el diseño de interacción y la arquitectura de la información entendemos por blueprint (o arquitecture map) el diagrama que muestra la relación entre las distintas páginas o acciones del sistema que estamos creando. Es el esquema de funcionamiento del site.

Wireframe: El wireframe (o mockup, o maqueta) nos permite definir como se estructuran los elementos en la interfaz y la relación entre ellos. Es el esqueleto de la página.

Hay distintas propuestas gráficas para llevar a cabo estas tareas pero ninguna de ellas definitiva. Lo mejor es trabajar con lo que te interese de cada propuesta y, finalmente, tener la tuya propia.
Lo importante es que sea fácil de entender, de explicar y que cubra nuestras necesidades. Al fin y al cabo los sistemas de prototipado son, ante todo, una herramienta de comunicación con nosotros mismos y con el resto del equipo.

Hay mucho y variado software para realizar estas tareas y, de hecho, cualquiera nos sirve. Podemos realizar-las hasta en papel, que a mi me parece una buena opción para plasmar nuestra primera estructura mental y para empezar a desarrollar en las primeras fases del proyecto, pero floja para hacer una diagramación detallada y comunicable.
Aquí varios enlaces interesantes sobre diagramación en papel

Tal vez los más usados son:

• Microsoft Visio (Windows): aquí una interesante review
• Omnigraffle (Mac): mi favorito para Blueprint
• Fireworks (Windows / Mac): mi favorito para Wireframe. Aquí una interesante review

Os dejo otro enlace con más información sobre herramientas de prototipado

En cuanto a iconografía para blueprint, a mi me gusta especialmente la propuesta de Jesse James Garrett perfectamente traducida al castellano por Javier Velasco:

• Un vocabulario visual para describir arquitectura de información y diseńo de interacción

En cuanto a wireframe, fireworks ya tiene por defecto la mayoría de elementos que necesitaremos. De todas formas, por la red encontramos muchas otras alternativas para ésta y para las otras herramientas.

En nosolousabilidad.com hay un interesante artículo sobre AI acompañado de buenos enlaces para encontrar, entre otras cosas, iconografía.

También son interesantes los iconos para diagramación en isométrico de Peter Van Dijck.