Web Bitácora Alberto Cruz Grupo I

De Casiopea



TítuloPlataforma web Bitábora Alberto Cruz
Palabras ClaveAlberto Cruz, Bitácora, Primera travesía Amereida, 1965
Período2013-
Del Curso3º DG 2013
CarrerasDiseño Gráfico
Alumno(s)Karol Barrera, Franco Baldassare, Melany Marin
ProfesorSylvia Arriagada, Jaime Pérez Moena

Primera etapa de versión digital para la bitácora de Alberto Cruz, en la primera travesía de Amereida. En esta etapa se muestran los procesos de evolución de mapas de navegación, los contenidos que tendrá esta página, los wareframes y todo el proceso previo a la edición de una plataforma web.

Primera Etapa

Jerarquía de contenidos

Wireframe página Alberto

Wireframe Interactivo

Mapa de Contenidos

Mapa recorrido











Segunda Etapa

Wireframe segunda versión

Presentación Recorrido de Travesía Amereida

Partitura de Interacción


Tercera Etapa

Grillas en Fireworks

Elección de Color y Tipografía

La elección del color la hicimos a partir del tono de la Bitácora original de Alberto Cruz, quisimos darle el contraste del color cálido del papel envejecido con la tinta negra con la que escribía. Por esta razón utilizamos tres variables de tonos anaranjados para darle distintas jerarquías a los elementos de la página.

La elección de la tipografía fue Palatino Linotype para textos de lectura continua, que son la transcripción de la bitácora de Alberto Cruz, las notas poéticas de Godofredo Iommi, y la crónica de Claudio Girola. Para contrastar el carácter renacentista utilizamos para los títulos y encabezados la tipografía Futura Lt con características geométricas y un carácter moderno, de esta manera cada una tiene su propia voz para diferenciar la esencia de los textos.

Color y tipografias.jpg

Propuesta de Inicio

El inicio está pensado a modo de contextualizar al usuario y que éste se familiarice con el tema, para ello, se le muestra un contenido previo que debería saber el visitante para poder entender el sentido de la bitácora y el trabajo en sí mismo. Estos temas se presentan de la siguiente manera:

  • El recorrido Muestra de manera territorial los lugares por los cuales ocurrió la travesía, y la posición del mapa en la página conecta los contenidos del inicio, que va desde lo general a lo particular.
  • Títulos Dan a entender que la página está dividida por dos temáticas; el viaje y la bitácora de uno de sus integrantes.
  • Viajeros Integrantes de la travesía: muestra los 10 participantes y destaca a los 3 en los cuales estamos enfocados. Dando la opción de conocer el nombre de todos.
    • Alberto Cruz: Autor Bitácora
    • Claudio Girola: Autor de la Crónica
    • Godofredo Iommi: Notas poéticas
  • Ver Bitácora Es un link que da inicio al estudio de la Bitácora a partir de los puntos anteriormente presentados

Propuesta de Galería de Fotografías

La galería de imágenes es una propuesta de rápido acceso que se encuentra en el inicio de la página, de esta manera el usuario elige si verlas o no, y si es así va dentro de una temática en el inicio de contextualización, que aporta información para poder comprender a que hace referencia la página web. Al entrar a este ítem aparecen la mitad de la totalidad de las fotos en miniaturas, por lo tanto también es de fácil acceso y el usuario escoge en cual detenerse a través de una previsualización

Propuesta de Navegación por Bitácora


Etapa Final

Se cambió completamente el diseño de la página web, no así su contenido ni el foco que le estábamos dando. Se navega de la misma manera, dándole protagonismo a la bitácora original de Alberto, y siempre teniéndola presente para poder ver en relación.

Elección de Color

El color naranjo con el gris no se complementaban bien, ya que había una vibración muy fuerte entre ellos que impedía al ususario leer de una manera eficaz, y producía un cansancio visual, es por esta razón que decidimos atenuar la fuerza de los colores, dejando una imagen sacada de la primera travesía de amereida como fondo, en donde resaltan colores azules y grisáceos.

Vínculo

https://dl.dropboxusercontent.com/u/51167710/Grupo%201/menu%20inicio.htm