Desarrollo de interfaz

Page 1

Proyecto

Revalora Buscamos informar valores HistĂłricos, valores del Patrimonio Cultural, Medio Ambientales y TurĂ­sticos, a fin de motivar a la ciudadanĂ­a a concretar de forma urgente las mantenciones necesarias para estos bienes a revalorar.


Arquitectura de la informaci贸n Mapa de Navegaci贸n


Arquitectura de la Informaci贸n Desarrollo Proyecto Revalora

1. Inicio 2. Proyecto 3. Equipo 4. Contacto 5. Historia 6. Patrimonio 7. Medio Ambiente 8. Turismo 9. Galeria Fotogr谩fica 9.1. Olvidados 9.2. Desmantelados 9.3. Mantenidos 10. Recorrido 10.1. Sector Sur 10.2. Sector Norte 10.3. Sector Este 10.4. Sector Oeste

11. Rescate Grafico 11.1. Iconos 11.2. Postales


Arquitectura de la Información Desarrollo Proyecto Revalora

Páginas Menú general_menú ubicado en el costado izquierdo, se encuentra presente en todas las páginas. Contiene información del proyecto,equipo y contacto. Pie_Ubicado abajo y centrado, contiene información de copyright, soporte del proyecto y un link a colofón, el cual presentara las especificaciones técnicas de la página. Entradas Menú Contenido_menú ubicado en el costado derecho, tambien se encuentra presente en toda la página. Categorias Historia: Información acerca de la estructura en si. Patrimonio: Relación entre la estructura y la ciudad (en este caso villa alemana). Medio Ambiente:Información referente a los beneficios medio ambientales. Lo que aporta el bien patrimonial a la naturaleza. Turismo:Información referente a los beneficios turisticos que impulsa el desarrollo de la ciudad. Todo este contenido contara con infografias, las cuales podran ser descargadas o ampliadas por el usuario. Galeria_ Conjunto de imágenes tomadas por el equipo a lo largo del proyecto como rescate grafico. Se podra acceder a está a travez de un link al costado derecho de la página, siempre se encontrará presente en la navegación. Se podrá

seleccionar las opciones: olvidados, desmatelados y mantenidos (haciendo referencia a su estado actual) en cuya fotografia ira mencionado en que lugar esta ubicado. Esto tendrá completa relación con la opción “recorridos”. Recorridos_Conjunto de 4 mapas, clasificados por sectores, los cuales, mediante simbologia, mostraran en que lugar se encuentran los molinos en estado olvidado, desmatelado y mantenido. Rescate Grafico_Conjunto de elementos graficos, elaborados en el proceso de diseño del proyecto, como iconos, postales, fondos de pantalla, entre otras. Detalles Inicio_En la pagina de inicio se presentaran las entradas mas recientes, agrupadas por el tema en especifico, y con una pequeña descripcion de que trara, asi el usuario podra contar con un acceso mas directo a la seccion que se sienta mas interesado. Comentarios_El usario podra acceder a comentar el contenido, la galeria y los recorridos para asi generar un interes y una relacion del contenido y este. Descargas_El usuario podra acceder a descargar: infografias en formato pdf, mapas por sector en formato pdf, iconos, postales en base a la galeria fotografica en jpg, y estas en fondo de pantallas. las imagenes de la galeria (sin editar) no seran descargadas.


Arquitectura de la informaci贸n Flujo de navegaci贸n p谩gina de inicio y ultimas entradas


Arquitectura de la información Caso de flujo de navegación 1. El usuario quiere ver la historia del molino de viento. 2. Elige una de los temas 3. Lee la información 4. Quiere ver la infografia, la amplia (se abre en una ventana pop up) 5. Le gusta la infografia cierra la ventana y luego la descarga en la misma pagina del contenido. 6. Nos deja un comentario 7. Si quiere ver mas temas podrá optar por la opción “ver otro tema” o podrá ir a cuaquier otra aplicación de donde se encuentre, en este caso a la galeria. 8. Elige una de las categorias (desmantelados) 9. Comienza a ver las fotos. 10. Una le llama la atención porque piensa que esta cerca de su casa (ve la ubicación del molino) y ve la opción “ver en el mapa” al hacer click en el link , este lo lleva a la opcion de recorridos pero con el sector de la dirección del molino. 11. Si en uno de los dos casos le gusta la simbologia del mapa o las fotografias, habra un mensaje que le indique al usuario que podra hacer una descarga de estos elementos en la seccion rescate grafico.


Menu General 222 x 37.5 px

Diseño de Wireframe

Menu de Contenido 150 x 37.5 px c/u 150 x 150 px

Cabecera 430 x 150 px

Al comienzo resultaba dificil ordenar las ideas que se tenia acerca del diseño de la interfaz, el como hariamos la interacion de usuario y sitio. El diseño de los elementos de la interfaz estan compuestos de tal manera que facilitan una rapida navegacion, permitiendo que pueda cambiar de contenido cada vez que quiera. Los menu fueron “agrupados” segun el tipo de información que posea, como se definio en el mapa de navegación.

Menu Dinamico que nos muestra las categorias de Galeria, Recorrido y Rescate Gráfico. 150 x 150 px espacio de 10 px

El diseño refleja conceptos de limpieza y sencillez y esta pensado para resolver los objetivos ya definidos, INFORMAR.

IMPORTANTE: Los colores y tipografias del ejemplo no son definitivos, solo son ejemplos de los esquemas que se realizaron desde un comienzo. Estos ejemplos buscan mostrar la definicion de las medidas y distribucion de la información.

Pie de pagina con link a la pagina de colofón 430 x 30 px


inicio

Pagina Proyecto


Contacto

Equipo y Colof贸n


Historia - temas

Historia


Patrimonio

Medio Ambiente

Turismo

Patrimonio - temas

M. Ambiente- temas

Turismo - temas


Galeria Fotografica - temas

Galeria Fotografica


Recorrido - temas

Recorrido


Rescate Grรกfico


Flujo de navegaci贸n Ejemplo con Wireframe


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.