Grey goose

De Casiopea






Caso de Estudio
NombreGrey Goose
Período2013-2013
Palabras ClaveResponsive Design
Estudiado enGráfica Digital 2013
Estudiado porCatalina 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.

Grey-Goose-Mobile.jpg

Mapa de Navegación

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.

Mapanavegoose.png

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.

Gifcompugoose.gif

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.

Giftabletgoose.gif

Apariencia 384x520

Mantiene la misma estructura que visualizado en tablet, siguiendo los margenes y tamaños tipográficos pero alargando el contenido verticalmente.

Gifmobilegoose.gif

Comparación resoluciones

Compahomegoose.png

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.

Compvodkasgoose.pngCompacocktailgoose.png


Menu principal

Apariencia 1280 x 800

Menuprincipalgoose1.png

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.

Menuprincipalgoose3.png

Menuprincipalgoose3.2.png

Apariencia 384x520

Menuprincipalgoose2.png Menuprincipalgoose2.2.png

Comparación resoluciones

Compamenugoose.png

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.

Menulateralgoose.png

Estilos tipográficos

Proxima Nova en distintos tamaños de pixeles

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

Textgoose1.1.png

Texto continuo

Cocktailscompdetail.png

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

Textgoose2.1.png

Texto continuo

Cocktailstabletdetail.png

384 x 520

Para dispositivos móviles, se mantiene el tamaño previo de tablet.

Títulos y Rotulados

Textgoose3.1.png

Texto continuo

Cocktailsmobildetail.png