Diferencia entre revisiones de «Diseño de Servicios para la Corporación Cultural Amereida Etapa 3»

De Casiopea
Línea 103: Línea 103:
=====Contenido=====
=====Contenido=====
=====Diseño=====
=====Diseño=====
[[Archivo:Screenshot-localhost 3000 2014-12-11 01-15-42.png|center|460px|thumb|Home Desktop]]


===Página Estáticas===
===Página Estáticas===

Revisión del 18:56 15 dic 2014


TítuloDiseño de Servicios para la Corporación Cultural Amereida Etapa 3
Palabras Claveciudad abierta, diseño web, museografía, diseño gráfico, diseño de experiencia de usuario
Período2014-2014
AsignaturaTaller de Diseño Gráfico Titulación 3,
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)Karla Vargas
ProfesorHerbert Spencer, Katherine Exss


Definición de Objetivos y Plan de Trabajo

Introducción

Para dar inicio a la tercera y última etapa del proyecto es preciso dejar marcada la pauta a seguir.También es importante hacer una reflexión a propósito de algunos temas que el estudio -producto de su longitud- tocó de modo superficial. Dicha reflexión es por sobre todo una invitación a tomar estos tópicos como punto de partida para potenciales proyectos futuros.

Para planificar hay que tomar en cuenta varias cosas. Lo primero es seguir el rumbo del estudio llevado a cabo en los dos trimestres anteriores el cual ya tiene el paso ganado en muchos aspectos. También se presentan las correcciones de la ronda las cuales entregan un punto de vista diferente con respecto a qué se debe dar mayor énfasis dentro del proyecto. Un tercer factor es la participación de dos alumnas de 7ma etapa.La participación de estas alumnas puede permitir dar una definición más acabada al proyecto en términos plásticos y editoriales.

Sugerencias de la Ronda y la Clase 1

  • Se resuelve concretar una nueva reunión con los miembros de la corporación para presentar el proyecto.
  • Se hace énfasis en cambiar el modo del discurso. La forma de explicar las cosas debe de adaptarse mejor al lenguaje de los miembros de la corporación.
  • Hay que tratar con delicadeza el tema de los visitantes y los anfitriones ya que la idea de la propuesta no es reemplazar a estos últimos. En ese sentido el enfoque cambia. Ahora el punto central es responder cómo es que la Ciudad Abierta se presenta al otro por los medios digitales.
  • Para la presentación es importante poner énfasis en el trabajo editorial que se debe realizar para escribir la información de cada obra, cada recorrido y cada relato.
  • También es importante exponer con claridad cuales son los pasos a seguir. Del mismo modo se debe explicitar qué formas de cooperación se espera obtener de parte de la corporación para obtener dichos fines.
  • El trabajo de las alumnas de séptima etapa se centra en los recorridos planteando la pregunta de cómo permitir a una persona a través del medio digital recorrer la Ciudad Abierta tanto en lo presencial como en lo distante.

Actividades Semana 1

  • Realizar una visualización de los recorridos para ilustrar las distintas capas que contienen
  • Elaborar una nueva presentación para exponer en una reunión con los miembros de la Corporación Amereida

Carta Gantt Propuesta

Se realiza una Carta Gantt para calendarizar los distintos objetivos del trimestre. Por un lado se estipulan las tareas a realizar en conjunto con el taller de séptima etapa y por otro lado las tareas de orden individual.

Link de la Carta Gantt

Estatus del proyecto y temáticas a abordar con la corporación

Objetivos

Objetivo General

  • Mejorar el modo en que la Ciudad Abierta de la Corporación Amereida se presentan al otro en el medio digital (web)

Objetivos Específicos

  • Ofrecer a quienes no pueden visitar Ciudad Abierta la posibilidad de “recorrer” los terrenos y las obras en torno a un relato interpretativo.
  • Ofrecer a los visitantes de Ciudad Abierta que no pueden contar con un anfitrión la opción de efectuar un paseo interpretativo apoyado por medios visuales, escritos y auditivos.
  • Ofrecer tanto a visitantes como a interesados toda la información práctica necesaria antes y durante la visita.

