Wireframes and Mockups

16
FotoParalelo Sebastián Paz Merenlha Campos FotoParalelo Merenlha Campos Sebastián Paz Profesor Jorge Barrera “24 porteños, eligieron su tour por Valparaíso”

description

Wireframes y Mockups del proyecto de taller

Transcript of Wireframes and Mockups

Page 1: Wireframes and Mockups

FotoParalelo

Sebastián PazMerenlha Campos

FotoParalelo

Merenlha CamposSebastián Paz

Profesor Jorge Barrera

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

Page 2: Wireframes and Mockups

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.

Page 3: Wireframes and Mockups

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 ob-tenidas pero donde los lugares no fueron selec-cionados. (200).

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

Page 4: Wireframes and Mockups

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 seccio-nes “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 foto-paralelo, mostrando las distintas imágenes de los 8 lugares seleccio-nados 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.

Page 5: Wireframes and Mockups

Blueprint - Principal

Page 6: Wireframes and Mockups

Blueprint - Zoom Entrevista

Page 7: Wireframes and Mockups

Blueprint - Zoom Galería Emotiva

Page 8: Wireframes and Mockups

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, extracta-das de todo el proceso de investigación y de desarrollo del proyecto.

3.Menú Central: Describe las etapas de desarrollo del proyec-to, 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 res-pecto 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) El proyecto b) La Ruta (composición + introducción)c) Galería Emotiva (composición + introducción)

Page 9: Wireframes and Mockups

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 emo-tivas 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 desa-rrollar 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.

Page 10: Wireframes and Mockups

Wireframe - Homepage Sitio del Proyecto

Page 11: Wireframes and Mockups

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 compren-sión del usuario respecto del tema y el proyecto.

Page 12: Wireframes and Mockups

Wireframe - Sección interior “El Proyecto”

Page 13: Wireframes and Mockups

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.

Page 14: Wireframes and Mockups

Wireframe - Sección interior

Page 15: Wireframes and Mockups

Wireframe - Sección Galeria

Page 16: Wireframes and Mockups

Mockup - Homepage