Caso de Estudio: Illy Caffe

De Casiopea


TítuloCaso de estufio: Illy Caffé
Palabras ClaveResponsive Design, Web, Gráfica Digital, Estudio.
Período2013-2013
Del CursoGráfica Digital 2013
CarrerasDiseño Gráfico
Alumno(s)Karla Vargas
ProfesorKatherine Exss
URLhttp://us.illyissimo.com//

Estudio de Wireframes sitio responsive: "Illy Issimo"

Versión para desktop

Vista del home del sitio en versión para desktop

Deconstrucción

Archivo:Deconstrucción Home Desktop.jpg
Deconstrucción del home del sitio en versión para desktop
  • 1 Logo de la marca. 67x70px.
  • 2 Barra de navegación principal.
  • 3 Botones de acceso a redes sociales.
  • 4 Imagen flotante y caja roja en el header. 532x384px.
  • 5 Imagen principal del header.1350x476px.
  • 6 H1. Título principal del contenido expuesto en el cuerpo del sitio. Tamaño de letra 34px. Este título va a acompañado de una bajada descriptiva. Tamaño de fuente 17px, itálica.
  • 7 Imágenes png de los productos de café illy. Su ancho dentro de la grilla es de 148px. Repartidos en dos columnas principales. El alto de las imágenes varía entre los 160px y los 190px. Como se trata de imágenes cuyo fondo es transparente, las distancias que las dividen verticalmente no son siempre las mismas. De todas maneras se trata de llegar a un equilibrio entre las formas.
  • 8 Párrafos descriptivos del producto con sus respectivos títulos. H2 es el título del producto. Tamaño de fuente 18px y en mayúsculas. El “p” o párrafo básico es de 14px.
  • 9 Botón de información nutricional del producto de 155x33px.
  • 10 La barra inferior del sitio tiene como fin promocionar los sitios de la marca en diversas redes sociales. Este párrafo, en conjunto con el bloque que está a su derecha, constituye por así decirlo la cabecera del conjunto. Su título podría considerarse como el h3. Esta sección acomoda también sus contendidos en la estructura de grilla de 2 columnas principales. Comparten tanto el titulo como su bajada los mismos estilos de los que denominamos “h2”y “p” (punto 8) pero el color cambia por razones lógicas.
  • 11 Sitio de red social destacado, “main event”. Lo acompaña una pequeña imagen de 82x70px. Sus estilos son los mismos que el punto 10.
  • Los puntos 12 y 13 se encuentran encerrados en un mismo div.
  • 12 Recuadro de espacio para tweets. Tipo de 12px.
  • 13 Botones que direccionan a redes sociales. Recordemos que en el header existen ya unos botones con la misma utilidad pero presentados de otra manera. Dentro de un div se encuentras verticalmente los botones respectivos. Los botones son imágenes de 155x74 px.
  • 14 Declaración de copyrights. Se alinea con la grilla al límite del margen. 10px tamaño de fuente, altas.
  • 15 Vinculo a Illyíssimo Global.

La información de este ítem se encuentra en PDF: Medio:Illy home 1 WIREFRAME.pdf

Versión para tablets

Vista del home del sitio en versión para tablet

Deconstrucción

