Diferencia entre revisiones de «Caso de Estudio: Illy Caffe»

De Casiopea
Línea 56: Línea 56:
==Versión para tablets==
==Versión para tablets==


[[Archivo:Illy home 2.jpg|thumb|200px|none|Vista del home del sitio en versión para desktop]]
[[Archivo:Illy home 2.jpg|thumb|200px|none|Vista del home del sitio en versión para tablet]]


===Deconstrucción===
===Deconstrucción===


[[Archivo:Deconstrucción Home tablet.jpg|thumb|250px|none|Deconstrucción del home del sitio en versión para desktop]]
[[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.
* '''1''' Cuando la pantalla se reduce el logo de illy desaparece.
Línea 91: Línea 91:


==Versión para smartphones==
==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 Desktop.jpg|thumb|500px|none|Deconstrucción del home del sitio en versión para smartphone]]


[[Medio:Illy home 3 wireframe.pdf]]
[[Medio:Illy home 3 wireframe.pdf]]

Revisión del 18:53 9 jul 2013


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"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
ProfesorKatherine Exss


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 Desktop.jpg
Deconstrucción del home del sitio en versión para smartphone

Medio:Illy home 3 wireframe.pdf