Diferencia entre revisiones de «Caso de Estudio: AIDS Gov»

De Casiopea
Sin resumen de edición
Sin resumen de edición
Línea 123: Línea 123:


===Sección News and Events===
===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 al comportamiento de imágenes iguales 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 navegación (ubicación y tamaño). Finalmente se prestará atención a los cambios de ííconos hacia botones en las opciones que ofrece el sitio web.


[[Archivo:Sección News ComparaciónAIDS.jpg|center|700px]]





Revisión del 16:25 10 jul 2013

TítuloCaso de estudio: AIDS Gov
Tipo de ProyectoProyecto de Taller
Período2013-2013
Del CursoGráfica Digital 2013,
CarrerasDiseñ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
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. 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

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á.

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)

Error al crear miniatura: Archivo más grande que 25 MP


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 levemente), 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 variará 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 al comportamiento de imágenes iguales 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 navegación (ubicación y tamaño). Finalmente se prestará atención a los cambios de ííconos hacia botones en las opciones que ofrece el sitio web.



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