Construcción de paseo interpretativo digital

Este paseo interpretativo digital contiene varias capas que se comunican en un relato secuencial.

Definición y estatus de cada capa

Capa del Espacio
  • Descripción: Se proponen dos recorridos, uno para la parte alta y otro para la parte baja.
  • Estado de Avance: Los recorridos y los puntos que estos comprenden fueron propuestos como parte de la segunda etapa del proyecto y evaluados por los profesores guía del taller.
Capa de la Temporalidad
  • Descripción: Para favorecer a los visitantes que no pueden permanecer periodos largos en Ciudad Abierta se propone que cada recorrido posee una versión corta y una versión larga.
  • Estado de Avance: Los recorridos se comprobaron en su extensión aunque no se descarta la posibilidad de efectuar más pruebas una vez consolidada la propuesta a nivel de contenidos.
Capa de la Narración
  • Descripción: Los recorridos son de interés cultural-arquitectónico centrándose principalmente en las obras, su origen y fundamento poéticos. Se toma de ese modo la hospitalidad como eje principal.
  • Estado de Avance: La temática de los recorridos está definida pero se requiere construir el guión preciso del relato en sincronía con el recorrido trabajo que se realizará en conjunto con las alumnas del Taller 7ma etapa a cargo de los Profesores Herbert Spencer y Katherine Exss. Se solicita de todos modos que algún miembro de la corporación se ofrezca a colaborar revisando el relato para cerciorarse de que no tenga errores de interpretación o información.
Criterio Editorial

El relato se va a componer de dos voces.

  • Voz Original: Son fragmentos de clases, escritos, ensayos o grabaciones de miembros del grupo Amereida. Estos actúan como un testimonio, una provocación que ilumina sobre el origen y sentido de una obra o lugar.
  • Voz Guía (Virgilio): Es la voz del editor que sirve como puente que articula este cúmulo de voces y que además entrega datos de carácter más práctico como lo haría un audioguía.

A su vez se plantea que existen distintos tipos de enunciados que configuran el recorrido.

  • Enunciados prácticos: Este tipo de enunciados corresponden a la voz de Virgilio y tienen por objetivo que el visitante comprenda las normas básicas y que no se pierda durante el recorrido. Se trata de enunciados breves que avisan al visitante hacia dónde tomar camino para encontrarse con el siguiente hito.
  • Enunciados generales de hitos. Cada hito - sin importar su nivel de importancia dentro del recorrido total. cuenta con un enunciado general. *Este enunciado permite al visitante saber cómo se llama la obra que tiene en frente junto con una explicación muy breve y esencial. Este tipo de enunciado hace las veces de placa interpretativa para cada hito dentro del recorrido.
  • Enunciados iluminadores: Como no basta con los enunciados generales para vislumbrar el sentido de la Ciudad Abierta algunas obras poseen lo que se llama enunciados iluminadores. Estos enunciados contienen información más profunda sobre el sentido de Ciudad Abierta y pueden dar pié a un relato, una voz original o un poema.

Estado de Avance: Se requiere construir el guión preciso del relato en sincronía con el recorrido trabajo que se realizará en conjunto con las alumnas del Taller 7ma etapa. Se requiere que la corporación coopere en la producción de la voces idóneas para el relato ya sea ofreciéndose a la lectura o aconsejando algún lector idóneo dentro de la escuela u otra parte.

Capa de la Abstracción Gráfica
  • Descripción: Se trabaja en una propuesta para presentar visualmente los recorridos.
  • Estado de Avance: Las alumnas del Taller 7ma etapa se encuentran desarrollando la propuesta gráfica del recorrido y para ello realizan croquis y observaciones en Ciudad Abierta. Cosas que quizás se necesite, trabajo fotográfico o uso de materiales de grabado etc.
