La ciudad abierta: la utopía al espejismo

De Casiopea



TítuloLa ciudad abierta: de la utopía al espejismo jj
Tipo de ProyectoProyecto de Taller
Palabras Claveresponsive design
Período2013-
AsignaturaGráfica Digital 2013
Del CursoGráfica Digital 2013
Alumno(s)Josefina Borja, Javiera Rojas
ProfesorKatherine 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:

  1. Carta del Errante
  2. Hay que ser absolutamente moderno
  3. Hoy me voy a Ocupar de mi Cólera
  4. Segunda Carta Sobre la Phalène
  5. Mantos de Gea


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.

Grillas espejismo.jpg


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.

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

Wireframes para tablet 768 px

Wireframes para móvil 640 px


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.

GEORGIA .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.

Corbel.jpg

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.
Mapadenavegacion-utopia.jpg

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.


Grilla.png

Tipografía

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

Tipografiasutopia.png

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.
  • Imágenes: se accede a través del menú, que dirige a las imágenes con sus respectivas anotaciones. Son tres imágenes de 290 x 450px.
  • Sobre el texto: dirige a la ficha de la publicación, y es posible descargar el archivo pdf.
  • Sobre los autores: se accede a través del menú lateral, el cual dirige a las reseñas biográficas y a las publicaciones de los autores.
  • Índice de autores: dirige a los poetas referidos en el texto.
  • Textos relacionados: dirige al enlace de los principales textos de la escuela (los que están siendo trabajados por el taller).

Tablet

Grilla

Vertical 768x1024

Se utilizo una grilla de 760 , para dejar una cantidad de márgenes.

GRILLA PARA WIKI VERTICAL .png


Horizontal 1024x768

GRILLAWIREFRAME IPAD HORIZONTAL 1024X768.fw.png


Tipografía

TITULO .png

SUBTITULOS.png
PARRAFO.png

Wireframes



Móvil

Grilla

320x480 px

GRilla iphone 4 vertical .fw.png


Tipografía

TITULO.fw.png

PARRAFO.fw.png

Parrafo.png

Wireframes

Iphone 4 320x480


Distintos Tamaños

TODOS JUNTOS REAL .png

Interfaz

Primera Propuesta

Escritorio 1280x800 px

123 PANTALLA COMPUTADOR.PNG

Tablet 1024x768 px

Ipad horiziontal COMPUTADOR .png

Tablet 768x1024 px

123 IPAD VERTICAL PANTALLA.png

Móvil 480x320 px

Iphone 3 horizontal .fw.png

Móvil 320x480 px

123IPHONE3VERTICAL.png


Propuesta Final

Visualización cambios de pantallas

Escritorio Tablet Móvil

Visualizacion-utopia1.jpg

Mapa de divs

Escritorio

Mapa-de-divs-utopia1.jpg

Tablet

Mapa-de-divs-utopia12.jpg

Móvil

Mapa-de-divs-utopia13.jpg


Diferentes Pantallas

Todos-juntos-pantalla .fw.png

Fuentes Tipográficas

Fuentestipograficas-utopia.png

Paleta de Colores

Paleta-utopia-interfaz.png


Entrega Final Sitio

https://dl.dropboxusercontent.com/u/51081260/Utopia/index.html

Style.css

https://dl.dropboxusercontent.com/u/51081260/Utopia/style.css

Responsive.css

https://dl.dropboxusercontent.com/u/51081260/Utopia/responsive.css