Grupo B: Mantos de Gea

Título	Grupo B: Mantos de Gea
Tipo de Proyecto	Proyecto de Taller
Palabras Clave	responsive design, mantos de gea
Período	2013-2013
Asignatura	Gráfica Digital,
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)	José Miguel Ortega, Catalina Reyes
Profesor	Katherine Exss

Se plantea como proyecto del curso Gráfica Digital la implementación de un diseño Responsive a un documento de la Biblioteca Constel, proponiendo y programando tres grillas para su uso dentro de PC, tablet y dispositivos moviles.

Se disponen seis documentos dentro del taller: Carta del Errante, De la Utopía al Espejismo, Hay que ser absolutamente moderno, Hoy me voy a Ocupar de mi Cólera, Segunda Carta Sobre la Phalène, Mantos de Gea; de los cuales se diseña una interfaz para uno sólo y luego se vincula al resto mediante algún tipo de menú.

Mantos de Gea

Fuente: Mantos de Gea

Galería: Flickr

El documento consta de una serie de reflexiones por parte de Claudio Girola y Godofreddo Iommi sobre los principios del oficio del Diseño Gráfico, a partir de su experiencia al dirigir un grupo de talleres entre los años 1981 y 1983.

Se definen a los Mantos de Gea como "construcciones que nacen de un fundamento que quiere constituirse como teoría gráfica y cuyo punto de partida no es 'logotípico'". Los autores proponen re-plantearse el diseño gráfico como un algo que se 'presenta', alejándose del arquetipo del 'logo' fuera de sí, prevaleciendo su valor intrínseco.

De este modo, realizan una serie de planteamientos a los talleres en torno a la observación de la tierra, el agua, el fuego y el aire.

Composición

El documento se compone de

Ficha
Texto
Citas
Fotografías blanco y negro
Ilustraciones a color

Wireframes de baja intensidad

Se definen como resoluciones de pantallas para el diseño Responsive las siguientes:

PC: 1280 x 1024
Tablet: 1024 x 768
Dispositivo Móvil: 320 x 480

Propuesta 1

Se plantea un menu principal que víncula al resto de los cinco documentos y un menu secundario que dirige a una lista completa de la Biblioteca Constel, a la lista de documentos según su autor y además contiene un motor de búsqueda que permite buscar según palabras claves entre todos los documentos.

Dentro del cuerpo del sitio se disponen la ficha, el texto, las imágenes y notas (al leer el documento y clickear sobre una nota lleva al usuario hacia el fin de la página).

PC
Tablet
Smartphone

Propuesta 2

Se propone el sitio con un menu principal de la Biblioteca Constel, donde se puede ir a todos los contenidos, listados por autor o bien, ingresar palabras claves en un buscador de todos los documentos.

Se añaden dos laterales que acompañan la lectura. A la derecha se incorporan las categorías Ficha de Documento, Descarga Documento y Textos Relacionados, donde se vinculan los otros cinco textos del proyecto del curso. A la izquierda, aparece una barra discreta para compartir en redes sociales.

En resoluciones más pequeñas, la barra izquierda desaparece y la derecha pasa a ser iconos que acompañan la lectura.

PC
PC
Tablet
Tablet
Móvil
Móvil
Móvil
Móvil

Propuesta 3

En esta propuesta, al ingresar al documento en resolución de PC, aparece una barra lateral izquierda que acompaña la lectura (se desplaza) y contiene un buscador de palabras dentro del documento, la ficha y un hipervínculo para descargar el archivo en versión PDF.

El menu principal se simplifica y contiene sólo un buscador para toda la Biblioteca Constel y un botón para volver al inicio.

Ya en versión tablet, la barra lateral izquierda pasa a ser una franja que al hacer click en ella, se despliega. El documento además, se divide en páginas, para facilitar la lectura y evitar cansar al usuario.

En dispositivos móviles, sigue la misma grilla de la tablet con la diferencia que las imagenes pasan a estar una por sobre la otra.

PC HOME
PC Contenido
PC Nota
Tablet HOME
Tablet Contenido
Tablet Ficha
Smartphone HOME
Smartphone Contenido
Smartphone Ficha

