Caso de Estudio: Earth Hour

Caso de Estudio
Período	2014-2014
Período	IIº Trimestre
Palabras Clave	responsive, earth hour
Estudiado en	Gráfica Digital 2014
Estudiado por	Carla Cárcamo

Introducción

The Earth Hour

• Objetivo:

El objetivo de éste sitio es difundir y promover el cuidado del planeta a través de diferentes métodos, tales como la participación a través del darle la posibilidad al usuario registrado de contar su proyecto. La idea es motivar a las personas a que cuiden el planeta de diferentes formas, su naturaleza y su belleza.

Junto con su lema...

"On Saturday 29 March 2014 at 8:30pm, millions of people across the world switched lights off for one hour - to celebrate their commitment to the planet. Now, go beyond one hour."

Se pretende crear conciencia a las personas acerca de las decadencias que ha sufrido el medioambiete por culpa del hombre. Entrega datos impactantes de una forma dinámica con una gran cantidad de imágenes, historias de proyectos realizados y proyectos a futuro.

Desarrollo

Análisis

Se realizará un análisis del sitio con el objetivo de observar aquellos cambios que ocurren en un sitio responsive, donde hay una variedad de tamaños a los cuales se crean diferentes márgenes, tamaños tipográficos,etc.

Cambios en las pantallas

Se eligen tres tamaños de pantallas distintos, donde cada uno de ellos se analizará en paralelo al otro.

Grilla

Se percibe que el cambio de la grilla a medida que se minimiza la pantalla se va "simplificando".

En el tamaño de la pantalla de computador se diferencian tres tamaños de columnas diferentes que se repiten y toman un ritmo que ocurre a través del descubrimiento de una constante.

Márgenes

Dentro de la primera imagen que aparece, como totalidad de pantalla, es posible distinguir un título principal donde se ve una diferencia de tamaños del mismo.

Se constatan las siguientes cosas en cuanto a los márgenes:

• Hay una relación directamente proporcional entre el tamaño de la pantalla y su margen lateral.
• El margen que va desde el límite inferior del menu hasta donde aparece la primera imagen aumenta en un 72% la cantidad de pixeles con respecto al tamaño de la pantalla del tablet.
• Hay una repetición de éste margen en el móvil en la pantalla de computador.
• En cuanto al ancho del párrafo tiende a ocupar un 40% del total de la pantalla del complutador.
• El ancho del título en el tablet utiliza un 69,21% del total de la pantalla.
• El ancho del título en el móvil utiliza un 75% del total de la pantalla.

Tipografía

A través del análisis tipográfico es posible aprender ciertas reglar standar que se producen al momento del aumento de la pantalla.

Durante éste análisis ocurre un caso en que la tipografía aumenta en relación al tamaño de la totalidad de la pantalla, por lo que se concluye la relación inversamente proporcional entre el tamaño de pantalla y el tamaño del título.

Tamaños y fuente tipográfica

Helvética y Lato en un cuerpo del 87,5% y posee un peso (font-weight) de 400 y un interlineado de 1,5.

El sitio presenta 6 tamaños diferentes de heading:

1. h1: font-size: 2em; margin: 0.67em 0
2. h2: font-size: 1.5em; margin: 0.83em 0
3. h3: font-size: 1.17em; margin: 1em 0
4. h4: font-size: 1em; margin: 1.33em 0
5. h5: font-size: 0.83em; margin: 1.67em 0
6. h6: font-size: 0.75em; margin: 2.33em 0

Título inicial:

• fuente:Lato
• size: 2,7em
• weight: 1
• centrado
• color: #fff

Texto footer:

• color: #76797c
• size: 0929em

Texto menú:

• color: #fff
• size: 13px

Título imágenes principales:(Celebrate the earth hour)

• color: #fff
• size: 1,286 em
• weight: 700
• line-heigh: 1,2

Imágenes

Si tomamos un caso de una de las imágenes iniciales del sitio como referencia, y la utilizamos como representante de un 100%, es posible afirmar que la utilizada en el tablet sería un 91,22%, y la del móvil sería de un 100% nuevamente.

