Caso de estudio: Revista Capital Online

De Casiopea


TítuloRevista Capital Online
Tipo de ProyectoProyecto de Taller
Período2013-2013
Del CursoGrá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)Francisca Wevar
ProfesorKatherine Exss

PRIMERO

Lo siguiente corresponde al estudio del Responsive Web Design de la Revista Capital Online. Para realizar el estudio de dicho sitio se determinaron los parámetros a continuación:

  • PARÁMETRO UNO: Tipos de plantilla en el sitio

Se realizo un análisis del sitio y la(s) grilla(s) que este utilza para organizar y mostrar sus contenidos, arrojando así 3 tipos de plantillas o grillas a las que se les denomino con los nombres:
a. Plantilla principal, que corresponde al HOME del sitio. b. Plantilla de artículos. c. Plantilla de subsección, que corresponde a los contenidos del submenú.

  • PARÁMETRO DOS: CANTIDAD Y TIPOS DE PANTALLAS

Para el estudio se plantearon 5 tamaños de pantallas de dispositivos, que corresponden a:
a. Pantalla Completa: 1440 px x 900 px [1]
b. iPad (en lectura vertical): 768 px x 1024 px
c. iPhone 4 (en lectura vertical): 640 px x 960 px
d. iphone 3G (en lectura vertical): 320 px x 480 px
e. Smart Phone Samsung Galaxy Young: 240 px x 320 px

A partir de estos dos parametros se prueba como los contenidos presentes en cada plantillas se comportan ante la pantalla de cada dispositivo. Para estudiar este comportamiento se definen las siguientes medidas:

  • MEDIDA UNO: Grillas, lo que corresponde al comportamiento de la grilla entre una pantalla u otra.
  • MEDIDA DOS: Elementos y contenidos de página, lo que corresponde al comportamiento y cambio que presentan los elementos y contenidos en cada tipo de plantilla (parámetro uno)al cambio de dispositivo. De esta manera, se puede determinar por ejemplo que elementos se mantienen o desaparecen durante el proceso.
  • MEDIDA TRES: Control e interacción del usuario, lo que corresponde al cambio de los elementos controlados por el usuario y/o que interactuan con él (como menús, etiquetas "alt" y comportamiento de botones y barras)al pasar de una pantalla a otra.
  • CRITERIO CUATRO: Visualización de textos, que corresponde a la forma en que el texto comprendido como titulos, subtitulos y parrafos cambian y/o se adaptan en un dispositivo u otro.

---

SEGUNDO

Grilla del sitio en distintas pantallas

Pantalla completa: 1440 px x 900 px

Pantalla de iPad (lectura vertical): 768 px x 1024 px'

Pantalla de iPhone 4 (lectura vertical): 640 px x 960 px'

Pantalla de iPhone 3G (lectura vertical): 320 px x 480 px

Pantalla de Smart Phone Samsung Galaxy Young (lectura vertical): 240 px x 320 px


Contenidos de plantillas tipo en distintas pantallas

A medida que el sitio se visualiza en los distintos dispositivos, los elementos y contenidos en el varían.
Plantilla "Home"

Plantilla Artículo

Leyenda

  • 1A. HEADER | 1B.PRIMER FOOTER | 1C.SEGUNDO FOOTER
  • 2.LOGO Y MENÚ.
  • 3A.MENÚ DE SUBSECCIONES | 3B.TITULO DE SECCIONES
  • 4A.BARRA DE BÚSQUEDA | 4B.TAGS O ETIQUETAS
  • 5.TITULAR NIVEL 1
  • 6.TITULAR NIVEL 2
  • 7.TITULAR NIVEL 3
  • 8.LINK A SITIOS HERMANOS | 8A.MINIATURA DE REVISTA Y CONTENIDOS | 8B.COLUMNAS DE OPINIÓN | 8C.NOTICIAS SUGERIDAS | 8D.CITA DE UN ARTÍCULO | 8E.CONTENIDO SUGERIDO EN FOOTER | 8F.CONTENIDO SUGERIDO EN ARTICULOS
  • 9A.PUBLICIDAD BARRA IZQUIERDA
  • 10A.SUSCRIPCIÓN Y NEWSLETTER | 10B. BOTONES REDES SOCIALES EN TITULO NIVEL 1 | 10C.BOTONES REDES SOCIALES EN BARRA LATERAL | 10D.COMENTARIOS DE USUARIO
  • 11.ELEMENTO MULTIMEDIA "GALERÍA DE FOTOS"


