Caso de Estudio Sitio responsive; Sasquatch Festival

De Casiopea






Caso de Estudio
NombreCaso de Estudio Sitio responsive: Sasquatch Festival
Período2013-2013
Palabras Claveresponsive web, web design
Estudiado enTutorías Gráfica Digital 2013
Estudiado porCeleste Mardones

URL: Sasquatch Festival

Como nos enfrentamos los diseñadores a los sitios responsive

Las variables de resolución de los distintos dispositivos llevan a que como diseñadores nos veamos enfrentados a un sin numero de cambios en cuanto a las grafías; tamaños, interacciones y recursos deben adaptarse a las modificaciones sin que estas últimas sean un obstáculo, si no debemos convertirlo en una opción de desenvolvimiento de diseño.

Sobre el Sitio

El Sasquatch! Music Festival fue fundado en 2002 por el noroeste del Pacífico con sede en la promotora de conciertos Adam Zacks. Sasquatch! es un festival anual de música que tuvo lugar en el Anfiteatro Gorge , en George, Washington y en los últimos años ha tenido lugar en el Memorial Day fin con una duración de tres o cuatro días. Normalmente cuenta con una amplia gama de géneros musicales, con el énfasis puesto en el indie rock y bandas de música de autor , pero también de rock alternativo , hip hop , EDM , y actos de comedia. A partir de 2012, el festival cuenta con cinco etapas: Sasquatch! Escenario Principal, Bigfoot Stage, Plátano Cabaña (una tienda que ofrece música principalmente electrónica), escenario Yeti y escenario Maine. La mayoría de los asistentes al festival acampan en las cercanías gracias a que el lugar es relativamente remoto y no hay grandes zonas urbanas cercanas.

Elementos gráficos comunes entre desktop, tablet y smatrphone

Barras de navegación principal

La visualización superior para desktop y ipad presenta una barra de navegación rápida que contiene:

  • Schedule
  • sponsors
  • GALLERY
  • STORE
  • YEARBOOK

Además de una segunda barra que se encuentra bajo el logotipo, que presenta links para:

  • BUY TICKETS
  • LINEUP
  • NEWS
  • FESTIVAL INFO
  • TRAILER

Estas barras en el caso de la visualización para iphone dejan sólo una barra de navegación bajo el logotipo que presenta los links mas relevantes de las dos barras de visualización anteriores:

  • LINE UP
  • SCHEDULE
  • INFO

Mientras que los links de menor relevancia se muestran en una barra inferior, sobre el footer. Estos son

  • GALLERY
  • SPONSORS
  • STORE.

Logotipo

El logotipo presenta cambios sólo en el espacio en el que se enmarca, otorgandole mayor espacio al desktop e ipad mientras que en el caso del iphone muestra el mínimo de sangrías laterales. Además se agrega una leyenda en la esquina superior izquierda del logotipo.

Navegación

Desktop

  • Barra de navegación superior
Etiqueta loading
Archivo:Barra navegación schedule.png
Vista principal My Schudele

Al hacer click en uno de los elementos de la barra de navegación superior (ej, schedule) aparece una etiqueta loading en el lado superior izquierdo de la pantalla indicando que se esta procesando la tarea. El contenido de este link; muestra los eventos que ocurrirán en los horarios dados. Cada evento se enmarca dentro de un recuadro, donde existe un icono '+' en la parte inferior derecha de cada uno, al hacer hover sobre ellos aparece la posibilidad de agregarlos a my schudele,y al hacerlo aparece en la barra de navegación inferior (15) un globo con el mensaje diciendo que ya esta agregado.

Al hacer click en Sponsors nuevamente aparece la etiqueta loading y posteriormente cambia el main content apareciendo en 3 imágenes (como las imagenes circulares de los grupos invitados).

  • Barra de navegación inferior al logotipo

Al hacer click en Festival info nuevamente solo cambia el contenido del body mostranto la información del festival, con la opción de comprar los tickets.

  • Imágenes circulares
Vista al hacer click en imagenes circulares

