ARQUITECTURA DE LA INFORMACIÓN

Propuesta de arquitectura de un sitio web:

Árbol de Contenidos y Wireframes

PAC 3

Javier Cosío GonzálezGrado en Multimedia

Mapa Web

Wireframe (index)

Wireframe (juego detalle)

Wireframe (categoria detalle)

Wireframe (contacto)

Wireframe (página de registro)

Objetivos

Mapa Web:Tras realizar una primera aproximación a la restructuración de la web JuegosArea con la Evaluación Heurística y el Benchmarking llevado a cabo, hemos diseñado un árbol de contenidos y unos wireframes que tienen muy en cuenta los procesos señalados anteriormente.

El árbol de contenidos está estrucutrado de tal manera que diferencia cuatro grandes areas:

1.- Cabecera.

La cabecera es un área muy importante para cualquier espacio web, por este motivo, acondicionamos el espacio de este área con una serie de opciones esenciales como el logotipo, buscador, opciones de registro...

2.- Barras laterales.

El nuevo diseño posee dos sidebar que proporcionan información importante para el usuario, la barra situada a la izquierda añade un listado de categorias muy útiles, en la otra barra podemos encontrar publicidad y otras opciones secundarias.

3.- Cuerpo.

La reorganización del contenido principal en varias pestañas permite al usuario elegir la información acorde a sus necesidades.

4.- Pie de Página.

El pie de página incorpora muy pocas novedades respecto al antiguo pie del site, ya que el contenido es prácticamente el mismo con las opciones de contacto, términios de uso, políticas...

Esta es la organización llevada a cabo con la realización del árbol de contenidos, los wireframes nos dan más detalle de la restructuración.

Wireframes:El diseño de los wireframes al igual que el mapa web está diseñado en Adobe Fireworks.

A primera vista, se puede comprobar en los wireframes que la web posee una estructura lógica basada en el DCU.

Además, en las páginas donde el usuario suele navegar como son la página index o la página de acceso a un juego podemos comprobar que el sistema de navegación es muy consistente aportando al usuario un abanico de enlaces elevado. Sin embargo, he profundizado en el diseño de otros wireframes donde el sistema de navegación es más cerrado, un ejemplo, la página de contacto o la página de registro.

Por otro lado, los enlaces aparecen subrayados en color azul por regla general, aunque hay algunos en color blanco sobre fondo azul como sucede en las pestañas del contenido principal.

Los iconos para el diseño de los wireframes están extraidos de la web www.iconfinder.com

Licencia: Creative Commons (Attribution-Noncommercial 3.0)

Javier Cosío González

Arquitectura de la información