Gobloomhealth

De Casiopea


TítuloGobloomhealth
Tipo de ProyectoProyecto de Taller
Palabras Claveresponsive design, diagramación, grilla
Período2013-2013
AsignaturaGráfica Digital 2013
Del CursoGráfica Digital 2013
CarrerasDiseño Gráfico
Alumno(s)Danila Ilabaca
ProfesorKatherine Exss
URLhttp://www.gobloomhealth.com/


Responsive design

El diseño adaptativo (Responsive Web Design, en inglés) es una técnica de diseño y desarrollo web que consigue adaptar el sitio web al entorno, tamaño de pantalla o dispositivo que el usuario esté utilizando.

Responsive-design.jpg

Los 3 pilares del Responsive Web Design

  • Mostrar texto e imágenes de manera legible en cualquier resolución de pantalla
  • No mostrar una barra de desplazamiento horizontal, sea cual sea el tamaño de la ventana
  • Dejar siempre espacio para hacer click en los enlaces o botones, el espacio debe ser lo suficientemente cómodo para pinchar con un dedo pulgar.

Ahora las empresas y marcas se enfrentan a un dilema, ya no solo requieren tener un sitio web, que en algunos casos para PYMES es de por si ya una inversion fuerte, sino que ahora es indispensable tener un sitio web para PC, iPhone, Blackberry, iPad, Kindle y un largo etcétera. La solución a esto se llama Sitio Web Responsivo, que como su nombre lo indica, es un solo sitio web que visualmente RESPONDE distinto a cada dispositivo desde el cual es accesado.

6a00d8341e626f53ef00e551ec20e48834-500wi.png


El sitio www.gobloomhealth.com como caso de estudio

Se toma como caso de estudio este sitio debido al modo en que se emplea el diseño responsivo. Al ser un sitio con menú, cuerpo de texto y dibujos se puede observar como estos elementos se mueven dentro del espacio del sitio, incluso algunos desaparecen simplificando la información.

Los cuatro tamaños disponibles en el sitio

www.gobloomhealth.com se encuentra disponible en 4 formatos, ya sea en el menú y en sus categorías los elementos se van ajustando manteniendo una grilla que se repite a lo largo del sitio, sin importas el tipo de contenido.

800px

Se observan dos casos recurrentes en el sitio, el primero es el home y el segundo es una subcategoría en donde hay un cuerpo de texto extenso.

En ambos casos en el tamaño más grande todo se divide en tres columnas verticales, en el caso del texto extenso solo se presenta de dos formas, una es en tres columnas y la otra es en una sola columna.

Captura de pantalla 2013-07-04 a la(s) 1.13.01.png

Movimiento de los elementos en relación al formato que se adapta

Para realizar el estudio de los cambios de diagramación se definen 7 tonos para representar elementos distintos que varían de posición, esto facilita el encontrar los cambios, ya que en ciertos casos es muy mínimo. Hay elementos que desaparecen, como por ejemplo el buscador y la imagen. También se observa que en el caso del formato móvil se resume la información.

  • Gris: títulos
  • Naranjo: Botones de menú rápido
  • Amarillo: Barra de menú superior
  • Café: Imagen
  • Azul: Cuerpo de texto
  • Fucsia: Buscador
  • Verde: Imágenes clickeables de otros sitios

Elementos-2.jpg

Observaciones con respecto a el cambio de diagramación

El home en el tamaño más grande es el momento en que se encuentran todos los elementos en su totalidad. La grilla principal está basada en tres columnnas verticales, los elememtos superiores estan separados en dos, y en el centro solo hay una. El menú superior esta justificado a la derecha, luego aparece ubicado en otras posiciones. Captura de pantalla 2013-07-04 a la(s) 0.45.58.png

El home en su segundo tamaño tiene cambios notorios.

  • El menú superior ahora está justificado a la izquierda
  • El título ahora está sobre el menú de navegación rápida.
  • Casi todos los elementos están justificados a los lados, ya no se observan los márgenes amplios anteriores, incluso los cuerpos de texto se ven cortados en sus inicios y finales.
  • Los elementos verdes ahora están en 5 columnas (antes en 2)

Captura de pantalla 2013-07-04 a la(s) 0.46.15.png

El tercer movimiento también mantiene todos los elementos.

  • El menú superior ahora está justificado de lado a lado.
  • Los elementos verdes ahora están en dos y tres columnas.

Captura de pantalla 2013-07-04 a la(s) 1.30.39.png

La versión móviles la que posee más cambios ya que reduce la información y hay elementos que desaparecen.

  • El menú de navegación superior ahora esta en dos líneas
  • El título cambia, ya que en los otros casos está en mayúscula y en la versión móvil está en minúscula, esto quizas puede generar confusión ya que las letras en mayúscula de los títulos son como el sello o logo del sitio.
  • Los elementos verdes vuelven a estar en dos columnas al igual que en el formato para pc.
  • La imagen que aparecía en café en móvil desaparece.
  • El buscador que antes estaba abajo también desaparece.

Captura de pantalla 2013-07-04 a la(s) 1.30.51.png

Cambios en el "Header"

En cuanto a los cambios en el header se observan leves cambios.

  • El logo permanece en los 4 formatos
  • El boton para ingresar al sitio "Member sign in" en el tercer tamaño pasa para abajo del menú, generando dos líneas en el header.
  • El logo en el formato para pc esta a la izquierda y luego esta centrado.
  • El menú desaparece en el formato móvil.

Captura de pantalla 2013-07-04 a la(s) 0.31.08.png

Cambios en el "Footer"

En el footer se observa cierta desconfiguración con respecto al buscador, ya que en el formato para pc notoriamente está bien diagramado, pero en los dos siguientes tamaños está fijado a un borde, lo que hace relacionarlo con un error.

  • El botón "Submit" en el formato para pc está dentro de la caja de búsqueda, en los otros casos se encuentra afuera.
  • El buscador desaparece en el formato móvil.
  • La palabra "Follow us" al lado de los logotipos de las redes sociales solo aparece en el formato para pc, luego en los tres formatos más pequeños solo aparecen los logotipos de las redes.

Captura de pantalla 2013-07-04 a la(s) 0.31.34.png

Cambios en la grilla según contenido

Captura de pantalla 2013-07-04 a la(s) 0.48.02.png Captura de pantalla 2013-07-04 a la(s) 1.18.13.png

Medidas en pixeles de los cambios de la grilla

Análisis tipografico

Fuentes Utilizadas

Copse

Images (1).jpeg

FF Clan OT Bold

Captura de pantalla 2013-07-11 a la(s) 1.35.56.png

Arial

Ariallll.jpeg

Títulos

Captura de pantalla 2013-07-11 a la(s) 0.21.18.png Captura de pantalla 2013-07-11 a la(s) 0.27.43.png


Botones

Captura de pantalla 2013-07-11 a la(s) 0.32.05.png

Menú

Captura de pantalla 2013-07-11 a la(s) 0.35.11.png

Cuerpos de texto

Captura de pantalla 2013-07-11 a la(s) 0.38.12.png Captura de pantalla 2013-07-11 a la(s) 0.41.46.png