Caso de estudio: The Brigade

De Casiopea







Caso de Estudio
NombreThe Brigade
Estudiado enGráfica Digital 2014
Estudiado porJaviera Ulzurrún
URLhttp://www.thisisthebrigade.com


Introducción

Para comprender el Responsive Design se nos insta a analizar un sitio web que tenga este comportamiento. En él se deben observar cómo interactuan los objetos en las distintas variaciones de tamaño: Escritorio (monitor), Tablet y Móvil. Los objetos a analizar son las imágenes, textos (títulos y párrafos), márgenes y tipografía, puesto que estos elementos son los que fluyen en la pantalla, y es su comportamiento el que se debe entender. El objetivo es conocer a través de la observación las tendencias en este diseño, saber qué funciona y qué no, y tener una mirada crítica respecto a este.

Para esto se eligió el sitio de una agencia de diseños, The Brigade, recomendada en el sitio Web Design Ledge,como un ejemplo de diseño responsive fresco.

The Brigrade

Juj Responsive 5.png

Es una agencia digital que se basa en el estudio de la tecnología y diseño centrada en el usuario. Se elige este sitio porque posee variaciones en la visualización de su web en los distintos dispositivos, además el trabajo mismo de la agencia se centra en la experiencia de usuario, por lo que debiese encontrarse en él un ideal del responsive design en su sitio.

Inicio

700px A grandes rasgos se observa que el diseño del Inicio varía según el dispositivo desde el cual está siendo mostrado. Por un lado aparece las versiones de escritorio y tablets bastante similares, mientras que la versión móvil reduce la cantidad de elementos mostrados y se observan otros objetos propios de la característica touch del dispositivo.

A continuación, para analizar en profundidad, se observara por secciones el comportamiento de esta web.

Secciones

700px
JUJ PC-03.png

Se le llama sección a las cajas de contenido que componen el sitio. En los tres dispositivos se pueden observar 7 secciones. Cada una de las cuales tiene diferencia de tamaños y número de elementos que la componen. A continuación una comparación cercana de cada una de las secciones.

Header y menú

JUJ seccionesthebrigade (1).png

El Menú se comporta de igual manera en el escritorio y tablet, sin embargo en el móvil aparece el típico ícono hamburguesa que indica que existe un menú colapsable. Al tocar el ícono se abre el menú por encima de él.

El logo aparace sólo en los menúes más grandes, en el dispositivo móvil desaparece por una cuestión de espacio.

En cuanto a los tamaños se va escalando la caja contenedora según el dispositivo en donde se vea, la caja de la tablet es más pequeña que la versión de escritorio, y la caja del móvil es más pequeña que en la tablet. No obstante la tipografía es de igual tamaño en todos los dispositivos.

Latest Work

JUJ seccionesthebrigade (5).png
Escritorio - Tablets: Hover sobre imagen izquierda.

Esta sección presenta una animación en sus versiones de escritorio y tablet, al hacer hover sobre la imagen en ella aparece el título del enlace que abre. Esto contrasta con la versión móvil, en donde este enlace aparece como botón al pie de la imagen.

Por otro lado cambia la estructura, en los dispositivos de escritorio y tablets aparecen las imágenes en dos columnas, mientras que en su versión móvil estas imágenes aparecen una sobre la otra ocupando casi toda la pantalla.

Brigade Life

JUJ seccionesthebrigade (3).png
Escritorio - Tablets: Hover sobre primera imagen.

En esta sección se hace muy clara la distinción entre los dispositivos. Nuevamente el caso de escritorio y tablets es muy similar (escalan las imágenes pero no cambia la cantidad de estas), en cambio en el dispositivo móvil el número de imágenes se reduce de 8 a 4. Las cuatro imágenes más recientes.

Por otro lado está la animación del hover, presente en la versión de escritorio pero no en el móvil. Se puede apreciar también que la imagen tiene más brillo en la versión de escritorio y tablet, y que se ilumina a su color real al hacer hover, esto contrasta con lo que pasa en los móviles, ya que al no tener la opción del hover en este dispositivo, la imagen aparece con sus colores reales desde la primera vista.

Blog

JUJ seccionesthebrigade (2).png

En esta sección se aprecia el cambio de una texto con característica de párrafo (presente en la versiones de escritorio y tablet) a un botón en el dispositivo móvil. Es un cambio radical, intimamente ligado a la interacción con el dispositivo.

Nuevamente está presente el cambio de tonalidades en la imagen, que indica la animación presente en los dispositivos de escritorio.

The field guide

JUJ seccionesthebrigade (4).png

