Web Bitácora Alberto Cruz Grupo II

De Casiopea



TítuloPlataforma web Bitábora Alberto Cruz
Tipo de ProyectoProyecto de Taller
Palabras ClaveAlberto Cruz, Bitácora, Primera travesía Amereida, 1965
Período2013-
AsignaturaDiseño Gráfico
Del Curso3º DG 2013
CarrerasDiseño Gráfico
Alumno(s)Ingrid Céspedes, Javiera Ulzurrún, Constanza Johnson
ProfesorSylvia Arriagada, Jaime Pérez Moena


Primera Propuesta 7 de Mayo

Relato de Interacción

Al pensar en como se da la lectura de la página, consideramos organizar el contenido desde lo general a lo particular, entregando la información de forma parcelada, de modo que fuese revelandose con cada interacción, generando un descubrimiento para el usuario.

Quisimos intencionarlo para recalcar la labor de Alberto Cruz como autor de la bitácora, dentro del contexto de la primera travesía de Amereida. Es por eso que buscamos que el usuario se encuentre con el contexto en el primer momento de la página.

Posteriormente desde la opción bitácora se despliegan dos nuevos items, “original” y “transcrita”. Hacemos una diferenciación entre estos dos: en la primera el usuario se familiariza con el total de una obra desconocida para la mayoría, mostrando la experiencia espontánea de la travesía a través de las páginas originales de su bitácora; mientras que en la segunda mostramos el mismo material ya editado para hacerlo legible como elemento de estudio.

Story5.png

A partir del item “transcrita” aparecen dos nuevas opciones, dos nuevas formas de ver el recorrido del viaje. A través de “lugares“ podemos ver la extensión total de los lugares visitados en forma cronológica. Al tratarse de una línea continua podemos ver el paso a paso del recorrido. Al seleccionar uno de ellos emergen todos los párrafos y dibujos que corresponden a él en miniaturas. Además, aparece un ícono que permite ver su ubicación en el mapa del viaje, para su ubicación dentoro del continente y del recorrido.

Story 4.png

Al seleccionar una miniatura aparece un recuadro con toda su información, atenuando la página para destacar el contenido visualizado. En este recuadro se puede ver el texto transcrito con su imagen, su clasificación por tema, la nota que lo vincula con Godo y un recuadro que lo muestra en en la totalidad de la página para verlo con respecto a su extensión, ubicación y sentido en el original. En un recuadro inferior hay unas referencias con respecto al párrafo para dar mayores especificaciones, ya sea sobre la nota, el lugar o algún comentario agregado.

Story 1.png

Desde aquí se accede a un atajo que lleva a la página de categorías, a la sección a la que pertenece el párrafo. Esto permite ver todos los fragmentos que son similares o que se refieren a un mismo tema. La página de "categorías" sigue con la misma modalidad de línea de la página de lugares, la cual se recorre para mostrar todas sus partes.

Presentación


Mapa de navegación

Video Wireframe



Segunda Propuesta 10 de Mayo

Preguntas previas a la forma

1. ¿Quienes son mis usuarios?

  • Gente de estudios relacionados con arquitectura, diseño e historia.
  • Son adultos de 18 o más que ya tienen conocimiento de Alberto Cruz, Amereida o las travesías.
  • Estudiantes de la escuela.


2. ¿Qué quieren lograr los usuarios?

  • Encontrar información.
  • Hacer un trabajo de investigación.
  • Leer acerca de la primera travesía.
  • Encontrar una fuente bibliográfica.


3. ¿Cómo piensan los usuarios de lo que están tratando de lograr?

  • Ubicar, encontrar, relacionar, visualizar.
  • Encontrando un registro transcrito de la bitácora antes desconocida.


4. ¿Qué tipo de experiencias creen mis usuarios que son llamativas?

  • Cuando hay muchas maneras de llegar al contenido.
  • Que el contenido este organizado.
  • Que tenga buenas imágenes.
  • Que el acceso de la información sea clara.