Archivo:Deconstrucción Home tablet.jpg
Deconstrucción del home del sitio en versión para tablet
  • 1 Cuando la pantalla se reduce el logo de illy desaparece.
  • 2 La barra de navegación principal cambia su presentación. Lo que antes de resolvía como unos pequeños hipervínculos al costado ahora se define claramente como un botón. De esta manera se ve mucho más notorio. El cambio de tamaño se debe a que en las pantallas táctiles se vuelve indispensable que los botones posean un tamaño mínimo. De lo contrario sería muy complicado digitarlos. Los botones además se desplazan a otro punto y se centran. Al crecer los botones, por la razón antes expuesta, ya no pueden quedar sobre la fotografía del header ya que comenzarían a taparla a medida que la pantalla se va estrechando.
  • 3 Los botones de acceso a redes sociales también de desplazan y crecen. La formula visual cambia a su vez para hacer justicia a las nuevas dimensiones. Lo que antes era el isotipo ahora es el logotipo.
  • 4 La imagen superpuesta sobre el header se reduce a 164x196px. Con ello mantiene hasta cierto punto su relación proporcional con respecto a las nuevas dimensiones del Header, elemento al cual se supedita. Como se trata de un diseño responsive existen en teoría muchísimas variables entro de los tres modelos fundamentales. Es por esto que entre ambas imágenes, header e imagen inscrita, puede conservarse una relación proporcional hasta cierto grado. Se entiende que esta relación proporcional privilegia el núcleo más importante de la composición.
  • 5 La imagen principal del header se ha reducido a un aproximado de 770x300px. No solo ha cambiado el tamaño sino que la proporción. La fotografía ha sido recortada en sus extremos izquierdo y derecho lo cual revela que ahora es mas angosta. A pesar de este recorte se cuida que los elementos principales que conforman la foto (la modelo y el fotógrafo) no salgan de la escena.
  • En los puntos siguientes se ha sustituido la estructura de dos columnas por una columna única. Se desechan los márgenes generosos presentes en la versión desktop para optimizar el espacio.
  • 6 El párrafo va de lado a lado de la columna reduciendo su grosor a medida que se reduce manualmente la ventana. Los tamaños y estilos se mantienen idénticos.
  • 7-9 Los elementos que forman parte de la descripción de cada producto mantienen tanto su tamaño como sus proporciones acomodándose a una columna única de manera casi centrada (ligeramente desplazado hacia la izquierda). Los elementos del denominado “footer header” se comportan casi de igual manera que los descritos en el punto previo. Manteniendo sus proporciones y tamaño se acomodan a la columna, centrados uno bajo el otro.
  • 10-11 Ahora los botones que vinculan a las redes sociales y el cuadro de twitter se disocian. Ya no pertenecen a un mismo div.
  • 12 El espacio para los tweets reduce su tamaño en gran medida. Ahora su proporción con respecto a los otros botones es mucho más equilibrada.
  • 13 Los enlaces a las redes sociales del footer quedan alineados horizontalmente. Conservan su tamaño y proporciones.
  • 14 En la declaración de copyright se reduce el tamaño de la tipografía a 9px para calzar dentro de los nuevos márgenes. Se mantiene alineada con la caja de tweets.
  • 15 El vínculo a Illyíssimo Global también reduce el tamaño a 9px. Este punto puede ser un tanto cuestionable ya que en teoría es un botón de un medio táctil y lo lógico es que crezca en lugar de reducirse.

La información de este ítem se encuentra en PDF: Medio:Illy home 2 wireframe.pdf

Versión para smartphones

Vista del home del sitio en versión para smartphone

Deconstrucción

Archivo:Deconstrucción home smartphone.jpg
Deconstrucción del home del sitio en versión para smartphone

La información de este ítem se encuentra en PDF: Medio:Illy home 3 wireframe.pdf

  • Según los mismos criterios definidos en la versión para Tablets, todos los elementos del sitio se van acomodando progresivamente hasta llegar al punto mínimo de márgenes posible.
  • 5 La fotografía principal llega a su máximo punto de angostura en el cual muchos elementos han quedado fuera. También sigue cambiando la proporción entre esta y la imagen que esta inscrita con el recuadro rojo.A pesar del recorte los elementos principales de ambas imágenes en cierta medida se conservan.
  • 13 Los vínculos a redes sociales en el footer son los únicos que en el tercer estado deben cambiar su orden. Alineándose verticalmente como todos los demás elementos.

Estructura html

Divs generales

Divs principales desktop.
Divs principales tablet.

Header

  • Desktop

Contenido: 1310x476px Padding: 20px a ambos lados.

  • Tablet

Contenido: 766x 305px

  • Smartphone

Contenido: 367x 305px

mainContent

  • Desktop

Contenido: 1310x 588px Padding: 20px a los lados, 80 arriba, 55 abajo.

  • Tablet

Contenido: 766x 1475px Padding: 55px arriba, 25px abajo.

  • Smartphone

Contenido: 367x 1563px Padding: 55px arriba, 25px abajo.

footerHead

  • Desktop

Contenido: 920x121px Padding: 20px a ambos lados. Margin: 195px a ambos lados.

  • Tablet

Contenido: 445x237px Margin: 160px a ambos lados.

  • Smartphone

Contenido: 325x291px Margin: 21px a ambos lados.

