Caso de Estudio: McColl Center for Art + Innovation

De Casiopea






Caso de Estudio
NombreCaso de Estudio: McColl Center for Art + Innovation
Palabras Claveresponsive desing
Estudiado enGráfica Digital 2014
Estudiado porConstanza Johnson
URLhttp://mccollcenter.org/


Introducción

Este sitio pertenece al centro cultural estadounidense McColl Center for Art + Innovation, el cual aparte de tener exposiciones de arte contemporáneo y realizar eventos, ofrece talleres para acercar a la comunidad al arte. El sitio contine información útil como el programa de sus eventos, fichas de los artistas que exponen, etc.

Análisis

Para este estudio, se eligirieron 3 tamaños de distintas plataformas para analizar:

  • PC: 1280x800
  • Tablet: 768x1024
  • Celular: 320x480

El estudio se realiza en torno a la página de inicio del sitio, analizando su diseño y cómo varía de un soporte a otro.

Elementos del inicio

Menú Explore McColl Center

  • Horario Visita
  • Contacto
  • Home (link)
  • Artists-in-Residence (link)
  • Innovation Institute (link)
  • Events + Exhibitions (link)
  • About the Center (link)
  • Community Engagement (link)
  • Press Room (link))
  • Support the Center (link)
  • Blog (link)
  • Visit McColl Center (link)
  • Events + Exhibitions (imágenes con links)
  • Newsletter Signup

Menú Artists-in-Residence

  • Artists-in-Residence (descripción e imágenes con links)

Header

  • Exhibición destacada (imagen con link)

Body

  • McColl Center for Art + Innovation (descripción)
  • About the Center (link)
  • Spheres of Impact (link)
  • Innovation Institute (descripción)
  • Open Enrollment Program (link)
  • Custum Programs (link)
  • Testimonial (link)
  • Our Team (link)
  • Upcoming Exhibitions + Events (descripciones e imágenes con links)
  • Galería Artistas(imágenes con links)
  • Blog (notas destacadas)
  • Quick-note
  • Testimonial

Footer

  • Artists-in-Residence (link)
  • Innovation Institute (link)
  • About the Center (link)
  • Press Room (link)
  • Blog (link)
  • Visit (link)
  • Donate (link)
  • Info
  • Connect (redes sociales)
  • Events + Exhibitions (imágenes con links)

Grillas y secciones

El sitio no no se estructura mediante una grilla simetrica, sino que se divide en secciones, donde cada una tiene un órden propio. Los elementos se sitúan dentro de contenedores que generan estas secciones. Esto permite que los contenidos se ordenen de manera independiente al ir variando el tamañano de la pantalla. Así los elementos pueden pasar de estar uno a lado del otro en la versión para pc a desplazarse hacia abajo formando una gran columna en la versión movil.

Menú desplegable

El diseño del menú es lo que más cambia entre cada versión, pues no solo varía en su tamaño, si no que practicamente en la totalidad de su diseño al tener distintas posiciones, distribuciones e incluso contenidos distintos.

En el caso del sitio en PC, podemos observar que se trata de dos menús distintos ubicados a los a los extremos en forma vertical. En una primera visualización, ambos están escondidos, pero, al presionar las flechas, se despliegan y ocupan gran parte de la pantalla mientras que el contenido del inicio es difuminado. El menú posee un scroll propio, independiente del resto del sitio.


Para la versión de tablet, aparece un ícono de menú en la esquina superior derecha. Al seleccionarlo de depliega un menú en dos columnas que hace que se desplacen hacia abajo los contenidos del inicio.

El sitio en su versión movil también presenta en primer lugar un icono de menú en la esquina superior izquierda. Cuando es seleccionado se depliega un menú de una columna que ocupa la pantalla completa.

Imágenes

Al tratarse del sitio de un centro de arte e inovación, el diseño es rico en imágenes. Como no sigue una grilla determinada para todo el sitio, éstas varían mucho en su diagramación y tamaño al pasar de una plataforma a otra, en especial las que utilizan todo el ancho de la página.

