Como tratar la exposición de los 60 años en un sito responsivo

De Casiopea






Caso de Estudio
NombreComo tratar la exposición de los 60 años en un sito responsivo
Período2013-2013
Palabras Clavediseño gráfico, responsive design, gráfica digital
Estudiado enTutorías Gráfica Digital 2013
Estudiado porBernardo Silva


Introducción

Se dio como encargo, pensar bajo que criterios construir un sitio web con diseño responsivo para la exposición de los 60 años de la Escuela e[ad], aquella que tuvo lugar en el Centro Cultura (Ex carcel).

La exposición contaba con 14 pizarras las cuales tenían dibujo y textos, estos explicaban lo realizado en la Bienal de Sao Paulo, La Travesía a Nueva York y las travesías hechas en Chile.

Organizando el contenido

Para poder construir el relato, primero hay que pensar bajo que criterio fue realizada la exposición, cual es su jerarquía.

Entendiendo el contexto se puede establecer la siguiente estructura.

  • Las pizarras son las protagonistas de la exposición.

su imagen y texto.

  • Textos de las láminas

reflexiones y anotaciones. imágenes.

Bajo este orden se tomaran posteriormente las decisiones gráficas en cuanto a su lectura y visualización.

En cuanto al contenido del sitio, este tendrá 3 secciones las cuales ayudan a contextualizar al lector sobre el tema.

  • Acerca de: Una reseña con lo que fue la exposición, la cual debería contar con notas e imágenes.
  • Textos: Los textos expuestos en la exposición misma.
  • Enlaces: Hipervinculos que tengan que ver con la Escuela, ya sea el sitio mismo de esta, Biblioteca Constel y el sitio del Centro Cultural.

Otro punto a considerar es como la cantidad de contenido afecta la experiencia de navegación, es decir, cuando uno navega desde un celular busca lo más rápido lo que conlleva a que en un tamaño menor, debería mostrarse menos contenido, reduciéndose a lo mas relevante. En este caso no sería necesario llegar a esa reducción ya que el sitio requiere mostrar el total de su contenido siendo este un sitio para la lectura.

Primer Encargo

Decisiones de diseño

Con la estructura ya clara, se toman las decisiones de jerarquía visual, es decir, la diagramación y cómo se desenvuelven los elementos en ella.

  • Las pizarras son las que ocupan mayor espacio y de la cual se parte la lectura.
  • Las imágenes que acompañan a los textos de las láminas no son mas grandes que las pizarras, esto para remarcar la importancia de estas.

No hay que olvidar que siempre se debe pensar construir una lectura legible, tomando en cuenta el tamaño de las imágenes y el texto, de que manera responden a los distintos tamaños, como lograr mantener y que se entienda la jerarquía planteada.

Wireframes

Se trabajo bajo 3 tamaños de resoluciones que se encuentran en una media respecto a la gran cantidad que existe hoy en el mercado.

  • 1024 x 768
  • 480 x 640
  • 320 x 480

Trabajando bajo el sistema de una grilla, se estableció la diagramación la cual se va adaptando a los distintos tamaños.


Cambios

  • De estar dividida en 8, la grilla pasa a estar divida en 4 cuando se encuentra en un tamaño un tamaño menor.
  • El menú cuenta con 3 estados, para los tamaños mayores se mantiene al costado, para los medios se posiciona arriba, dejando el menú debajo del titulo aunque ya no muestra los "capitulos" de las pizarras debido a su longitud, luego para los tamaños pequeños, se contrae en la forma de un botón expansible.
  • El tamaño del texto se mantiene, se ajusta su ancho respecto a la grilla.
  • La distribución de las imágenes cambia, esto se debe al aprovechamiento del ancho que otorga una resolución, cuando es mas ancho se muestran 2 o 4 fotos horizontal y verticalmente mientras que cuando es menor, se muestra una sola imagen verticalmente, si se mantuviera de a 2 o a 4 no se podría observar de mejor manera la imagen.

Conclusión

Dichos cambios vienen como respuesta a la problemática que presenta la experiencia de lectura que ofrecen los distintos tipos de navegación, No es lo mismo pensar el tamaño y la disposición de un menú si este va a ser navegado por un mouse o el dedo, si es desde una tablet o un celular. Hay que pensar en conjunto la cantidad, orden e importancia del contenido junto a las posibilidades que puede ofrecer una experiencia de navegación en los distintos soportes donde se puede acceder a internet.

Segundo Encargo

Decisiones de diseño

Siguiendo con las ideas postuladas en el wireframe, se pasa a ajustar estas, manteniendo la misma jerarquía visual y de contenido.

El contenido del sitio esta enfocado en las personas relacionadas con la Escuela, ya sean alumnos como profesores, que este sirva como registro y fuente sobre los textos expuestos durante la exposición.

Propuesta Visual

Presentación del Sitio

Se trabaja en estos 3 tamaños ya que están en una media entre los tamaños mas usados.

  • 1024 x 768
  • 480 x 640
  • 320 x 480

Presentacion sitio.jpg



Grilla expo.jpg

Cambios expo.jpg

Recursos.jpg