Título	La ciudad abierta: de la utopía al espejismo jj
Tipo de Proyecto	Proyecto de Taller
Palabras Clave	responsive design
Período	2013-
Asignatura	Gráfica Digital 2013,
Del Curso	Gráfica Digital 2013,
Alumno(s)	Josefina Borja, Javiera Rojas
Profesor	Katherine Exss

Presentación

Para el estudio de construcción de un sitio responsive, se toma como propuesta un texto de la colección Ciudad Abierta, De la Utopía al Espejismo. A partir de esto se generan las diagramaciones para tres soportes diferentes: computador, tablet y móvil. La construcción del sitio responsive tiene como propósito mantener una misma identidad visual y gráfica para los tres soportes diferentes, pero con cambios que destaquen su visualización de uno y otro. El sitio tiene por objetivo presentar la lectura del texto, con enlaces a los otros textos trabajados por el resto del taller:

Primera Propuesta

Para el trabajo de la primera propuesta, se crearon tres grillas para los distintos soportes nombrados anteriormente. Luego se presenta la construcción de wireframes para estos soportes, en sus distintos tamaños y diagramaciones.

Grillas

Se creo una grilla que se divide el tamaño inicial 960 px en 4 unidades, para luego proporcionalmente poder variar su tamaño según la misma grilla inicial.

Wireframes

Para el diseño de este sitio responsive, se fijó como objetivo la lectura del texto. Para esto el usuario se debe encontrar con una lectura clara y fluida, sin complejidades que la dificulten o la entorpezcan. Es por esto que se trata de mantener una visualización limpia y sin distracciones.

Propuesta 1

Se construye una propuesta de Wireframes para 960 px., donde el énfasis está en la división de la lectura en tres "capítulos" pequeños. El objetivo está en hacer un encuentro con la lectura más pausado, pero de manera sutil, ya que el texto es lo suficientemente breve para ser leído rápidamente. Sus cambios varían en como el usuario continua la lectura del texto.

prueba 1 Home
prueba 2 Home
prueba 2.1 Home
prueba 3 Notas

Propuesta 2

Se hizo una segunda propuesta con más opciones de navegación, no como la anterior que se trataba de utilizar la menos navegación posible. En dicha propuesta aparece un primer encuentro con las imágenes del texto en el home, luego para acceder al texto se debe hacer click sobre el menú de navegación, donde se encuentran los contenidos de notas, ficha y observaciones. A su vez las imágenes del home, al hacer click sobre ellas lleva a la sección de observación, donde aparece una caja de luz con las anotaciones de los croquis.

Wireframes para computador 960 px

Home
Texto
Notas
Notas
Notas
Notas
Ficha
Observaciones

Wireframes para tablet 768 px

Home
Texto
Notas
Observaciones
Ficha
Observaciones

Wireframes para móvil 640 px

Home
textos
Notas
Ficha
Observación

Tipografía y párrafo

Propuesta 1

Se pensó una tipografía con serif , la cual fuera legible y se viera bien en la pantalla 960px sin problemas de lectura.

Archivo:Tamaños parrafos.jpg

Propuesta 2

Se pensó una tipografía sin serif , para ver el contraste y la diferencia de lectura extensa, con las dos distintas tipografías.

Segunda Propuesta

Como segunda propuesta se observó la falta de organización de los contenidos para la construcción del sitio. Para esto se llevó a cabo la proposición de un mapa de navegación que ayuda a generar la arquitectura del sitio.

Mapa de Navegación y Contenidos

La nueva propuesta presenta un primer encuentro en el home donde se expone directamente el texto completo, dividido en tres pequeños "capítulos" para hacer una lectura limpia y pausada. Por otro lado está el menú de navegación que lleva a las notas, imágenes y sobre el texto.
En los contenidos Sobre los autores, se dirige a una pequeña reseña bibliográfica y enlaza a las distintas publicaciones de los autores.
Índice de autores presenta a los distintos poetas que son referidos en el texto.
Finalmete Lecturas relacionadas lleva a el resto de los textos estudiados en el taller.

Escritorio

grilla 1280 x 800

Se define una grilla de siete columnas de 120px con márgenes de 15px, pensado en la diagramación de los contenidos en los 960px.

En el header aparece el título de la publicación, y autores sobre los cuales se puede hacer click y acceder directamente al contenido de los autores. También se presenta a la izquierda el logo de Biblioteca Constel que enlaza a las publicaciones, y a la derecha la barra de buscador.
En el footer presenta la publicación, autores, editorial y año, que dirige a la lectura del texto. También presenta el enlace a Bibioteca Constel.

Tipografía

Se construye la jerarquía de lectura a través de los cuerpos tipográficos:

Wireframes

Home: en el home se presenta la lectura completa del texto. Posee un menú de navegación que dirige a notas, imágenes y a la ficha del texto. También posee un menú lateral que dirige a los autores, índice de autores y textos relacionados.

Notas: es posible acceder a través del menú, o al hacer click sobre el número que indica nota. Son cuatro páginas que contienen las cuatro notas diferentes.