Grupo A: Mantos de Gea

De Casiopea


TítuloGrupo A: Mantos de Gea
Tipo de ProyectoProyecto de Curso
Palabras Claveresponsive design, single page website, mantos de gea
Período2013-2013
Del CursoGráfica Digital 2013
CarrerasDiseño Gráfico
Alumno(s)Caterina Da Silva, Paulina Buvinic
ProfesorKatherine Exss
URLhttp://wiki.ead.pucv.cl/index.php/Mantos de Gea

Introducción

Con motivo del estudio del Responsive Web Design, se trabaja en la creación de un sitio web que presente la lectura para uno de los seis textos fundamentales de la e[ad] que responda ante los distintos soportes (móvil, tablet y computador). Para ello se deberán tener en cuenta todos los elementos que conforman a cada texto, ya sea títulos, subtítulos, párrafos, imágenes, bajadas de imagen. Junto con esto, cada sitio deberá presentar un elemento de navegación, en el cual se vincule el texto elegido junto con los otros textos fundamentales.


Acerca del texto

El texto Mantos de Gea, perteneciente a la Biblioteca Constel, presenta las observaciones de Claudio Girola y Godofredo Iommi ante los fundamentos de la teoría gráfica. Dichas observaciones nacen en los talleres dirigidos entre los años 1981 hasta 1983 en manos de los autores.

Actualmente, podremos encontrar el texto documentado en dos soportes diferentes: digital (wiki y pdf) e impreso (libro). Junto con ello, se podrá acceder a las fotografías capturadas en el taller a través del Archivo Histórico José Vial en Flickr. En ambos soportes, el relato estará acompañado de imágenes y notas correspondientes a las citas presentes en él. Aún así, para el soporte digital se agregará una ficha técnica.

Respecto a las imágenes, el relato se compone de 4 fotografías en blanco y negro, 6 dibujos fotográficos, y 5 dibujos a color. Debido a que la documentación digital se basa en el formato impreso del relato, siendo las imágenes capturas de cada página, cada ilustración fotográfica es colocada de a dos seguida por un dibujo a color.


Construcción

Definición de pantallas

Para comenzar a trabajar en propuestas de visualización, primero que todo se definen las resoluciones en las cuales se trabajará, es decir, los puntos de quiebre del sitio.

Se establecen cuatro pantallas mínimas:

  • Móvil: 320px x 480 px
  • Tablet: 768px x 1024px
  • Notebook: 1280px x 800px
  • Computador de Escritorio: 1920px x 1080px

GD-03-A-MantosdeGea-Resoluciones.png

Propuestas de Maqueta

Se realizan cuatro propuestas de sitio bajo las condiciones establecidas previamente. Las dos primeras se rigen en la diagramación del texto expuesta en el formato impreso. Las otras dos, son propuestas en las que se toma partido por la disposición de las imágenes de acuerdo al texto y la subtitulación de éste.

Propuesta I

Para esta posibilidad de sitio, se decide apegarse a cómo se muestra el texto en el formato digital (Wiki). Para todas las pantallas se verá un menú, que en un comienzo se mostraría en el inferior de la pantalla, para luego quedarse fijo en la parte superior. Éste contendría tres botones, uno para subir al inicio, otro con anclas al texto y otro con los enlaces a los otros textos. Todas las imágenes respetarían el ancho del texto, marcándose un margen claramente.


Propuesta II

Esta manera de mostrar el texto se divide en dos partes, ya que se decide que serán dos formas distintas de abarcar el sitio a través de las ilustraciones.

Móvil y tablet: Para estos dispositivos se mantiene la propuesta anterior, a diferencia que las imágenes toman mayor importancia ya que irían de borde a borde, mientras que el texto tendría su espacio y su margen de blanco.

Notebook y computador de escritorio: La idea principal es que las imágenes sean el fondo del sitio, por lo que al ir avanzando a través del texto se vayan cambiando las fotografías y dibujos. Para que la lectura del texto sea más clara, al hacer hover por sobre el párrafo, éste se vuelve más consistente para su lectura y así no interferir con la visión de la imagen de fondo. Para las notas de las imágenes, éstas tendrán su lugar pero se desvanecerán al hacer hover en el párrafo.