Footer

  • Desktop

Contenido: 920x 333px Padding: 20px a ambos lados. Margin: 195 a ambos lados.

  • Tablet

Contenido: 445x 275px Margin: 160px a ambos lados.

  • Smartphone

Contenido: 325x 275px Margin: 21px a ambos lados

gallery-opt-top

En el estado “desktop” los elementos principales de este sector se encuentran todos en un solo div. En las versiones móviles se toma partido por dividir el contenido en dos divs. Los botones de redes sociales, pasan así a formar parte de un div aparte llamado gallery-opt-top.

  • Tablet

Contenido: 756x 82px Padding: 10px a la izquierda, 10px arriba, 20px abajo.

  • Smartphone

Contenido: 357x 231px Padding: 10px a la izquierda, 10px arriba, 20px abajo.

Divs principales smartphone.

Componentes del header

Row en desktop
Row en tablet
Row en smartphone

Row

  • Desktop

Contenido: 960x 476px Margin: 175 a ambos lados.

  • Tablet

Contenido: 766x 305px

  • Smartphone

Contenido: 367x 305px

Apertura

Es básicamente la imagen principal que aparece a la cabeza del sitio. A través del estudio de divs se puede apreciar que se trata de un fondo por así decirlo. En el caso tablet se ve claramente como la imagen apertura es más grande que el div que la contiene. Es entonces el tamaño del div que la encierra la que determina el recorte de la imagen.

Apertura en desktop
Apertura en tablet.
Apertura en smartphone
  • Desktop

Contenido: 1350x 397px

  • Tablet

Contenido: 766x 294px

  • Smartphone

Contenido: 367x 294px

Componentes del main content

Los 6 elementos principales del main content se encuentran dentro de unos divs llamados row. Dentro del primero están homehead y latte. Dentro del segundo están caffe y cappuccino. En el tercero se encuentran caffeNoSugar y mochaccino. Estos divs no cobran mucho sentido en la versión de desktop pero en las versiones móviles sí.

En síntesis existen en la versión desktop dos clases de elementos: El homehead que es el párrafo que encabeza y los ítems con productos que vienen luego. A continuación se señala en detalle las medidas de cada div.

homeHead

  • Desktop

Contenido: 460x162px Margin: 25px abajo, 36px a la derecha.

  • Tablet

Contenido: 726x 355px Padding: 20px a ambos lados. Margin: 25px abajo.

  • Smartphone

Contenido: 327x 443px Padding: 20px a ambos lados. Margin: 25px abajo.

Main content en desktop.
Main content en tablet.
Main content en smartphone.

Latte

  • Desktop

Contenido: 460 x 191px

  • Tablet

Contenido: 726 x 217px Padding: 20px a ambos lados.

  • Smartphone

Contenido: 327 x 217px Padding: 20px a ambos lados.

Caffe

  • Desktop

Contenido: 460x162px Padding: 10px Margin: 36px a la derecha.

  • Tablet

Contenido: 726 x 217px Padding: 20px a ambos lados, 10px arriba.

  • Smartphone

Contenido: 327 x 217px Padding: 20px a ambos lados.

Cappuccino

  • Desktop

Contenido: 460x 184px

  • Tablet

Contenido: 726 x 217px Padding: 20px a ambos lados.

  • Smartphone

Contenido: 327 x 217px Padding: 20px a ambos lados.

caffeNoSugar

  • Desktop

Contenido: 460 x163px Margin: 36px a la derecha.

  • Tablet

Contenido: 726 x 217px Padding: 20px a ambos lados.

  • Smartphone

Contenido: 327 x 217px Padding: 20px a ambos lados.

Mochaccino

  • Desktop

Contenido: 460 x193px

  • Tablet

Contenido: 726 x 217px Padding: 20px a ambos lados.

  • Smartphone

Contenido: 327 x 217px Padding: 20px a ambos lados.

divs dentro del homehead

Homehead en desktop.
Homehead en tablet.
Homehead en smartphone.


h1

  • Desktop

Contenido: 460 x35px Margin: 17px abajo.

  • Tablet

Contenido: 726 x35px Margin: 17px abajo.

  • Smartphone

Contenido: 327 x35px Margin: 17px abajo.

p

  • Desktop

Contenido: 460x110px

  • Tablet