El uso de la imagen en el sitio web va aumentando su importancia en los móviles debido a que su grilla se transforma en una grilla mucho más simple que la del computador.

Con respecto a las proporciones de espacio que utiliza la imagen con respecto a su patalla seríasn las siguientes:

• computador:15,77%
• tablet:24,57%
• móvil:67,32%

A través de un cambio de tamaños de pantalla fueron presentándose momentos en que las imágenes y grilla cambiaba de un momento a otro, es decir, una imagen pasaba de estar bajo otra, a presentarse a su lado.

La identificación de éstos momentos permite la visibilidad que otorga el diseñados del punto límite que se estableció.

Inicio Completo

Originales

En el sitio original de The Earth Hour se escogen tres tamaños diferentes. Todos éstos tamaños de soportes tienen un scroll vertical en donde se despliega la información y contenidos del sitios. Van apareciendo imágenes como botón.

Se observa un claro diseño responsive en diferentes objetos como el cambio del tamaño del footer. También se ve el traspaso de imágenes desde un lado hacia abajo.

Hay un caso recurrente entre el tablet y el computador que los une en su primera sección superior observable, ésta es el mantenimiento de las tres imágenes principales bajo el título, que cambian sus dimensiones pero se mantienen las mismas una al lado de la otro como imagen principal de recibimiento al sitio.

Comparación con su distribución en el espacio

Para lograr un mejor análisis de los cambios en el sitio, se dibujaron los elementos distinguibles con una paletade color:

• gris: sección del texto (menú, footer, título, bajadas de imágenes)
• celestes: imágenes principales (primer tamaño de imagen)
• rosados: primeras imágenes de la sección inferior (segundo tamaño de imagen)
• verdes: imágenes pequeñas
• café: textos del footer
• morado: redes sociales del footer

Computador

Se distinguen seis elementos principales con tamaños específicos para cada uno, los cuales son los siguientes:

• menú
• título
• tamaño de imágenes 1 (3), ubicadas con márgenes amplios separadas del resto y centradas.
• tamaño de imágenes 2 (2), ubicadas junto al tamaño más pequeño pero en el centro y el costado izquierdo.
• tamaño de imágenes 3 (7), ubicadas como borde inferior y del costado derecho de las imágenes del tamaño 2.
• footer

• 
• 

Tablet

En el caso de los tablets se mantienen la distribución de los elementos pero hay ciertos cambios, por lo que los elementos serían los siguientes:

• menú, surge un cambio drástico y pasa a eliminar los textos en él, pasando a transformarse en un botón símbolo ubicado en la esquina derecha.
• título
• tamaño de imágenes 1 (3), ubicadas con márgenes amplios separadas del resto y centradas.
• tamaño de imágenes 2 (2), ubicadas junto al tamaño más pequeño pero en el centro y el costado izquierdo.
• tamaño de imágenes 3 (7), ubicadas como borde inferior y del costado derecho de las imágenes del tamaño 2.
• footer

Pero en este soporte hay cambios en los tamaños de las imágenes en comparación con las del computador, y junto a ello ocurre un cambio principalmente de los márgenes exteriores del sitio. A ésto se le suma el cambio del menú mencionado anteriormente.

• 
• 

Móvil

En el sitio, la distribución de los elementos de la página pasa a tomar una forma mucho más simple, hay un cambio en las jerarquías de las cosas,ya que van a tomar un mismo tamaño. Por lo que los elementos pasan a ser los siguientes:

• menú (símbolo móvil)
• título
• tamaño de imágenes 1, pasan de ser las principales pero de un tamaño medio, a ser las más pequeñas pero que tienen mayor protagonismo debido a su margen inferior de separación con el "resto"(tamaño de imagen 2 y 3)
• tamaño de imágenes 2, son las que anteriormente en el tablet y computador eran los tamaños 2 y 3, pasan a formar parte del mismo tamaño visible con los mismo márgenes.
• footer

• 
• 

Distribución computador-tablet-móvil

En los tres formatos es posible disitnguir en la totalidad de la página cuatro secciones en la página.