Colores utilizados en el sitio



TERCERO

  • MEDIDA UNO: Grillas

Se clasificas según el tipo plantilla y se comparan según el tamaño de pantalla.

a.Plantillas "HOME"


b.Plantillas de "Articulo"


c.Plantillas de "Subsección"

  • Se puede observar que el sitio se va "simplificando", en el sentido de una reducción de la grilla de varias secciones a menos, a medida que se ve en una pantalla mayor a una menor.


*MEDIDA DOS: Elementos y contenidos a. Adaptación de texto
a.1 Noticias Nivel 1


a.2 Noticias Nivel 2

a.3 Noticias Nivel 3


a.4 Titulos, subtítulos y parráfos
En este item solo se expondrán ciertos casos pues en varias pantallas el comportamiento del texto no varía.
a.4.1 Titulo de un artículo

a.4.2 Subtitulo y párrafo de un artículo

A medida que las pantallas van cambiando, los subtitulos y los textos cambian su alineación inicial resultando en una "perdida" de formato, pues se producen cortes en los subtítulos o "ríos" entre el tejido construido por caracteres tipográficos.
a.4.3 Texto en subsección "Eventos"

Los estilos de textos no cambian a pesar del cambio de pantallas.

  • Títulos y subtitulos en negrita y textos en sans serif regular en página home, secciones y subsecciones.
  • En artículos, subtítulos en mayúscula y negrita y textos en sans serif regular.
  • A pesar de que las lineas de texto -sobretodo en el caso de los titulares- se "cortan" y forman un cuerpo maciso, no se cambia el estilo tipográfico.


b. Footer (Pie de página)


c.Contenido sugerido en artículo


d.Botones de navegación en subsección "Eventos"



  • MEDIDA TRES: Control e interacción del usuario

a.Visualización e interacción con el Menú
a.1. Pantalla Completa


a.2 Pantalla iPad 768 px x 1024 px

El menu principal se comprime en un único botón al igual que la barra de búsqueda la que se comprime en el pequeño símbolo de la "lupa".

a.3 Pantalla iPhone 4 640 px x 960 px

El menú principal se comprime en una barra "Secciones Capital". Por otro lado, la barra de subsecciones sube a la parte superior de la página en una barra negra. Desaparecen elementos como la barra de búsqueda, los links a sitios hermanos y links a suscripciones y newsletter.

a.4 Pantalla iPhone 3G 320 px x 480 px y Pantalla Smart Phone 240 px x 320 px

En este caso el menú posee semejante apariencia y comportamiento que el iPad 4 a pesar de se trata de una pantalla más pequeña. No obstante, no existen las etiquetas "Alt" que existían en las pantallas anteriores.

  • Cabe plantearse como se adapta el menú principal a las diversas pantallas y particularmente, por qué en el caso del iPad en lectura vertical las distintas secciones se reunen en un elemento "pequeño" sobretodo cuando se trata de una pantalla mayor a las que poseen una barra con despliegue.
  • Con respecto a la relación del logo de la revista -que redirige al "Home"- y el menú, se observa que el primero jamás desaparece, en contraste de los otros sin embargo, son eliminados a medida que el sitio fluye a través de las diferentes pantallas resultando en la condensación de la navegación básica y/o "esencial" en único elemento.


CONCLUSIONES

  • La simplificación de la grilla va en directa relación con la cantidad de contenidos y elementos en las páginas.
  • La simplificación y/o descomplejización del sitio tanto en su grilla como en sus elementos y contenidos se encuentra íntimamente relacionado con el tamaño de la pantalla.
  • El comportamiento de los elementos controlados por usuario y/o de interacción con el usuario cambiara según el tamaño de la pantalla al igual que su presencia en la página.
  • La marca y/o identidad del sitio respecto a la Revista Capital se conserva a través de dos elementos visuales los que son el logo, presente en todas las plantillas y todas las "adaptaciones" del la grilla y los contenidos a las diferentes pantallas.Y por último, los colores que permiten relacionar una plantilla y/o página con otra mientras se navega el sitio a través de todas las pantallas.