Capa de la Interfaz
  • Descripción: La interfaz articula todo lo anteriormente propuesto. Los recorridos interpretativos, información sobre ciudad abierta, su fundamento, historia, contactos, información para visitar etc. (acá mostrar el mapa de contenido con las notas)
  • Estado de Avance: El sitio se esta diseñado y testeado hasta la capa de interacción (wireframes). Este trimestre la tarea es desarrollar la interfaz (capa visual) y los códigos para luego transformarlo en una plantilla wordpress.

Graficando el recorrido

Facilitar la comprensión y el trabajo participativo entre los diversos actores involucrados en el proyecto es muy importante. Por eso se diseña una linea de tiempo. En ella se muestra cada capa actuando en simultaneidad. Archivo:Partitura de recorridos versión ligera.pdf

Replanteamiento de la Interacción del Mapa y Recorrido

Al plantar de este modo el recorrido surgen nuevos factores. Estos influencian el modo en que se había planteado la interacción anteriormente. Por eso se determina separar la funcionalidad del mapa de la funcionalidad del recorrido. Así este último puede ser desarrollado por las alumnas de 7ma etapa y además comparecer de modo independiente con sus leyes propias.

Con ello se replantea la arquitectura del sitio web del siguiente modo

Tipos de Páginas

Portadas

Las portadas son páginas que funcionan como un escaparate a partir del cual se accede a páginas más específicas. Las portadas generalmente constan de distintos elementos que funcionan como listas con previews.

Home

Partes
Contenido
Diseño
Home Desktop

Obras

Partes
Contenido
Diseño

Noticias

Partes
Contenido
Diseño
Home Desktop

Página Estáticas

Las páginas estáticas son aquellas cuyo contenido se espera no cambie mayormente en el tiempo. A diferencia de los artículos son de carácter único.

Sobre Ciudad Abierta

Partes
Contenido
Diseño
Home Desktop

Corporación Amereida

Partes
Contenido
Diseño

Visitas

Partes
Contenido
Diseño
Home Desktop

Cómo Llegar

Partes
Contenido
Diseño
Home Desktop

Mapa de Ciudad Abierta

Partes
Contenido
Diseño
Home Desktop

Contacto

Partes
Contenido
Diseño

Artículo

Los artículos son páginas que corresponden a elementos repetitivos dentro del sitio que están pensados para actualizarse más seguido que las páginas llamadas estáticas.

Noticia

Partes
Contenido
Diseño

Obra

Partes
Contenido
Diseño
Home Desktop

Desarrollo de frontend de la propuesta

Herramientas

La primera fase del desarrollo de frontend de la propuesta consiste en replicar la estructura desarrollada en los wireframes. Para ello se trabaja en primer lugar con las siguientes herramientas:

  • Bootstrap Se emplea como framework de estilos ya que posee una buena gama de herramientas para agilizar la construcción de la estructura en html.
  • Stylus Se define como pre procesador de css como opción personal ya que se cuenta con mayo conocimiento previo de este que de otros preprocesadores.
  • Bower Bower permite manejar las diversas librerías de código abierto que se vallan a implementar en el desarrollo del frontend.

Leyes Estructurales

La Estructura de las página se base en 12 columnas las cuales tienen márgenes intermedios de 35px. Las 12 columnas emplean en versión desktop un espacio del 90% del tamaño de la pantalla.

Proposiciones de Diseño de Interfaz

Proposición Versión 1

Concepto interfaz ccamereida 1.jpg

Archivo:Concepto interfaz ccamereida 1.pdf

Proposición Versión 2

Ejemplos Aplicados

Tipografías Escogidas

Raleway se emplea como tipografía para títulos principales y para elementos de interacción tales como enlaces de navegación o botones.

Anonymous Pro se utiliza para los elementos segundarios como párrafos, notas, antetítulos y bajadas.

Paleta

Paleta-ccamereida.jpg

