Caso de estudio: ASU

De Casiopea


TítuloArizona State University
Palabras Claveresponsive design
Período2013-2013
AsignaturaGráfica Digital 2013
Del CursoGráfica Digital 2013
CarrerasDiseño Gráfico
Alumno(s)José Miguel Ortega
ProfesorKatherine Exss
URLhttp://asuonline.asu.edu/


Introducción

El Responsive Design es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes de carácter fluidas, estas se puedan adaptar a diferentes soportes (ya sea un computador, una tabler, un iPad, smartphones, etc.), con la finalidad de mejorar la experiencia del usuario. La principal ventaja que entrega el responsive web design es el poder crear un único diseño el cual se capaz de adaptarse a cual pantalla de dispositivo que se use, ya que definiendo tipografías, tamaños de imágenes, el uso de columnas, entre otras características, estas se dimensionarán y se reestructurarán de manera automática.

Caso de Estudio: Arizona State University

ASUlogotipo.jpg

Arizona State University es una universidad norteamericana de carácter pública ubicada en el área metropolitana de Phoenix en el estado de Arizona. http://asuonline.asu.edu/ corresponde a su sitio web, el cual a grandes rasgos se caracteriza por poseer un navegación simple, con un contenido más fin informativo en relación a la propia universidad y los beneficios que esta entrega, en donde el modo de acceder a todo esto se da de manera muy facilitada.

Posibilidades de Despliegue

Como primera instancia al observar el comportamiento del sitio, se logra ver que posee tres diferentes despliegues (entendiendo uno para computador, otro para tabler y un último para smartphone). También se observa como el adaptar el contenido de un soporte a otro genera que algunos elementos disminuyan su presencia en la pantalla, provocando en algunos casos que hasta desaparezcan.

Desplieguesasuonline.jpg

Estructura General

Como se estructura general se vuelve muy simple poder identificar el header, el body y el footer del sitio. Estos tres elementos se mantienen de manera constante a lo largo de todo el sitio web, en ningún momento dismuyen, aumentan o cambian de forma o sentido (esto se refiere a una comparación de momentos en un mismo soporte). El único segmento que cambia, y por razones obvias, es el body, el cual varía en relación al contenido que dispone al usuario.

Comparaconheaerfooterasu copia.jpg

Análisis Particulares

PC

Una de las principales características del sitio que se logran observar al analizar su comportamiento en la pantalla de un computar, es el cuidado en la baja extensión del contenido, es más bien de carácter corto, ya que la información es precisa. Se logra apreciar también la gran presencia que posee el footer, el cual se divide en dos partes: uno superior destinado a la información extra de la universidad y otro más a datos del sitio como es el caso del mapa de este mismo. En términos de medidas, en la home este llegar a medir 2/3 de lo que alcanza a medir el body. Tipográficamente el sitio trabaja solamente con Helvética en sus variables regular y bold, con tamaños que varían desde los 12px hasta los 64px. En relación a la barra de navegación, esta es de carácter horizontal, el cual al poner el cursor sobre cada una de las opciones, estas no despliegan más de tres nuevas opciones.

ASU home.jpg
Estilostipograficososupc.jpg
Homeasumedidasgenerales.jpg
ASUhomemedidasparticulares.jpg

En cuanto al análisis de una grilla, se decide no enfocarse en eso ya que el sitio no posee clara, el body trabaja con tres columnas, mientras que el footer con dos. De este modo se propone estudiar el sitio en base a sus elementos dispuestos.

Elementos Home

Tablet (768x1024 px)

Lo primero que se observa al pasar de la resolución de la pantalla de un computador a la de una tablet, es que en esta aparecen de manera clara dos columnas de contenido. También es posible percatarse que el footer mantiene un dominio importante dentro del sitio. Existe dos pricipales situaciones que llaman la atención: por un lado es lo que sucede con la barra de navegación; pasa de ser un rectángulo en donde todas las opciones se encuetran alineadas en una misma fila, a una de carácter doble. Por otro lado al reducir la resolución en menú secundario (en el espacio donde aparecen noticias con fotografías), esta última no cambia de tamaño, sino más bien se mantiene y el menú de selección posa sobre este, el cual por otro lado pierde el cotenido que anteriormente se entregaba mediante texto, dejándo así sólo la opción de seleccionar a través de fotografías.

Asuhometablet.jpg
Estilostipograficosasutablet.jpg


Asuhometabletvaloresgenerales.jpg
Asuhometabletmedidasespecificas.jpg

En relación a la reducción de tamaño de los elementos al cambiar de soporte, algunos cambian de manera considerable, como el caso de las fotografías que aparecen en la parte superior a modo de noticias, estás pasan de medir 870x436 px a 527x397, mientras que el botón que indican "Click to chat" (el naranjo), el cual mide 102x22 px se mantiene del mismo tamaño. Lo mismo ocurre con las estilos tipográficos, mientras el H1 baja de 64px a 48px, el H5 se mantiene en 18.