Contenido: 726x66px

  • Smartphone

Contenido: 327x154px

Div Mobilehead

Cuando la pantalla cambia de tamaño a versiones móviles surge un nuevo div llamado Mobilehead. En él van los botones de redes sociales que anteriormente se ubicaban sobre la imagen principal.

  • Tablet

Contenido: 726 x 237px

  • Smartphone

Contenido: 327 x 237px

Divs dentro de Mobilehead

Mobile contiene en su interior los siguientes divs: mBtns, h3, facebook, twitter, flickr.

Mobilehead en tablet.
Mobilehead en smartphone.

mBtns

  • Tablet

Contenido: 197x94px Margin: 65px a ambos costados.

  • Smartphone

Contenido: 197x94px Margin: 65px a ambos costados.

h3

  • Tablet

Contenido: 726 x 18px Margin: 31px arriba, 17px abajo.

  • Smartphone

Contenido: 327 x 18px Margin: 31px arriba, 17px abajo.

facebook

  • Tablet

Contenido: 77x29px

  • Smartphone

Contenido: 77 x 29px

twitter

  • Tablet

Contenido: 63 x 29px Margin: 10px a ambos costados

  • Smartphone

Contenido: 63x29px Margin: 10px a ambos costados

flickr

Es raro que en el html se encuentre etiquetado como flickr ya que en realidad corresponde a instagram.

  • Tablet

Contenido: 85x30px

  • Smartphone

Contenido: 85x30px

divs dentro de Caffé (ejemplo)

En los divs donde se ubican los productos con sus descripciones e información nutricional, se trabaja con una estructura de dos divs internos principales.

Esto sucede en los tres estados. Uno es rowImg que es la imagen. El otro es rowContent que contiene el texto que le acompaña (los elementos h2, p y nfWrapper).

A continuación se detallan las pedidas y el comportamiento de estos divs usando como ejemplo uno de los ítems (caffé).

Caffe en desktop.jpg
Caffe en tablet.jpg
Caffe en smartphone.jpg

rowImg

  • Desktop

Contenido: 148 x161px

  • Tablet

Contenido: 151 x161px. Margin: 181px a la izquierda.

  • Smartphone

Contenido: 151 x161px.

h2

  • Desktop

Contenido: 194x18px Padding: 20px arriba y abajo.

  • Tablet

Contenido: 194x18px Padding: 20px arriba y 15px abajo.

  • Smartphone

Contenido: 194x18px Padding: 20px arriba y 15px abajo.

p

  • Desktop

Contenido: 194x54px

  • Tablet

Contenido: 194x54px

  • Smartphone

Contenido: 194x54px

nfWrapper

  • Desktop

Contenido: 194x33px}

  • Tablet

Contenido: 194x33px

  • Smartphone

Contenido: 194x33px

Componentes del header footer

Dentro de este div hay un div denominado fHead. En él se ubican los dos divs principales que encierran los elementos. Estos dos divs se llaman sixcol y sixcol last. Se analiza a continuación el comportamiento de estos divs.

Sixcol y sixcol last en desktop
Sixcol y sixcol last en tablet
Sixcol y sixcol last en smartphone

sixcol

  • Desktop

Contenido: 441x121px Margin: 34px arriba y abajo.

  • Tablet*

Contenido: 405x82px Padding: 20px hacia ambos lados.

  • Smartphone*

Contenido: 320x100px Padding: 20px hacia ambos lados.

sixcol last

  • Desktop

Contenido: 441x116px

  • Tablet

Contenido: 405x99px Padding: 20px hacia ambos lados.

  • Smartphone

Contenido: 320x135px Padding: 20px hacia ambos lados.

componentes de gallery-opt-top

Componentes de gallery-opt-top en tablet.
Componentes de gallery-opt-top en smartphone.

twitter active

  • Tablet

Contenido: 405x99px Margin: 3px abajo.

  • Smartphone

Contenido: 405x99px Margin: 3px abajo.

flickr active

  • Tablet

Contenido: 405x99px Margin: 3px abajo.

  • Smartphone

Contenido: 405x99px Margin: 3px abajo.

fbevents

  • Tablet

Contenido: 405x99px Margin: 3px abajo.

  • Smartphone

Contenido: 405x99px Margin: 3px abajo.