Diferencia entre revisiones de «Caso de Estudio: McColl Center for Art + Innovation»
Sin resumen de edición |
|||
(No se muestran 26 ediciones intermedias de otro usuario) | |||
Línea 7: | Línea 7: | ||
}} | }} | ||
=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. | 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: | Para este estudio, se eligirieron 3 tamaños de distintas plataformas para analizar: | ||
Línea 17: | Línea 17: | ||
*Celular: 320x480 | *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. | |||
[[Archivo:Comparación_home.jpg|500px|center]] | |||
==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. | |||
[[Archivo:Comparación_secciones.jpg|500px|center]] | |||
==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. | |||
[[Archivo:Menú_pc.jpg|500px|center]] | |||
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. | |||
[[Archivo:Menú_tablet.jpg|500px|center]] | |||
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. | |||
[[Archivo:Menú_movil.jpg|500px|center]] | |||
==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. | |||
[[Archivo:Diagramación_imágenes.jpg|500px|center]] | |||
[[Archivo:Tamaños_imágenes.jpg|300px|center]] | |||
==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. | |||
[[Archivo:Brandon-Grotesque.jpg|200px|center]] | |||
===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 |
Revisión actual - 13:06 24 jul 2014
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.
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