Diferencia entre revisiones de «Caso de Estudio: Illy Caffe»
(No se muestran 20 ediciones intermedias del mismo usuario) | |||
Línea 5: | Línea 5: | ||
|Año de Término=2013 | |Año de Término=2013 | ||
|Carreras Relacionadas=Diseño Gráfico | |Carreras Relacionadas=Diseño Gráfico | ||
|Cursos Relacionados=Gráfica Digital 2013, | |Cursos Relacionados=Gráfica Digital 2013, | ||
|Profesor=Katherine Exss, | |Profesor=Katherine Exss, | ||
|Alumnos=Karla Vargas, | |Alumnos=Karla Vargas, | ||
|URL=http://us.illyissimo.com// | |||
}} | }} | ||
=Estudio de Wireframes sitio responsive: "Illy Issimo"= | =Estudio de Wireframes sitio responsive: "Illy Issimo"= | ||
==Versión para desktop== | ==Versión para desktop== | ||
[[Archivo:Illy home 1.jpg|thumb| | [[Archivo:Illy home 1.jpg|thumb|500px|none|Vista del home del sitio en versión para desktop]] | ||
[[Archivo:Deconstrucción Home Desktop.jpg|thumb| | ===Deconstrucción=== | ||
[[Archivo:Deconstrucción Home Desktop.jpg|thumb|500px|none|Deconstrucción del home del sitio en versión para desktop]] | |||
* '''1''' Logo de la marca. 67x70px. | * '''1''' Logo de la marca. 67x70px. | ||
Línea 52: | Línea 54: | ||
La información de este ítem se encuentra en PDF: [[Medio:Illy home 1 WIREFRAME.pdf]] | La información de este ítem se encuentra en PDF: [[Medio:Illy home 1 WIREFRAME.pdf]] | ||
==Versión para tablets== | |||
[[Archivo:Illy home 2.jpg|thumb|200px|none|Vista del home del sitio en versión para tablet]] | |||
===Deconstrucción=== | |||
[[Archivo:Deconstrucción Home tablet.jpg|thumb|250px|none|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== | |||
[[Archivo:Illy home 3.jpg|thumb|100px|none|Vista del home del sitio en versión para smartphone]] | |||
===Deconstrucción=== | |||
[[Archivo:Deconstrucción home smartphone.jpg|thumb|100px|none|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== | |||
[[Archivo:Divs principales desktop.jpg|thumb|300px|right|Divs principales desktop.]] | |||
[[Archivo:Divs principales tablet.jpg|thumb|300px|right|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. | |||
[[Archivo:Divs principales smartphone.jpg|thumb|100px|none|Divs principales smartphone.]] | |||
==Componentes del header== | |||
[[Archivo:Header desktop.jpg|thumb|300px|none|Row en desktop]] | |||
[[Archivo:Header tablet.jpg|thumb|300px|none|Row en tablet]] | |||
[[Archivo:Header smartphone.jpg|thumb|300px|none|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. | |||
[[Archivo:Apertura desktop.jpg|thumb|300px|none|Apertura en desktop]] | |||
[[Archivo:Apertura tablet.jpg|thumb|300px|none|Apertura en tablet.]] | |||
[[Archivo:Apertura smartphone.jpg|thumb|300px|none|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. | |||
[[Archivo:Main content desktop.jpg|thumb|300px|none|Main content en desktop.]] | |||
[[Archivo:Main content tablet.jpg|thumb|300px|none|Main content en tablet.]] | |||
[[Archivo:Main content smartphone.jpg|thumb|100px|none|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=== | |||
[[Archivo:Homehead desktop.jpg|thumb|300px|none|Homehead en desktop.]] | |||
[[Archivo:Homehead tablet.jpg|thumb|300px|none|Homehead en tablet.]] | |||
[[Archivo:Homehead smartphone.jpg|thumb|300px|none|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. | |||
[[Archivo:Mobile head tablet.jpg|thumb|300px|none|Mobilehead en tablet.]] | |||
[[Archivo:Mobile head smartphone.jpg|thumb|300px|none|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é). | |||
[[Archivo:Caffe desktop.jpg|thumb|300px|none|Caffe en desktop.jpg]] | |||
[[Archivo:Caffe tablet.jpg|thumb|300px|none|Caffe en tablet.jpg]] | |||
[[Archivo:Caffe smartphone.jpg|thumb|300px|none|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. | |||
[[Archivo:Fhead desktop.jpg|thumb|300px|none|Sixcol y sixcol last en desktop]] | |||
[[Archivo:Fhead tablet.jpg|thumb|300px|none|Sixcol y sixcol last en tablet]] | |||
[[Archivo:Fhead smartphone.jpg|thumb|300px|none|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== | |||
[[Archivo: Gallery tablet.jpg|thumb|300px|none|Componentes de gallery-opt-top en tablet.]] | |||
[[Archivo: Gallery smartphone.jpg|thumb|300px|none|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. |
Revisión actual - 06:06 11 jul 2013
Título | Caso de estufio: Illy Caffé |
---|---|
Palabras Clave | Responsive Design, Web, Gráfica Digital, Estudio. |
Período | 2013-2013 |
Del Curso | Gráfica Digital 2013, |
Carreras | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
Alumno(s) | Karla Vargas |
Profesor | Katherine Exss |
URL | http://us.illyissimo.com// |
Estudio de Wireframes sitio responsive: "Illy Issimo"
Versión para desktop
Deconstrucción
- 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
Deconstrucción
- 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
Deconstrucción
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
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.
- 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.
- 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.
Componentes del header
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.
- 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.
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
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.
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.
- Tablet
Contenido: 77x29px
- Smartphone
Contenido: 77 x 29px
- 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é).
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
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
- 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
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.