Desarrollo de interfaz

15
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. Proyecto Revalora

description

ideas generales de diseño de mapa de navegacion para el proyecto, flujo de navegacion y primero diseños de wireframe

Transcript of Desarrollo de interfaz

Page 1: Desarrollo de interfaz

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.

Proyecto Revalora

Page 2: Desarrollo de interfaz

Arquitectura de la informaciónMapa de Navegación

Page 3: Desarrollo de interfaz

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ónDesarrollo Proyecto Revalora

Page 4: Desarrollo de interfaz

Páginas

Menú general_menú ubicado en el costado izquierdo, se en-cuentra presente en todas las páginas. Contiene información del proyecto,equipo y contacto.

Pie_Ubicado abajo y centrado, contiene información de co-pyright, soporte del proyecto y un link a colofón, el cual pre-sentara las especificaciones técnicas de la página.

Entradas

Menú Contenido_menú ubicado en el costado derecho, tam-bien 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 po-dran 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 mante-nidos (haciendo referencia a su estado actual) en cuya foto-grafia 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, elabora-dos en el proceso de diseño del proyecto, como iconos, pos-tales, 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 conte-nido, 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, pos-tales 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ónDesarrollo Proyecto Revalora

Page 5: Desarrollo de interfaz

Arquitectura de la informaciónFlujo de navegación página de inicio y ultimas entradas

Page 6: Desarrollo de interfaz

Arquitectura de la informaciónCaso de flujo de navegación

1. El usuario quiere ver la historia del molino de viento.2. Elige una de los temas3. Lee la información4. 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 comentario7. 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.

Page 7: Desarrollo de interfaz

Diseño de Wireframe

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 facili-tan 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.

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 realiza-ron desde un comienzo. Estos ejemplos buscan mostrar la definicion de las medi-das y distribucion de la información.

Menu Dinamicoque nos muestra las categorias de Galeria, Recorrido y Rescate Gráfico.150 x 150 pxespacio de 10 px

Cabecera430 x 150 px

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

Menu de Contenido150 x 37.5 px c/u150 x 150 px

Menu General222 x 37.5 px

Page 8: Desarrollo de interfaz

inicio Pagina Proyecto

Page 9: Desarrollo de interfaz

Equipo y Colofón

Contacto

Page 10: Desarrollo de interfaz

Historia - temas Historia

Page 11: Desarrollo de interfaz

Turi

smo

- tem

as

M. A

mbi

ente

- tem

as

Pat

rim

onio

- te

mas

Turi

smo

Med

io A

mbi

ente

Pat

rim

onio

Page 12: Desarrollo de interfaz

Galeria Fotografica - temas Galeria Fotografica

Page 13: Desarrollo de interfaz

Recorrido - temas Recorrido

Page 14: Desarrollo de interfaz

Rescate Gráfico

Page 15: Desarrollo de interfaz

Flujo de navegaciónEjemplo con Wireframe