Grupo 1: "Carta del Errante"

De Casiopea


TítuloProyecto Grupo 1: "Carta del Errante"
Tipo de ProyectoProyecto de Taller
Período2013-2013
AsignaturaGráfica Digital,
Del CursoGráfica Digital 2013,
CarrerasDiseñ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)Carlos Chávez, Juan Antonio Godoy, Idar González
ProfesorKatherine Exss

Mapa de Contenidos

Mapa de contenidos2.jpg

El mapa de contenidos contiene los siguientes elementos:

  • Carta del Errante: texto e imágenes del documento original
  • Acerca del Texto: sección que contiene información específica del documento, ya sean el año de edición, el autor, etc.
  • Imágenes: sección de imágenes presentes en el documento original. Las imágenes se vinculan a su vez a cada uno de los capítulos del documento.
  • Índice de Autores: lista de autores mencionados en el documento. Éstos se vinculan a las notas presentes en el documento original.
  • Enlaces: sección que vincula el sitio al resto de los sitios web que incluyen los demás textos.

Móvil

Wireframes

Propuestas 1

Se considera una propuesta de lectura a modo de ventanas desplegables. Cada capítulo se despliega de una pestaña específica, dividiendo el total del texto en unidades independientes.


WIREFRAMESSS2.jpg


WIREFRAMESSS3.jpg

Propuesta 2

WIREFRAMESSS.jpg

Serie de wireframes que muestran la interacción desde el home hasta la lectura del contenido del texto. Además se muestra las diferencias entre las distintas páginas de contenido (carta del errante, acerca del autor, índice de autores, etc)

Barra de Búsqueda

Movil 1.2.jpg

La barra de búsqueda se despliega en la parte superior de la pantalla. Ésto permite el fácil acceso a la herramienta.

Acerca del Texto

Movil 1.3.jpg

Indice de Autores

Movil 1.4.jpg

Imágenes

La sección de imágenes permite observar continuamente el trabajo visual integrado al documento original. Cada imagen equivale a un capítulo específico. Por eso cada imagen se vincula a los diferentes capítulos presentes en el docuemento.

Movil 1.5.jpg

Enlaces

La Sección enlaces contempla la vinculación del sitio web con los otros textos. De esta manera se logra la integración total de las ediciones y sus sitios web.

Movil 1.6.jpg

Lectura de Contenido

Movil 1.1.jpg


La diagramación del sitio para Móvil considera la utilización de un menú superior, el cual contiene a la izquierda el botón de menú y a la derecha el botón de búsqueda.

Al hacer click en el botón superior izquierdo, se despliega el menú principal, el cual contiene las opciones:

  • Carta del Errante
  • Acerca del Texto
  • Imágenes
  • Índice de Autores
  • Enlaces

Al ingresar a la sección "Carta del Errante", aparece un nuevo botón que despliega un menú que contiene el detalle de los capítulos del texto.

Propuesta 3

Tablet

Wireframes

Propuestas Iniciales

La primera propuesta considera la utilización de un menú horizontal desplegable. Ésto permite el acceso directo a cada uno de los capítulos del texto. Existe además un modo de lectura a través de un horizonte de capítulos ubicado al comienzo y al final del cuerpo de texto. Ésto permite avanzar en la lectura a través de un botón "siguiente" y seleccionando el número del capítulo específico que se desea leer.

WIREFRAMESSS4.jpg WIREFRAMESSS5.jpg WIREFRAMESSS6.jpg

El formato Tablet en modo Portrait o vertical, adopta en gran parte el estilo del móvil, mientras que la versión Landscape u horizontal, se acerca a cómo se visualiza en un computador.

Las grillas de todos los elementos se basan en tercios, donde imágenes y columnas de texto pueden ocupar desde 1 a 3 porciones, dando la totalidad del contenido.

Home y Menú de Navegación

El ícono de menú despegable se mantiene en modo Portrait sin embargo se opta por la visualización completa del buscador, eliminando una variación de menú al interactuar con el ícono de búsqueda (lupa) que está presente en la versión móvil.

En cuanto al modo Landscape el menú de navegación adopta modalidad de computador, por lo tanto deja de estar oculto bajo el íconos de 3 líneas horizontales y se dispone a lo largo de la pantalla, permitiendo una navegación instantánea entre las categoría del sitio sin necesidades llamar un despliegue.

TabletErrante.jpg

Lectura del texto

El menú que se despliega desde la izquierda hacia la derecha permite al usuario navegar por los capítulos del texto libremente. Esto da una navegación a estilo de ancla, donde se guía al usuario según el capítulo ya que el texto está contínuo. Esta vez el título de cada capítulo del texto se muestra en su totalidad.

En modo Landscape el menú despegable de los capítulos pasa a ser un elemento fijo en la pantalla.

TabletErrante2.jpg

Acerca del texto

Los datos objetivos de la edición original aparecen acá junto con notas de la edición. Nuevamente se mantienen las proporciones.

TabletErrante3.jpg

Índice de autores

TabletErrante4.jpg

Imágenes

TabletErrante5.jpg

Notebook

Propuesta 1: "Home" y "Carta del errante"

Home y carta.jpg

Visualización extensiva de "Carta"

Wireframe CE dos.jpg


Propuesta 2 (en base a Tablet)

Home desktop1.jpg

Desktop5.jpg

Desktop4.jpg

Propuesta 3 Wireframes

Móvil

Wireframe movil.jpg

Tablet

TABLET propuesta 3.jpg

Notebook

Wireframes errante pc.jpg