Made by Fibb
| Caso de Estudio | |
| Nombre | Made by Fibb |
|---|---|
| Período | 2013-2013 |
| Palabras Clave | responsive design |
| Estudiado en | Gráfica Digital 2013 |
| Estudiado por | Idar González |
| URL | http://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.
É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.
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.
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.
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:
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
- Proyecto
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
Notebook 1366x768 - GIF
Tablet 768x1024 - GIF
Móvil 320x480 - GIF
- Proyecto
Notebook 1366x768 - GIF
Tablet 768x1024 - GIF
Móvil 320x480 - GIF
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
- Proyectos
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.
- 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.
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.
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
- Tablet: Entre 990px a 792px de ancho
- Móvil: Entre 784px a 294px de ancho
Tipografía
- 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.
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.
