Grupo 3: Hay que ser Absolutamente Moderno

De Casiopea


TítuloProyecto Sitio Responsive: "Hay que ser Absolutamente Moderno"
Tipo de ProyectoProyecto de Taller
Palabras Claveresponsive design, poema, Godofredo Iommi, grilla, sitio responsive
Período2013-2013
AsignaturaGráfica Digital 2013
Del CursoGráfica Digital 2013
CarrerasDiseño Gráfico
Alumno(s)Daniela Pardo, Camila De la Vega
ProfesorKatherine Exss
PDFArchivo:POE 1982 Absolutamente Moderno.pdf

Antecedentes del Texto

Reseña

  • Tipo de Referencia: Capítulo de Libro
  • Título del Libro: 4 Talleres de América
  • Título: Hay que ser Absolutamente Moderno
  • Autor: Godofredo Iommi M.
  • Páginas: 69 a 85
  • Año: 1982
  • Código de Pedido: 724.6 cru
  • Colección: Poesía
  • Nota de la Edición: Clases dictadas en la Escuela de Arquitectura de la ucv, Chile, durante el año académico 1979.
  • Nota Con§tel: Aparecen en la edición 14 fragmentos de dibujos de El Día y la Noche: Cuadernos 1917-1952, de George Braque.


El texto forma parte de la Colección Poética de la Biblioteca Con§tel y expone una clase del Taller de Amereida, dictada por el profesor Godofredo Iommi, acerca de la actividad humana y el oficio.

El texto registra una de las cuatro clases de Godofredo Iommi dada a los alumnos del Taller de Amereida el año 1979, en ésta, Iommi cita distintos autores: Baudelaire, Rimbaud, Poe, entre otros para formar un discurso acerca de la manifestación del oficio y de la poeisis.

Links Relacionados

  1. Hay que ser Absolutamente Moderno
  2. Audio del Taller de Amereida, 1979
  3. Apuntes a una Clase Magistral

Ediciones

Existen actualmente 2 ediciones en la Biblioteca de Arquitectura, cada una cuenta con 3 ejemplares. La primera, cuyo autor es el propio Godofredo Iommi, publicada en 1981: Hay que ser absolutamente moderno: Arthur Rimbaud. Y la segunda, con diversos autores, entre ellos Carlos Covarrubias y Claudio Girola, publicada el año siguiente: Cuatro talleres de América en 1979: hay que ser absolutamente moderno. La última edición posee una versión en PDF creada por el Taller de Investigaciones Gráficas.


Cuatro talleres de América en 1979: hay que ser absolutamente moderno

Elementos

  1. Reseña: El texto posee como encabezado una reseña con los datos de autor, título y edición entre otros.
  2. Texto: Discurso de Godofredo Iommi dada en una clase de Taller de Amereida. Posee aproximádamente 50 párrafos expuestos en 18 páginas.
  3. Imágenes: La edición presenta 14 dibujos de George Braque para El Día y la Noche.
  4. Notas: Notas que dan un cierre al discurso.
  5. Índice de Autores: Listado de referencias expuestas que permiten una búsqueda más rápida de ideas.

Decisiones en el Diseño

Como la reseña expone datos relevantes del texto, se posiciona al inicio de éste, para que el usuario pueda informarse lo más pronto posible con respecto al texto que comenzará a leer.

El texto posee una extensión importante, con más de 50 párrafos. Por lo que se debe exponer de manera que el sitio no posea un largo muy extenuante.

Las imágenes no son exclusivas del texto, por lo que se mostrarán como un agregado al texto sin más relevancia.

Las notas corresponden en el texto como un aparte con respecto a una idea expuesta, pero se debe considerar como un elemento aparte del Texto.

El índice de autores se debe tomar como un elemento de búsqueda en el texto.

Propuestas

Propuesta #1

Wireframes

La estructura del sitio posee un Menú de Navegación(1) que se mantiene en una posición relativa a la página, para facilitar la navegación del sitio. Posee 4 items: Reseña(2), que dirige hacia el inicio del sitio donde se encuentra la reseña, desde las resoluciones menores a 768px de ancho, desaparece y se convierte en un dropdown; Autores(5), dirige hacia el Índice de Autores, que se posiciona al final del sitio hasta las resoluciones menores de 768px, donde se convierte en un submenú; Notas, redirige hacia las notas, que se encuentran al final del texto, y el último enlace pertenece a los Textos, se refiere a los otros sitios creados a base de textos entregados como casos de estudios.

