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