Caso de estudio: NBC

De Casiopea


TítuloCaso de Estudio: NBC
Tipo de ProyectoProyecto de Taller
Palabras Clavediseño gráfico, taller de construcción
Período2013-2013
AsignaturaConstrucción de Diseño Gráfico 4,
Del CursoConstrucción 4º DG 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)Francisca Wevar
ProfesorKatherine Exss

Sobre el sitio

Se elige el sitio web de la cadena de televisión norteamericana NBC. Del caso se estudia la página principal y los subsitios o páginas correspondientes a los distintos programas que se emiten en el canal de televisión. Adicionalmente, se toma como referente la página de fotos de los subsitios para constatar si esta se mantiene o cambia según el sitio.
El sitio consta de al menos 34 subsitios propios de cada programa en el aire, los que comparten la misma estructura con ciertos cambios.

Tipos de plantillas

  • Tipo A) Página Principal
  • Tipo B) Páginas o subsitios: Posee 5 plantillas.
  • Tipo C) Páginas Photos: Posee 2 plantillas.

Para facilitar el estudio de las plantillas A y B se les divide en secciones, de esta forma se pueden comparar puntualmente los elementos presentes en una u otra plantilla.


1. Elementos comunes a plantillas A y B.

Sección 1

a)Header: Existen dos tipos de encabezado o header.
a.1) Header Angosto que contiene el menú y logo del canal NBC.
a.2) Header Ancho que que contiene el menú

b) Banner: Ambos ofrecen un contenido "destacado" no obstante se diferencian en dos tipos:
b.1) Estatico
b.2) Animación: El banner se encuentra animado deslizando, lo que también se denomina slide- presentando ciertos contenidos destacados.
OBS. La presencia de un tipo de banner u otro implica la existencia de otros elementos que se le asocian.

Sección 4

  • Todas las plantillas poseen una grilla permanente para el contenido destacado o "principal". No obstante, este último no se encuentra asignado a un a un tipo de cuadro especifico dentro de la grilla indiferentemente de que esta se mantenga.
  • Caja de contenido: El contenido se encuentra dentro de una caja que a su vez se encuentra contenida en la caja que contiene a la página. La variable dentro de este elemento es que las plantillas B y C poseen un fondo transparente o solido a diferencia de la página principal, en la que la caja de contenido no está definida por un fondo, y de hecho, es atravesada de transversalmente por fondos horizontales.
  • Footer: Que contiene vínculos a los subsitios de los demás shows y la tienda online de NBC.

1.1 Elementos comunes plantillas A, B y C.

  • Header
  • Footer
  • Menú de contenidos del show (cambia la ubicación) y la animación de los vínculos en este.
  • Tipografías y tamaño de estas.


2. Plantillas tipo B

2.1. Elementos comunes en plantillas tipo B

Sección 2

  • Menú de contenido: Ubicado bajo el banner. La cantidad de vínculos a los distintos contenidos es independiente de un programa a otro.
  • Video principal
  • Barra lateral derecha: Comúnmente reserva espacio para la publicidad y botones de redes sociales además de cierta información. Lo que varia entre una plantilla y otra es la posición del anuncio y los botones y en un solo caso, la plantilla n°4, cambia el tipo de información disponible.

2.2 Elementos diferentes en plantillas tipo B

Sección 1

a) Comportamiento del banner: Ambos ofrecen un contenido "destacado" no obstante se diferencian en dos tipos;
a.1) Estático
a.2) Animación: El banner se encuentra animado deslizando, lo que también se denomina slide- presentando ciertos contenidos destacados.
OBS. La presencia de un tipo de banner u otro implica la existencia de otros elementos que se le asocian.

Sección 3

En general, se utiliza para colocación de vídeos. No obstante, la cantidad, los distintos tamaños y posiciones de los elementos construyen una característica diferenciadora en esta sección entre una plantilla u otra.
También respecto a los videos, varía la presencia y/o posición de los vínculos para acceder a los contenidos. Del mismo modo, varía la presencia de los botones que permiten el deslizamiento las "tiras de fotos" o galerías de vídeos insertadas en la sección de ciertas plantillas tipo B.


Plantillas tipo A y B

Enlaces a ejemplos en línea de:

3. Plantillas tipo C

Dado que existen dos plantillas para este tipo de contenido, se da la clasificación C.1) y C.2)

3.1. Elementos comunes plantillas tipo C

Sección 1

  • Header
  • Banner: Compuesto por un logotipo del show -vínculante al sitio principal del programa- ubicado justo

abajo del header.

  • Menú de contenidos ubicado bajo el banner.
  • Footer

Sección 2

El título con el nombre del tipo de contenido accedido, en este caso sería Photos.

3.2 Elementos diferentes en plantillas tipo C

El uso dado a estas secciones es sustancialmente diferente.

Sección 2

El uso dado a esta sección es sustancialmente diferente.

  • Plantilla C1 Se coloca una banner animado mas la barra de contenidos destacados se ubica de forma vertical, por lo que el deslizamiento animado se realiza del mismo modo.
  • Plantillas C2: Se coloca una caja -dentro de la caja de contenido- la que contiene un cuadro con una foto, que cambia con "cliqueando" uno de los botones o una de las miniaturas de la tira ubicada al inferior de la caja.

Sección 3

  • Plantilla C1: Se coloca una caja que contiene el menú de temas o clasificación de las fotos. Además en una caja contenida dentro de la primera se colocan las fotos del tema selecciona en el menú.
  • Plantilla C2:
  • Botones de redes sociales: Se coloca una caja horizontal que contiene botones interactivos correspondientes a redes sociales.
  • Sección lateral: Existe una sección lateral, no delimitada en la sección 2 ó 3, que contiene un cuadro con publicidad y una caja que contiene vínculos a galerías de fotos relacionadas al contenido visualizado.
  • Fondo en la caja de contenido: En las plantillas de caja de contenido está definida por un fondo, el que puede ser sólido o transparente.


Plantillas Tipo C

Enlaces a ejemplos en linea de plantillas tipo C