El Texto(3), al tener una extensión amplia, se divide en 10 párrafos por página (se crea una paginación)y en todos los sitios se muestra el Índice de Autores al final de cada texto, a excepción de resoluciones menores a 768 px, donde el ïndice se vuelve un dropdown del Menú. Las imágenes(4)desaparecen en resoluciones menores a 480px.

Propuesta #1.2

Wireframe completo.jpg Wireframe movil completo.jpg

Texto

Ancho: El ancho máximo pensado para una lectura continua del texto es de 640px.

Medidas de la Grilla

Extensión: El texto tiene aproximádamente 5.000 palabras y 14 imágenes. Para poder exponerlo de manera que no alargue demasiado el sitio se toman como guía las separaciones dadas por las páginas concretas del libro, por lo que el sitio contará con una serie de "paginaciones" para separar el contenido del texto en varias secciones. La búsqueda de temas e ideas se apoyará por el Índice de Autores.

Propuesta del texto en la Grilla

Imágenes

Las imágenes que se presentan en el texto no poseen un tamaño fijo y estricto, por lo que se acomodan en la grilla para que no sobresalgan demasiado de la lectura. Se escogen 2 tipos de tamaño: 297px de ancho por 260px de alto, para las imágenes, o más bien dicho dibujos verticales, y 640px de ancho por 260px de alto. Se trata de tomar en cuenta el blanco que ofrecen los dibujos en el texto.

Tamaño de las Imágenes en la grilla

En formatos menores a 400px de ancho, o sea, en plataformas móviles, se eliminan las imágenes tratando de priorizar la lectura ininterrumpida y la suma innnecesaria al largo del "scrolling". En compensación, se agrega un nuevo ítem al Menú Principal: Galería.

Menú Principal en Móvil


Menú

Principal: El menú principal contiene cuatro items de navegación. Reseña es un enlace que redirige hacia el inicio del sitio, ya que se tiene pensado a la Reseña como un elemento presente en todas las "páginas" de la lectura. Notas es un elemento presente en la última página de la lectura, este item se toma en cuenta como una lectura aparte del texto principal, ya que posee aclaraciones y conclusiones de éste. Autores es otro elemento recurrente en la navegación, a diferencia de que éste se encuentra en la sección inferior del sitio luego del texto; el Índice de Autores se utiliza como un medio de búsqueda en el sitio. Finalmente Textos, enlace que dirige hacia los demás textos de estudio.

Menú Principal

En plataformas menores a 400px, el menú cambia para adaptarse al medio y alas necesidades de éste. Tomando en cuenta el carácter rápido de los móviles, el menú se representa como un ícono en la parte superior derecha del sitio. En este formato, la Reseña se vuelve parte de un Menú en acordeón junto con Textos. Y se agrega un nuevo enlace, Galería, que muestra las imágenes eliminadas del texto.

Menú Principal en Móvil

Pie de Página: El menú en el pie de página presenta tres enlaces, que se asemeja al principal, pero se descarta Autores, debido a que éste se encuentra sobre este menú. Reseña se comporta como un enlace de identidad hacia la parte superior del sitio; Notas dirige a la última "página" del sitio, donde se encuentran, y Textos muestra los enlaces a los textos de estudio.

Menú Pie de Página

En los formatos móviles, el menú posee una sección aparte, el Índice de Autores.

Menú Pie de Página en Móvil

Índice de Autores: Este índice nombra todas las referencias presentes en el texto y las clasifica según el Autor y las páginas en donde éstas se encuentran. Utilizando estas referencias como una especie de palabras claves, se reemplaza el motor de búsqueda por este índice para guiarse por el texto.

En general, el índice se posiciona luego del texto en todas las "páginas" y en los tamaños móviles, se convierte en un menú de acordeón para regular el largo del sitio.

Propuesta #2

Wireframes

