Diferencia entre revisiones de «La ciudad abierta: la utopía al espejismo»

De Casiopea
 
(No se muestran 47 ediciones intermedias de 2 usuarios)
Línea 85: Línea 85:
Image:Captura_de_pantalla_2013-07-18_a_la(s)_5.01.12.png|Observación  
Image:Captura_de_pantalla_2013-07-18_a_la(s)_5.01.12.png|Observación  
</gallery>
</gallery>


==Tipografía y párrafo==
==Tipografía y párrafo==


*Propuesta 1  
===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.  
Se pensó una tipografía con serif , la cual fuera legible y se viera bien en la pantalla 960px sin problemas de lectura.  
Línea 97: Línea 98:
[[Archivo:Tamaños_parrafos.jpg|center|500px]]
[[Archivo:Tamaños_parrafos.jpg|center|500px]]


*Propuesta 2
===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.
Se pensó una tipografía sin serif , para ver el contraste y la diferencia de lectura extensa, con las dos distintas tipografías.
Línea 104: Línea 105:


=Segunda Propuesta=
=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==
==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.


[[Archivo:Mapadenavegacion-utopia.jpg|center|700px]]
[[Archivo:Mapadenavegacion-utopia.jpg|center|700px]]


==Computador==
==Escritorio==


===grilla 1280 x 800===
===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.
[[Archivo:Grilla.png|center|500px]]
[[Archivo:Grilla.png|center|500px]]


===Tipografía===
===Tipografía===
Se construye la jerarquía de lectura a través de los cuerpos tipográficos:
[[Archivo:Tipografiasutopia.png|center|500px]]
[[Archivo:Tipografiasutopia.png|center|500px]]


===Wireframes===
===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).


<gallery>
<gallery>
Línea 132: Línea 161:


==Tablet==
==Tablet==
===Grilla===
===Grilla===
Vertical 768x1024
Se utilizo una grilla de 760 , para dejar una cantidad de márgenes.
[[Archivo:GRILLA_PARA_WIKI_VERTICAL_.png|500px]]
Horizontal 1024x768
[[Archivo:GRILLAWIREFRAME_IPAD_HORIZONTAL_1024X768.fw.png|500px]]
===Tipografía===
===Tipografía===
[[Archivo:TITULO_.png|200px]]
[[Archivo:SUBTITULOS.png|left|300px]]
[[Archivo:PARRAFO.png|center|300px]]
===Wireframes===
===Wireframes===
<gallery>
Image:WIREFRAME_IPAD_HORIZONTAL_1024X768.png|Home horizontal 1024x768
Image:Ipad_Vertical_768x1024.fw.png|HOME vertical 768x1024
Image:Iphone_ vertical_imagenes_.png|IMAGENES vertical 768x1024
Image:Ficha_ipad_vertical_.png|FICHAJE vertical 768x1024
Image:Personajes_ipad_.png|PERSONAJES vertical 768x1024
</gallery>


==Móvil==
==Móvil==
===Grilla===
===Grilla===
320x480 px
[[Archivo:GRilla_iphone_4_vertical_.fw.png|500px]]
===Tipografía===
===Tipografía===
[[Archivo:TITULO.fw.png|300px]]
[[Archivo:PARRAFO.fw.png|300px]]
[[Archivo:Parrafo.png|300px]]
===Wireframes===
===Wireframes===
Iphone 4 320x480
<gallery>
Image:Iphone_4_vertical_.fw.png|Home Vertical 320x480
Image:Iphone_4_horizontal_.png|Home Horizontal 480x320
</gallery>
==Distintos Tamaños ==
[[Archivo:TODOS_JUNTOS_REAL_.png|500px]]
=Interfaz=
==Primera Propuesta==
<gallery>
Image:1024_computador_.fw.png|Home Computador 1280 px
Image:Ipad_horiziontal_1024x768.fw.png|Home Ipad horitonzal 1024 px
Image:IPAD_768_vertical_.fw.png|Home Ipad vertical 728 px
Image:Iphone_3_horizontal_.png|Home Iphone 3 horitonzal 480 px
Image:Iphone_3_vertical_.fw.png|Home Iphone 3 vertical 320 px
</gallery>
'''Escritorio 1280x800 px'''
[[Archivo:123_PANTALLA_COMPUTADOR.PNG|500px]]
'''Tablet 1024x768 px'''
[[Archivo:Ipad_horiziontal_COMPUTADOR_.png|500px]]
'''Tablet 768x1024 px'''
[[Archivo:123_IPAD_VERTICAL_PANTALLA.png|500px]]
'''Móvil 480x320 px'''
[[Archivo:Iphone_3_horizontal_.fw.png|500px]]
'''Móvil 320x480 px'''
[[Archivo:123IPHONE3VERTICAL.png|500px]]
==Propuesta Final==
<gallery>
Image:Interfaz-escritorio-utopia.png|Home Escritorio 1280px
Image:IPAD HORIZONTAL JOSE 1024x768.fw.png|Home Tablet horitonzal 1024px
Image:IPAD JOSE 768 vertical .fw.png|Home Tablet vertical 728 px
Image:Iphone3-horizontal-interfaz.fw.png|Home Móvil horitonzal 480px
Image:Iphone 3 vertical JOSE .fw.png|Home Móvil vertical 320px
Image:Texto_relacionado.fw.png|Texto relacionado
Image:Sobre_autores.fw.png|Sobre autoes
</gallery>
==Visualización cambios de pantallas==
'''Escritorio Tablet Móvil'''
[[Archivo:Visualizacion-utopia1.jpg|center|500px]]
==Mapa de divs==
'''Escritorio'''
[[Archivo:Mapa-de-divs-utopia1.jpg|center|500px]]
'''Tablet'''
[[Archivo:Mapa-de-divs-utopia12.jpg|center|500px]]
'''Móvil'''
[[Archivo:Mapa-de-divs-utopia13.jpg|center|500px]]
==Diferentes Pantallas==
[[Archivo:Todos-juntos-pantalla .fw.png|center|700px]]
==Fuentes Tipográficas==
[[Archivo:Fuentestipograficas-utopia.png|center|400px]]
==Paleta de Colores==
[[Archivo:Paleta-utopia-interfaz.png|center|400px]]
==Entrega Final Sitio==
https://dl.dropboxusercontent.com/u/51081260/Utopia/index.html
===Style.css===
https://dl.dropboxusercontent.com/u/51081260/Utopia/style.css


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

Revisión actual - 03:32 31 ago 2013


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