Estructura General

  • Grilla 12 columnas dentro de un contenedor principal de ancho 90%
  • Margen superior (header) 36px
  • Margen inferior (footer) 120px
  • Cuerpo principal de texto ancho de 6 columnas al centro.
  • Cuerpo en elementos "aside" dentro de un artículo Se nombran como elementos "aside" aquellas secciones que son parte de un artículo (ya sea tipo obra o noticias, etc) las cuales complementan el contenido principal. Ejemplos son “cómo llegar a esta obras”, “relacionados”, “galerías”, ”obras destacadas”, "noticias relacionadas",etc. Estas secciones ocupan el ancho de 10 columnas del contenedor principal con márgenes laterales automáticos.

Estilos de párrafo de carácter

Todos los estilos de párrafo de carácter reducen su tamaño en 2px en versión Small Devices y Extra Small Devices.

  • Títulos
    • Antetíulo Tipografía Anonymous Pro Regular, tamaño 20px itálica.
    • H1 Tipografía Raleway Regular en altas, tamaño 24px, tono #999999, kerning 486, margen inferior 60px.
      • 'En artículos y obras centrado
    • H2 mismas características de h1 pero de color #CCCCCC
      • En secciones aside centrado
    • H3 tipografía Anonymous Pro Regular, color #CCCCCC, Tamaño 18px, primera letra en mayúsculas, tracking normal.
      • En secciones aside centrado
    • H4 mismo estilo que h3, itálica.
    • H5 mismo estilo que h4, tamaño 16, Solo la primera letra en altas.
    • H6 mismo estilo que h5, tracking 200
    • Títulos en el footer
      • h1 mismas características de h2 normal, centrado.
      • h2 mismas características de h3 normal
    • Título de la sección notas mismo estilo que h4, itálica, color #CC0000
  • Párrafos La tipografía de todos los párrafos es Anonymous Pro Regular, son de tamaño 14px y color #999999
    • Párrafo general Interlínea de 24px. Cuando un párrafo termina para dar paso a un nuevo título el margen inferior es de 57px, la distancia entre un párrafo y otro del mismo texto es 31px.
      • En notas Itálica, margen izquierdo 48px.
    • hr sobre párrafosTodos los párrafos tienen sobre sí a 11px de altura un hr color #CC0000 de 40px de ancho, el hr va alineado de acuerdo al párrafo.
    • Bajada de título ,descripción general de obras ,preview de noticias, cuerpo tweets y descripción datos footer ancho máximo de párrafo 300px
      • descripción general de obras centrado
      • Descripción enlaces footer itálica
    • Pié de imagen blanco, ancho de párrafo 135px. Se posiciona de modo absoluto con respecto a lo imágen que lo contiene usando un margen derecho y superior de 26px.
  • Estilos de carácter
    • Autor de Tweet color #CC0000
  • Listas Las listas tienen el mismo estilo que los párrafos generales. La distancia entre el número/bullet y su respectivo texto es de 40px
    • Lista no numerada bullet circular de color #CC0000, tamaño 11px
    • Numeración en Notas número con display block, margen inferior de 15px


Jerarquías de títulos
Ejemplo de estilos aplicados, cabecera sección noticias
Estilos en una sección de notas

Enlaces

  • Enlaces de navegación Tipografía raleway regular, en altas, tono #999999, kerning 364, tamaño 11px.
    • Bullet dentro de los enlaces Los enlaces tienen un bullet en forma de cruz (u otro ícono se trata del footer por ejemplo) de color #CC0000, tamaño 8px.
      • Dentro de los enlaces que son h1 o h2 tamaño 13px
    • hover El bullet gira lentamente.
  • Enlaces dentro del texto Subrayado.
    • hover color #CC0000
  • Enlaces tipo "leer más" color #CC0000
    • hover color #990000
Ejemplos de enlaces de navegación

Uso del Logotipo

Ancho 38px en la cabecera de la página