5. ¿Cómo debería comportarse mi producto?

  • Como una fuente de saber.
  • Como una forma interactiva y dinámica de llegar a los contenidos.
  • Que responda al sentido del viaje que tiene el contenido.
  • Dar pie para el encuentro con el contenido relacionado.

Relato de Interacción

Para cambiar la manera en que el lector se encuentra con el sitio añadimos en el inicio un vistazo de lo que contiene la página. En vez de que sea un globo que aparece como algo extra, la visualización facilita el encuentro del material a encontrar al ser menos oculto. Además se incluyen enlaces en el footer hacia fuentes de utilidad.

Navegador Menú

Con respecto a la página de bitácora original, se añadió una visualización con zoom in para ver con mayor detención. También se agregó en la parte inferior la línea de lugares para facilitar la navegación y vincular ambos conceptos.

Páginas originales

En la página de transcripción se agregaron 2 nuevas pestañas, ahora tenemos la posibilidad de verlo en relación a la crónica de Claudio Girola y el mapa del recorrido. Este segundo elemento es interactivo, lo que permite ir viendo cada lugar con los párrafos de Alberto correspondientes. También se puede acceder al mapa de manera directa a través de un nuevo ítem en la barra de navegación. Al costado derecho está la galería de imágenes relacionadas, agregando en esta ocasión fotografías tomadas en la misma travesía, junto a los croquis de Alberto. Estas van variando según el párrafo seleccionado.

Contenido de bitácora transcrita
Mapa y territorio


En la sección de categorías se agregó el concepto de etiquetas, las cuales van acotando los párrafos para hacer más rápida su ubicación. Estas reúnen todos los párrafos que hablan de un tema específico.

Mapa de Navegación

500px

Personas y escenarios

Para el organizar el sitio y ver el óptimo funcionamiento en la búsqueda de contenidos, creamos distintas situaciones ficticias que buscan conocer la interacción real con el sitio.

Petaca06 132.jpg
  • Paula
  • 24 años
  • Titulante de Arquitectura
  • Escenario: Paula está haciendo un proyecto de espacios públicos en localidades pequeñas, sabe que la primera travesía pasó pricipalmente por pequeñas localidades. Quiere conocer las observaciones de Alberto al respecto.



P1060008.JPG


  • Favio
  • 20 años
  • Estudiante de Diseño Plan Común
  • Escenario: Favio lleva un par de meses en la escuela y le llama la atención el viaje de la primera travesía, quiere conocer más del recorrido. En Amereida escuchó que terminaba en Santa Cruz.

Partituras de interacción

Las partituras de interacción se evocan a la experiencia de usuario frente al sitio web. En este caso se grafican:

  • Las acciones que realiza la persona
  • Los elementos que permiten ejecutar acciones en la pantalla

Para así mostrar lo que el usuario debiese hacer para lograr su objetivo y mostrar las zonas o links que los usuarios debiesen accionar o mirar.

Partitura de interacción: Paula
Partitura de interacción: Favio

Interacción wireframes

Los usuarios tendrían que hacer un camino por la web, en la siguiente galería presentamos los puntos (agrupados de un y dos clicks) que habrían hecho por página.

  • Interacción de Paula
  • Interacción de Favio


Tercera Propuesta 13 de Mayo

Correcciones

  • Subir la barra de navegación de lugares ya que cumple la función de titular.
  • Visualización de imágenes debe ser en relación al contenido de Alberto, no por si sola.
  • Subcategoría no es necesaria, encasilla mucho al usuario con respecto al contenido.
  • Que sea bilingüe
  • En el menú separar categorías de bitácoras, ya que son de otro orden siendo categorías más específico.
  • Que el título (banner) presente cambios con respecto a su tamaño y contenido, que sea más expresivo.

