Grupo 7: "Carta del Errante"

De Casiopea



TítuloGrupo 7: "Carta del Errante"
Tipo de ProyectoProyecto de Taller
Palabras ClaveGodofredo Iommi, poesía
Período2013-2013
AsignaturaGráfica Digital 2013
Del CursoGráfica Digital 2013
CarrerasDiseño Gráfico
Alumno(s)Carolina Nuñez, Bernardo Silva
ProfesorKatherine Exss

Propuestas

En este proyecto se tomo el texto "Carta del Errante" el cual contiene 9 capítulos de similares dimensiones el cual posee texto, imagen y notas.

La jerarquía de la información de dispuso de la siguiente manera:

  • Capítulos
  • Acerca de
  • Notas
  • Indice de Autores
  • Enlaces

Ya con esto, se puede trabajar en la creación de wireframes para simular una diagramación con diseño responsivo, se decide trabajar en 3 dimensiones concretas


MÓVIL

Partiendo de un tamaño minino, se trabaja en un espacio de 240 x 320 pixeles. Los Smartphone ofrecen al igual que el tablet, ver el contenido de manera horizontal y vertical, por ello hay que diagramar el contenido en sus dos dimensiones.

Horizontal (320 x 240)

Inicio

Se inicia directamente en el texto, ya que eso es lo mas importante para quien busca el archivo.

Menu

En la parte superior se desprende un menú el cual ofrece navegar por los capítulos, notas, indice de autores y enlaces a otros textos.

Menú desplegado

De esta manera el usuario puede ir directamente al contenido deseado.

Visualización extensa, capitulo de texto

El texto cuenta con notas bastante largas, por esta razón se tomo la decisión de ubicarlas en otra sección, estas funcionan como vínculos lo que permite un ir y volver de las notas al texto y viceversa.

Visualización extensa, sección de notas

La sección "acerca de" ofrece las características del texto y contiene dos notas de edición, la original del texto y la realizada por la biblioteca Constel

Visualización extensa, sección de información

Muchos son los autores nombrados en el texto y se decide crear una sección para este caso.

Visualización extensa, sección de autores

Para un ecosistema, el texto se enlaza a otros títulos publicados por la escuela.

Visualización sección enlaces

Versión Vertical (240 x 320)



TABLET

Siguiendo el mismo criterio de jerarquía, se diseña el sitio para Tablet, el tamaño elegido es de 1024 x 600 px ya que en el mercado existen tablets con mayor tamaño lo que implica que no infiere la resolución y el diseño responsivo respecto al ordenador o un notebook.

Horizontal (1024 x 600)

  • Teniendo un ancho de 1024 pixeles, se puede establecer una media para la visualización en ordenador o notebook ya que ese valor es mas común entre los dipositivos, siendo no tan distante entre 1280 y 1366 pixeles de ancho.

Dependiendo el largo que posea un dispositivo, permite mostrar con mayor plenitud el sitio.

Vertical (600 x 1024)

Medición en pixeles

Móvil Horizontal (320 x 240)

Móvil Vertical (240 x 320)

La diagramación se pensó para que sea lo mas regular posible, esta al estar en vertical o horizontal, lo que se modifica es el ancho de las dimensiones, no así el largo.

la Barra de Navegación cambia en su tamaño

  • Horizontal

320 x 21 px

  • Vertical

240 x 21 px

Sin embargo, el menú despegable se mantiene para ambas situaciones

  • Primer Menú

128 x 97 px (horizontal/vertical)

  • Segundo Menú

194 x 168 px(horizontal/vertical)

El Tamaño de la tipografía se mantiene pero cambia el ancho de la caja de texto

  • Horizontal

285px de ancho

  • Vertical

225 px de ancho. las imágene se adapta al ancho del tamaño 303 x 218 px en horizontal 220 x 189 px en vertical

Tablet Horizontal (1024 X 600)

Tablet Vertical (600 x 1024)

Mapa de Divs

Los Mapas de Divs, son cajas que se utilizan para construir y ordenar el contenido del sitio web, serían como las cajas de párrafo en Indesign, así como a estas se les puede dar valores específicos para los elementos que estén dentro de de ella, estos mismo a su vez pueden tener sus propías características dentro del Div, a estos se les da el nombre de Clase.

Propuesta 1

  • Maqueta de la Home para sitio web.

https://dl.dropboxusercontent.com/u/51056983/Carta%20del%20Errante/Carta%20del%20Errante.htm

Propuesta 2
Estudio basado en el ejemplo otorgado en la clase. Corrección:

  • Menú despegable

https://dl.dropboxusercontent.com/u/51056983/carta/carta/index.html

Propuesta 3
Corrección:

  • Menú despegable vinculado

https://dl.dropboxusercontent.com/u/51056983/Carta%20del%20Errante%2C%20correcci%C3%B3n/index2.html

Propuesta 3.1

  • Propiedad Responsive al Menú
  • Estilo de Tipografía

https://dl.dropboxusercontent.com/u/51056983/Carta%20del%20Errante%2C%20correcci%C3%B3n4/index2.html

Propuesta 4 avance

  • Cambio por menú de anclas

https://dl.dropboxusercontent.com/u/8440688/Carpeta%20del%20Errante%2C%20correcci%C3%B3n%205/index3.html

Propuesta final de Css https://dl.dropboxusercontent.com/u/51056983/Carpeta%20del%20Errante%2C%20pre%20final/index7.html

Propuesta Final Responsive

Decisiones Editoriales:
Al igual que la realización de un libro, la simpleza en la lectura debe ser precisa y sin perturbaciones. Al momento de desarrollar el sitio para el texto escogido “Carta del Errante” pensamos en mantener la forma del texto original de 43 páginas.

Se despliega en un comienzo con una Introducción junto a un dibujo. Posteriormente, con una totalidad de 9 capítulos, se recorre el texto con una muestra de sus dibujo al final de cada capítulo. 1 Dibujo por capítulo. Los textos presentan notas, las cuales están dispuestas en la pestaña Notas. La pestaña Acerca de, trata sobre las especificaciones técnicas del libro físico y su Autor.

El menú de navegación, presente en el header, se encuentra en todo momento y de manera que acompañe al texto y sea de rápido avance a alguna parte del cuerpo del texto u otra pestaña.

PALETA DE COLORES
La paleta de colores utilizada fue pensada para no provocar distracciones de colores fuertes, por lo tanto se utilizó blanco para el fondo, negro para las letras y un amarillo suave para simular un papel ahuesado, esto debido a que leer sobre blanco en una pantalla desgasta mas la experiencia de leer.

Carta del errante- paleta de colores.jpg

Tipografías Se utilizan 2 tipografías, Roboto y Open Sans, fuentes tipográficas del tipo sans-serif introducidas en el sistema operativo Android 4.0.

Open Sans, Roboto
Estas tipografías se puede encontrar en Google Fonts y pueden ser utilizadas sin medio de pago, basta con insertar el código en el css y html para poder ocuparlas.

Son utilizadas en sus variantes Regular y Light.
Roboto para los titulos y Open Sans para lectura

Header La propuesta esta enfocada un menú estático y desprendible, de esta manera se puede llegar mas rápido a este. Para que no moleste visualmente, este requirió ser pequeño.

Interfaces Se simuló por medio del programa Fireworks(Adobe) la apariencia que tendría el sitio. El ancho de la caja para el texto no debía ser largo ya que el texto es de lectura.

Archivo:Carpeta del Errante FINAL.rar

https://dl.dropboxusercontent.com/u/51056983/Carpeta%20del%20Errante%20FINAL/index8.html