En este bloque se observa el ahorro de espacio de los dispositivos móviles, ya que desaparece la opción de registrar el teléfono presente en los otros dos dispositivos. Junto con esto desaparece la indicación que se le hace al usuario (la letra más pequeña). Por otro lado la disposición de los contenidos cambia de dos columnas a una.

Footer

JUJ seccionesthebrigade (6).png

La mayor distinción se basa en la distribución de los elementos que la componen, ya que las 4 columnas de los dispositivos más grades, se transforman a una cuadricula de 2x2 en el dispositivo móvil. El tamaño del texto parece igual en todos los dispositivos.

Componentes

Para evidenciar mejor lo anteriormente dicho se crean visualizaciones que lo explican de manera resumida. A continuación una tabla comparativa de los distintos dispositivos con respecto a la sección estudiada:

Juj ttabla.png


Y para visualizar mejor los cambios estructurales un esquema que simplifica los contenidos a bloques de colores. Esto para hacer una comparación de tamaños y cantidades. 700px
Juj seccionessitio-05.png

Comportamiento responsive

Este comportamiento se ve reflejado en dos cosas:

  1. La Grilla
  2. La Tipografía

Ya que está ligado a las cantidades y tamaños, y son estos dos aspectos los que nos permitirán observarlo para el fin de analizar.

Grilla

Para comprender mejor la estructura por la que fluyen estos elementos se debe visualizar el esqueleto que le sostiene, en este caso una grilla de doce columnas en las versión de escritorio y tablets, y una grilla equivalente a 4 columnas en la versión móvil. Juj grillathebrigade INICIO COMPLETO.png

Tipografía y párrafos

Como se dijo anteriormente, el comportamiento responsive de un sitio se puede analizar desde la tipografía, ya que el cambio de tamaños no es necesariamente proporcional a la dimensión del dispositivo. No porque el dispositivo sea más pequeño la tipografía lo es igual, al contrario, el dispositivo más pequeño necesita más tamaño en ocasiones para poder interactuar por medio del touch con él.

Las tipografías utilizadas son la familia stratum-2-web en sus pesos 300, xxx, xxx, ésta es usada en los textos que superan los 16px.

stratum-2-web font.

Y de 16px hacia abajo utilizan la tipografía colfax-web en su v.

colfax-web font.

Para analizar la fuente y su comportamiento se utilizó la herramienta FontFinder de Mozilla Firefox. La aplicación entrega datos con respecto a la fuente, el espaciado, la decoración y la identificación del elemento (h1, p, a, etc.). Para el análisis rescataremos los siguientes datos:

  • Tipo de elemento: h1, h2, ..., p, a, etc.
  • Fuente:
    1. font-family
    2. font-size
    3. font-weight
    4. text-align
  • Espaciado:
    1. line-height
    2. letter-spacing
    3. word-spacing

Títulos

Escritorio

  • Elemento: h1
  • Fuente:
    1. font-family: stratum-2-web
    2. font-size: 110px
    3. font-weight: 300
    4. text-align: center
  • Espaciado:
    1. line-height: 1em (110px)
    2. letter-spacing: normal
    3. word-spacing: 0px

Tablet

  • Elemento: h1
  • Fuente:
    1. font-family: stratum-2-web
    2. font-size: 70px
    3. font-weight: 300
    4. text-align: center
  • Espaciado:
    1. line-height: 1em (70px)
    2. letter-spacing: normal
    3. word-spacing: 0px

Móvil

  • Elemento: h1
  • Fuente:
    1. font-family: stratum-2-web
    2. font-size: 36px
    3. font-weight: 300
    4. text-align: center
  • Espaciado:
    1. line-height: 1em (36px)
    2. letter-spacing: normal
    3. word-spacing: 0px


Escritorio

  • Elemento: a
  • Fuente:
    1. font-family: stratum-2-web
    2. font-size: 45px
    3. font-weight: 300
    4. text-align: center
  • Espaciado:
    1. line-height: 1em (45px)
    2. letter-spacing: normal
    3. word-spacing: 0px

Tablet

  • Elemento: a
  • Fuente:
    1. font-family: stratum-2-web
    2. font-size: 38px
    3. font-weight: 300
    4. text-align: center
  • Espaciado:
    1. line-height: 1em (38px)
    2. letter-spacing: normal
    3. word-spacing: 0px

Móvil

  • Elemento: a
  • Fuente:
    1. font-family: stratum-2-web
    2. font-size: 30px
    3. font-weight: 300
    4. text-align: center
  • Espaciado:
    1. line-height: 1em (30px)
    2. letter-spacing: normal
    3. word-spacing: 0px

Menú

Texto corrido

Conclusión