Elementos de interacción

  • Inputs y botones 30px de alto, ancho mínimo de 30px, borde thin de color #999999, fondo blanco,
    • Tipografía dentro o relativa a raleway regular, tamaño 11px, color #CC0000, kerning 364.
      • De orden primario en altas
      • De orden segundario en bajas
    • Iconos dentro de los inputs (flechas, lupas, etc) color #CC0000, tamaño 11px
    • Hover borde de color #CC0000
    • Active borde de color #990000, grosor de borde 1px
    • Botones Idioma sin borde, tipografía sin altas.
      • Hover con borde
    • Botones de flechas y zoom out 30px de ancho, color de fondo #F7F7F7, sin borde


Elementos de interacción

Cuadros

  • Cuadro contenedor de título y descripción principal color blanco, diagonal interior, paddings laterales de 30px, padding superior de 35px, inferior de 45px
  • Cuadro de caption color #F7F7F7, su ancho es en relación a la imagen de la obra (se restan 33px por lado), altura 164px, padding superior de 33px, paddings laterales de 20px. posición relativa
    • Sobre imágenes pequeñas 40px más arriba
    • Sobre imágenes grandes 50px más arriba
    • Dentro de cuadro gris sin posicionamientoo relativo ni paddings laterales
  • Cuadros grices ancho 100%, color de fondo #F7F7F7
    • Cuadro gris diagonal padding superior 100px, padding inferior 160. diagonales superiores e inferiores
    • Cuadro gris común padding superior 61px, padding inferior 98px


Estructura y variaciones del cuadro de caption en dos tipos de imágenes

Líneas

Las líneas permiten separar las secciones que hay dentro de una misma página.

  • línea principal grosor 1,5px, varios grises
  • línea segundaria grosor 0,25px color #999999


Estructura y variaciones del cuadro de caption en dos tipos de imágenes

Imágenes

Todas las imágenes tienen filtro blanco y negro.

  • Hover desaparece el filtro blanco y negro.
  • imágenes principales ancho 90% de la pantalla
    • De cabecera alto 450px, posee una diagonal inferior.
    • De cuerpo alto 365px poseen diagonales arriba y abajo
  • Fotos dentro del cuerpo de texto ancho de 6 columnas, altura proporcional, margen inferior 57px.
  • Imágenes carrusel de obras 147px de ancho y 365px de alto. en mobile la altura se reduce a 167px.
  • Imágenes preview obras en sección obras anchura de 4 columnas con respecto a la grilla principal en desktop. en dispositivos intermediso se reduce a 6 columnas y en mobile a 12. Altura proporcional
  • Imágenes dentro de asides Altura fija de 215px. En mobile la altura se reduce a 90px.
    • En obras destacadas dentro de su contenedor de 10 columnas toman el ancho proporcional a 6 columnas de 12.
    • En obras relacionadas y noticias recientes dentro de su contenedor de 10 columnas toman el ancho proporcional a 4 columnas de 12.
  • Imágenes de noticias en home y tweets ancho 3 columnas, alto fijo 186px
  • Imágenes de la sección de tweets
    • Dentro del comentario ancho 3 columnas altura variable
    • Autor del tweet 30px de alto por 30px de ancho

Iconografía

Como set de íconos se emplean los diseñados como parte de Stampa proyecto de lenguaje icono-gráfico para la escuela realizado por la alumna Catalina Reyes. Todos los íconos dentro del diseño de color #CC0000.

  • Íconos relativos a títulos centrado, 10px de ancho.
    • A títulos dentro de seccionesmargen inferior 0px, fondo blanco y padding de 36px
    • A títulos dentro de captions margen inferior de 15px.

Anexo mapa

Fundamento de la Interacción

Ilustración del Mapa

Puntos

Íconos de categorías de obras
Íconos de servicios
Estilo
  • Tamaño 18px líneas rojas y relleno blanco
  • Puntos dentro del mapa hover aumentan de tamaño lentamente
  • Puntos dentro del mapa active crecen al doble de su tamaño normal.