Web Bitácora Alberto Cruz Grupo II
| Título | Plataforma web Bitábora Alberto Cruz |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Palabras Clave | Alberto Cruz, Bitácora, Primera travesía Amereida, 1965 |
| Período | 2013- |
| Asignatura | Diseño Gráfico, |
| Del Curso | 3º DG 2013, |
| Carreras | Diseñ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) | Ingrid Céspedes, Javiera Ulzurrún, Constanza Johnson |
| Profesor | Sylvia 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.
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.
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.
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
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.
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.
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.
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.
Archivo:Mapa de navegación 2.jpg
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.
- 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.
- 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.
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ónwebbit.jpg
Inicio
- Interacciónwebbit2.jpg
Navega por el Menu 1
- Interacciónwebbit3.jpg
Navega por el Menu 2
- Interacciónwebbit4.jpg
Navega por el Menu 3
- Interacciónwebbit5.jpg
Visualiza el original
- Interacciónwebbit10.jpg
Categorías
- Interacciónwebbit11.jpg
Selecciona etiquetas
- Interacciónwebbit12.jpg
Selecciona etiqueta particular
- Interacción de Favio
- Interacciónwebbit.jpg
Inicio
- Interacciónwebbit6.jpg
Selaccióna bitácora transcrita e imagen
- Interacciónwebbit7.jpg
Visualiza imágenes
- Interacciónwebbit8.jpg
Selecciona Mapa y territorio
- Interacciónwebbit9.jpg
Visualiza imágenes
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.
Paleta de colores
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
Archivo:Ejemplo de tipografía.jpg
Presentación
Interacción de Usuario
Interacción de Paula
Menú Inicio Introducción
Menú Inicio Bitácora Original
Menú Inicio Bitácora Transcrita
Bitácora Original
navegar por Bitácora Original
Categorías
Ver párrafo en relación a página original
Ver recuadro
Ir a página seleccionada
Ir a etiquetas
Etiquetas
Descargar archivo
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:
- En el inicio, ingresa a la "Bitácora transcrita".
- Por defecto aparece en la crónica. Selecciona mapa y territorio.
- 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.
- Hace click en la miniatura. Se vincula a la página de "Bitácora original".
- Ve la siguiente doble página, haciendo click en la flecha.
- Va al menú,hace click en "Etiquetas".
- Selecciona la etiqueta "plazas".Y aparecen los textos vinculados a plazas.
