Grey goose
| Nombre | Grey Goose |
|---|---|
| Período | 2013-2013 |
| Palabras Clave | Responsive Design |
| Estudiado en | Gráfica Digital 2013 |
| Estudiado por | Catalina Reyes |
Responsive Design
El Responsive Design viene de la disciplina Responsive Architecture, que hace referencia a cómo espacios arquitectónicos pueden reaccionar frente a las personas a través de estructuras flexibles que responden ante la acción humana. Sugiere que tanto habitante y estructura deberían alimentarse mutuamente.
Algunos elementos a considerar dentro del Responsive Design son grillas fluidas, imágenes flexibles, tipografía adaptativa y media queries (módulo CSS3 que permite la representación de contenido para adaptarse a la resolución de pantalla). En vez de apuntar a construir contenidos específicos para cada tipo de tecnología, el uso de media queries indica una mejora en la visualización del sitio según el dispositivo empleado.
[Fuente ]
Caso Grey Goose
Se analiza el Responsive Design del sitio web de la marca Grey Goose (http://www.greygoose.com), una marca premium de vodka de nacionalidad francesa. El sitio incluye recetas, colecciones especiales de la marca, información para sus clientes y eventos de la marca.
El rediseño de su sitio estuvo a cargo de la agencia R/GA en el año 2012. El resultado es un sitio innovativo en torno a la experiencia del usuario que eleva la marca. Mediante Responsive Design, el sitio se optimiza automáticamente para pantallas de computadores, tablet y dispositivos móviles.
El sitio consta de cinco secciones principales, las cuales se acceden mediante el menu principal. Éstas son: Our Craft, Vodkas, Cocktails, Film & TV, Events y Golf.
Además de las principales, hay dos secciones secundarias que agrupan hipervínculos dentro y fuera del sitio, que son About Us y Social Leadership.
Las secciones más completas y llamativas para el usuario objetivo son Vodkas, Cocktails y Events.
Home
Apariencia 1280 x 800
Funciona mediante Parallax Scrolling, una técnica usada inicialmente en videojuegos para dar la ilusión de profundidad en dos dimensiones. Se trabaja por capas, en donde la imagen de fondo se mueve más lento que las imagenes de contenido. De esta manera, se construye una fluidez en el contenido de la Home del sitio.
Apariencia 840 x 682
Una vez que se va disminuyendo la resolución en la cual se visualiza el sitio, desaparece la técnica de Parallax para dar paso a una navegación fluida en donde los contenidos no van dispuestos por capas.
Apariencia 384x520
Mantiene la misma estructura que visualizado en tablet, siguiendo los margenes y tamaños tipográficos pero alargando el contenido verticalmente.
Comparación resoluciones
Grilla home para pantallas de computador
Grilla home para tablet
Grilla home para dispositivos móviles
Páginas interiores
Unas de las páginas interiores a destacar son las específicas de los tipos de vodka de la marca, donde fotografías que toman el centro de la página exponen las distintas cualidades de la bebida. Esta exposición se construye con el mismo método de Parallax Scrolling dentro del home en resoluciones de pantalla, mientras que para dispositivos móviles (tablet y celular), el sitio pasa a ser un Scroll Down regular.
Otras sub páginas son las recetas de cocktails usando la marca Grey Goose, donde se disponen una serie de preparaciones categorizadas según el producto o la ocasión e incluyen fotografías de alta calidad que las exponen.
Grilla 1 páginas interiores pantallas de computador
Grilla 2 páginas interiores pantallas de computador
Grilla páginas interiores para tablet
Grilla páginas interiores para dispositivos móviles
Menu principal
Apariencia 1280 x 800
Apariencia 840 x 682
El menú principal horizontal que se observó en el caso de pantallas de computador se reemplaza por una opción de menu en la esquina superior derecha que contiene todos los elementos navegables. Al hacer click sobre 'MENU', se lleva al usuario hacia el footer del sitio, donde se encuentra el contenido.
Apariencia 384x520
Comparación resoluciones
Grilla del menu para pantallas de computador
Grilla del menu para tablet
Grilla del menu para dispositivos móviles
Menú lateral
En pantallas de 1280 x 682, se dispone un menú lateral que permite navegar en las diferentes secciones del Home del sitio. Para tablet y dispositivos móviles, se retira esta barra lateral.
Estilos tipográficos
El sitio utiliza la tipografía sans serif Proxima Nova para títulos y rotulados de alta jerarquía o presentes en las páginas principales, mientras que para títulos en artículos presentes en páginas internas, se opta por una tipografía serif, Garamond.
Para los textos extensos presentes en el sitio, aparece listada la tipografía Helvetica seguida por la Arial en la cascada de estilos.
Proxima Nova fue diseñada por Mark Simmons en búsqueda de un híbrido que combina proporciones modernas con una apariencia geométrica. Fue lanzada originalmente en el año 1994 bajo el nombre de Proxima Sans, en seis familias tipográficas. En el año 2005 se relanzó bajo su nuevo nombre e incluyendo más de 40 familias tipográficas.
1280 x 800
En pantallas de mayor resolución se elige poner los textos por sobre la imagen de fondo, apostando por una tipografía clara en un tamaño grande, fácil de leer y comprensible.
Títulos y Rotulados
Texto continuo
840 x 682
En pantallas de menor resolución, el texto pasa a estar por debajo de la imagen previamente de fondo, lo que permite disminuir su tamaño para ajustarse a la pantalla.
Títulos y Rotulados
Texto continuo
384 x 520
Para dispositivos móviles, se mantiene el tamaño previo de tablet.
Títulos y Rotulados
Texto continuo
