Caso de Estudio: Andersson - Wise

De Casiopea



TítuloCaso de Estudio: Andersson - Wise
Tipo de ProyectoProyecto de Tutoría
Palabras Claveresponsive design
Período2013-2013
Del CursoGráfica Digital 2013
CarrerasDiseño Gráfico
Alumno(s)Bernardo Silva
ProfesorJaime Pérez Moena

Presentación

Ardersson - Wise es un estudio de arquitectura y diseño que se encuentra en Austin Texas, Estados Unidos. Su trabajo colaborativo esta enfocado a la arquitectura residencial e institucional, cuidando la apariencia y el propósito de estos.

Se utilizara este sitio web como caso de estudio para analizar lo que es el Responsive Design, es decir, la observación de cómo el sitio se comporta y va adaptando la manera en que muestra su contenido según el soporte donde se esté visualizando. Para ello se miden 4 tamaños de resolución distintos:

  • 240 x 320 px, Celulares Pequeños.
  • 320 x 480 px, iPhone & otros.
  • 480 x 640 px, Tablets Pequeños.
  • 768 x 1024 px iPad.
  • 1204 x 728 px (hacía arriba) iPad y Ordenador.

link a Ardersson - Wise

Analizando el Sitio

Se optó por medir la sección de proyectos para dar evidencia de como se adapta la disposición de los elementos respecto a la resolución del soporte, los elementos a medir son:

  • Grilla
  • Imágenes
  • Texto
  • Menú principal

Interacción

Mediante la captura de pantalla, se logra captar el tamaño para simular como se comportaría el sitio dependiendo la resolución con la que este cuente.


  • Apariencia del sitio en distintas resoluciones

Responsive Design Testing1.jpg

La diagramación posee 5 variantes, para resaltar estos, se dividió el área en 3 columnas.

  • Rosado para el menú principal
  • Amarillo para las imágenes
  • Verde para el menú secundario

Responsive Design Testing2.jpg El tamaño de la imágenes no varía demasiado teniendo este solo 2 cambios en su tamaño, en cambio si lo hace en el uso de columnas, mostrando una mayor o menor cantidad dependiendo de la resolución que tenga, el uso de una grilla adaptable (como se puede ver con las imágenes)ayuda a mantener un orden dentro del sitio, esto se ve reflejado en los margenes que separan las columnas el cual no cambia a medida que se va adaptando.

Del menú Principal se pueden apreciar los siguientes cambios: Su tamaño y posición cambia respecto al tamaño donde se visualiza, así como la manera en que están distribuidas las palabras, sea vertical u horizontalmente. La tipografía cambia levemente en su tamaño, solo para adaptarse a un tamaño mas estrecho.

Responsive Design Testing3.jpg

Opiniones

El uso de una grilla con varias columnas facilita la visualización de mayor contenido optimizando el espacio además de otorgarle familiaridad. Los nombres de las construcciones aparecen a medida que uno acerca el indicador sobre la imagen ("hover"), sin embargo, la falta de estos hace se vea todo muy monótono.

Una grave falta radica en el hecho de que no tenga un botón de subida y sobre todo un "footer" para poder volver a buscar el contenido, tener que subir de nuevo (sobre todo en resoluciones menores)es anti-productivo y dificulta la experiencia navegable.

Que desaparezca el menú secundario también es una error ya que este funciona como filtro permitiendo una búsqueda mas optimizada. El Sitio al reducirse debería contra con un menú despegable que se encuentre siempre visible en la pantalla para no estar volviendo a subir.