• menú:
• Pasa de un primer estado de computador, donde presenta un mayor despliegue en el espacio, es decir, hay escrito y ocupa una mayor cantidad de pixeles en su medida vertical.
• Pasa a estar en un tamaño donde en el tablet hay una reducción de su número de pixeles verticales y junto a ello pasa el estados del despliegue de palabras a un símbolo que recoge un abre una nueva sección.
• Finalmente en el tamaño vertical igual al del tablet, pero su distinción por lçogica es el tamaño horizontal que en el móvil es mucho más reducido.

• sector principal (primera pantalla):Se compone de dos elementos que son el títlo del sitio junto con tres imégenes centradas separas pon un margen interior considerablemente menor que el exterior.
• En el tamaño del computador se distingue prinicipalmente por dos factores que son la amplitud de los margenes exteriores a la sección, tomando mayor importancia en esta separación el margen inferior a las imágenes; y la centralización de ambos elementos, creando un margen exterior mayor a los otros sectores.

• imágenes: Donde se componen de dos tamaños de imágenes aparte de las del sector principal.
• En el computador se crea una sección unificada a través de márgenes mínimos, rodeados por uno superior e inferior mayor.
• En el tablet no hay una gran distinción del sector en comparación con el computador ya que utiliza el mismo sistema de unificación a través de márgenes pequeños rodeados. La diferencia es que pasa un tamaño de imagen desde un costado a posicionarse bajo la otra.
• En el móvil pasan a formarse una bajo otra, perdiendo la distinción de dos elementos a través de la jerarquía de tamaños, pero se distinguen del primer sector por le margen superior y del footer por lo mismo.

• footer:
• En el computador posee un espacio horizontal que es mayor que al vertical donde hay cuatro columnas de elementos
• En el tablet las redes sociales pasan de ubicarse a la derecha de las columnas a abajo de las columnas,
• En el móvil el espacio vertical supera en amplitud al horizontal, y se forma sólo por dos columnas de elementos y abajo de ellos la conexión a las redes socilaes.

Celebrate the Earth Hour

"celebra la Hora del Planeta"

A continuación se realizará un análisis de una de las páginas interiores del sitio. Ésta sección se conecta a través de una de las primeras imágenes del inicio.

En esta sección de ven cuatro secciones y hay aparición de elementos nuevos.Psra utilizar el mismo método de análisis de antes, también se dibujarán las imágenes, pero al haber nuevos elementos se cambiará la paleta de colores:

• amarillo: imagen inicial de fondo (no clikleable)
• gris: espacio de textos
• celeste: mayor tamaño de imágenes como botón.
• rosado: imágenes pequeñas, mismo tamaño que verdes pero diferencia en apariencia
• verdes: imágenes pequeñas, mismo tamaño que el rosado pero diferencia en apariencia.
• café: textos del footer
• morado: redes sociales del footer

Computador

Se distinguen seis elementos principales con tamaños específicos para cada uno, los cuales son los siguientes:

• menú
• título
• tamaño de imagen 1 (1), ubicadas como fondo de título
• Opción de compartir en redes sociales, ubicada entre la imagen del fondo del título y el sector de las imágenes de tamaños 2 y 3.
• tamaño de imágenes 2 (2), ubicadas junto al tamaño más pequeño pero en el centro y el costado izquierdo.
• tamaño de imágenes 3 (7), ubicadas como borde inferior y del costado derecho de las imágenes del tamaño 2.
• footer

• 
• 

Tablet

Es la misma cantidad de elementos que en el computador y mantiene algunos elementos del home.

• menú: se mantiene igual que el inicio del tablet
• tamaño de imagen 1 se adapta al tablet, disminuyendo su tamaño
• La opción de compartir en las redes sociales mantiene el mismo tamaño.
• tamaño de imágenes 2 (2), ubicadas al costado izquierdo pasa a estar una sobre otra.
• tamaño de imágenes 3 (7), ubicadas como borde inferior y del costado derecho de las imágenes del tamaño 2. En éste tamaño de imágenes pertenecen las rosadas y las verdes.
• footer: Se mantiene el footer, es decir, es igual al mencionado en el inicio.

• 
• 

Móvil

