Caso de Estudio: McColl Center for Art + Innovation
Caso de Estudio | |
Nombre | Caso de Estudio: McColl Center for Art + Innovation |
---|---|
Palabras Clave | responsive desing |
Estudiado en | Gráfica Digital 2014 |
Estudiado por | Constanza Johnson |
URL | http://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.