Elementos Home

Smartphone (320x480 px)

En el soporte que corresponde a la resolución entregada por un smartphone, el sitio termina por construir una sola columna en donde se dispone el contenido (de hecho es en este soporte donde aparece con mayor claridad un grilla). Otro de los grandes cambios que se pueden observar, es el paso del menú secundario (el de noticias con fotografías) desde el lado derecho de la pantalla, a la parte inferior de la fotografía principal, rectificando la eliminación del cotenido de carácter texto. Otro gran cambio se produce en el header, el cual en este soporte se vuelve más cuadrado, generando más horizontes de lectura, algo que anterior era de carácter más bien distendido, ahora adquiere fuerza y se concentra en un sólo punto.

Asuhomesmartphone.jpg Estilostipograficossmartphoneasu.jpg Asuhomesmartphonevaloresgenerales.jpg Asuhomesmartphonevaloreespecificos.jpg

Elementos Home

Análisis en Conjunto

Para poder observar con mayor claridad los cambios y las adaptaciones que sufre en contenido con el cambio de soporte, se vuelve necesario observar estas tres realidades de manera simultánea.

Movimiento del Contenido

Al observar los tres despliegues de la home de la ASU, es posible observar de manera clara el cómo algunos elementos que en pantalla de computador se ordenaban de manera horizontal, por razones de espacio en una resolución menor, estos requieren ordenarse verticalmente. Lo anterior descrito también ocurre en viceversa, donde elementos que antes se comportaban verticalmente, ahora lo hacen modo horizontal. El caso de la fotografía de inicio es algo que se mantiene a través de los tres soporte, en donde estos al cambiar, esta se mantiene constante, lo cual es confuso ya que los demás elementos de carácter fotográfico si se adaptan a los nuevos soportes.

Movimientovaloresespecificos.jpg

De manera específica el footer es el principal elemento que aparece al observar en sus máximas extensiones el sitio, es donde también las tipografías sufren los menores cambios.

Diseño de Grilla en base a columnas

Como anteriormente se señaló, el cambio de soporte en el sitio de la ASU, genera que una grilla la cual no es posible de apreciar en la resolución que corresponde al computador, sí aparezca de manera clara en el smartphone. Cabe destacar que a pesar que la resolución que entrega la tablet permite ordenar el contenido total en dos columnas, estas se comportan de manera confusa (en otras palabras no generan un calce entre ellas).

Asuonlinecolumnas1.jpg

Elementos estructurales

Producto del tamaño de complejidad que posee el sitio se decide continuar trabajando con la home, ya que es el lugar del sitio donde más situaciones ocurren, y la que entregar mayor riqueza de carácter tipográfica. Primero se analizarán los cambios que ocurren en las tres partes generales de la estructura del un sitio, para luego ver situaciones más bien específicas.

Header

Como primera situación que es posible de observar el cambio en cuanto a diseño del header durante el cambio de soporte, es su forma. En el estado computador este es más bien rectangular, con mucho aire, se podría interpretar como adueñándose del espacio, utilizándolo al máximo. Pero cuando se genera el cambio de soporte, este se vuelve mas cuadrado, y los elementos que lo componen se vuelven muy compactos entre ellos mismo. Se cree que esto ocurre no tanto por el ancho del pantalla sino más bien por el alto, ya que como header debe aparecer tanto como el contenido del body, entonces dentro de ese aparecer del todo se vuelve necesario ceder espacio para el contenido propio del sitio.

Despliegueheaderasuonline copia.jpg

Al observar otros cambios aparecen dos más que a modo personal valen la pena ser mencionados. Uno es el caso de la barra de navegación, la cual pasa de ser un sola fila de contenido a dos, y al igual que el header en general, pierde su forma rectangular. También en relación a la barra de navegación, se observa como ciertos elementos al cambiar la resolución del soporte se mantienen del mismo tamaño, siendo los márgenes o los espacios entre ellos los que varían. Ese es el caso de los botones "Click to call", "Request Info", "Live Chat", como también sucede con el texto de la barra de navegación, que no importa el soporte, siempre posee un tamaño de 13px.

Body

En el body se observan principalmente dos grandes cambios:

  • Por un lado la barra de navegación secundaria ubicada a un costado de la fotografía, la cual al momento de cambiar de soporte a tablet pierde el texto, y al pasar a smartphone, esta cambia de posición a parte inferior de la fotografía.
  • Por otro lado se observa como el contendido dividido en un comienzo en dos columnas cada vez se va condensando más visualmente hasta llegar a una sola columna.
Desplieguebodyasuonline.jpg
Footer

