Caso de Estudio: Illy Caffe
De Casiopea
| 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 |
Estudio de Wireframes sitio responsive: "Illy Issimo"
Versión para desktop
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