Se produce un gran cambio en el móvil debido a que desaparecen elementos.

• menú: se mantiene del inicio
• título: pasa a estar formado por cuatro filas de texto
• imágenes tamaño 2 y 3: desaparecen las diferencias de tamaños, por lo que encontramos a las de color verde, rosado y celeste.
• footer: se mantiene el footer del inicio

• 
• 

Desaparece la imagen de fondo del título y pasa a ser un sector de color

Distribución computador-tablet-móvil

menú: Sufre los mismos cambios descritos en el análisis del home.

sector inicial

• Computador: Consta de un título alineado a la izquierda y ubicado a la derecha de la pantalla teniendo en total cuatro líneas, con tres tamaños de texto. Bajo el título se encuentra una imagen que ocupa la totalidad de la horizontalidad de la pantalla. Éste sector consta de éstos dos elementos que son separados del siguiente sector por el margen inferior. Pero además, por una pequeña franja que es el elemento que da la posibilidad al usuario de compartir la página en las redes sociales como twitter y facebook.
• Tablet: Consta de los mismos elementos que el computador pero hay una disminución de la imagen de fondo y se conserva el tamaño del elemento separador por lo que aumenta su protagonismo en proporción al espacio. El título consta de cinco líneas.
• Móvil: Se elimina la imagen de fondo y pasa a conformarse un color de fondo del título que ahora esta compuesto por siete líneas.

imágenes

• Computador: Consta de dos tamaños de imágenes, pero todas las verdes al costado derecho y solo una en la esquina izquierda. La secuencia del tamaño de imágenes más pequeño en cuanto a su apariencia sería v-v-v-r-r-r-v
• Tablet: Cambian el tamaño de imágenes 2 a estar uno sobre otro y la imagen verde encontrada en la esquina inferior izquierda pasa a la esquina inferior derecha. La secuencia de las imágenes pequeñas sería v-v-v-r-v-r-r.
• Móvil: Existe solo un tamaño de imágenes, todas con los mismos márgenes exteriores y entre ellas. Se juntan las tres imágenes rosa finalizadas por una verde; por lo que la secuencia sería: v-v-v-r-r-r-v.

footer: Sufre los mismos cambios descritos en el footer del inicio.

Add Your Voice

A continuación se realizará un análisis de una de las páginas interiores del sitio. Ésta sección se conecta a través de una de las primeras imágenes del inicio.

Para utilizar el mismo método de análisis de antes, también se dibujarán las imágenes, pero al haber nuevos elementos se cambiará la paleta de colores:

• amarillo: imagen inicial de fondo (no clikleable)
• gris: espacio de textos
• celeste: mayor tamaño de imágenes
• rosado: imágenes pequeñas
• café: textos del footer
• morado: redes sociales del footer

Computador

Hay una serie de elementos nuevos que aparecen, tales como tres botones que se encuentran entre la sección del título y la de las imágenes, que dan la opción de elegir un país, una campaña y una acción.

Es necesario mencionar que comp primera imagen total de la sección no se nota el nivel de orden que en el inicio, debido a una distribución de las imágenes de dos diferentes tamaños de manera desordenada.

Tablet

Se mantienen los elementos pero pasa de verse como una totalidad desordenada a obtener un orgen en su sitio. Basado en tres columnas principales donde un elemntos se coloca sobre otro (imágenes). También hay un cambio en la posición de los botones ya que pasan a estar solo dos arriba y el tercero pasa a ubicarse bajo los otros.

Móvil

Se nota en un principio un aumento notabla en la cantidad de texto utilizada en la parte superior de la página, debido a que junto al título y bajada correspondiente, se suman los botones como sectores de texto.

Pasa a tener sólo un tamaño de imagen, y desaparecen márgenes que en otras secciones eran vitales para la distinción de sectores del sitio, tal como pasa entre el color de fondo del título y la imagen que le sigue.

Distribución computador-tablet-móvil

Durante esta transición de pantallas es posible resumir que lo cambios notables a través del color son los siguientes:

