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/ |
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. 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.
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 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?"
_AIDS.png)
AIDS.png)
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 diaramación vertical. Así, el tamaños del footer (color morado) irá aumentando progresivamente, mientras que la fotografía principal (color verde oscuro) disminuirá.
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)
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.
Estilos Tipográficos
Elementos Visuales
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.
- 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
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.
