Caso de Estudio: Tyler School of Art

De Casiopea




Caso de Estudio
NombreTyler School of Art
AutorCarlos Chávez
Período2013-2013
Palabras Claveresponsive design
Estudiado enGráfica Digital 2013
Estudiado porCarlos Chávez
URLhttp://tyler.temple.edu

Estudio visual de diseño responsive de sitio web: http://tyler.temple.edu/#/prospective

Diagramaciones según Sección

La grilla varía dependiendo de la categoría. Éstas se dividen en :

  • Home
  • Categoría (escuela)
  • Subcategoría (Carrera específica)
  • Contacto


Grilla Responsiva

La grilla cambia dependiendo del ancho de la pantalla. A medida que ésta se estrecha los elementos se van ubicando en las linea siguiente (float). Ésto se observa en elementos como el calendario o la sección "Learn More".

Por otro lado, el estrechamiento de la grilla genera un aumento considerablemente en la extensión vertical de la grilla, siendo ésto una dificultad en la lectura.

Comparaciones grilla-01.jpg


La grilla experimenta variaciones a medida que el ancho de pantalla se reduce. Se comienza con la utilización de 5 columnas para luego pasar a sólo 3. Sin embargo al reducirse la cantidad de columnas, éstas comienzan a aumentar de ancho, llegando progresivamente a 1 columna que cubre el ancho total de la pantalla. El último ejemplo expuesto en el extremo derecho, evidencia la "ruptura" de la grilla, haciéndose imposible la navegación.

Cambios escala grilla-01.jpg

Header

Los márgenes aumentan permittiendo la aparición del blanco. En el formato de IPAD, título y subtítulo se disponen horizontalmente, haciendo uso del espacio conseguido. Sin embargo en el formato Máximo, éstos se alinean verticalmente tal como en el formato más pequeño.

Titulos-01.jpg

Menú de Navegación

Se observan los cambios que experimenta el menú de navegación, siendo éstos caracterizados por la división de horizontes, donde las opciones referentes al tipo de alumno se ubican por debajo del menú principal (a partir del ancho de pantalla de 773px). Finalmente, a partir del ancho de 747px, se incorpora una opción de menú en el ángulo superior derecho de la p{agina.

Header tyler university.jpg


Bajo estas dimensiones, el sitio genera una viñeta en la esquina superior derecha de la pantalla, donde por medio de un ícono de "opciones" se ofrece al usuario la alternativa de desplegar el nuevo menú.

Comparaciones MENU-03.jpg

Cambios de Imagen

La imagen experimenta cambios de escala, sin embargo la imagen aparece enmascarada, ocultando partes de la imagen según las proporciones requeridas para la grilla.

Imagen home-01.jpg

Imagenes seccion art-01.jpg

Desaparición de Contenidos

En el cambio de una resolución a otra, se observa la desaparición de algunos elementos. Es el caso de la caja de texto con las palabras "PERSPECTIVE", la sección "LEARN MORE" y el "CALENDARIO" (todas destacadas en la imagen inferior mediante un cuadrado rojo.)

Desaparicion texto-01.jpg

Boton de Búsqueda

En los dos primeros mayores formatos (máximo y ipad), la barra de búsqueda se ubica en la esquina superior derecha y de muy menor tamaño. En los dos formatos restantes, la barra de búsqueda aumenta de tamaño y se hace mucho más visible. Se convierte en un protagonista en su ubicación en el espacio gráfico.

Search botom-01.jpg

Controles

En los dos primeros mayores formatos (máximo y ipad), las imágenes contienen flechas para obtener más información. A medida que se reduce la pantalla, las flechas se convierten en puntos, para así utilizar la menor cantidad de espacio posible.

Por otro lado es interesante la comparación entre los tamaños de imagen, ya que entre el formato 1 y el formato 2 la imagen se achica a medida que el formato de pantalla se reduce, sin embargo una vez que la imagen pasa a la línea inferior ésta vuelve a su tamaño original.

CONTROLES-01.jpg

Texto

A meida que se reduce la pantalla, los márgenes izquierdos se reducen al mínimo para luego comenzar a reducir las cajas de textos sin alterar los tamaños tipográficos.

Textos tyler-01.jpg

Variaciones Tipográficas

Header

El estudio tipográfico realizado en el Header evidenció los cambios de tamaño presentados por los títulos de menú. Éstos aumentan de 11pt a 12pt a medida que se reduce el ancho de pantalla. Sin embargo al llegar a un ancho mínimo, la tipografía vuelve a su tamaño original.

700px

Caja de Texto

El estudio de las cajas de texto en las páginas de contenidos demuestra los pocos cambios que éstas experimentan en formatos de ancho distintos. El título principal decrece progresivamente de tamaño (de 65px a 36px).

El subtítulo disminuye su tamaño de 24px a 21px. Loes estilos de la caja de texto permanecen constantes sin alterar sus tamaños.

Comparaciones tipograficas2-02.jpg

En el Home, por otro lado, los estilos tipográficos de los contenidos no experimentan cambios. Los tamaños y grosores son constantes en los distintos anchos de pantalla.

Tipografia home-02.jpg

Footer

El footer experimenta cambios de diagramación sin variaciones en la escala de los elementos. A medida que se reduce la pantalla, los elementos comienza a alinearse verticalmente.

Foother tyler-01.jpg

Footercolores-02.jpg

Conclusiones

Principalmente, el sitio cumple eficientemente con los requerimientos de un sitio responsivo. Existen variados estados de la grilla, generando suaves transiciones entre una diagramación y otra. Por otro lado se identifican diferentes modos de "acomodación" de los elementos en el espacio provocados por los cambios en los anchos de pantalla. Estas acomodaciones pueden ser provocadas por desplazamientos o bien cambios de escala. En primera instancia, los elementos comienzas a hacer uso de los margenes e intersticios propios de las grilla iniciales (reducción de márgenes). Sin embargo, a medida que se comienzan a reducir aún más los espacios, los elementos comienzas a experimentar cambios de tamaño, lo que permite acomodar de mejor manera los distintos objetos de la página.

En cuanto a las debilidades, podemos identificar la pérdida de control por las longitudes de la página al reducir los anchos de la pantalla. En ocasiones, el sitio requiere de demasiado "scroll down" para poder conocer los contenidos totales de una página específica. Ésto dificulta la navegación haciendo de muy difícil acceso los elementos que se encuentran en la parte inferior de la página.