Caso de Estudio Sitio responsive; Sasquatch Festival

De Casiopea
TítuloCaso de Estudio Sitio responsive: Sasquatch Festival
Tipo de ProyectoProyecto de Tutoría
Palabras Claveresponsive web, web design
Período2013-2013
Del CursoTutorías Gráfica Digital 2013,
CarrerasDiseñ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)Celeste Mardones
ProfesorSylvia Arriagada, Jaime Pérez Moena
URLhttp://www.sasquatchfestival.com/

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

Visualización de contenidos

Diferencias en la visualización entre dispositivos

Grillas

Diferencias en la grilla entre dispositivos

Medidas sitio 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

9Camping 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-)

10Propaganda 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

Medidas sitio para Smartphone (Vertical)

Medidas sitio para Smartphone (Horizontal)

Gráfica

Tipografías

Color

Botones

Conclusiones