Al hacer hover sobre alguna de las imagenes aparece un circulo de igual tamaño a la imagen con una flecha hacia la derecha indicando que se entrará a ver ese grupo, además de un cambio de color en la tipografia de amarillo a blanco, mostrando la diferencia del hover. Al ingresar, se mantiene el header y la parte del bod que contiene las imagenes circulares pero bajo ellas aparece la descripción del grupo seleccionado, historia, horarios, imagenes, etc. (no cambia url)

Ipad

Entre la visualización para desktop e ipad sólo varian los tamaños en pixeles de de los elementos, el único cambio 'significativo' es que en el footer del desktop los patrocinadores y redes sociales se muestran en una misma guia horizontan, mientras que para ipad las redes sociales se muestran bajo los patrocinadores. La barra inferior que se mantiene siempre en la parte baja al hacer scroll (que muestra MY SCHEDULE, MAP, PLAYLIST) se mantiene para esta visualización.

Iphone

  • Barra de navegación inferior al logotipo
Lineup visualización para iphone

De 5 elementos que aparecen en la visualizacion para desktop e ipad en iphone cambia a solo 3, manteniendose Lineup, Schedule e Info (esta ultima es la abreviación de festival info). Al presionar una de estas opciones (ej; lineup) los grupos aparecen con un ancho de 1 columna (en comparación a las 3 de desktop e ipad) como lista, sólo con los nombres del grupo.

Medidas sitio para Desktop

Visualizacion de elementos para Desktop

1 Barra de Navegación superior: 1265 x 45 px. Presenta 5 elementos:

  • Schedule de 76 x 40 px.
  • Sponsors de 83 x 40 px.
  • Gallery de 73 x 40 px.
  • Store de 50 x 40 px.
  • Yearbook de 92 x 40 px.

2 Logotipo: 960 x 243 px

3 Barra de Navegación 2 (bajo logotipo): 980 x 56 px Presenta 5 elementos:

  • Buy Tickets de 159 x 56 px
  • Lineup de 92 x 56 px
  • News de 70 x 56 px
  • Festival Info de 191 x 56 px
  • Trailer de 108 x 56 px.

4 Official Poster: 279 x 144 px

5 Imágenes circulares: 259 x 260; relleno 19 px por lado; borde 1 px por lado y margen de 1 px. Se muestran 6 imágenes en total, divididas en 3 columnas.

6 View Full Lineup 335 x 60 px, sin borde ni margen

7 Where's the gorge? de 160 x 160 px

8 Tickets and pricing de 160 x 160 px

9 Camping at the festival de 160 x 160 px

(estos tres elementos -7, 8 y 9- se ubican en la grilla de 3 columnas, igual que las imágenes -5-)

10 Propaganda de 720 x 89 px

11 -12 Big News! imagenes de 470 x 290 px sin borden ni margen (Estos dos elementos siguen la grilla de 2 columnas)

13 Productores; Contiene 3 links:

  • Live Nation de 214 x 26 px
  • Adam Zacks de 221 x 56 px.
  • WNTR de 107 x 26 px.

14 Redes sociales; de 70 x 70 px. cada una (facebook, twitter, statigram) (Productores y redes sociales en una misma línea horizontal)

15 Barra inferior:1265 x 50 px Mientras se realiza el scroll, esta barra se mantiene presente siempre al final de la pantalla. Contiene 2 grupos de elementos; a la izquierda iconos de play, rw y fw para escuchar música de fondo y a la derecha links para My schedule, Map y Playlist

Medidas sitio para Ipad

Visualización de elementos para IPAD

1 Barra de navegación superior: 1003 x 45 px. Presenta 5 elementos:

  • Schedule de 76 x 40 px.
  • Sponsors de 83 x 40 px.
  • Gallery de 73 x 40 px.
  • Store de 50 x 40 px.
  • Yearbook de 92 x 40 px.

2 Logotipo: 727 x 188 px.

3 Barra de Navegación 2 (bajo logotipo): 728 x 50 px Presenta 5 elementos:

  • Buy Tickets de 127 x 50 px
  • Lineup de 74 x 50 px
  • News de 56 x 50 px
  • Festival Info 153 x 50 px
  • Trailer de 87 x 50 px.

