Wireframes and Mockups

Post on 10-Mar-2016

236 views 0 download

description

Wireframes y Mockups del proyecto de taller

Transcript of 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”

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

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, 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)

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.

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 compren-sió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