Propuesta III

Esta opción, al igual que la anterior, se divide en dos partes, pero esta vez, dándole importancia al texto y buscando minimizar la cantidad de elementos que se entregan en pantalla para no interrumpir la lectura. Se comienza a tomar partido por el texto y a buscar palabras clave que guíen la lectura.

Móvil y tablet: Siguiendo la línea minimalista, se deja todo lo que pueda interrumpir la lectura para el final, las fotos y la ficha. Se elimina también el menú, ya que, debido al poco contenido de los que se quiere mostrar, se le puede dar otra ubicación a sus partes. Sólo se mantiene un botón que se mueve con la pantalla para subir a la portada del sitio. Los tags irán en la portada, mientras que los links a los otros textos, en el footer.

Notebook y computador de escritorio: En pantallas más grandes se decide abarcar el espacio por medio de la disposición del texto, dándole mayor movilidad sin interrumpir la lectura. Al igual que el soporte anterior, fotos y ficha al final.


Propuesta IV

En esta opción se decide volver al menú de las primeras opciones. Se busca que las fotografías sean una parte importante del sitio, por esta razón se disponen de manera ponderante en esta disposición. Debido a esto, en el soporte de mayor tamaño, para abarcar el espacio que nos entregan estos dispositivos, el menú se mantiene a un costado para guiar la lectura a través de los tags.


Grilla Adaptable

Sin importar el prototipo que sea escogido para desarrollar, se determina una grilla considerando los distintos puntos de quiebres. Para ello, se trabajará utilizando una grilla adaptable en base a las propuestas del sitio Frameless. Para ello, se construye en torno a columnas de 80 pixeles de ancho, considerando un espacio entremedio de 20 pixeles.

Grilla Soportes (Mantos de Gea).jpg


Primera Versión

Wireframes de baja intensidad

Luego de seleccionar y fusionar algunas de nuestras propuestas, se decide a hacer los wireframes de baja intensidad para tener una idea de lo que se busca lograr antes de decidir la capa visual del sitio. Para ello se toma partido por las propuestas III y IV, en la cuales se toma partido al crear un índice a base de tags que ofrezca un cambio en la navegación de la lectura.


Así mismo, en base a la grilla anteriormente establecida, se determinan medidas en torno a la diagramación y a los tamaños tipográficos. Junto con ello, se emplean colores con el fin de estudiar el comportamiento de los distintos elementos. Ver imagen en alta resolución


GD-03-A-MantosdeGea-WireframeMedidas.png

Maqueta

Ya teniendo el esqueleto de lo que queremos que se vea en las pantallas, desarrollamos los wireframes en su máxima expresión, con las fotos, colores y tipografías que irán en él.


Segunda Versión

Wireframes de baja intensidad


Se vuelve a realizar el mismo ejercicio anterior utilizando colores para definir cada tipo de elemento. De esta manera se observa con mayor facilidad los distintos movimientos en cada punto de quiebre. Así mismo, debido a la nueva estructuración de los contenidos, se determinan nuevas medidas respecto a los elementos.Ver imagen en alta resolución

Maqueta


Prototipado

Tipografía

Elegimos dos tipografías para realizar este diseño, ambas son de libres para uso comercial.

Franchise

Para los títulos elegimos la Franchise, una tipografía de palo seco gruesa, que se comporta bien en pantalla.

Linux Libertine

Para los párrafos elegimos la Linux Libertine, una tipografía serif clásica, adaptada para la lectura en pantalla.

Tiene una variedad de seis pesos: Regular, Bold, Bold Italic, Italic, Display y Display Italic.

En ella destaca la lecturabilidad que ésta entrega en pantallas, ya que está calibrada en todas las variables que se encuentren en el lenguaje, como podemos ver en el siguiente link.

Cascada tipográfica

Con estas tipografías abarcamos toda la gama de posibilidades tipográficas que ofrece este texto y las necesidades de nuestro sitio, las cuales están expuestas en el documento a continuación, para tener una referencia clara de cómo usaremos estas tipografías al comenzar a escribirlo en el código.

Cascada de Estilos

Paleta de colores

GD-03-A-MantosdeGea-PaletaColores.png