Esta es una propuesta planteada desde un concepto de lecturabilidad y navegación. Consta de un menú desplegable que contiene la lista de textos, un espacio en que podría considerarse "el blanco de la página", el título, la ficha, el texto centrado, y las notas que irían del lado derecho, apareciendo justo en donde es citado.


Luego de estos bosquejos, hay una limpieza y orden de los elementos que debemos tomar en cosideración para el funcionamiento del sitio. Se plantea el siguiente wireframe:

Wireframe modernos.png

Trabajamos con la siguiente grilla sacada de 960grid, donde 12 columnas de 60px con una separación de 20px forman el esqueleto completo del cuerpo del sitio. Este wireframe se trabajará de la siguiente manera: mímino 1 columna, para el header y footer y máximo 4 columnas para el contenido.

Grillas wirefrmae.png
Grilla960.png
Grid-medidas.png

Las medidas se calculan de una manera armoniosa para que todo el espacio esté pensado en el diseño.

Medidas grilla.png

Propuesta Definitiva

Tomando los elementos más destacables entre las dos propuestas anteriores, surgió una tercera propuesta en que fusionamos las ideas que nos parecía recuperar.

Versión web 1280px Versión web 1280px


La versión en Tablet de nuestro sitio cumpliría con las mismas funciones que con la versión web. Lo más importante es cómo los elementos del Footer empiezan a moverse y reacomodarse en su nuevo espacio. Para no entorpecer la lectura, mantuvimos en el centro el texto.

Versión Tablet 768px Versión Tablet 1024px Versión Tablet 1024px


De la versión de Smartphone es cuando los elementos necesitan del responsive design para centrarse en el formato. Decidimos mantener el contenido desde el centro, los grandes cambios visuales son que el logo y el menú desplegable se mantienen e una misma columna, igualmente pasa con el footer. El Índice de Autor cambia totalmente y se despliegan unos botones para acceder a la navegación de búsqueda, que anteriormente estaba formado por 3 columnas.


Versión Smartphone 320px Versión Smartphone 480px Versión Smartphone 320px

Mapa de Navegación

Antes de construir la organización del sitio, y después de los cambios realizados en cuanto a jerarquía de los contenidos, propusimos un Mapa de Navegación para poder entender la ruta y los vínculos que estarían puestos en nuestra sección.

Mapa navegacion abs-moderno.png

Mapa de DIVS

La estructura principal se separa en cinco bloques:

  1. <header>: Donde se posiciona el logo y el Menú de Navegación con los textos de la Colección Poética.
  2. <main-top>: Se coloca el Título del texto.
  3. <main>: El cuerpo principal del sitio. En él se sitúa la Reseña y el Texto.
  4. <main-bottom>: Luego del Texto se expone el Índice de Autores para ayudar en la búsqueda de párrafos.
  5. <footer>: Se coloca el logo, enlaces a la Colección Poética y un Menú de Pie de Página.

Éstos bloques principales se utilizan como contenedores sin márgenes para utilizar la propiedad Background sin importar el límite de la grilla.

Las estructuras secundarias del sitio son las <secciones> y las <filas>. La primera, establece los márgenes indicados por la grilla (940px)y la segunda, separa los contenidos en cada bloque, a diferencia de los bloques <col-x>, las <filas> no poseen un tamaño determinado, ya que se adaptan al formato de su contenedor. Finalmente, los bloques básicos del sitio son las columnas, <col-X>, que ordenan el contenido al interior de las secciones.

Mapa-de-divs wireframe.jpg


Mapa-de-divs estructura.jpg



Maqueta HTML

https://dl.dropboxusercontent.com/u/8529249/Divs/divs.html
Mirror:Archivo:Mapa de Divs.rar

Responsividad

Problemas

  1. Menú Superior: El quiebre que se quiere construir, se centra en convertir el menú "Colección Poética", en formatos menores a 500px, a un ícono que lo represente en el sitio.
  2. Reseña: Se tiene pensado una estructura distinta a la dada para escritorio. En el móvil se elimina el cuadro de reseña y se le convierte en un ítem más del menú.
  3. Texto: Cuidar los márgenes exteriores para que la lectura en el móvil no sea de un extremo a otro.
  4. Índice de Autores: En el formato móvil el índice de autores se minimaliza y se convierte en un menú de acordeon para no extender demasiado el scrolling y hacer más rápida la búsqueda de información.

