Caso de Estudio: AIDS Gov

Título	Caso de estudio: AIDS Gov
Tipo de Proyecto	Proyecto de Taller
Período	2013-2013
Del Curso	Gráfica Digital 2013,
Carreras	Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)	Paulina Buvinic
Profesor	Katherine Exss
URL	http://www.aids.gov/

A continuación se presenta el caso de estudio para el portal informativo acerca del HIV del gobierno de Estados Unidos, denominada 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(1024 px), tablets (768 px) y móvil (320 px).

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

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 AIDS.Gov

• 

  Sección "News & Events"

• Barra Navegación (1280)AIDS.png

  Sección "Media Tools"

• Artículo (1280px)AIDS.png

  Artículo "What is?"

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.

Archivo:Comparación HomepageAIDS.jpg

Estructura Interna

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.

Archivo:Mapa Navegación Spigot.jpg

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)

Archivo:Barras de Navegación Comparación.jpg

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.

• SPIGOT 1440px Barra de Navegación.jpg

  Barra de Navegación y Scroll, 1280px

• SPIGOT 770px Barra de Navegación.jpg

  Barra de Navegación y Scroll, 770px

• 690px Barra de Navegación.jpg

  Barra de Navegación y Scroll, 690px

• SPIGOT 440px Barra de Navegación.jpg

  Barra de Navegación y Scroll, 440px

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.

Archivo:SPIGOT Footer Comparación.jpg

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.

Archivo:Comparación Tamaños Footer.jpg

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.

Archivo:SPIGOT Home Contenidos Comparación.jpg

Archivo:Comparación Service.jpg