En cuanto al diseño de la página, decidimos simplificar el contenido del inicio móvil, dejándolo en una foto como imagen de fondo con una breve descripción de cada sección. También se incluyó en el inicio la opción de idioma español/inglés. En el menú también se mejoró la jerarquización al separar las categorías y etiquetas de páginas de bitácora y recorrido. Se agregó además una página de galería, donde se pueden ver las fotos de la primera travesía del archivo histórico José Vial en relación a los lugares de la travesía En las páginas de contenido, se movió la barra de navegación a la parte superior para facilitar la movilidad por la página según el orden que nosotras designamos. Además, las imágenes que acompañan los párrafos de Alberto ahora tienen la modalidad de slide. En la sección de los párrafos transcritos añadimos un ícono de libro que al ser seleccionado abre una pestaña que muestra su ubicación en relación a la página original. El trabajo fue realizado en Adobe Fireworks para ver las dimensiones en pixeles.

Grilla

En la siguiente imagen se pueden observar las medidas en pixeles utilizadas en la grilla de la página. Además de indicar la ubicación de los párrafos, imágenes, menú y barra de navegación por lugares.

Grillaindicada con zonas.jpg

Paleta de colores

Colorfoto.jpg

La selección de colores se basó en una imagen utilizada en el inicio de la página. Se decidió usarla como una constante en la página al ponerla como imagen de fondo en el menú del costado izquierdo. Los colores en general corresponden a las tonalidades encontradas en las fotos originales de la travesía. Los colores predominantes son el blanco y el negro, utilizados en los recuadros de contenido. En un segundo nivel usamos el celeste dentro de la estructura de la página. En un último nivel están el rojo y beige para destacar y resaltar.








Tipografía

Utilizamos la familia tipográfica Titillium en sus variables:

  • Encabezado: TitilliumText25L 400wt 14px
  • Menú: TitilliumText25L 600wt 14px
  • Menú seleccionado: TitilliumText25L 250wt 14px
  • Opción idioma: TitilliumText22L Regular 13px
  • Título Inicio: TitilliumText25L 250wt 52px
  • Bajada de Título: TitilliumTitle20 Regular 30px
  • Introdución: TitilliumText25L 400wt 16px
  • Descripción del menú: TitilliumText25L 250wt 35px
  • Lugares: TitilliumText25L 250wt 15px
  • Lugar seleccionado: TitilliumText25L 600wt 15px
  • Pestaña: TitilliumMaps29L 800wt 13px
  • Pestaña seleccionada: TitilliumMaps29L 400wt 13px
  • Fecha Crónica: TitilliumText25L 999wt 13px
  • Texto: TitilliumText22L Regular 12px
  • Notas: TitilliumText22L Regular 10.67px
  • Link etiquetas: TitilliumText22L Regular 11px
  • Lugares en el mapa: TitilliumText22L Regular 14px
  • Pie de Foto: TitilliumText22L Regular 12px
  • Definiciones:TitilliumText25L 250wt 16px
  • Etiquetas: TitilliumText25L 250wt 12px
  • Vínculos footer: TitilliumText25L 400wt 10px
  • Links descarga: TitilliumText25L 400wt 10px
  • Logo Escuela: TitilliumText25L 400wt 18px
  • Nombre Escuela: TitilliumText25L 400wt 12px
  • Nombre Universidad: TitilliumText25L 250wt 10.62px

600px

Presentación

Interacción de Usuario

Interacción de Paula

Cuarta Propuesta 17 de Mayo

Versión final: Bitácora de Alberto Cruz

Escenario: Paula desea encontrar observaciones acerca de los lugares públicos en pequeñas localidades, ingresa en la página.

Interacción:

  1. En el inicio, ingresa a la "Bitácora transcrita".
  2. Por defecto aparece en la crónica. Selecciona mapa y territorio.
  3. Luego va al icono de bitácora (ubicado bajo las imágenes), hace click y se despliega una miniatura de la página de la bitácora.
  4. Hace click en la miniatura. Se vincula a la página de "Bitácora original".
  5. Ve la siguiente doble página, haciendo click en la flecha.
  6. Va al menú,hace click en "Etiquetas".
  7. Selecciona la etiqueta "plazas".Y aparecen los textos vinculados a plazas.