Wireframe Responsivo

https://dl.dropboxusercontent.com/u/8529249/GD%202013/Tarea%20n%C2%BA%205/inicio.html

Aspectos Gráficos

Tipografía

La elección de nuestras tipografías consideramos principalmente el que sean Open Source, eso quiere decir que sean de libre comercialización. Tanto la Roboto Slab como la Open Sans la bajamos de Font Squirrel http://www.fontsquirrel.com/

Roboto Slab

http://www.fontsquirrel.com/fonts/roboto-slab?q=roboto

Para los títulos e hipervínculos elegimos la Roboto Slab. Tiene una naturaleza doble ya que su esqueleto "mecánico", parecido al de las máquinas de escribir, y su características geométricas. Al mismo tiempo esta font es amigable y tiene curvas amplias y abiertas, haciendo que tenga su propio ritmo. Lo usamos considerando siempre el poder del contrastre entre el color de fondo y de su cuerpo.

Se han utilizado para los títulos en tamaño de 48 pt para el Home, 38 pt para el Título del texto y 24-18 pt para los hipervínculos.

Roboto-muestra.png

  • Light

Roboto-light2.png

  • Regular

Roboto-normal.png

  • Bold

Roboto-bold.png

Open Sans

http://www.fontsquirrel.com/fonts/open-sans?q=open+sans

Para el texto completo de Hay que ser Absolutamente Moderno elegimos la Open Sans porque para la lecturabilidad de un texto continuo pensamos que lo mejor sería usar una san serif que sea armonioso con la Roboto Slab. La Open Sans es óptima para la lectura en sitios web. Es legible, limpia, y un tanto parecido a la Helvetica, que era nuestro modelo de tipografía para los wireframes

Opensans-muestra.png

  • Light

Opensans-light.png

  • Regular

Opensans-normal.png

  • Bold

Opensans-bold.png

Paleta Cromática

Para el sitio elegimos la siguiente muestra de colores hexadecimales.

Colores abs-moderno.png

Interfaz

Identidad gráfica

La idea de una identidad gráfica que caracterizara al texto Hay que ser Absolutamente Moderno, se mezcla con la propuesta de hacer un collage con las imágenes del texto. No se ha encontrado especificaciones de éstas imágenes y que relación tienen semánticamente con el texto, por lo que pensamos en usarlos de una manera que fuera en sí, la característica misma del sitio.


Header-abs-moderno.png

Banner-abs-moderno.png

Web

Interfaz-web abs-moderno.png Interface galeria.png Interface notas.png

Tablet

Interface tablet abs-moderno.png Interface tablet galeria.png Interface tablet notas.png

Smartphone

Interface smartphone-abs-moderno.png Interface smartphone galeria.png Interface smartphone notas.png

Sitio Final

Ver el Sitio en línea* Carpeta del Sitio

  • Conflicto con el menú responsive(problema con jquery). En el archivo zip se ve sin problema alguno.

Visualización del Sitio

Inicio

Mayor 980.png Menor 780.png Menor 620.png Menos 380.png


Galería

Galeria 980.png Galeria 780.png Galeria 620.png Galeria 380.png


Notas

Notas 980.png Notas 780.png Notas 620.png Notas 380.png

Decisiones Finales

Tipografía Final

Open Sans

Open Sans en FontSquirrel: http://www.fontsquirrel.com/fonts/open-sans?q

Open-Sans 2.png Open-Sans.png

Yanone Kaffeesatz

Yanone Kaffeesatz en FontSquirrel: http://www.fontsquirrel.com/fonts/Yanone-Kaffeesatz?q

Yanone-Kaffeesatz 2.png Yanone-Kaffeesatz.png

Fondos Finales

Header y Footer

Fondo 2.png

Cuerpo

Fondo 1.png


Paleta de Colores

Paleta.png


Formato de las Imágenes

Galería y Texto

Imagen thumb.png

Formato Galería Colorbox

Imagen grande.png

Colorbox

Enlace Sitio de Colorbox(jQuery: http://www.jacklmoore.com/colorbox/

Links

Ver el Sitio en línea* Carpeta del Sitio