Con la herramienta para crear paletas de colores del sitio Colour Lovers, creamos una Paleta de colores para nuestro sitio.

Estos colores serán usados en:

  • fondos
  • color de realce
  • menúes y barras de navegación
  • cambios por hover
  • títulos de sección

Estos colores se eligen en base a lo leído en el texto, ya que hablan de la "la observación de las aguas, de los suelos y (...) del fuego". Por lo que trajimos un azulado para las aguas, grises para los suelos y el realce en el tono magenta, para el fuego.

  • Blanco: #F7F7F2
  • Gris: #D9D9D9
  • Rosado: #F67280
  • Azul: #636C7A
  • Negro: #211819

Fondo texturado

Todos los colores son tratados de manera lisa, pero para que el fondo no fuese tan duro para la vista, decidimos usar la aplicación web Noise Texture Generator, la cual nos permite crear un fondo texturado a partir de un color que uno le disponga.


Mapa de Divs Tentativo

Mapa de Divs (Mantos de Gea, Grupo A)-01.png

Diseño de Interfaz

Se trabaja sobre las maquetas realizadas implementando los criterios determinados (medidas, tipografías, estilos y paleta de colores) llevando a cabo el diseño de interfaz final del sitio en todos sus soportes.

A continuación se presenta el diseño realizado sin incluir los elementos de interacción. Es decir, no se muestran los cambios en los elementos de enlaces, de hover, ni de navegación; mostrando la página sin scroll alguno. Ver imagen en alta resolución



Comparando los distintos componentes estructurales del sitio, se mantienen ciertos patrones entre los tamaños. Por ejemplo, para el caso del footer se diseñan dos estructuras distintas, considerando una para computador y notebook, y otra para tablet y móviles. Aún así, al seleccionar una enlace externo, ambos casos reaccionan igual, cambiando el color de su botón de la misma forma.

Por otro lado, existirá una mayor diferencia en los contenidos mostrados en la parte superior del sitio (o "portada"). No solo existirá una diferencia en que para los soportes mayores el texto se ubica a la izquierda de la pantalla, sino que se incluye la información de la ficha técnica por debajo del título. Junto con esto, existirá una diferencia en el soporte para tablet. Debido a su tamaño vertical, se la imagen de fondo no abarcará toda la pantalla, por ende, el menú de navegación es visualizado desde el comienzo. Debido a esto, los contenidos de Notas, + Info, y + Relatos no son mostrados junto a los otros vínculos en la parte superior.


Finalmente, los elementos de mayor cambio existentes en el diseño estarán en manos del menú de navegación, cambiando tanto en ubicación y forma de despliegue. Cabe destacar que para los soportes mayores (computador de escritorio y notebook) las imágenes se comportarán de distinta manera debido a que se hace uso del hover. Así, recién al posar el cursor sobre la imagen se revelará su información (pie de imagen).

A continuación se presenta cada diseño en forma individual, incluyendo las distintas navegaciones. Para ello se utiliza una línea punteada para marcar el segmento de cada pantalla.


HTML//CSS

Códigos Prehechos

Simple Fading CSS Slideshow

Link

Absolute Floating Menu

Link


Mapa de Divs Definitivo

A medida que se avanza con el código HTML y CSS, se debieron incluir nuevas clases y divs con el fin de ordenar las distintas jerarquías y ajustes de visibilidad dentro de cada resolución. Debido a esto, se replantea el mapa de divs de acuerdo a las decisiones finales. De esta manera, se puede observar el crecimiento y la complejidad del sitio.

Mapa de Divs en base al HTML final

Diseño Final

Finalmente, existirán leves cambios respecto al diseño de interfaz, con el fin de aprovechar el tamaño de pantalla por completo, y así entregar una mejor experiencia de lectura en cualquier dispositivo.

740px

Debido a esto, se trabaja en función de las resoluciones de pantallas en vez de los diferentes navegadores (Chrome y Explorer). A continuación se presentan los enlaces para visualizar las pantallas en sus tamaños reales.

Móvil | Tablet | Notebook | Computador de escritorio

Sitio Final

Link para revisar en línea Link para descargar .ZIP de la carpeta del sitio

Nota: se recomienda visualizar el sitio en el navegador Firefox.