Made by Fibb

De Casiopea





Caso de Estudio
NombreMade by Fibb
Período2013-2013
Palabras Claveresponsive design
Estudiado enGráfica Digital 2013
Estudiado porIdar González
URLhttp://madebyfibb.com


Made by Fibb es un portafolio digital de dos personas, Fabian Irsara (Desarrollador de Software) y Bernd Baumgartner (Diseñador).

El estudio se centra en Responsive Design y la observación del sitio, cómo se comporta y cómo va articulando su contenido según el soporte donde se esté mostrando el sitio.

En el estudio se escogen 3 tamaños, pensados en 3 soportes: Notebook 1366x768, Tablet 768x1024 y móvil 320x480

Presentación

El sitio está nominado como uno de los mejores sitios (http://www.awwwards.com/), donde usuarios votan y los sitios reciben prestigio y reconocimiento. Madebyfibb tiene un 7,73 como votación total, que incluye Diseño, creatividad, usabilidad y contenido.

¿Por qué la elección de este sitio? La interacción está muy presente en este sitio, a pesar de que no es de una estructura gráfica muy tradicional, se logra entender el mecanismo y las leyes de una manera muy rápida.

La captura de imagen tuvo que hacerse mediante Print screen en cada scroll, ya que debido a su código, fue imposible captarlo de manera automática. (Por eso se repite el botón de Home, el menú lateral y la cinta de Awwwards. Al navegar, estos elementos están fijos por lo tanto no existe aquella repetición)

El wireframe muestra los márgenes y la columna central que es donde está todo el contenido y dentro de la columna se ajustan las miniaturas, que según se filtren, se van ordenando en la grilla establecida.

Wireframe y sitio.png

http://madebyfibb.com

Elementos gráficos de navegación

Éstos son los elementos que permiten la navegación del sitio, considerando que el scroll vertical es lo que nos permite ir viendo más contenidos en Home.

Subirfibb.jpg

Botón Subir/Home

Al ingresar al sitio este botón está ubicado en la parte superior, paralelamente con el botón de Menú. Luego al navegar hacia abajo, pasa a estar incrustado en los márgenes de las columnas. Algo curioso es que luego de hacer clic en este ícono, la dirección del sitio se ve alterada y cambia a http://madebyfibb.com/stream, en el móvil este requiere que el aparato vuelva a entrar al sitio. Así que por lo menos, sería un "Subir" fluido en computador.

Botón Menú

Usando un icono que nosotros asociamos una lista de cosas, es el ícono que permite aparecer un menú lateral que está oculto. Por lo tanto, se entiende que si se presiona, debería aparecer un menú o alguna lista que permite escoger y navegar por el sitio.

Menu desplegado.jpg

Menú / Filtro

Este objeto más que ser un menú que nos pudiera enviar a otra página del sitio, lo que hace, es filtrar los contenidos. Uno marca los contenidos que uno quiere visualizar en la grilla del Home.

Este menú no es un elemento flotante encima del contenido, por lo tanto empuja todo contenido hacia la izquierda, quitándole espacio de márgenes pero aún siendo centrado.







Menú de navegación en Proyectos

Menu proyecto fibb.jpg

Este menú aparece cuando uno accede a los proyectos. Es simple con los comandos básicos, donde está el botón "Home-Subir", dos flechas que nos permiten navegar entre los proyectos, como si estuvieran dispuestos uno al lado del otro (a pesar de que no sabemos cuál proyecto vendrá a continuación) y finalmente una X que tiene la misma función que el botón "Home-subir".


Miniaturas y categorías

Los objetos que construyen el contenido son cajas con texto, logos, imágenes e imágenes con algún mensaje al pasar el mouse por encima. Entonces, existe una diferenciación entre estos elementos más allá de lo estético, son categorías distintas:

Categorias fibb.jpg


Interacción

  • Interacción al recorrer el sitio, las cajas de contenido se van ajustando, apareciendo de a poco.

  • Al pasar el cursor por encima todos los elementos sufren algún cambio, ya sea cambio de color, que aparece el título de una imagen o las letras se ven alteradas por un breve lapso.

Se cree que las transiciones de los elementos están incrustados en CSS o en Javascript ya que a grandes rasgos en el código HTML del sitio no se observan códigos que muestren el comportamiento de ellas.

Responsive Design

Se dice que para diseñar Responsive Design se debe diseñar desde lo móvil primero (http://www.abookapart.com/products/mobile-first), pues nos facilitaría pasar de lo más simple a lo más denso, cosa que si se hace al revés, se puede terminar con aplicaciones y sitios demasiado densos para el móvil y tablet.

Este sitio, (a modo personal), pareciera que nació de un diseño móvil y todas las decisiones se mantienen hasta el máximo tamaño. Es un sitio bastante mínimo en términos de elementos de navegación, reducen su texto bastante y el sitio entero está pensado como cajas que flotan y que pueden ser acomodadas de manera fácil.


Pantalla inicial por soporte

  • Home

Comparacionpantallainicio.jpg

  • Proyecto

Comparacionpantallainicio2.jpg


Simulación de navegación

Se simula la navegación (breve), del Home y la categoría de Proyectos en cada soporte, mostrando a grandes rasgos la interacción del sitio. No se logra captar las pequeñas interacciones gráficas que tiene el sitio, como movimientos de los elementos a medida que uno va deslizándose verticalmente.

  • Home
  • Proyecto


Comparación de Soportes

Estas capturas de pantalla están un poco defectuosa por la interacción que tiene el sitio, entonces el contenido al tener movimiento, queda mal registrado por el programa.

¿Qué tanto scroll es aceptado como una navegación óptima?

Se dice que un sitio no debiese tener un scroll de más de 2 páginas impresas. Jakob Nielsen afirma que el 80% de la información valiosa debería estar en la parte natural del sitio, sin scroll. La razón de esto es porque el usuario va olvidando a medida que sigue haciendo scroll.

Aún así una característica del sitio es justamente su largo. Además, cada elemento tiene valores muy similares, no existe jerarquía en orden de aparición, sino que la jerarquía se muestra por tamaño de cajas y están distribuidas a lo largo del sitio.

¿Qué sucede al transformar el mismo contenido al llevarlo al móvil?

A modo personal, la experiencia no es la misma, se pierde la interacción gráfica, ya sea con el comportamiento de la caja de contenido que aparecerá y los "mouse-over". Además de que la jerarquía de distintos tamaños también desaparece, por lo tanto el ritmo de navegación es bastante monótono. Ahí simplemente es tarea de las imágenes en mantener un interés para el usuario.

  • Home
Comparacion1fibb.jpg


  • Proyectos
Comparacion2fibb.jpg

Patrones de estructura

Los esquemas buscan mostrar la forma de organizar los contenidos y las proporciones en relación a tamaños y no medidas específicas. Cada fragmento se va repitiendo hasta conformar la totalidad de los contenidos.

  • Home

La diagramación de Computador (1366x768) en el Home, posee dos variantes, que se van alternando a lo largo de la columna, generando un ritmo más variado. Los otros tipos son repetitivos y no existe alteración. Eso sí no existe una jerarquía en las categorías, las categorías más grandes en relación a otras (por fragmento)van cambiando según el soporte.

Grilla home.png


  • Proyecto

En el siguiente esquema se puede encontrar la resonancia que tiene lo de "Mobile first", donde lo "Básico", del móvil, se mantiene casi en su totalidad a Tablet y luego en la versión máxima, se usan mayores tamaños para construir una mayor jerarquía.

Grilla proyecto fibb.png


Cambios de comportamiento según tamaño

Columnas y diagramación

El sitio en sí, como contenido es líquido, donde los márgenes se ajustan siempre, manteniendo centrado la columna principal entre espacios equivalentes.

Momentos claves

Grilla de los momentos estudiados

  • Home

Cada cuadrado celeste representa el patrón de las cajas de contenido, que pueden ser usados de diversa manera dentro de la grilla. Entre Notebook y tablet existen variables mientras que móvil ofrece sólo una forma de mostrar el contenido, sin importar la jerarquía del contenido ni relevancia gráfica.

Grilla standard.png

Transición y momentos de cambio

EL sitio va adecuándose según el tamaño del navegador, así, el sitio va respondiendo según los soportes, como notebook, tablets y móviles. Por supuesto no existen medidas exactas, por lo tanto uno puede ir viendo cómo va reaccionando y cómo los elementos del sitio van mostrándose. Al llegar a ciertos puntos, el sitio cambia diagramación, con las grillas mostradas anteriormente, por lo tanto se puede entender que existen 3 diagramaciones específicas para cada soporte y las transiciones son el margen dentro de cada soporte.

En el caso del ipad, que tiene una dimensión de 1024px de ancho en modo paisaje, la diagramación de notebook también estaría disponible. Y al pasar a modo vertical, pasaría a la diagramación de Móvil ya que tiene un ancho de 768px y ese ancho está a modo de diagramación móvil.

  • Notebook: Entre 1366px a 1000px de ancho

Transicionnotebook.gif

  • Tablet: Entre 990px a 792px de ancho

Transiciontablet.gif

  • Móvil: Entre 784px a 294px de ancho

Transicionmovil.gif



Tipografía

Tipografia1.pngTipografia22.png

  • Familias tipográficas

Se utiliza la Open-Sans para el sitio, dando como opción la Helvetica, luego la Arial y finalmente una Sans-serif.

El tamaño de la tipografía se construye en REM, (roots em), una medida relativa que se ve alterada por el Font-size en pixeles, que se ve afectado por el tamaño del soporte al visualizar el sitio. Por ejemplo, en el formato Notebook de 1366px de ancho, se le asigna como 11.5px al font-size. Los 11,5 son multiplicados por los 6,8 rem que asigna y nos dan un valor aproximado en pixeles, 78,2px. Éste sería el tamaño aproximado que uno ve en la pantalla. Al achicar el navegador, el valor del font-size se disminuye, hasta llegar a una nueva diagramación (pensando en los max-width y min-width establecidos en el sitio).

Por esa razón se muestran los REM en cada modo y los rangos variables del Font-size.

Tipografiafibb.png

Acá se muestra la relación entre la tipografía, el rem y el font-size que se ven afectados por el tamaño del navegador.

Tipografiaresponsive.gif