4 Official Poster:

  • Globo: 144 x 144 px;
  • Texto: 279 x 37 px.

5 Imágenes circulares: 184 x 185 px; Relleno de 12 px por lado; Borde y margen de 1 px por lado. Se muestran 6 imágenes en total, divididas en 3 columnas.

6 View Full Lineup: 335 x 60 px

7 Where's the gorge?: de 140 x 140 px

8 Tickets and pricing: de 140 x 140 px

9 Camping at the festival: de 140 x 140 px

10 Publicidad: 720 x 89 px

11-12 Big News!: Imagenes: 345 x 213 px (Estos dos elementos siguen la grilla de 2 columnas)

13 Productores; Contiene 3 links:

  • Live Nation de 214 x 26 px
  • Adam Zacks de 221 x 56 px.
  • WNTR de 107 x 26 px.

14 Redes sociales; de 60 x 60 px. cada una (facebook, twitter, statigram) (Redes sociales bajo Productores)

15 Barra inferior: 1003 x 50 px Mientras se realiza el scroll, esta barra se mantiene presente siempre al final de la pantalla. Contiene 2 grupos de elementos; a la izquierda iconos de play, rw y fw para escuchar música de fondo y a la derecha links para My schedule, Map y Playlist

Medidas sitio para Smartphone (Vertical)

Visualización de elementos para Iphone 3

1 Logotipo: 291 x 74 px.

2 Barra de Navegación 2 (bajo logotipo): 290 x 42 px Presenta 3 elementos:

  • Lineup de 55 x 42 px
  • Schedule de 76 x 42 px
  • Info de 39 x 42 px

3 Imágenes circulares: 253 x 253 px; sin relleno ; Borde de 1 px.

4 Where's the gorge?: Imagenes circulares de de 60 x 60 px.

5 Tickets and pricing Imagenes circulares de de 60 x 60 px.

6 Camping at the festival Imagenes circulares de de 60 x 60 px.

7 Publicidad: 228 x 130 px

8 Big News!: 290 px de ancho de caja (Para los elementos 8, 9 10 y 11)

12 Barra inferior: 320 x 35 px Presenta 3 elementos;

  • Gallery: de 61 x 35 px
  • Sponsors: de 69 x 35 px
  • Store de 41 x 35 px.

13 Productores; Contiene 3 links:

  • Live Nation de 214 x 26 px
  • Adam Zacks de 221 x 56 px.
  • WNTR de 107 x 26 px.

14 Redes sociales; de 70 x 70 px. cada una (facebook, twitter, statigram) (Redes sociales bajo Productores)

Gráfica

Para este sitio la tipografía y color es la siguiente (se muestran tamaños de elementos de barras de navegación)

  • font-family: "Kabel W01 Black", Helvetica, Arial, sans-serif
  • font-size: 18px
  • font-weight: 400
  • font-style: normal
  • font-size-adjustnone
  • color: #875129
  • text-transform: uppercase
  • text-decoration: none
  • line-height: 40px
  • text-align: center
  • vertical-align: baseline
  • MARGENES: none
  • border-top-color: #875129
  • border-right-color: #875129
  • border-bottom-color: #875129
  • border-left-color: #875129

Conclusiones

Las variables de resolución de los distintos dispositivos llevan a que como diseñadores nos veamos enfrentados a un sin numero de cambios en cuanto a las grafías; tamaños, interacciones y recursos deben adaptarse a las modificaciones sin que estas últimas sean un obstáculo, si no debemos convertirlo en una opción de desenvolvimiento de diseño.

Con respecto a las caracteristicas del responsive desing debemos tener en cuenta en primer lugar el cómo adaptamos los elementos dentro de las distintas resoluciones, esto sin dejar de lado que los ajustes no deben ser por defecto si no que siempre pensados para cada una de las medidas, sean estas infinitas. Por lo tanto entra de lleno la arquitectura de la información - que aunque muchas veces construida para UNA pantalla- en este caso debemos como diseñadores dejar de lado el pensamiento de que trabajamos para una matriz definida sino que debemos lograr mantener un diseño centrado en el usuario y su usabilidad sin perder la organización.