El principal cambio que se puede observar en el footer es cómo el contenido pasa de estar dispuesto en cuatro columnas a una, lo cual ayuda principalmente a poder observar de manera más clara la grilla del sitio.

Desplieguefooterasu.jpg

Tamaño de los elementos

Existen cuatro momentos más específicos de cambios de tamaño o estructura de contenido, los cuales serán descrito a continuación:

  • Reproducción de Video

Se observa que la reproducción del video está más bien pensada para ser vista en una pantalla de computador, ya que es en este soporte que se logra observar de manera completa. Mientras que a medida que la resolución disminuye este va perdiendo presencia más que tamaño. No se adapta.

Repvideasuonline.jpg


  • Barra indicadora de Ruta

Al igual que el header, la barra indicadora de la ruta del usuario, se dispone a lo largo de todo el sitio, razón por lo mismo que a medida que la resolución disminuye el ancho de esta tambien lo hace y el texto contenido en este espacio se va apretando cada vez más, pasando de una línea a tres.

Barrarutaasuonline.jpg


  • Menú de Navegación Secundaria Home

Ya se ha mencionado con anterioridad, pero dentro del sitio el mayor cambio que se observa es el cambio que sufre la barra de navegación de las noticias ligadas a fotografías. Sobre esto se pueden indicar tres cosas promordialmente:

  • En relación a la fotografía principal. A medida que la resolución disminuye esta no se va adaptando al nuevo espacio, sino más bien se mantiene igual variando solamente cuanto aparece de ella.
  • En relación al menú de navegación. En los tres soportes se comporta de manera diferente. En la pantalla de computador se ubica al costado derecho, y cada opción que entrega posee título y subtítulo. Mientras que en la tablet estos últimos dos desaparecen. Y finalmente en el smartphone, el menú se desplaza a la parte inferior de la fotografía.
Navsecundariaasuonline.jpg


  • Menú de Navegación Secundaria Home

Al selección cualquier opción de las que dispone la barra de navegación se despliegan dos a tres nuevas opciones, la cuales al ser seleccionadas el usuario es direccionado a este contenido y en la pantalla al costado izquierdo reaparecen las dos o tres opciones antes vistas, todo esto en la resolución de pantalla de computador, mientras que en la tablet este menú se dispone en la parte final del footer, ocupando un gran espacio (todo el ancho de la pantalla). Ya luego en el smartphone esto se repite.

Menudespegableasuonline.jpg

Estilos Tipográficos

Se observan seis estilos tipográficos a lo largo de todo el sitio, todos en hHlévetica, los cuales se logran observar todos en el home. En relación a esto:

Estilos Tipográficos PC
  • h1 Helvética Bold 64px
  • h2 Helvética Bold 24 px
  • h3 Helvética Bold 18 px
  • h4 Helvética Regular 13px
  • h5 Helvética Regular 12px
  • h6 Helvética Bold 12px
Estilos tipográficos Tablet
  • h1 Helvética Bold 42px
  • h2 Helvética Bold 24 px
  • h3 Helvética Bold 18 px
  • h4 Helvética Regular 16px
  • h5 Helvética Regular 13px
  • h6 Helvética Bold 11px
Estilos tipográficos Smartphone
  • h1 Helvética Bold 36px
  • h2 Helvética Bold 20px
  • h3 Helvética Bold 16px
  • h4 Helvética Regular 13px
  • h5 Helvética Regular 14px
  • h6 Helvética Bold 11px

A continuación una galería con todos los cambios de los estilos tipográficos de manera particular:

Evaluación

Como se indicó desde un comienzo el sitio no presenta mayor complejidad en cuanto al diseño, por lo tanto al momento de analizar su comportamiento en relación al responsive design, este fue muy claro y ordenado. Principalmente se comprende el comportamiento del sitio y su adaptabilidad del contenido aunque existe dos situaciones que a manera personal no se entiende el cómo fue pensando: por un lado el del menú secundario (ligado a fotografías), en los tres soportes se comporta de manera distinta y se siente que esto podría ser pensado de otra menera, sobre todo al momento de visualizarlo en tablet. Por otro lado también se vuelve confuso la barra de ruta que en un comienzo aparece al costado de la página (resolución de pc) y luego esta pasa a lado inferior de todo el contenido, se entiende que de todas maneras el usuario posee la barra de nevagación principal en header pero esta funciona con ventanas emergentes, algo que no es posible en los smartphone. A pesar de esas dos situaciones, se entiende la organización del contenido y la adaptabilidad de la estructura, por otro lado llama la atención el cómo el contenido según sus necesidades a través de la resolución, algo que en la pantalla de computador funciona mejor horizontal en el smartphone lo hace vertical, lo cual no sólo se comporta así por la resolución que este último posee ya que también funciona en viceversa.