• El cambio del menu extendido, a compensado como botón
• El aumento de líneas en el título
• La posición de las imágenes de una ditribución mas dinámica que a juicio personal es más difícil de entender, al orden del tablet y la orden máximo en una fila del móvil.
• La aparición de botones en la parte superior de la página( en comparación con otros sectores del sitio).
• La aparición de bajadas de imagen en todas las que aparecen en ésta sección.

Footer y Header

Al sitio poseer diferentes tamaños de diseño, se distinguen cambios en sus elementos constantes en todo el sitio, como lo son el footer y el header, los cuales cambian dependiendo del soporte o se mantienen.

Cambios en el menú

Durante el Análisis del menú se decubren diferentes cambio y algunos elementos que se conservan.

Acceso

• Primero en el computador hay un despliegue directo ya que aparecen cuatro opciones desplegables, pero que al pasar sobre la sección aparecen automáticamente.
• En el tablet, pierde esa cualidad y pasa a presentarse a través de un paso más que aparece como la opción de botón, donde se presenta en un alto de 53px en un ancho de 800px.
• En el móvil aparece también como botón.

Tamaños

1)Alto espacio negro:

• Computador:Posee un alto de 95 px en un ancho de 1366px
• Tablet: Posee en alto de 53px en un ancho de 800px
• Móvil: Posee en alto de 53px en un ancho de 340px

2)Símbolo como botón izquierdo(con el que se vuelve al inicio)

• Computador: (49x49)px
• Tablet: (38x38)px
• Móvil: (38x38)px

3)Símbolo del panda

• Computador: (47x28)px
• Tablet: (47x28)px
• Móvil: (47x28)px

Cambios en el footer

Se analizan los cambios en el footer y los elementos que permanecen.

Ubicación

• Primero en el computador hay 4 columnas de texto separas del espacio de las redes sociales que se encuentran a su derecha.
• En el tablet cambia la ubicación de las redes sociales a abajo de las columnas de texto, transformándolo en un espacio apaisado, pero mantiene las 4 columnas de texto.
• En el móvil hya una transformación de las 4 columnas, ubicando una sobre otra, haciendo solo 2, y situando el espacio de redes sociales bajo las columnas pero centrado.

Tamaños

1)Espacio total del footer (altoxancho):

• Computador: (227x1366)px
• Tablet: (253 x 800)px
• Móvil: (537x340)px

2)Espacio redes sociales (analizado anteriormente como morado morado):

• Computador: (76x208)px
• Tablet: (30x404)px
• Móvil: (76x208)px

3)Alto por ancho de cada columna:

• Computador: (125x113)px
• Tablet: (125x113)px
• Móvil: (144x91)px

Conclusión

Para concluir el estudio, es posible dar cuenta de algunos errores dentro del sitio.

El primero de ellos es la cantidad de imágenes en el home, en el sector del medio, debido a ésto, y a que no sean parte de una galería sino que cada una presente un botón como sección(11). Junto con ello, en el home , en la esquina izquierda de las fotografías de mayor tamaño hay un leve título de la sección "highlights" (destacados), el cual no es distinguible a primera vista, debido a su leve contraste con la fotografía y su tipografía tan delgada. Tal vez podría estar, ese pequeño título de la sección, fuera de la fotografía.

Otro error es observado en la sección de "Add Your Voice" debido a que hacen un cambio que a modo personal, es considerado innecesario, éste es el cambio de la distribución de imágenes, usando el mismo tamaño de imágenes que en la sección "Celebrate the Earh Hour", las distribuyen diferente, haciendo pensar que ocurre por alguna razón en especial. Pero en el tablet luego pasa a tener la misma distribución de imágenes en ambas secciones.

Algunos de los acierto es la manera en que se mueve la página, es decir, cómo se disminuye en espacio vertical utilizado por el menú al bajar el scroll en el computador. También la forma en se van agregando las imágenes a medida que se ensancha la pantalla, lleva a que el cambio se visto como parte de un juego en donde uno ve el proceso donde se agrega una columna, o se cambia una imagen por otra de un tamaño diferente.

Análisis de divs

https://www.dropbox.com/sh/575008j4sqjxivu/AABTnwBHtoMrvaiB3Uu8vhDWa/the_earth_hour