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

De Casiopea



TítuloComo tratar la exposición de los 60 años en un sito responsivo
Tipo de ProyectoProyecto de Tutoría
Palabras Clavediseño gráfico, responsive design, gráfica digital
Período2013-2013
AsignaturaGráfica Digital 2013
Del CursoTutorías Gráfica Digital 2013
CarrerasDiseño Gráfico
Alumno(s)Bernardo 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

Se mantiene la relación que se trabajo en el wireframe. Una grilla de 8 para los tamaños grandes y una de 4 para los tamaños pequeños, en esta se ajusta y se mide el contenido.

Grilla expo.jpg

Cambios

  • Menú: pasa de estar vertical a horizontal, en los tamaños pequeños se acota la sección "textos" debido a la gran cantidad de contenidos. El titulo cambia su disposición para aprovechar el tamaño.

Cabe mencionar que el menú sería estático por lo que siempre estaría visible para una rápida y optima navegación.

Ejemplo de como se vería el menú en distintos momentos de la lectura.

Menu estatico1.jpg

  • Imagen: La imagen secundaria cambia su disposición, pasa de mostrar 2 imágenes de manera horizontal a una vertical, esta regla de 2 viene heredada de las láminas. Por otro lado la imagen principal sigue estando siempre arriba, ocupando un mayor tamaño.

Texto: El tamaño de la tipografía se mantiene, solo cambia el ancho de su párrafo, siempre medido en relación con la imagen principal y la imagen secundaria, ante esta ultima siempre tiene un ancho mayor.

Cambios expo.jpg

Recursos

Se elige una tipografía sin serif para el texto y otra con poco serif para los títulos del texto, aquellas son Open Sans y Aller, estas ya que se tiene un parecido a la tipografía DinPro utilizada por la escuela.

El color fue pensando en relación con el de las pizarras, croquis y grabados. Para el fondo se utiliza un color gris de tono cálido con la intensión de favorecer la lectura ya que el blanco de las pantallas cansa la vista del lector, no hay que olvidar que el sitio esta enfocado para ser leído.

Recursos.jpg

Programación HTML

Primera prueba de codeo [1]

Se tomó partido por dejar la imagen de la pizarra en el total del ancho, haciendo que esta se vea mas predominante en la jerarquía visual así como favorecer una mejor lectura y comprensión de estas. Luego se pasa a los textos e imágenes que fueron ocupados en la lámina que acompañaba a los pizarrones. El tamaño es menor que la pizarra en tamaños mas grandes pero al ser visto en un tamaño mas pequeño, estas ultima se ve mas pequeña.

Se escogió un texto de Travesía ya que estos son los que tienen mayor cantidad de imágenes en tamaños diferentes.

Cambios por realizar

  • Reducir las dimensiones de las imágenes para una mejor velocidad en la carga del sitio.
  • Establecer al menos 3 tipos de tamaños estándar para tener una regularidad en las imágenes, para ello crear Divs para cada tamaño de imagen.
  • El menú no se desprende debido a que la Wiki no es capaz de llamar bien a las cascadas de estilo.

Segunda Corrección HTML [2]