Diferencia entre revisiones de «Caso de Estudio Sitio responsive; Sasquatch Festival»

De Casiopea
Línea 179: Línea 179:


====Medidas sitio para Smartphone (Vertical)====
====Medidas sitio para Smartphone (Vertical)====
[[Archivo:Sasquatch_construccion_iphone.jpg|thumb|200px|left|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'')
====Medidas sitio para Smartphone (Horizontal)====
====Medidas sitio para Smartphone (Horizontal)====



Revisión del 18:08 16 oct 2013

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

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)

Medidas sitio para Smartphone (Horizontal)

Gráfica

Tipografías

Color

Botones

Conclusiones