Wireframes and Mockups

FotoParalelo

FotoParalelo

“24 porteños, eligieron su tour por Valparaíso”

Merenlha Campos Sebastián Paz Sebastián Profesor JorgePaz Barrera Merenlha Campos

Inventario Compuesto por la investigación realizada asi como por el material generado a partir de esta.

24 entrevistas grabadas (video) a ciudadanos de entre 20-80 años.

8 lugares seleccionados, por su popularidad dentro de la entrevistas.

24 fotografías antiguas, tanto del Mercurio, como de la plaza O’ Higgings. (3 por cada lugar).

24 fotografías actuales de reproducción de los ángulos de las antiguas.

8 imágenes emotivas (1 por lugar) generadas por nosotros que relacionan el lugar con lo que allí se vive.

Inventario 8 aplicaciones en pasado-presente, una por lugar (slide de superposición).

1 información historico-técnica de cada lugar.

Galería de rescate, fotografías extras obtenidas de Valparaíso, más otras imágenes antiguas obtenidas pero donde los lugares no fueron seleccionados. (200).

Mapa de ruta imprimible, y otro de aplicación para navegar.

Secciones de la Plataforma Web Home: Contendrá una introducción al proyecto junto con un enlace a la sección “El proyecto”, para obtener mayor información sobre este, una galeria de fotoparalelos directa, y una introducción a las secciones “Fotoparalelo” y “La Ruta”.

1)La Ruta: Se muestra el diseño de la ruta turística popular y su aplicación.

2)Testimonios: Recopilación de 24 entrevistas grabadas destacando los 8 lugares seleccionados.

3)Fotoparalelo (Aplicaciónes): En esta sección se visualiza el fotoparalelo, mostrando las distintas imágenes de los 8 lugares seleccionados en las entrevistas.

4)Galería Emotiva: Galería que en su interior mostrará las distintas representaciones emotivas que se obtuvieron de las entrevistas y los testimonios obtenidos de los ciudadanos de Valparaíso.

5)El proyecto: Explicación del proyecto, objetivos, fundamentos y proyecciones, con énfasis en el trabajo y desarrollo de la ruta, y el fotoparalelo.

Blueprint - Principal

Blueprint - Zoom Entrevista

Blueprint - Zoom GalerĂ­a Emotiva

Elementos 1.Logotipo del Proyecto: Logotipo versión principal trabajado el contraste dependiendo del tipo de fondo.

2.Composición de Imágenes: Imágenes trabajadas, extractadas de todo el proceso de investigación y de desarrollo del proyecto.

3.Menú Central: Describe las etapas de desarrollo del proyecto, agrupadas en rótulos concisos para facilitar la navegación del usuario. Cada sección dirige a una página nueva con mayor información respecto al tema.

4.Contenido Destacado: Tiene tres secciones en las que aparece una introducción a algunos tema, pudiendo el usuario acceder a ese tema teniendo un poco de conocimiento respecto de la sección seleccionada, destaca la introducción a “El Proyecto” ya que contesta inmediatamente la pregunta ¿Qué es?. Introducciones dispuestas de izquierda a derecha, en orden de importancia y lectura. a) b) c)

El proyecto La Ruta (composición + introducción) Galería Emotiva (composición + introducción)

Elementos 5.Composición Ruta: Composición de imágenes extractadas de la recopilación de imágenes durante el desarrollo de la ruta.

6.Composición Galería Emotiva: Composición de imágenes creadas gracias a las representaciones emotivas extraídas del análisis de las entrevistas hechas a los ciudadanos de Valparaíso.

7.Galería Fotoparalelos: Se presentan imágenes de los 8 lugares de Valparaíso seleccionados para desarrollar el proyecto Fotoparalelo. Pudiendo el usuario acceder al fotoparalelo de esa imagen en específico.

8.Pie: Contiene derechos, año de creación y link de los integrantes.

Wireframe - Homepage Sitio del Proyecto

Elementos 1.Área de Contenido: Área para textos más extensos, en este caso explicando en que consiste fotoparalelo, pero sirve también para otras sub-secciones dentro de “El Proyecto”.

2.Sub Área de contenidos: Contiene mas información sobre el proyecto clasificados para facilitar la comprensión del usuario respecto del tema y el proyecto.

Wireframe - Sección interior “El Proyecto”

Elementos 1.Área de Contenido Flash: Área centrada, dispuesta de este forma para que el usuario se enfoque en la animación.

2.Área de Información: Destinada a textos breves, algunos datos interesantes sobre el sitio visualizado, es un área de complemento al área de contenido flash.

Wireframe - Secci贸n interior

Wireframe - Secci贸n Galeria

Mockup - Homepage