Cacao Tour

De Casiopea



TítuloCaso de estudio: Cacao Tour
Tipo de ProyectoProyecto de Taller
Palabras ClaveResponsive Design, Caso de estudio
Período2013-2013
AsignaturaGráfica Digital
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



Encargo 3(continuación)

WEB

-Resolución de la Pantalla / Vista en el sitio Web : 1368x768px

-Tamaño total menú: Ancho: 895px. Largo 30px.

-Tamaño botones del menú: ancho: 124px. Largo 30px.

-Tamaño botones/Cursor encima: Ancho 124px. Largo 38px.

-Tamaño de la tipografía-Slogan "Pacífico" 14 pt.

-Tamaño tipografía-Títulos: 27pt

-Tamaño tipografía-Texto 13pt.

Twitter infotrip.png
  *14pt (enlace twitter)
  *12pt (info tripadvisor) 
  *15pt (título)bold
  *11pt (notas)
  *11pt (subtítulo)bold

El menú del sitio no se despliega por pestañas, solo cambia de color el botón al pasar el cursor, anaranjado[rgb(247,112,34)] a café[#4c1800].

Pestañasjuntas.png

HOME

En este sitio web el home abarca una introducción junto con galería y contactos. -Imagen puesta Home: 1368x718px. (1920x800 tamaño imagen original)

-Título Bienvenida: Ancho: 558px. Largo: 70px.

-Ancho columna: 336px

Bienvenida

La Introducción al sitio a través del Home se verticaliza, mostrando 2 ámbitos llamativos. Fotografías de la "Galería" y "Cacao Tour" que viene siendo la opción a la categoría dependiendo el tipo de viaje.

-Foto principal: Ancho: 344px. Largo: 240px. (341x227)

-Foto mediana: Ancho: 186px. Largo: 134px.

-Foto chica: Ancho: 114px Largo: 84px.

Error al crear miniatura: Falta archivo


Tamaños que las fotografías toman al clickear en ellas, se centralizan en el sitio. "dialogs" Ancho: 800px. Largo: 540px

Galería Dentro de la misma home(primer recuadro) Fondo: Verde/Trama

Ancho: 1368px. Largo: 658px


Cacao Tours Fondo: Anaranjado/Trama

Ancho: 1349px. Largo: 525px

Contáctenos

Fondo: Café/Trama

Ancho:1349px Largo:448px