Cacao Tour

De Casiopea


TítuloCaso de estudio: Cacao Tour
Tipo de ProyectoProyecto de Taller
Palabras ClaveResponsive Design, Caso de estudio
Período2013-2013
Del CursoGráfica Digital 2013,
Alumno(s)Carolina Nuñez
URLhttp://www.cacaotour.com


Responsive Design

El diseño responsivo nos hace plantearnos la tarea de analizar un sitio web y su comportamiento, en este caso CacaoTour: El Sendero del Cacao.

Contenidos

  • Home
Tamaño Extendido en la Web
Web, pestaña "Familia Rizeh"

Grilla web.jpg

84px=3cm aprox de márgenes exteriores, desde allí la grilla ocupa una superficie par, en web se trabaja con 8 columnas que se sostienen en pantallas de escritorio o portátil, mi notebook es de 15" con una resolución de 1366x768px, al ajustar la ventana a la mitad de su tamaño, la grilla cambia a 4 columnas y es ahí donde se produce el cambio de formato. Grilla web1.jpg

Tamaño Web menor y Tablet Samsung Galaxy tab2. Resolución 1280x800
Tamaño Tablet Galaxy Tab 7"
Pestaña "Familia Rizeh", Tablet Galaxy Tab 7". Resolución 1024x600

En esta dimensión pasa el "formato" Web a un posible tipo de tablet. El menú antes extendido en la parte superior, se ordena verticalmente y es llamativo para el contacto touch, se mantiene el orden de las noticias y las imágenes entre ellas están en poca diferencia de tamaño, a diferencia de el tamaño Web que existe una imagen en tamaño más grande y miniaturas en galería.

Home Menú inicial, Celular Galaxy Young. Resolución 320x480
Pestaña "Familia Rizeh" Celular Galaxy Young

En esta dimensión, se mantiene el menú vertical y las fotografías mejor expuestas, una principal y dos columnas de fotos más pequeñas. Grilla cel.jpg

Párrafos

  • Párrafos Web

Está conformado con cajas de texto de 2 y 3 columnas, las cajas de dos columnas, suele ser por una imagen mayor al ancho del párrafo que lo acompaña o marginado a un costado con la imagen al borde opuesto. Además presenta un banner que soporta las pestañas del menú con su logo central.

La tipografía no presenta cambios en ninguna modalidad.

  • Párrafos Tablet(menores a 1280px)

Comprende una caja de texto, flujo continuo, intercalado con imágenes, y como antes se mencionó, presenta dos columnas de imágenes minimizadas en la parte de galería fotográfica. El banner desaparece, se quita el ícono de la semilla que acompaña cada Titular (pestañas y el logo queda como insignia del sitio en su centro.

  • Párrafos Celular

Párrafos Marginados a la izquierda, continua con el mismo régimen anterior(tablet), salvo que el logo es reducido. Al girar el celular (sentido horizontal) se continua la misma lógica, sin banner, el tamaño del logo reducido, no existe el ícono de la semilla, y las fotos ocupan todo el cuadro con las dos columnas respectivas dichas. La tipografía se reduce directamente proporcional al tipo de dispositivo con el cual se abre el sitio.

Imágenes

  • Comportamiento

La primera visualización posee una llegada con la fotografía próxima, logrando captar texto e imagen en un mismo nivel de lectura. Luego en la segunda visualización se quitan las imágenes y con una mínima descripción se invita al usuario a ingresar a algo. Finalmente se limita a 3 titulares, que si bien no son muy explícitos se lleva a la idea de la experiencia en distintos niveles con esta llegada al mundo del chocolate.

Webreducido cacaotour.jpg
Tablet cacaotour.jpg
Cel cacaotour.jpg