Caso de Estudio: AIDS Gov

De Casiopea
Revisión del 05:03 11 jul 2013 de Paulina.buvinic (discusión | contribuciones)
(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)


TítuloCaso de estudio: AIDS Gov
Tipo de ProyectoProyecto de Taller
Período2013-2013
Del CursoGráfica Digital 2013
CarrerasDiseño Gráfico
Alumno(s)Paulina Buvinic
ProfesorKatherine Exss
URLhttp://www.aids.gov/

Presentación

A continuación se expone el caso de estudio para el portal informativo acerca del HIV del gobierno de Estados Unidos, denominada AIDS.Gov (http://www.aids.gov/). Se analizarán los cambios existentes para un sitio diseñado bajo los conceptos de Responsive Design, en donde se busca la adaptación del sitio al entorno del usuario. Para ello, se compararán los contenidos, elementos gráficos y estructura interna bajo tamaños diferentes en relación a tres soportes: computador, tablets y móvil.

Junto con ello, se tomará el caso del portafolio web de la empresa de diseño Spigot Design (http://spigotdesign.com/) para observar un caso básico de Responsive Web Design, el cual no se adapta respecto a cierto elementos primordiales.


Casos de Estudio

AIDS Gov

Con el fin de estudiar las respuestas del sitio web a distintos tamaños, se determinan cuatro secciones dentro de su navegación. De esta manera se podrá analizar el comportamiento de los distintos elementos visuales (imágenes, cuerpos de texto, listas) presentes en el sitio.


Homepage

Se determinarán los casos de quiebre para el Homepage del Sitio Web. Es decir, aquellos momentos en que los elementos y diagramación cambian considerablemente. Los puntos de quiebre no son definidos por la reducción de los márgenes a la izquierda, sino que esto es la manera en que el sitio se va adaptando paulatinamente a los cambios. Por ende, el quiebre será considerado al cambiar visualmente los elementos o al cambiar su disposición y/o ubicación.

Así, se definen 4 puntos de quiebre, iniciando el estudio en el tamaño de pantalla 1280 x 800 px, referente al tamaño de un computador portátil, y finalizando con una pantalla de 400px de ancho, mínima medida en la cual se observan cambios.

Tamaños a ser estudiados respecto al ancho de la pantalla:

  • 1280 px
  • 1006 px
  • 767 px
  • 599 px
  • 400 px


Estructura Interna

Por estructura interna se estará hablando de la grilla, y por ende, del estilo de diagramación que van adquiriendo los distintos tamaños. Debido a esto solo se trabajará en base a cuatro tamaños, ya que el cambio referente al ancho de 1006 pixeles será relacionado con el cambio en la disposición de un elemento y no acerca de la diagramación.

Como primera instancia se puede observar que los cambios respecto a la ubicación de los elementos generales tiende a ser común, ya que aquello que en su tamaño máximo se disponen en dos columnas, pasa a ser una diagramación vertical. Así, el tamaños del footer (color morado) irá aumentando progresivamente, mientras que la fotografía principal (color verde oscuro) disminuirá.

Contenidos Homepage.jpg


Al estudiar las distintas medidas para la grilla veremos que existen elementos que mantienen su medida vertical, como lo que ocurre en el caso de la barra de navegación principal. A pesar de que visualmente cambian, se mantiene a lo largo de los cuatro tamaño en los 66 pixeles. Por otro lado, la barra de búsqueda (llámese a la barra superior) cambia levemente, manteniendo su altura igual para los dos casos mayores (118 pixeles), y luego igual para los casos menores (110 pixeles)

Grillas HomepageAIDS.jpg


Cabe destacar que el largo del sitio no aumenta proporcionalmente como lo hace el ancho al ir disminuyendo. Sino que mientras se tenga un ancho de 599 pixeles, el largo de todos los contenidos será menor que cuando se tiene 767 pixeles. Esto se debe a que el tamaño de la imagen principal cambia considerablemente en contraste con los cambios generales de tamaño.


Comportamiento de la imagen

Se utiliza un slideshow con el fin de mostrar de mostrar seis imágenes distintas a la cabeza del homepage. Aún así, al disminuir el tamaño de la grilla, las imágenes disminuirán progresivamente. Debido a esto, con el fin de no bloquear la imagen en su totalidad, el cuadro de texto que antes era ubicado en la esquina derecha sobre la imagen, ahora se cambia por una caja de texto abajo de ella.

Es interesante observar que la imagen no se comporta de la misma manera que los cuadros de texto o botones, ya que disminuye proporcionalmente.


Debido a que en el tamaño máximo el slideshow presenta su navegación a través de un cuadro de imágenes bajo la imagen principal, al cambiar el tamaño aparecerán botones en forma de flecha, los cuales disminuirán también su tamaño proporcionalmente.

Botones Slideshow HomepageAIDS.jpg

Barras de Navegación

Los cambios más significativos dentro del Homepage se presentarán en la barra de navegación, ya que el cambio de tamaño es leve (cambiando solo la barra superior), sino que se incorporarán nuevos elementos de navegación. Así, ocurrirán dos grandes cambios: respecto a la forma de mostrar los contenidos del menú, y respecto al botón de búsqueda (search).


Cambios respecto a la disposición de contenidos: Debido a que al disminuir el tamaño de pantalla, no existe espacio para que los nombres de las secciones en el menú de navegación puedan ubicarse sin necesidad de disminuir el tamaño de su tipografía. Debido a esto, el sitio responde cambiando la barra por un botón de menú desplegable, el cual ocupa el espacio de toda la pantalla. De esta manera se puede navegar dentro de los mismos contenidos mostrados en la barra de navegación.


Cambios en el botón de búsqueda: Existe un cambio en la barra de navegación superior a partir de los 599 pixeles de ancho de pantalla. Esto no solo incluirá la eliminación de ciertos accesos hacia Blog y Provider Tools, sino que también exigirá un cambio en la disposición del botón de búsqueda. Para los tamaños menores la barra superior estará conformada únicamente por dos botones, de los cuales, al ingresar a Search, se desplazará la caja de búsqueda junto con su opción para cerrarla. Es interesante observar que, a pesar del cambio en la aparición del elemento de búsqueda, el tamaño de la caja no varía en altura (29 pixeles).


Aumento del Footer

Cabe destacar que el footer del sitios AIDS.Gov se compone de varios contenidos, ya que no solo se muestran todas las redes sociales de las que forma parte la organización, sino que también se hace un desglose de los contenidos generales del sitio. Ya que al reducir la pantalla en la que se visualiza el sitio no debería alterar los contenidos, para el caso del footer no se eliminarán contenidos. Por ende, su tamaño irá aumentando en la medida que la pantalla se va haciendo más pequeña.

Footer Medidad AIDS.jpg


Existirá un reajuste en la diagramación del footer respecto a los contenidos del sitio. Debido al disminución en el ancho, aquello que podía ser ubicado dentro de tres columnas donde cada sección (ítem en blanco) era ubicada en forma de lista, pasará a ser colocado uno al lado del otro, separados por medio de puntos. Aún así, al estudiar el caso mínimo que adquiere el sitio, los ítem vuelven a ubicarse en forma de lista, pero esta vez, en una sola columna.


A pesar de los cambios en los tamaños generales, ni la tipografía, ni los íconos de las redes sociales, ni el ancho de la caja de búsqueda cambiarán su medida.

Footer Redes SocialesAIDS.jpg


Elementos Visuales

Llamaremos elementos visuales a todos los íconos, pictogramas, signos, imágenes pequeñas que componen la página. Como fue visto anteriormente, los íconos de las redes sociales ubicados en el footer no varían su dimensión al cambiar el soporte. Esto mismo ocurrirá con ciertos elementos del contenido. A pesar de que la mayoría mantienen su mismo tamaño, para el caso del ícono de facebook, solo habrá un cambio en el formato mínimo debido a que el tamaño anterior es mayor que 400 pixeles.


Cabe destacar que el punto de quiebre cuando la ventana posee un ancho de 1006 pixeles se deberá únicamente a la disminución del tamaño del logo de la página, ubicado junto con los menús de navegación en el header. Este cambio leve, ya que no existe ningún reajuste respecto a la diagramación de los contenidos, se puede deber a que a esa medida los bordes externos desaparecen por completo. Ya que el logo excede el espacio del contenido hacia estos bordes, al desaparecer dicho margen, el logo debe ser reajustado.

Header 1280px
Header 1006px


Sección "News and Events"

Se elige la sección News and Events del sitio web con el fin de estudiar distintos comportamientos de la grilla en relación a imágenes de igual tamaño que funcionan como vínculos. De esta manera se observan tres cambios generales respecto al contenido: el primero será relacionado con la diagramación y cómo se disponen las distintas imágenes (diferente número de columnas). Por otro lado se estudiará como altera dicha diagramación a la barra lateral de noticias (ubicación y tamaño). Finalmente se prestará atención a los cambios en los elementos de utilidad que ofrece el sitio web.


Traslación de los elementos

Se determinan siete puntos de quiebre, sin contar el tamaño máximo. Estos puntos, como fue dicho anteriormente, influirán también en la eliminación de ciertos íconos, y de la imagen que encabeza la sección. Llama la atención que en ciertas ocasiones, el cambio de diagramación podrá ser influenciado entre un pixel y otro. En este caso, lo que ocurre al pasar de los 480 px a los 479 px. Durante esta transición se puede observar que no solo hay un reajuste el la grilla para las imágenes, sino que la imagen central es eliminada, y los íconos de opciones son reemplazados por textos y ubicados hacia el costado derecho.


Comportamiento de las imágenes

A pesar de que existen ocho variables para el diseño en pantallas distintas, solo se trabaja en base a tres tamaños de imágenes para el contenido. Es importante aclarar que la diferencia de tamaños no implica una reducción, sino que simplemente un corte. Es decir, la imagen no disminuye proporcionalmente, sino que es recortada desde su lado derecho.

Imagen NewsAIDS.jpg

Por otro lado, al igual que la imagen central en el Homepage, para el caso de la sección News and Events también tendrá una disminución. Es decir que, a diferencia de las imágenes utilizadas en el contenido, ésta no será recortada, sino que cambiará proporcionalmente hasta ser eliminada por completo.


Elementos de utilidad

Definiremos elementos de utilidad a los botones que proporciona el sitio con el fin de ayudar al usuario. Dichos botones se conforman de cuatro tipos de funciones: traductor, cambio en el tamaño de texto, impresión y contacto vía mail. A medida que la pantalla se reduce se podrá evidenciar que dos de los botones (traductor y de impresión) desaparecerán. Más adelante la iconografía dejará de existir, siendo reemplazada por botones con texto, ubicándose sobre el título de la sección.

Elementos News.jpg


Sección "New Media Tools"

Teniendo los distintos cambios en los elementos visuales y estructurales de los componentes principales de todas las secciones del sitio web, a través del estudio de la sección New Media Tools podremos observar un nuevo cambio al disponer los contenidos de un menú secundario en tamaños para soportes más pequeños. Debido a esto, los puntos de quiebre en esta sección irán determinados únicamente por los cambios en la barra de navegación de los contenidos.


Menú Ancla

Las anclas son hipervínculos que dirigen hacia lugares dentro de la misma página en la que se está navegando. El sitio web ofrecerá dicha posibilidad de menú en ciertas secciones que se componen de varios enlaces. Por ende, se observa que al disminuir el tamaño de la pantalla, lo que antes se conformaba por botones para generar los hipervínculos, pasarán a formar un menú de barra desplegable.



Al igual como ocurre con la caja del buscador para el header, la cual no cambia su altura al modificar la pantalla, para la caja del menú desplegable ocurrirá lo mismo. Tanto para los tamaños 767 px hasta 400 px, su altura se mantiene constante.


Artículo "What is HIV/AIDS?"

Finalmente se escoge una sección en donde se presenta un artículo, por ende, estará compuesto en su mayoría por texto. De esta manera se observarán los distintos cambios en la estructura al trasladar ciertos elementos, como la barra de contenidos, o simplemente al re-estructurar la grilla para los cuerpos de textos.


Traslación de los contenidos

Al disminuir el tamaño de pantalla los contenidos tienden a estructurarse en forma de columna, por lo tanto, la barra de contenidos dejará de ser una barra lateral ubicada a la izquierda, y se ubicará debajo del artículo.


Estilos Tipográficos

Para concluir el estudio se buscan los estilos tipográficos utilizados por medio del análisis de la cascada de estilo (CSS). Así, se determinan que la tipografía utilizada para todos los textos será Bebas Neue, desde el servidor en línea Font Face. Junto con esto, el sitio no presenta cambios en los tamaños tipográficos al reducir el tamaño de la pantalla. El tamaño se mantendrá constante, por ende, los ajustes estructurales se enfocarán en la grilla y en su diagramación.

Debido a que las unidades de medidas se encuentran en em, se calcula que los tamaños para los cuerpos de textos (párrafos) estarán en 12 pixeles, los títulos en 36 pixeles, y los subtítulos en 28 pixeles.



Spigot Design

Información y Contenidos

Los contenidos se mantienen estables a excepción de los componentes de la barra de navegación, en donde se cambian cierto botones por otros.

Estructura y diagramación

Header

El header estará conformado por el logo y la barra de navegación del sitio, la cual se mantiene a lo largo de todas las páginas en todos los formatos. Debido a esto, principalmente solo existirán cambios en la disposición de los botones de la barra. Cabe destacar que el header cambiará (en algún aspecto) dentro de los rangos de cuatro tamaños:

  • El tamaño es menor/igual a 440px
  • El tamaño es mayor a 440px y menor/igual a 690px
  • El tamaño es mayor a 690 y menor/igual a 770px
  • El tamaño es mayor a 770px (se estudia el caso para 1280px)

Se observarán dos tipos de cambios en la barra de navegación o header:

1. Cambios en la diagramación: mientras que para los tamaños mayores los contenidos están ubicados en una misma línea junto con el logo del sitio, al ir disminuyendo de tamaño, éstos son ubicados en dos filas distintas.

2. Cambios en el menú: Es el primer cambio que puede evidenciarse al modificar el tamaño de la pantalla ya que el botón de "Work with us" cambia de nombre a "Start", aunque ambos siguen vinculándose al mismo lugar. Este renombre no generará ningun cambio en la diagramación ni estructura de la barra. El segundo cambio en el menú surge al estudiar el caso para móvil. En esta ocasión el botón de "Start" desaparece, y se agregan dos botones más, adquiriendo una gráfica completamente nueva: "Call Us" y "Find Us".

Junto con esto es importante mencionar que el comportamiento del header cambiará para el formato para tablet, ya que, en casos anteriores la barra se mantiene fija sobre la parte superior de la pantalla, por ende, al hacer scroll siempre permanece visible. En cambio para el tamaño entre 440-690px el header no posee movilidad.

Footer

No existirá ningún cambio relacionado con los contenidos del footer, sino que serán más bien de organización de los elementos con el fin de que puedan ser ubicados en un espacio menor. A diferencia del header, el primer ordenamiento ocurre al disminuir la ventana a 920px, en donde los contenidos de "Contact" se contraen en una sola columna, en vez de las dos utilizadas anteriormente. Luego, pasado los 600px ocurrirá el cambio mayor, lo cual implica la caja para "Newsletter" en otra fila, en vez de utilizar la tercera columna. Finalmente, el último re-ajuste ocurrirá únicamente para los íconos de redes sociales ubicados en la esquina inferior derecha. Una vez alcanzado los 440px, éstos se colocan hacia el centro del cuadro, bajo los derechos de autor.


Junto con los cambios en la ubicación de los elementos existirá una leve alteración en el tamaño de la tipografía a los 690px. Se podrá observar que no solo las letras disminuirán su tamaño, sino que los íconos de Twitter, Facebook y MediaTemple también lo harán.

Contenido

Al estudiar los cambios ocurridos en el contenido se puede observar que, a pesar de que el sitio web es adaptable a distintos tamaños sin necesidad de utilizar un scroll horizontal, la diagramación no se emplea a su favor. Esto se ve reflejado en la columnas de texto, ya que se sigue utilizando el mismo número de columnas pero a un espacio más reducido. Al disminuir el espacio de trabajo quedarán líneas de textos con muy pocas palabras, lo cual no permite una lectura continua.


Conclusiones

Al diseñar un sitio web de forma que sea Responsive no solo se deberá tener en consideración que el sitio se vaya adaptando a los distintos formatos. No sirve simplemente que se pueda ver, sino se debe considerar los distintos propósitos de la navegación. Debido a esto, se deben recordar los principios básicos como la legibilidad y el buen uso de una grilla, lo cual el sitio Spigot Design no mantiene. El disminuir toda la estructura no será reflejo de un sitio navegable a la hora de visualizarlo en soportes más pequeños.

Finalmente, se deberá tener en cuenta los distintos factores en la navegación en base a cada soporte. Desde algo tan simple como que en móviles se utiliza los dedos para navegar, mientras que en un ordenador sea a través de un mouse. Este caso es un ejemplo claro para no perder el tamaño de ciertos botones, o simplemente al colocar elementos y fuentes demasiado pequeñas. Por ende, los diseños no solo deberán ser adaptables a otros soportes, sino que más bien funcionales.