Propuesta 4

Se propone para la versión PC agregar un submenú al menú principal, donde se vincula hacia los otros textos, y aquel documento en uso pasa a tener una barra por debajo que indica que se está visitando.

Al hacer hover por sobre las citas dentro del documento, aparecen sus referencias, manteniendo la opción de hacer click sobre ellas y ser redireccionado hacia el fondo de la página donde se encuentran las citas.

En la versión para tablet, la barra izquierda desaparece para ser una franja que se despliega y el submenú se reemplaza por una franja que indica 'MENU' y un buscador de palabras dentro del documento. Al hacer click en MENU, lleva al usuario hasta el fondo de la página, donde se encuentran los botones hacia el resto de los textos y un buscador dentro de toda la Biblioteca Constel. Esta grilla se sigue para la versión en Smartphone

PC Contenido
PC contenido con Nota
Tablet HOME
Tablet Contenido
Tablet Ficha
Smartphone HOME
Smartphone Contenido
Smartphone Ficha

Primera propuesta formal de Wireframes

Consta básicamente de un header que señala que se está navegando la Biblioteca Constel, un menu que redirecciona a los textos relacionados de la biblioteca, un cuerpo de texto, una barra lateral con información adicional y un footer. La barra lateral del sitio incluye ficha del texto (con notas generales), links de interés y un link de descarga de la versión PDF del archivo.

PC

Se propone para la versión PC del sitio, segregar el menú en dos para hacer un mejor uso del espacio. Así es como el título de la página (Bilbioteca Constel) pasa a ser un header, y los textos relacionados un footer que se mantiene constante hasta llegar a fondo de la página (donde se fusiona con el footer).

Al hacer hover por sobre las citas dentro del documento, aparecen sus referencias, manteniendo la opción de hacer click sobre ellas y ser redireccionado hacia el fondo de la página donde se encuentran las citas agrupadas como 'notas'. Al hacer click en el botón para agrandar una imagen, aparece un lightbox de la galería.

La barra lateral aparece segmentada en sus secciones, aunque desplegada la ficha, permitiendo al lector acceder automáticamente a la información más detallada una vez que ingresa al sitio.

Home PC
Previsualizacón de Imágenes
Lightbox Imagen
Footer

Tablet

Horizontal

Para la versión vertical de la tablet, se mantienen separados el título del sitio del menú que lleva hacia los textos relacionados. Se toma la decisión de dividir la totalidad del texto en seis páginas, de aproximadamente 800 a 1000 palabras, de manera que no se sobrecargue de información al lector. Al final de cada lectura de página es que aparece una barra de navegación que permite avanzar o retroceder en la lectura.

La barra lateral, separada en las secciones mencionadas anteriormente, pasa a ser desplegable su información más extensa contenida en 'ficha'.

Las imagenes contenidas en el cuerpo del sitio se reducen a una, aumentando su tamaño, y por lo mismo, se deja de usar el lightbox como herramienta para una mejor visualización. Desaparece el hover sobre las citas que las muestra.

Home Tablet Horizontal
Despliegue Menú Secundario
Mdgtablethorizontalimágenes.gif

Previsualizacón de Imágenes
Menú y Footer

Vertical

El menú, que se encontraba separado previamente, pasa a unirse en una sola franja en el header del sitio, situando el título y a continuación, un link que indica 'MENU'. Al hacer click en MENU, lleva al usuario hasta el fondo de la página, donde se encuentran los botones hacia textos relacionados, el principio de la página y el inicio del texto que se está leyendo. Bajo esta nueva ubicación del menú es que se sitúa el footer de la página.

La barra de navegación que permite ir de página en página del texto, pasa a ser estática en el sitio.

Home Tablet
Despliegue Menú Secundario
Mdgtabletimágenes.gif

Previsualizacón de Imágenes
Mdgtabletfootermenú.gif

Menú y Footer

Móvil

El móvil en sus dos versiones, horizontal y vertical, mantiene una misma estructura, variando únicamente sus anchos (manteniendo el ancho de columna), de manera de aprovechar al máximo el tamaño de la pantalla.

