Caso Responsivo para la exposición ead 60 años

De Casiopea


TítuloTrabajo de Sitio Responsivo: Exposición de los 60 años
Tipo de ProyectoProyecto de Tutoría
Palabras Claveexposición ead, sitio responsivo
Período2013-2013
AsignaturaGráfica Digital 2013,
Del CursoTutorías Gráfica Digital 2013,
CarrerasDiseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Carolina Nuñez

Introducción

Durante la Exposición de los 60 años de la Escuela, llamada "Este Vuelo Quebrado y Anhelante", realizada en el Parque Cultural(Ex-carcel)Valparaíso en la fecha Viernes 21 de diciembre del año pasado. Se cerraba el año de celebraciones del aniversario e[ad], reflejando “el presente a la luz de Amereida”.

El montaje en si mismo constaba de "catorce pizarras temáticas, cada una de las cuales contará con la dimensión de: observación y dibujo; documentación y la palabra poética. Se consideran doce pizarras de travesía donde cada taller expondrá lo realizado este año en el continente americano, con especial atención a la travesía de Sao Paulo, la Bienal de Arte, la travesía a Nueva York y las travesías realizadas en Chile."[1]

  1. Noticia publicada por Eugenia Rivieri, Periodista e[ad] • 18 de diciembre, 2012[1]

Para este trabajo la idea es llevar a cabo la totalidad de la exposición a un medio digital, a través de un sitio web. En este caso se tomará una pizarra con sus respectivos contenidos para mostrarse en el sitio de una manera específica para una futura recopilación de las pizarras con una estructura determinada.

Problemática

Para poder entender la importancia del caso, se debe comprender la totalidad de los contenidos y la forma de estos, por lo tanto, poder hacer visible los contenidos es el reto, y hacerlo de una forma clara, precisa, reconocible y entendible.

Punteo a lograr

  • Mostrar contenidos de una forma clara.
  • Fácil navegación.
  • Textos legibles

Elementos presentes

  • Titular o Logo: "Exposición 60 años Escuela Arquitectura y Diseño"
  • Header: Título texto y pizarra. "Diseño, Acto y Celebración. Pizarra 18"
  • Imagen: Pizarra
  • Poema: Fragmento
  • Texto: 2 columnas de texto
  • Slider: Visualización de imágenes de la exposición y/o de la lámina puesta bajo la pizarra.

Cohesión

Ubicación elementos en los diferentes dispositivos

Web Home

Propuesta Visual previa, (adelanto para pensar una forma de construir y ver facilmente todos los errores)

Web1.jpg

Vista del sitio, con la pestaña "Notas" abierta, en donde se desplaza la imagen de la pizarra a la izquierda, y se mantiene los márgenes del poema y el texto. Un poco más abajo se puede ver el slider en su estado extendido, es decir, vista maximizada.

Pestaña Notas abierta y Slider extendido

Móvil

La visualización móvil corresponde a todo el contenido de la pizarra 18 "Diseño,Acto y Celebración"

Archivo:Movilexpo60años.jpg
Vista móvil total

Wireframe

El trabajo de wireframe siempre debe hacerse antes para maquetear sobre esta estructura y su forma para luego dar la identidad y el total al sitio que queremos mostrar, en este caso un Sitio sobre la Exposición de los 60 años de la Escuela de Arquitectura y Diseño.

La cual trata de dar a entender lo que fue, lo que se hizo y lo que se dijo en esta Exposición realizada en el Parque Cultural de Valparaíso(Ex-Cárcel) a fines del año 2012(21 de Diciembre)

Para poder comprender el contexto de la exposición, es que rescaté extractos y puntos importantes de la publicación realizada en el sitio de la Escuela, posteriormente a la inauguración, (en mi propuesta utilicé los textos en el Home)

  • WireFrame del Home
  • WireFrame de Travesías
  • Wireframes de la Escuela

Galerías

<gallery> Image:Home total.fw.png| Home en Web(1024x) Image:Tablet home.fw.png| Home en Tablet(1280x) Image:Móvil home.fw.png| Home en Móvil 1(840x) Image:Móvil1 home.fw.png| Home en Móvil 2


<gallery> Image:Web travesia.fw.png| Travesía en Web Image:Tablet travesia.fw.png| Travesía en Tablet Image:Móviltravesia.fw.png| Travesía en Móvil



<gallery> Image:Web Escuela.fw.png|Pizarra Escuela "Diseño, Acto y Celebración" Image:Tablet escuela.fw.png|Escuela en Tablet Image:Movil escuela.fw.png|Escuela en Móvil

Estructuras en comparación Unidasestruc1.jpg

Ver en Comparación

Tipografías y Color

Helvética y Calibri:

  • Helvética: Utilizada para título sitio, títulos, pestañas y footer.
  • Calibri: Utilizada para fragmento poema, texto y notas.

Colores:

  • Rojo #8C0000
  • Crema #FFEFBF
  • Negro #000000
  • Blanco #FFFFFF

Coloresjuntos.fw.png