Cacao Tour
Título | Caso de estudio: Cacao Tour |
---|---|
Tipo de Proyecto | Proyecto de Taller |
Palabras Clave | Responsive Design, Caso de estudio |
Período | 2013-2013 |
Asignatura | Gráfica Digital, |
Del Curso | Gráfica Digital 2013, |
Alumno(s) | Carolina Nuñez |
URL | http://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
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.
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.
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.
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.
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.
*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].
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.
Archivo:Tamaños imageneshome.png
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