Caso de estudio: Children's Museum of Pittsburgh

De Casiopea


TítuloCaso de estudio: Children's Museum of Pittsburgh
Tipo de ProyectoProyecto de Curso
Período2013-2013
AsignaturaGráfica Digital
Del CursoGráfica Digital 2013
CarrerasDiseño Gráfico
Alumno(s)Samira Bajbuj
ProfesorKatherine Exss
URLhttps://pittsburghkids.org/



Introducción

Este caso estudia el sitio Museo de Niños de Pittsburgh (Children's Museum of Pittsburgh). En este sitio se utiliza el diseño web responsivo (Responsive Web Design), diseño adaptable a los distintos soportes de pantalla. Se analizarán principalmente los cambios estructurales que experimenta el sitio con respecto a estos distintos soportes.

Tamaños de Pantalla

Se determinan 5 resoluciones de pantalla para el estudio de los momentos de quiebre de la diagramación del sitio. Estos tamaños de pantalla, con respecto al ancho de la página, corresponden a los casos más utilizados por dispositivos.

  • 1280 px
  • 1024 px
  • 768 px
  • 640 px
  • 320 px

Además, se estudian tres casos distintos en el sitio, con respecto a la variación de la grilla. Éstos son:

  1. Home del Sitio
  2. Página Interna "Exhibits/Waterplay" (con presencia de texto extenso)
  3. Calendario

1.Home

Elementos del sitio

Los elementos son representados con diferentes colores para estudiar el comportamiento de éstos en los diferentes tamaños.

  • Rojo: Menú principal
  • Celeste: Buscador
  • Verde: Logotipo
  • Naranjo: Links de contacto e información esencial (horarios y teléfonos)
  • Amarillo: Imagen Principal (slideshow)
  • Gris: Texto
  • Morado: Footer
  • Magenta: Botón enlace al menú principal.


Cambios Menú de navegación

En el quiebre de 1280px a 1024px no suceden cambios significativos en la organización de los elementos, sin embargo aparece un nuevo elemento; un botón que enlaza al menú principal, si bien el menú aparece parcialmente, éste está incompleto por lo que este botón sirve para visualizar todos los elementos del menú (que se encuentran en el footer de la página). Esto se mantiene en el tamaño 768 y 640px.


Los cambios más significativos se presentan en el tamaño de página más pequeño, en el quiebre de 640px a 320px.

  • El menú principal se reduce completamente a un botón que enlaza al menú completo ubicado en el footer.
  • El buscador desaparece del header y se traslada al footer.
  • El área de contacto, información de horarios, teléfonos y ubicación toma un lugar importante dentro de la diagramación.
  • Desaparece imagen grande (slideshow) y estos elementos se distribuyen de la misma manera que los demás contenidos.
  • Los contenidos se diagraman en base a una sola columna.
320 elementosynormal-01.jpg



Cambios en el orden de elementos

Columnas

  • En los tamaños 1280px y 1024px, se utilizan 4 columnas de texto como máximo.
  • En los tamaños 768px y 640px cambia a 2 columnas de texto.
  • En el tamaño menor estudiado; 320px, se utiliza una sola columna de texto.

2. Página Interna "Exhibits/Waterplay"

Elementos del sitio

En las páginas internas aparecen nuevos elementos:

  • Burdeo: Sidebar (menú secundario)
  • Café: Breadcrumb
  • El menú principal se comporta de la misma manera que en el Home del sitio, en los 5 tamaños estudiados.
  • Aparece un nuevo elemento de navegacion: un side-bar que funciona como menú secundario.
  • El texto correspondiente a noticias y eventos se trasladan al Sidebar de la página. El resto del texto corresponde al contenido de la página.
  • El contenido del Sidebar sobre noticias y eventos, utiliza la misma columna que el menú secundario.
  • La imagen principal es única y no funciona como slideshow.
  • Los contenidos utilizan dos columnas, la imagen principal y la descripción principal ocupan estas dos columnas, que luego se dividen en una columna de texto y otra de imágenes.
  • En tres momentos de quiebre (de 1280px a 1024px, de 1024px a 768px y de 768px a 640px) los elementos se van adaptando al tamaño de la página proporcionalmente, sin variar su orden. Sin embargo las columnas de texto e imágenes, que en 1280px tienen el mismo ancho, a medida que se disminuye el ancho de la página, se da preponderancia a las imágenes. La columna de texto disminuye su ancho en pos de mantener la relevancia de las imágenes (y su correcta visualización).
  • Los cambios más significativos ocurren también en el tamaño más pequeño estudiado: 320px de ancho. La imagen y texto principal encabezan la página, así como también se mantiene la relevancia de las imágenes por sobre el texto secundario. Sin embargo, el menú secundario ahora pierde relevancia debido a que se encuentra al final del contenido, así como también el resto del texto ubicado anteriormente en el Sidebar.
  • Al igual que en el Home, el menú principal y el buscador se trasladan al footer.


3. Calendario

Elementos del sitio

  • La sección "Calendar" es particularmente distinta al resto de las páginas interiores, ya que está basada en la estructura clásica del calendario visualizado por mes.
  • Por este motivo esta página utiliza una grilla de 7 columnas, utilizada en los calendarios para mostrar ordenadamente los 7 días de la semana.
  • Nuevamente el tamaño de ancho 320 px, es el que presenta los cambios más significativos con respecto al resto, simplificando la grilla a una sola columna (lo mismo que ocurre en el resto de las páginas del sitio web).



Márgenes y medidas

Los cambios que sufre la página al alterar su ancho son correspondientes a tamaño de márgenes y columnas.

1280px

1024px

1024 home margenes-01.jpg