Caso de estudio: Forefathers

De Casiopea





Caso de Estudio
NombreCaso de estudio: Forefathers
Período2014-2014
PeríodoII° Trimestre
Palabras Claveweb responsive, forefathers
Estudiado enGráfica Digital 2014
Estudiado porKarol Barrera
URLhttp://forefathersgroup.com/

Introducción

Ejemplo de multiplicidad de plataformas y el diseño adaptable

El diseño Responsive Web Design o diseño web adaptativo surge como una necesidad tras la aparición de distintas plataformas, las cuales tienen la posibilidad de conectarse a internet. Esta multiplicidad de formatos hace que una página web se muestre en distintas resoluciones, y es ahí donde surgen problemas de diseño.

EL objetivo del responsive design es adaptar el flujo de la información para que el usuario tenga una buena experiencia tanto con un celular como con un computador, es así como se logra que los tamaños de columnas, fotos, botones y tipografía varíe dependiendo del soporte, ya que una página web tiene una cierta flexibilidad que debemos saber aprovechar.

El control que los diseñadores conocen en el medio impreso y desean frecuentemente en el medio web, es simplemente una consecuencia de las limitaciones de la página impresa. Debemos aceptar el hecho de que la web no tiene esas mismas limitaciones, y diseñar entonces para su flexibilidad. Pero primero, debemos ‘aceptar el flujo y reflujo de las cosas.[1].

Para poder conocer la implicancias de esta manera de diseñar, analizaré un sitio que tenga riqueza en sus elementos, para ver como éstos responden al diseño adaptativo: Forefathers

Forefathers

Es una agencia de diseñadores e ilustradores, quienes ofrecen originalidad y creatividad de los forefathers o antepasados. Se auto clasifican en un diseño innovador, y algo vintage la cual va dirigida a un público comercial adulto-joven ya que tienen proyectos asociados a creaciones de sitios web, branding, diseño impreso e ilustraciones.

sitio adaptado a 3 dispositivos

La primera vista de la página se centra principalmente en el menú de navegación, en la cual se predisponen de manera distinta para cada plataforma, dejando entre ver que viene una imagen, la cual crea la continuidad y le da a entener al usuario que continúa el contenido con el scroll hacia abajo.

Home

Formatos.png

Grilla

La grilla pareciera ser de una columna centrada, ya que por lo general hay un párrafo o elementos que se desarrollan hacia abajo

GRILLA HOME.png

Comportamiento secciones

Contenido de las secciones:

  • Header: (Rojo) logo, menú, descripción empresa
  • Body: (verde) Visualización projectos
  • Body: (azul) Promoción Forefathers
  • Body: (amarillo)Referencia clientes
  • Body: (naranjo) Lista de clientes
  • Footer: (celeste) Contacto


COLUMNAS HOME.png


Gracias a esta visualización, se puede notar como se comporta el sitio tras su cambio de soporte, bajo el menú existe una franja centrada, en la cual aparecen 4 palabras que hacen alusión a su trabajo, que funciona como un separador de contenidos, ésta permanece en el tablet sin embargo desaparece en la versión del celular.

En la primera sección desaparecen elementos, que son básicamente ilustraciones, en la cual en el pc se visualizan 2, luego en el tablet 1 y en el celular ninguna.

También es posible notar como hay secciones completas que desaparecen, como la azul y la amarilla.

Header

Se puede observar el comportamiento del header, al comparar los tres casos de estudio (desktop, tablet y smartphone). Se logra ver que el logo mantiene en los tres soportes centrado y del mismo tamaño.

Como observación personal, creo que en el celular el logo toma mayor protagonismo, en relación al espacio en el que se encuentra, ya que es un elemento que luego desaparece y es el nombre de la empresa, su imagen corporativa, por lo tanto debe permanecer en la retina del usuario en este soporte que es tan fugaz.

La disposición del menú varia en los tres casos.

HeaderLOGO.png

HeaderMENU.png

Footer

El footer del sitio cuenta con 5 secciones, en donde el usuario tiene la posibilidad de:

  • registrarse
  • navegar por el sitio con enlaces directos
  • ver el último tweet
  • un indicador para saber si el cliente está logueado
  • contacto a través de las redes sociales junto al mensaje de copyright

Éste cuenta con las mismas secciones en la versión del pc y del tablet, no obstante surge un pequeño cambio en el botón del registro, de encontrarse en un primer momento a un costado, luego se encuentra por debajo.

Cabe destacar que los íconos de las redes sociales, además de permanecer en todo momento en el footer, éstas no sufren ninguna variación en su tamaño. Al pasar de pc a tablet ésta se centra para permanecer así en el celular.


FOOTER.png

Ilustraciones