El menú superior continúa conteniendo el título del sitio y un botón de menú que redirecciona hasta el final de la página.

La barra lateral se convierte de franjas a iconos, facilitando al usuario identificarlas y hacer click por sobre ellos. Al clickear 'ficha', se despliega por sobre el contenido del body un cuadro de texto con la información detallada del documento. Al hacer click en 'links' aparecen hipervínculos hacia la wiki de la e[ad], Biblioteca Constel y galería de fotos en flickr.

En el cuerpo de texto, las imagenes siguen siendo de a una, variando únicamente el ancho en versión horizontal a vertical, de manera que se permita la correcta visualización dentro de la plataforma.

Horizontal

Home
Click en una nota
Visualización imagenes
Click en ficha
Click en links
Click en Menu

Vertical

Home
Click en una nota
Visualización imagenes
Click en ficha
Click en links
Click en Menu

En relación a la grilla y tamaños

La grilla del sitio se construye esencialmente a partir de ocho columnas de igual tamaño que van cambiando su dimensión según el ancho de la pantalla. De esta manera, se mantiene una proporción entre todas las plataformas.

Es únicamente en la versión horizontal del móvil que se rompe esta norma ya que se propone aprovechar al máximo el tamaño de la pantalla manteniendo márgenes mínimos en la grilla (utilizando el mismo ancho de columna para los márgenes que en su versión vertical y aumentando el ancho del contenido interior.

PC

Mdgwebtamañoshome.gif

Tamaños Home PC
Mdgwebtamañoimagen.gif

Tamaños Imágenes PC
Mdgwebtamañosboxlight.gif

Tamaño Imagen Boxlight PC
Mdgwebtamañosfooter.gif

Tamaño Footer PC

Tablet

Vertical

Mdgbtamañoshome.gif

Tamaños Home Tablet Vertical
Mdgbtamañosmenu.gif

Tamaños Menú Desplegable Tablet Vertical
Mdgbtamañosimagenes.gif

Tamaño Imágenes Tablet Vertical
Mdgbtamañosfooter.gif

Tamaño Footer y Menú Inferior Tablet Vertical

Horizontal

Mdgbtamañotablethorizontalhome.gif

Tamaños Home Tablet Horizontal
Mdgbtamañotablethorizontalmenudes.gif

Tamaños Menú Desplegable Tablet Horizontal
Mdgbtamañotablethorizontalimágenes.gif

Tamaño Imágenes Tablet Horizontal
Mdgbtamañotablethorizontalfooter.gif

Tamaño Footer y Menú Inferior Tablet Horizontal

Smartphone

Vertical

Tamaños Home Movil
Tamaños Menú y Footer Movil
Tamaño Imágenes Movil
Tamaño Ficha Desplegable Móvil

Horizontal

Tamaños Home Movil Horizontal
Tamaños Menú y Footer Movil Horizontal
Tamaño Imágenes Movil Horizontal
Tamaño Ficha DesplegableMóvil Horizontal

Estilos Tipográficos

Se presentan las variaciones en cuanto a tamaños tipográficos dentro de las tres plataformas, indicando el uso de cada estilo.

Archivo:Mdgbestilostipográficos.gif

Segunda propuesta formal de Wireframes y Diseño Interfaz

La propuesta final para la visualización del texto 'Mantos de Gea' en diseño responsive busca mantener una jerarquía visual clara en sus tres versiones. Se trabaja a partir de los wireframes de la primera propuesta formal, determinando una simplificación de los elementos y estructura del sitio.

Wireframes

Desktop

El principal cambio en cuanto a Desktop es que se añade una barra de navegación a la izquierda que permite navegar el texto a través de las citas. Numerándolas e incluyendo un ícono que indica la lectura.

Se modifica además la visualización de las imágenes contenidas en el texto, que pasan a formar una galería interactiva compuesta por tres imágenes.

Home PC
Barra Inferior
Visualización Imagen 1
Visualización Imagen 2
Visualización Imagen 3
Notas y Footer

Tablet

En cuanto a la tablet, se agrega al igual que en Desktop, una segunda barra lateral a la izquierda para navegar a través de las citas.

Se reduce la barra a la derecha a los subtítulos e íconos, tanto en versión vertical como horizontal. Para ambas, la ficha se despliega por sobre el texto al hacer click en ella, escondiendo el contenido del texto continuo mientras el usuario busca información de su interés.

En la versión vertical de la tablet, se ocultan los botones del menu inferior y pasa a ser un único botón situado en el header que indica 'MENU' y redirecciona hacia el fondo del sitio.

Wireframe Vertical

Home Tablet Vertical
Menú Desplegable
Visualización Imagen 1
Visualización Imagen 2
Footer y Notas

Wireframe Horizontal

Home Tablet Horizontal
Barra Inferior
Menú Desplegado
Visualización Imagen 1
Visualización Imagen 2
Footer y Notas

Móvil

En su versión para plataformas smartphone, la barra lateral derecha se reduce aún más, removiendo los subtítulos y manteniendo únicamente los íconos que permiten identificar las secciones.

La barra que se encontraba a la izquierda que permitía navegar entre citas, pasa a situarse bajo el header del sitio, y se mantiene durante la navegación.

Wireframe Vertical

Home Smartphone Vertical
Menú Desplegable Links
Menú Desplegable Ficha
Visualización Imagen 1
Citas
Menú y Footer

Wireframe Horizontal

Home Smartphone Horizontal
Menú Desplegable Ficha
Menú Desplegable Links
Visualización Imagen 1
Citas
Menú y Footer

En relación a la grilla y estructura

Se utiliza como base para todas las plataformas una grilla compuesta por 14 columnas que incluye padding interno y márgenes entre ellas.

La única excepción a esta regla interna es la versión horizontal del smartphone, que mantiene los márgenes de su versión vertical en vez de cambiar el tamaño proporcionalmente de la grilla a su ancho. De este modo se aprovecha de mejor manera el espacio de la lectura del texto continuo.

PC

Tablet

Smartphone

Comparación elementos de la estructura

Se plantea a continuación una comparación visual del cambio de ubicación y tamaños de los distintos elementos dentro de la estructura de manera de apreciar la característica de 'responsive' dentro de la propuesta.

Diseño de Interfaz

En la propuesta en torno al diseño de interfaz, se plantea al sitio como un reflejo de la gráfica que aborda el texto 'Mantos de Gea', situando las fotografías del 'aire' como centro de la línea gráfica. Mediante el uso de capas y transparencias se pretende mantener una fluidez en la navegación que facilite la lectura.

Desktop

Home PC
Barra Inferior
Visualización Imagen 1

Tablet

Vertical

Home
Visualización Imagen 1
Footer y Notas

Horizontal

Interfaz Home Horizontal
Home Menú Inferior Interfaz.gif

Menú Inferior
Visualización Imagen 1
Footer

Smartphone

Vertical

Home Smartphone Vertical
Visualización Imagen
Menú

Horizontal

Home Smartphone Horizontal
Visualización Imagen
Menú

PROPUESTA FINAL: Diseño de Interfaz

Para la propuesta final de diseño de interfaz se decide continuar con lo anterior, una gráfica que nace desde las propias fotografías del texto, ya sea el header como también la paleta de colores a utilizar. Uno de los principales cambios por los que se apuesta en el diseño final es el uso de una nueva tipografía para los títulos (tauri) y el modo de aparecer del menú de navegación en el soporte smartphone. En relación al contenido se mantiene la propuesta de dividirlo a través de las distintas notas a modo de subtítulo, lo cual se puede navegar mediante una menú ubicado en la parte lateral izquierda de la pantalla.

Cabe mencionar que la imagen anterior no busca representar el cómo una misma cantidad contenido se adapta a través de diferentes soportes, sino más bien el cómo se adaptan los distintos elementos (títulos, menú, texto, fotografías, etc).

A través del cambio de soporte, los elementos no tan sólo se adaptan mediante el cambio de tamaños, sino que en algunos casos el modo en que previsualizan (específicamente las fotografías), como también su modo de aparecer como contenido oculto (ficha y links).

Paleta de Colores

La paleta de colores utilizada dentro del sitio se basa en los grises de la serie de fotografías de registro de los talleres tratados en el texto 'Mantos de Gea', añadiendo rojos y verdes azulados que destaquen elementos específicos.

Tipografías

Tauri

Se utiliza la fuente Tauri, creada por la diseñadora Yvonne Schüttler, dentro del diseño de interfaz para títulos, subtítulos y notas. La fuente, disponible en Google Fonts, se aplica en el estilo Normal 400.

Source Sans Pro

La tipografía Open Sans fue diseñada por Steve Mattenson y comisionada por Google. Busca lograr una alta legibilidad tanto en plataformas web como análogas.

Se usa en el diseño del sitio para el texto del documento, variando entre los pesos tipográficos de 200 y 400. Es aplicada la versión Normal 400 para el texto continuo del documento, mientras que la versión Light de 200, en la barra lateral de ficha.

Desktop

Para el interfaz del desktop o escritorio se propone utilizar el espacio de la mejor manera posible, en donde el contenido aparezca de una manera diferente en comparación a los otros soportes. Lo descrito anteriormente se propone a través de dos situaciones principalmente; por un lado la ficha técnica del texto, la cual se muestra de manera completa sin ningún tipo de contenido oculto. Y por otro lado se propone una visualización especial de las imágenes, la cual consiste en que al seleccionar una de estas, esta aparezca de manera completa, mientras que el resto se previsualizan a través de un solo segmento (simulando estar detrás de la principal). Un cambio relacionado a este soporte se encuentra en el menú de navegación secundario (textos relacionados), el cual se mantiene constante a través de la navegación del sitio con la diferencia de que dentro de su estructura se encuentra el footer.

Home versión Desktop
Menú navegación activado
Visualización Galería

Tablet

Para el diseño correspondiente a la tablet se descarta la visualización de las imágenes que se propuso para el desktop, principalmente por motivos relacionado con el modo en que el usuario se relaciona con este tipo de soporte (touch), bajo este sentido se propone una visualización más simple de tipo galería la cual permite ver las fotografías unas por una. Otro principal cambio que se genera es el modo de aparecer del contenido de la ficha, el cual en este caso se encuentra de manera oculta y aparece a modo de boxlight una vez que se hace click en "Ficha". Como situación final se propone un estado intermedio en relación al menú de navegación que linkea a los textos relacionados de la Biblioteca Casiopea, abriendo paso a la principal diferencia entre la tablet horizontal y vertical. Como anteriormente se señaló existe una diferencia entre la inclinación de la tablet la cual se relaciona con el modo de aparecer del menú secundario (textos relacionados) en conjunto con el footer. Ya que como se habla de esto mismo, un menú secundario, este pasa a la parte más baja del sitio cuando la tablet se encuentra de manera vertical, mientras que cuando está horizontal, este aparece de la misma forma que en el soporte desktop.

Vertical

Home Tablet Vertical
Menú Desplegable Ficha
Visualización Galería
Menú y Footer

Horizontal

Home Tablet Vertical
Menu navegación activado
Menú Desplegable Ficha
Visualización Galería

Cabe señalar que se decide eliminar el botón "Menú" de la propuesta anterior, el cual guiaba al usuario a la parte baja del sitio en donde se encontraba el menú secundario, todo esto por motivos de jerarquía de contenido, ya que se considera de mayor importancia el poder navegar por el texto a través las distintas notas, como también el poder acceder a las opciones de leer la ficha, utilizar links y descargar el archivo.

Smartphone

En relación al smartphone, el principal cambio que se realiza es en la barra de navegación lateral izquierda (notas), la cual en este soporte se adapta en forma de botón y se despliega hacia abajo. Por otro lado los botones que generan el aparecer de la ficha, links y descarga del contenido se mantienen al lado derecho del sitio con la diferencia de que sólo se construyen a través de los iconos. Finalmente, considerando el tamaño de la pantalla y la búsqueda de la mejor visualización de las imágenes, se propone que las notas ligadas a estas mismas ya no se ubiquen sobre ellas, sino que debajo.