Tipografía

La tipografía utilizada es la familia Brandon Grotesque, donde si no es encontrada es reemplazada con Helvetica Neue, Helvética, ​Arial y ​sans-serif.


Brandon-Grotesque.jpg

Tipografía de Pantalla de 1280px

título

  • Font-family:"brandon-grotesque"
  • Font-size:24px
  • Font-weight:900
  • Line-height:28,8px

blockquote

  • Font-family:"brandon-grotesque"
  • Font-size:26px
  • Font-weight:300
  • Line-height:36,4px

column-large

  • Font-family:"brandon-grotesque"
  • Font-size:18px
  • Font-weight:400
  • Line-height:27px

inline-links

  • Font-family:"brandon-grotesque"
  • Font-size:13px
  • Font-weight:900
  • Line-height:27px

column-small

  • Font-family:"brandon-grotesque"
  • Font-size:18px
  • Font-weight:400
  • Line-height:27px

título grande

  • Font-family:"brandon-grotesque"
  • Font-size:70px
  • Font-weight:900
  • Line-height:91px
  • Letter-spacing: 35px
  • Text transform: uppercase

Tipografía de Pantalla de 768px

título

  • Font-family:"brandon-grotesque"
  • Font-size:24px
  • Font-weight:900
  • Line-height:28,8px

blockquote

  • Font-family:"brandon-grotesque"
  • Font-size:22,4px
  • Font-weight:300
  • Line-height:31,3px

column-large

  • Font-family:"brandon-grotesque"
  • Font-size:14,4px
  • Font-weight:400
  • Line-height:21,6px

inline-links

  • Font-family:"brandon-grotesque"
  • Font-size:13px
  • Font-weight:900
  • Line-height:21,6px

column-small

  • Font-family:"brandon-grotesque"
  • Font-size:14,4px
  • Font-weight:400
  • Line-height:21,6px

título grande

  • Font-family:"brandon-grotesque"
  • Font-size:48px
  • Font-weight:900
  • Line-height:62,4px
  • Letter-spacing: 24px
  • Text transform: uppercase

Tipografía de Pantalla de 320px

título

  • Font-family:"brandon-grotesque"
  • Font-size:24px
  • Font-weight:900
  • Line-height:28,8px

blockquote

  • Font-family:"brandon-grotesque"
  • Font-size:16,8px
  • Font-weight:300
  • Line-height:23,5px

column-large

  • Font-family:"brandon-grotesque"
  • Font-size:14,4px
  • Font-weight:400
  • Line-height:21,6px

inline-links

  • Font-family:"brandon-grotesque"
  • Font-size:13px
  • Font-weight:900
  • Line-height:21,6px

column-small

  • Font-family:"brandon-grotesque"
  • Font-size:14,4px
  • Font-weight:400
  • Line-height:21,6px

título grande

  • Font-family:"brandon-grotesque"
  • Font-size:36px
  • Font-weight:900
  • Line-height:46,8px
  • Letter-spacing: 18px
  • Text transform: uppercase

Conclusión

El sitio es un buen sitio responsive ya que a pasar de que los cambios estructurales que se dean al adaptarse a otro soporte son bastante grandes, los elementos en si no tienen gran variación. Como se puede observar en el caso de la tipografía, se dedicó tiempo a afinarla de manera tal que en los tres soportes observados los parrafos con mayor contenido se mantenien similares aun cuando se cambia du diagramación en el sitio. El hecho de que no tenga una grilla que rigidice los contenidos les ha dado más libertad para crear un sitio flexible y que se ve visualmente atractivo en todas sus versiones. Además esta diversidad en sus elementos que se presentan de forma distinta en cada soporte, como se vió en el menú, hace que el usuario tenga una experiencia distinta cada vez, fomentando la interacción.

Análisis de divs

https://www.dropbox.com/sh/575008j4sqjxivu/AACkhjeMWOx9jYMBGjc1tDTDa/Tarea%20Constanza%20Johnson