Proyecto de sitio responsive: "Segunda Carta sobre la Phalène"
| Título | Grupo 5: "Segunda Carta sobre la Phalène" |
|---|---|
| Tipo de Proyecto | Proyecto de Curso |
| Palabras Clave | responsive design, web, gráfica digital, estudio, constel |
| Período | 2013-2013 |
| Asignatura | Gráfica Digital 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, Gabriela Pérez |
| Profesor | Katherine Exss |
Antecedentes del texto
El texto Segunda Carta sobre la Phalène pertenece a la Biblioteca Constel, colección poética. Como tal expone parte del pensamiento artístico y poético de la escuela, fundamentalmente en torno a los actos, la phalène y la condición poética del hombre.
El texto corresponde a un capítulo del libro dos conversaciones de Godofredo Iommi. Libro editado en 1984 y que reúne una serie de conversaciones mantenidas por Godo y los miembros del instituto de arte UCV, en el año 1969.
Elementos previos de la edición
Existen actualmente dos ediciones oficiales de este texto. La primera de ellas es el libro de 1984 mientas que la segunda corresponde a una edición digital (PDF) realizada para el sitio web Casiopea cuya fecha de creación se desconoce. Ambas, aunque en distinto soporte, comparten ciertos elementos.
- Ficha técnica: En la primera edición no existe concretamente una ficha técnica aunque algunos de los datos técnicos están expuestos a manera de colofón o como bajadas en la portada. Las edición PDF incorpora una ficha técnica estructurada.
- Contenido principal y notas: Lógicamente se encuentra en ambas ediciones. Primero se expone un contenido que carece de capitulación, luego vienen tres notas entre las cuales la última responde al nombre de nota para relación de arquitectura y Phalène. Esta última, a diferencia del resto, no corresponde a dichos de Iommi sino que de Alberto Cruz. El resto de las notas, por su parte, no tienen un nombre específico.
- Imágenes: El texto contiene cinco imágenes las cuales se reparten entre las notas y el contenido. Son dibujos de Alberto Cruz basados en unas series fotográficas capturadas en los phalènes distintas. Las series son PH-AP pla 70 - Phalène de las Playas y CAP aul 73 - aula Amereida. Existe un grado de abstracción en los dibujos lo que los vuelve una invención gráfica más que un simple croquis. Esta abstracción de Alberto se fundamenta en la intención de retratar un ritmo. Con dos elementos, la posición del sol y la cercanía de un barco, se construye una continuidad temporal. Es bajo esta misma lógica que los dibujos se sitúan en ambas ediciones. Repartidos según su orden en el espacio del texto y las notas, consiguen marcar aquel ritmo en el texto.
- Índice de autores: La edición PDF incluye este apartado. Contiene en una lista alfabética los autores nombrados durante el texto.
Criterio editorial
Tomando en cuenta las limitaciones espaciales de los soportes móviles se decide dividir en texto principal en cinco unidades temáticas o capítulos. Con ello se evita la incorporación de columnas de textos demasiado extensas. Al dividir el texto por capítulos se le permite al lector navegar por distintas partes del texto si así lo desea además de ahorrarle la necesidad de hacer demasiado sroll.
Como son cinco capítulos, a cada uno se le asigna una imagen al pie. Al ponerlas cada una marcando el fin de un ciclo de lectura y en su mismo orden, se mantiene la idea de secuencia y ritmo propuesta en las ediciones anteriores.
Las tres notas, por su parte, disocian del texto adjuntándose como una sección independiente. Se define así para que tengan su propio lugar dentro de la navegación. A su vez la nota dos se divide en tres capítulos por ser muy larga.
La ficha perteneciente a la versión en PDF toma parte del sitio como una sección. Además se toma en cuenta la inclusión de los enlaces para cada uno de los textos considerados dentro del encargo.
Propuestas (wireframes)
Propuestas para móviles
Grilla inicial para móvil
Al analizar un diseño posible para móviles, se plantea la necesidad de contar con una organización de contenidos agradable y limpia en cuanto a su presentación en la pantalla; dado que esta estructuración de información del sitio netamente de lectura en nuestro caso, ahora deberá pensarse en una resolución menor, comparada con otros dispositivos (320 x 480 px).
Se aborda una medida general, que podría denominarse como el contenedor o la resolución real de la pantalla: 320 x 480 px en este caso tomadas de un iPhone. En base a este contenedor, se construye interiormente la organización inicial de lo que queremos presentar al usuario al ingresar al sitio y lo que por el tamaño debe ser ocultado antes de una primera interacción por parte del usuario.
Estructura inicial de la propuesta
Esta grilla presenta un Header, que contiene a modo de iconografía por el momento unas barras que representan el menú oculto antes de su despliegue. Anexo a este header se halla el menú secundario, que separa datos correspondientes al texto (Notas y Ficha Técnica con datos acerca del autor y editoriales), pero que como propuesta han sido separados del texto general, para ser abordados individualmente, ya que representaban espacios adicionales innecesarios en el área de visualización móvil principal.
Además, se plantea la incorporación de una barra de navegación por capítulos, que se mantenga fija en el área del footer o parte inferior de la pantalla. Esta barra permitiría establecer un manejo por parte del usuario respecto al texto que lee y su ubicación capitulada en 5 divisiones a lo largo de la lectura.
Cuando se plantea una estructura, que permita agrupar el contenido dividido en 5 capítulos enteramente textuales, junto a una imagen que acompañe a estos, en algunos casos, se tiene que establecer una medida o forma de mostrar las distintas categorías o capas de información, así definimos en una primera instancia, que la barra de navegación principal haga aparición en pantalla, cuando la persona cliqueé el ícono dipuesto en el header. Este icono despliega el menú general y a la vez hace descender el menú secundario que contiene las Notas y Ficha del texto.
Una vez presentado el menú a completitud, lo que sucede es que dentro de las secciones están los links a los otros textos de la Biblioteca Constel junto al texto principal que da origen a este sitio web (este es destacado para saber que estamos revisándolo en ese momento). La barra fija de navegación por capítulos se encargará de ir avanzando o retrociendo por los ítems divididos, dejando siempre remarcado el círculo y número de capítulo que indicará donde estamos dentro del texto general.
La sección Notas del menú secundario, al ser dividida, por constar de 3 unidades de textos según su original, se desprende y es mostrada en 3 links inicialmente, que aparecen en el espacio anterior al texto principal, bajo el menú secundario y destacadas con otra jerarquía tipográfica.
La Segunda Nota que entrega el texto, es de especial interés para analizar, puesto resulta necesario aplicar en ella al igual que los capítulos, una división esta vez en 3 partes, por su extensión, mayor comparada con la Primera y Tercera nota. De este modo ahora la barra de navegación fija en el footer, pasa a mostrar sólo 3 círculos, que permiten recorrer ahora la Segunda Nota.
Sección Notas
Al acceder al botón notas se abre una nueva sección que expone un menú de navegación. A través de este nuevo menú el usuario puede escoger qué nota quiere leer. Luego de esta sección de menúes el usuario llega al sitio de la nota escogida. Cuando se despliega el menú de navegación a través de los textos de la biblioteca, los botones se desplazan hacia abajo. Algunas secciones de lectura de notas carecen de la barra de navegación por capítulos pues no poseen más de un apartado.
propuesta 2
La barra de capítulos se vuelve un botón el cual al ser seleccionado muestra la barra de navegación. De este modo se optimiza el espacio. El usuario puede prescindir de la barra de navegación por capítulos cuando lo desee aumentando su espacio de lectura. En esta propuesta se plantea además dejar tanto los textos de Constel como las notas y las fichas en un menú lateral. El menú se despliega por el lado izquierdo al seleccionar el botón “constel”. Dentro de este menú los contenidos se encuentran etiquetados en dos grupos, un grupo dedicado a los textos Constel y otro dedicado a los anexos se pude navegar con el scroll a través de este menú en el caso de estar apaisado por ejemplo.
Cuando la barra se desliza por el costado izquierdo deja entrever el contenido del home. A pesar del desplazamiento el botón “constel” sigue visible lo cual permite volver al estado previo.
Cuando el lector realiza la opción de scroll dentro del texto leído el header se desvanece. Esto genera que queden en la pantalla tan solo los elementos esenciales para la lectura y la navegación.
Es importante recalcar que los dos botones de navegación permanecen fijos. Esto permite al usuario acceder a ellos sin importar en que punto de la lectura se encuentre.
Luego se proponen otras maneras posibles de desplegar tanto el menú de la bilbioteca como el menú de navegación por capítulos.
Propuestas para tablets
Composiciones iniciales en tablet
Inicialmente la propuesta para tablet se definió como una navegación con barra lateral, siguiendo un poco la idea general utilizada en los sitios comunes en desktop. Esta barra lateral presenta en una primera instancia las siguientes secciones:
- Textos
- Notas
- Ficha
Cada uno de ellos, excepto Ficha despliega hacia abajo secciones interiores. Cuando se está en algún Texto o Nota, esto queda indicado con el cambio de color con que se destaca el título de la sección o el botón en general. La medida tomada ahora es de 768 x 1024 px, para el caso de vista vertical, planteando márgenes entre cada uno de los elementos interiores del sitio.
Las vistas propuestas presentan el contenido en su extensión total, en el caso de algún capítulo y además se muestra el despliegue y forma total de la barra lateral de navegación.
Segunda propuesta para Tablet
La propuesta para tablets 2 sigue la misma lógica que la propuesta para móviles 2. Las estructuras de navegación funcionan de la misma manera aunque con márgenes más generosos.
Propuestas para desktop
Propuesta inicial
De manera similar a lo que ocurre con el home en el espacio tablet, aquí es diseñado ahora el modo desktop, enfrentándose a un tamaño superior, donde el texto principal parece quedar rodeado de blancos o espacios sin rellenar. En sí, esto de pensar en como pasar de algo comprimido en el caso móvil a algo con más aire, tanto de manera lateral como interiormente, se busca mantener el menú lateral expuesto en la versión tablet, pero ya el nivel de navegación inferior, que la barra de capítulos navegable entregaba en los otros dispositivos,desaparece, ya que ahora se privilegia que el contenido este expuesto totalmente, dando paso a un scroll que se integra haciendo uso de un recurso de navegación a un costado, mediante botones de flechas arriba y abajo que permitirían navegar.
Básicamente la idea o propuesta 2 en el modo desktop, sigue esta navegación fija de los capítulos, pero ahora bajo el header. En tanto que el menú sigue estando a un costado del sitio y los textos presentados se dan en 2 columnas una texto y al lado una de imágenes, correspondientes si es que el capítulo presenta esta.
Propuesta de despliegue de menú en desktop
En este caso el menú surge y se divide en dos íconos, uno que contiene la Información Anexa del texto, esto es, Notas y Ficha y el otro es el que contiene los enlaces a los otros textos disponibles en Biblioteca Constel.
Ambos menús tienen un despliegue diferente hacia un lado de la pantalla, de este modo, el menú que alberga las Notas se desplegaría hacia la derecha del ícono y el menú Bibioteca o Textos hacia la izquierda del ícono.
