Gobloomhealth
Título | Gobloomhealth |
---|---|
Tipo de Proyecto | Proyecto de Taller |
Palabras Clave | responsive design, diagramación, grilla |
Período | 2013-2013 |
Asignatura | Gráfica Digital 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) | Danila Ilabaca |
Profesor | Katherine Exss |
URL | http://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.
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.
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.
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.
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
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.
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)
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.
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.
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.
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.
Cambios en la grilla según contenido
Medidas en pixeles de los cambios de la grilla
Análisis tipografico
Fuentes Utilizadas
Copse
FF Clan OT Bold
Arial
Títulos