Esta página web se destaca y diferencia de las demás por su uso de ilustraciones, sin embargo se puede notar que al pasar a un soporte más pequeño, las ilustraciones van desapareciendo. La página de inicio en el desktop cuenta con 6 ilustraciones (que se encuentran abajo, en la galería), pero disminnuye a la mitad cuando se visualiza el sitio en un tablet [2, 3 y 6], para terminar con sólo una ilustración en el caso del celular [6]. Ésta última ilustración mantiene siempre su tamaño.

Tipografía

Georgia.png

El sitio cuenta con tipografía ilustrada por ellos, sin embargo su font-family es georgia serif, en la cual prevalece su versión italic. Esta familia tipográfica es una de las primeras sans serif utilizada para pantallas, de hecho Microsoft lanzó su versión inicial en 1996, como parte de una colección de fuentes principales para web. Georgia está diseñado para ser eficaz y clara en pantallas, incluso en tamaños pequeños.

Se tomo un párrafo que se encuentra en sus 3 formatos, se puede notar que su tamaño no cambia (16 px) sólo el divs que lo contiene, éste se encuentra siempre centrado.

Comportamiento texto.png

Página interior: Workshop

En este caso se puede apreciar como la página tiene tendencia a ir alargándose hacia abajo a medida que el contenedor es menor. Crear una página tan larga para un formato de la resolución de un celular pareciera no tener problema, ya que la manera de manejar la información es a través de la mano (touch) en donde el contenido se puede mover más rápido y con mayor facilidad.


Workshop FORMATOS.png

Grilla

La grilla cambia en esta página al tener una galería de imágenes, la cual está conformada por mosaic overlay en donde de 3 columnas (en la plataforma del computador y el tablet) pasa a tener una columna en el celular.

Workshop grilla.png

Comportamiento secciones

Contenido de las secciones:

  • Header: (Rojo) logo y menú navegable.
  • Body: (verde) Título sección (the workshop)
  • Body: (amarillo) Reseña (¿de qué trata?)
  • Body: Referencia clientes
  • Body: (naranjo) Galeria de imágenes
  • Footer: (celeste) Contacto

Workshop COLUMNAS.png

En esta página todo el contenido es esencial en las tres plataformas, las seis secciones que componen esta página permanecen tanto en el computador, como en el tablet y el celular, sin embargo hay ciertos elementos que desaparecen, como es visible en la tercera sección (amarilla) la cual está compuesta de un texto más una ilustración, la cual termina en el formato del celular sólo en el texto.

Página interior: The Origins

Esta página es completamente distinta a las otras dos, ya que en esta prevalece el texto.

Origins FORMATOS.png

Grilla

Grilla the origins.png


Comportamiento secciones

Origins COLUMNAS.png

Wireframes

Errores

Existe un detalle claramente visible y ocurre con el formato del celular.

  • el contacto se encuentra por encima del logo, sin embargo este no es un real problema ya que el botón de contacto debió crecer ligeramente para que sea posible apretarlo con el dedo sin mayor complicaciones.
  • Al final de la página se encuentra una lista con los clientes de la empresa, en donde anteriormente vimos que su ilustración no cambiaba su tamaño en ningún formato, sin embargo esto causa un problema, ya que queda texto:
  1. Por encima de la ilustración
  2. Por encima del footer

En ambos casos logra quedar ilegible el texto, en el primer caso por encontrarse un texto del mismo color que la ilustración y en el segundo porque el texto se encuentra sobre un fondo oscuro, ambos errores más que un problema de contraste, tienen un problema de ubicación.

ERRORES.png

Conclusión

Se puede inferir tras el análisis del sitio web, que la versión del móvil parece ser la que contiene elementos esenciales para el usuario, mientras que en comparación con la versión del computador, ésta tiene muchas más ilustraciones y elementos para admirar. Creo que ese es un punto clave, que tiene mucha lógica, no se trata solamente que una pantalla es más grande y por ende quepan en ella más elementos, sino que se trata de la temporalidad y la experiencia del usuario, generalmente cuando uno está utilizando un computador se encuentra sentado mirando y admirando, existen tantas páginas web que éstas deben captar tu atención, sin embargo en el caso de los celulares existe una visita más expedita, generalmente por casos específicos, por lo tanto una mejor experiencia para el usuario es encontrar más fácilmente lo que está buscando. Poder acceder de manera rápida.

referencias

Tercer encargo

análisis desde el código

Se crearon tres carpetas, en la primera se encuentra el html de la página web; Forefathers group para poder analizarla desde su código, para eso la página debía correr de manera local en el pc. En la segunda carpeta se eliminaron vínculos externos, los cuales no realizaban cambios en el sitio, y en la tercera carpeta se muestran todos los divs que contiene el sitio, los cuales se marcaron desde la cascada de estilos.

https://www.dropbox.com/home/Public/Karol%204DG

Forefathers Group DIV.png