Francisco Vera: Identidad Digital

De Casiopea



Título
Palabras ClaveDiseño Gráfico, Identidad
Período2010-2010
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)Francisco Vera
ProfesorHerbert Spencer


Encargo

El encargo para el Taller de Construcción del segundo trimestre del actual año, consiste en la construcción o mejora de un espacio web del servidor que posee la facultad, de tal manera que el proyecto posee una investigación y un desarrollo que finiquita con la construcción de la propuesta presentada.

En esta instancia, la problemática radica en la identidad visual generada por el sitio web de la Facultad (e[ad ) y cómo ésta es percibida por los lectores con relación directa e indirecta con el oficio; se percibe que la visual del sitio no corresponde a la actividad y el ejercicio mismo de la Escuela, y ésta, se desarrollará a través de un estudio y una propuesta final que, en este documento, expone el desarrollo y las correcciones realizadas; pretendiendo elaborar una lógica visual y una serie de reglamentos para la publicación de los contenidos que el sitio posee.

Sobre la Identidad

La construcción de espacios interactivos en el universo web, no solo requiere de una efectividad comunicativa y la maleabilidad intuitiva de quién hace uso de ella, sino que además, debe generar una grafía visual capaz de identificar, inspirar y motivar a que el uso de estos espacios sea aún mayor y grato. Sobre esta misma base, y sobre la de una sociedad sobrecargada de imágenes, donde la visualización, los esquemas y todo el lenguaje visual juega un papel importante en la comunicación, no debemos ser indiferentes a como la Imagen de la Identidad es percibida por las personas.

En este estudio, se pone en cuestión sobre la Identidad plasmada en el sitio de nuestra escuela, donde ¿Nos sentimos identificados? ¿Nos motiva interactuar? ¿Es atractivo?, son algunas de las muchas interrogantes que desglosan el concepto de Identidad Digital, apuntando directamente a como se presenta la Imagen ante el mundo, y que desglosan variables sobre como la Identidad en la Imagen, habitada en el tiempo, toma forma.


La Imagen

"La ambigüedad de la imagen no es distinta a la de la realidad, tal como la aprehendemos en el momento de la percepción: inmediata, contradictoria, plural y, no obstante, dueña de un recóndito sentido. Por obra de la imagen se produce la instantánea reconciliación entre el nombre y el objeto, entre la representación y la realidad. Por tanto, el acuerdo entre el sujeto y el objeto se da con cierta plenitud."


Octavio Paz, La Imagen

La Identidad como un proceso constante que se define reiteradas veces, se nos presenta a modo de Imagen -visualmente en este caso- que marcada en el presente, es antecedida por una Tradición, construída por la comunidad y que genera una estampa distintiva; así mismo, la precede una Innovación, como una búsqueda infinita que se pregunta nuevamente sobre la Identidad y que se expresa de una manera distinta, bajo el contexto en que la comunidad se sitúa.

(Temporales: Tradición, Innovación)

Dentro de esta Temporalidad, se distingue la variable del Lenguaje que atraviesa esta condición y que se manifiesta en toda situación en dos aspectos que componen a la comunidad.

(Lenguaje: Psicológico, Plástico)

Y en menor instancia, el Descriptivo que enumera los conceptos existentes entre el cruce de Temporalidad y Lenguaje y que se pueden englobar en cuatro principios:

(Descriptivo: Léxico (Modo Verbal), Estilo (Modo Visual), Atracción, Inspiración)

El vínculo existente entre cada agrupación y concepto, se puede entender de la siguiente manera:


Mapa Conceptual de la Identidad Digital Modelo de Identidad



Proceso

Para determinar con exactitud sobre la Imagen que se tiene sobre el sitio, se registrará la opinion de los alumnos y docentes en una encuesta que enfoque sus preguntas en como perciben la Identidad de nuestra escuela anterior a una espacio digital, no queriendo anteponer la respuesta a un solo medio de comunicación, sino las bases que generan esta grafía que pretende ser incluída en el sitio, buscando reconocer los elementos que nos caracterizan, y si estos, corresponden a los conceptos del mapa sobre la Identidad; de esta forma, los resultados serán cruzados y serán parte del argumento para la propuesta.

Investigación Empírica

¿Qué medir?

Se centrará en la Identidad dentro de su Área Plástica (¿Nos identifica? ¿Te atrae?) ¿Cómo debería presentarse el contenido? de una manera más interactiva, dividida en ¿Cómo percibimos la Identidad del sitio? y ¿Cómo debería ser la identidad del sitio?, encuestando a 7 personas, 2 Profesores, 3 alumnos de Diseño y 2 de Arquitectura.

Los Resultados reflejan una gran coincidencia sobre la aprobación en la identificación que posee el sitio, considerando elocuente las decisiones gráficas en como se presentan el contenido, el blanco constante, el léxico en las publicaciones y el registro fotográfico existente; de tal manera, que en su mayoría solo se poseen críticas sobre el contenido y su Arquitectura de Información.

Existe un gran interés en re-construir y ser más partícipes de los espacios participativos que existe en en el sitio (con un carácter de mea culpa), pero acompañada de una identidad más contemporánea, innovadora, no variando en su estilo plástico, sino en el asombro a través de interacciones animadas, el grado de conexión con redes sociales y otras entidades internas de la Universidad y mayor consideración y recepción al lector externo.


Encuesta sobre la Identidad Digital del sitio
Resultados de Encuesta de Identidad

Análisis Gráfico

Reconocimiento de Elementos y Escenarios Gráficos

Parte por preguntarse que elementos visuales y habitables son propios de nuestra Identidad, cuáles son usuales, como un carácter constante entre el alumnado y los docentes, una manera de abarcar el estudio y construir la obra a través de la observación y el dibujo.


Entre los elementos plásticos se distinguen:

  1. La Tipografía manuscrita.
  2. El blanco, como un elemento propio del silencio presente tanto en Láminas, salas y ediciones.
  3. Amereida, formando una temática que abarca todo el desglose fotográfico/dibujo de Ciudad Abierta (dunas, ágoras, cultura del cuerpo, Taller de Amereida, etc).
  4. Obras, en desglose de todo el estudio y obra realizada por los Talleres, expresado principalmente en Proyectos.
  5. Pizarra de tiza, siendo un espacio de estudio escrito/dibujo tradicional en la Escuela.


Caracterización de Usuarios

Para poder desarrollar la navegación y la grafía del sitio, se asigna una aproximación real de interacción persona-sitio, se considerarán tres representantes con distintas experiencias en el medio y grados conocimiento sobre el mundo web , de tal manera que el ubicarlos en los prototipos, se revelarán las exigencias y necesidades de interacción/navegación de dichas personas y el grado de relación/asociación gráfico que tendrán; de esta forma, la manera de abarcar la construcción, tiene su base técnica y empírica.

Personas y Escenarios

Caso 1

Pye jorge.jpg


  • Nombre: Jorge Vera A.
  • Edad: 58 años.
  • Ocupación: Guardia Privado y Artesano.
  • Nivel de Usuario: Básico.


Descripción: Jorge vive en La Ligua y es trabajador en un condominio privado, además de artesano en orfebrería. En sus ratos libres gusta de ver películas y documentales por TV Cable y buscar en internet revistas y/o galerías de orfebrerías, investigación en sus materiales, técnicas, precios, etc. Se entretiene horas viendo las fotos, ha aprendido a marcarlas en una carpeta de favoritos de su navegador y enviarlas por mail a su familia.

Escenario:

El hijo menor de Jorge estudia en la Facultad de Arquitectura y Diseño, y desea saber en que fecha serán los exámenes de pregrado y de postgrado para ir a visitarlos junto a su esposa y su hijo mayor. Se encuentra con un calendario de todas las actividades que realiza y realizará la Facultad y la Universidad, y añade los calendarios que le interesan a su cuenta de gmail para poder programar un próximo viaje a Valparaíso.


Caso 2

Pye erick.jpg


  • Nombre: Erick Aspe V.
  • Edad: 21 años.
  • Ocupación: Estudiante de Ingenería - USACH.
  • Nivel de Usuario: Avanzado.


Descripción: Erick es estudiante de la Universidad Santiago de Chile y gusta de salir a compartir con sus amigos y jugar juegos online de Estrategia, se interesa mucho por los proyectos de ingenería en Quimica y leer los diarios nacionales a través de internet. Posee un conocimiento avanzado en espacios web, software, y juegos de avanzada tecnología.

Escenario: Erick desea saber leer un artículo que le comentó un amigo, se encuentra con un buscador que le arroja los resultados de manera sencilla, entendible, jerarquizada y con características de poder acceder a otros artículos de la misma línea. Al ingresar se percata que las categorías están linkeadas a una biblioteca "Constel" y un archivo fotográfico en Flickr, y decide enviarlas a sus amigos a través de Facebook y Twitter.


Caso 3

Pye andrea.jpg


  • Nombre: Andrea Zevallos F.
  • Edad: 21 años.
  • Ocupación: Estudiante de Arquitectura - PUC Perú.
  • Nivel de Usuario: Avanzado.


Descripción: Andrea es una joven Peruana que estudia Arquitectura en la Pontificia Universidad Católica del Perú y se apasiona por los proyectos de desarrollo urbano, es avanzada en softwares de modelos 3D, en sus ratos libres le gusta ver películas y viajar con sus amigos. Pretende organizar un grupo de actividad urbana en Lima y cuenta con amigos que la apoyan desde Chile.

Escenario: Andrea está cursando su cuarto año de Arquitectura, y le recomendaron la Facultad de la Pontificia Universidad Católica de Valparaíso, Chile, desea averiguar sobre los requerimientos y el proceso que debe hacer en caso de que se efectúe el intercambio.

Se encuentra con una sección de Carreras y una pestaña especial para Intercambio, la información dada es clara y encuentra un formulario de llenado para la postulación, las direcciones y una vista de Google maps se ubica perfectamente y le genera una mayor confianza; llama a los teléfonos que aparecen en la sección y la transfieren para detallarle de mejor manera, el proceso que debe hacer en su Universidad para realizar el intercambio y la convalidación.

Mapa de Navegación

Mapa de navegación actual del sitio.


Primera Etapa

La navegación de los contenidos, de acuerdo a la opinión reflejada en la encuesta, debe reducirse para poder acceder de una manera más fácil y elocuente al tipo de personas que ingresa al sitio. De esta forma, la sección de Mundo es quitada del menú para integrarse a la sección de Escuela, donde los artículos y la manera de abarcar y expander los estudios hacia el resto, son partes propias de la Escuela, ergo, se considera innecesario construir un apartado. Así mismo, los enlaces anexos que pertenecen al dominio, se añaden en el Home como una zona de links que permite el acceso directo a la actividad paralela de la Facultad.

Sobre la misma base, el Menú de "Carreras" se expande a una por cada carrera ("Diseño", "Arquitectura"), de tal forma que se logra construir un distingo entre ambas disciplinas, perdida en el Diseño actual del sitio, donde cada publicación solo mencionaba la disciplina a la que pertenecía en su categoría; para el caso de "Diseño" y "Arquitectura", ambas integran su postgrado en el desglose del menú, aunando las especialidades por disciplina, y no exponiéndolo como conceptos separados.


Archivo:Mapa navegación propuesta.jpg
Primera Etapa en Mapa de navegación.


Segunda Etapa

Se corrige esta vez la separación de Carreras y la integración de Postgrado a Carreras, puesto que la postulación a los postgrados, no necesariamente debe ser de la misma carrera de donde proviene, se creaba entonces una confusión y un entendimiento errado por su distribución; la sección Carreras vuelve a ser como era antes y se le añade Movilidad Estudiantil debido a que la asociación del intercambio está directamente relacionada con una de las carreras que imparte la Universidad, ahora llamada Intercambio Estudiantil por convención; además, se añaden secciones en el Home que llevarán a los links directos, como Media, que almacena los sitios paralelos al ead.pucv.cl pero que corresponden a la misma actividad de la Facultad, un apartado para Noticias e Información Docente y un cuadro inicial de la última publicación en la categoría Observación.


Archivo:Mapa navegación propuesta 2.jpg
Segunda Etapa en Mapa de navegación.

Visualización

Intención

La entrada principal al sitio muestra una serie de elementos que -de acuerdo a la encuesta realizada- interfieren y se exceden en mostrar los contenidos y la navegación a través de ellos, sobre esta base, se decide mostrar los contenidos de acuerdo a quién accede al sitio, que tipo de usuario y los temas que serían de su mayor interes, velando mayoritariamente por la información visual, la compresión de contenidos textuales y la interacción mediante aplicaciones que expongan los contenidos y enlaces de una manera más lúdica.


La división general del sitio está basada en la visualización constante de imágenes, expuestas analógicamente en forma de lámina y blancos que aparecen con a medida que se navega en el sitio. El diseño home, posee dos instancias, la primera, cargada de blanco tipográfico y el blanco espacial característico en la Arquitectura y en el Diseño, y en segunda instancia, la actividad interna, el ejercicio del alumnado y los docentes, caracterizados en Amereida, Phalene, Actos Poéticos, etc.


Para poder construir un sitio que reciba maleablemente los distintos contenidos y las jerarquías internas de exposición que posee cada publicación, se construye una grilla en base a la visualización anterior del sitio, donde se piensa el ancho de cada columna de acuerdo al ancho mínimo que deba poseer una fotografía y dos anchos máximo para el ancho de un párrafo. Para el alto de las horizontales, son establecidas de acuerdo a la constante publicación de noticias del sitio, de tal manera que en el alto debe caber la mínima información de una publicación (título, fecha de publicación y categoría) y además, se agrega restan de los costados 20 pixeles por un promedio del uso espacial que poseen los navegadores.


Primera Etapa de grilla
Segunda Etapa de grilla
Tercera Etapa de grilla


Continuamente, el sitio es segmentado en distintas secciones que han sido ordenadas por orden de relevancia, y que se argumentan de acuerdo al interés de los lectores y el modo idóneo de exponerse (¿Para quién? ¿Cómo?):


  • Perfil

Refiere a la visualización gráfica que posee el sitio, la imagen primera que se lee.

¿Para quién?: Para el lector interno y el ajeno (ajeno a la facultad y a las materias).

¿Cómo?: De manera simple, colores planos y que categoricen las secciones del sitio y los oficios, del orden de "categoría".


  • Noticias

Corresponden a las últimas publicaciones internas de la Facultad, que muestran la actividad que se realiza.

¿Para quién?: Principalmente para el lector interno.

¿Cómo?: En mayor tamaño una fotografía horizontal de la actividad, con una nota inferior que aparece cuando el cursor pasa por encima que muestra el Título de la noticia, fecha de publicación, breve descripción de la publicación y un ícono de acceso.


  • Observación

Es la sección que semanalmente realiza una observación publicada por algún profesor, carácter único de la escuela.

¿Para quién?: Tanto para el lector interno como externo, con un fin de hacer pública la manera en que la escuela realiza sus estudios.

¿Cómo?: El croquis de la observación con un título sobre el tema observado.


  • Eventos

Actividades realizadas y por realizar, estipuladas en Google Calendar que maneja la escuela.

¿Para quién?: Principalmente para el lector interno.

¿Cómo?: Un apartado que muestra los dos últimos eventos y que linkea directamente al Google Calendar.


  • Media

Son las secciones internas que posee el sitio, los espacios donde se publican estudios y/o catálogos de referencias.

¿Para quién?: Principalmente para el lector interno.

¿Cómo?: Como un apartado de un color distintivo al costado derecho, que permite el acceso al espacio con un link textual.


  • Contacto

Datos de contacto con la Universidad, mail, fono, dirección.

¿Para quién?: Lector interno y ajeno.

¿Cómo?: Desde un apartado inferior derecho, el boton de Contacto, desglosa los datos (fono, mail, dirección) y un enlace a un Google Maps.

Boceto/Wireframe

Primera Etapa


El desarrollo de los wireframes se efectua de acuerdo a la jerarquización de los contenidos en cuestión, y las carencias reveladas por el alumnado y docentes de la Facultad, priorizando la exposición del contenido en modo de imagen y con una interacción en jQuery. La maqueta de wireframes está elaborada sobre la base del contenido exclusivamente, o sea, que no considera el grado emocional que posee el sitio, de esa forma, se corrige y se discute solo de la ubicación y la espacialidad de éste dentro de la pantalla.


Segunda Etapa

En esta segunda etapa, la propuesta anterior carecía del grado de formalidad que debe lograr una Institución Educacional Universitaria, y los contenidos se presentaban de una manera eficiente y económica, que era uno de los fines principales, pero no expone información que identifique a la Escuela, solo se centraba en el contenido de las publicaciones y los eventos que se realizaban, pero no considera la identidad de la Escuela dentro de esta primera aparición del sitio.



Tercera Etapa

La composición estructural de la etapa anterior, seguía consistiendo en sintetizar excesivamente los contenidos que el actual index del sitio muestra; de tal manera que se decide prolongar la visualización de la portada, primero, en una representación general de la Facultad, con acceso hacia los espacios digitales de trabajo paralelos al sitio e[ad ] y un random del catálogo de Flickr que se carga cada vez que se actualiza el sitio; en la segunda instancia, el sitio divide dos secciones, alumnado y noticias, donde se designa 1/3 para el primero y 2/3 para el tercero, de acuerdo a la intención que se desea obtener con el sitio.


Interfaz

Boceto

En este primer boceto de la portada del sitio, se expone la manera en que las fotografías y los contenidos son expuestos, para las noticias, y en especial, para la última publicación, la imagen da un detalle de la publicación, su fecha de emisión y una pequeña reseña, referida en un recuadro negro que aparece cuando el cursor está en hover sobre la imagen, buscando el dinamismo y el realce visual que debería poseer el sitio.

La noticias anteriores, se muestran al inferior y buscan generar un contraste de las carreras a través de los colores y, con una extensión en jQuery, animarlas en un rollover horizontal y hacer aparecer las demás noticias. La reducción espacial del sitio, busca generar una identidad instantánea sobre la actividad de la escuela, y la línea editorial que se posee por rasgos característicos gráficos de la identidad.


Maqueta uno, visualización de prueba


Primera Etapa

En esta etapa, se corrige de la anterior, una jerarquización visual de colores que no representan la identidad de la Facultad, siendo la línea visual de los proyectos y la comunidad, simple, blanca y reducida en paleta de colores. Así mismo, la impresión primera del sitio, es sobre la identidad misma, con una imagen característica de la actividad y el concepto que genera la Facultad en el perfil de sus egresados.

De igual forma, cada vez que el cursor posa sobre un segmento del Menú, corre una imagen de fondo que muestra: Una imagen característica de la sección superpuesta y un detalle de la fotografía; se intenta con esta forma, generar una segunda navegación del sitio que pasa tanto por revelar los contenidos de cada sección y dar una idea sobre la actividad, alumnado, docencia que posee la Facultad.

Para el caso de la publicación, se limpia la navegación superior y solo se deja el ingreso, la búsqueda y un link hacia el Home. La visual de las publicaciones, emula la relación de las láminas (gran característica de la Facultad) y un agregado de notas para los comentarios; de otra manera, el contenido visual se reduce al presentar las fotografías de la publicación como un apartado izquierdo, que aparece solo al clickearlos como un pase de diapositivas en sentido horizontal.


Home del sitio, interfaz inicial del sitio


Home del sitio, interfaz con hover en Amereida


Home del sitio, interfaz con hover en Alumnos


Interfaz de Publicación, texto


Interfaz de Publicación, imágenes


Segunda Etapa

De acuerdo a la corrección anterior, el Home del sitio, anula demasiado lo que pasa, en cuanto a actividad, dentro de la Facultad, dejando de lado totalmente la sección de Observación; de esta forma, se añade los links hacia las secciones Media que posee el sitio, como imagen primera, la última observación publicada, con una reseña breve y los detalles de esta, y la información de docencia como tercera instancia en la jerarquización de aparición del contenido.


Home del sitio


Tercera Etapa

Se decide en esta etapa, que las dos nuevas instancias creadas para la portada del sitio, se distinguen graficamente por la utilización de colores, en la primera, a través del gris y el blanco, más la fotografía de la facultad, y en la segunda, el distingo pictórico de la tipografía. La determinación de la tipografía y los colores, son elegidos de acuerdo a la sensación que producen y a la actividad que la facultad ejerce, queriendo generar modernidad y formalidad que amerita una Entidad Educacional Universitaria.


Home del sitio


Una publicación de noticia, distingue dos segmentos principales y la reducción de la fotografía del header para permitir una mayor visualización de la publicación en pantalla; el segmento izquierdo, abarca las últimas publicaciones relacionadas con Noticias, las últimas publicaciones que corresponden a la misma categoría, la publicación destacada y el acceso a los espacios digitales paralelos; la lógica de este orden corresponde a la navegación de acceso hacia la publicación que se está visualizando, y el grado de relación que tiene el artículo con el contenido total del sitio.

La sección derecha, recibe la publicación en sí, las características de ésta y herramientas de envío mail e impresión, añadiendo una imagen de quien la publicó, un link hacia las publicaciones del autor y su mail; en su segmento inferior, el cuadro de comentarios está desfasado de la vertical que justifica el texto de la observación, con fin de darle un mayor carácter editorial a las publicaciones, sin regirse estrictamente por la grilla que la contiene.



La interfaz en una publicación de observación, al igual que un publicación de Noticia, distingue se segmenta de igual forma, pero, en su segmento izquierdo, el orden de relevancia de publicación de contenidos es: Noticia, Observación, Media, de acuerdo a la navegación que lleva a la publicación, y la categoría que se expone.


Archivo:Interfaz observación.png
Artículo de Observación


Heurística

Protocolo para Pruebas de Usuarios

Medición

Programación Web

Divs

Mapa de Divs

El armado digital del sitio está construido en HTML según las estandarizaciones establecidas por la W3C y comienza por traspasar la diagramación de la interfaz a un mapa de divs que permite posteriormente, ingresar los contenidos de manera organizada y definir los estilos visuales para cada sección (para cada div).


Primera Etapa mapa divs











































Código Html de Divs




<head> 
<title>Escuela de Arquitectura y Diseño</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<link rel="stylesheet" type="text/css" href="css/estilo.css" /> 
</head> 

<body>

<div id="contenedor">
	<div id="principal">
	
	<div id="header">
	<ul id="menu">
		<li>Escuela</li>
		<li>Amereida</li>
		<li>Carreras</li>
		<li>Postgrado</li>
		<li>Alumnos</li>
	</ul> <!-- fin menu -->
	
	<div id="buscador">
	Buscador
	</div>
	</div> <!-- fin header -->
	
	<div id="contenidos">
	<div id="logo">
		<span id="ead">e[ad]</span> <br />
		<span id="nom_esc">Escuela de Arquitectura y Diseño</span> <br />
		<span id="nom_uni">Pontifica Universidad Católica de Valparaíso</span>
	</div> <!-- fin logo -->
	
	<div id="observacion">
	Observación
	</div>

	<div id="media">
		<div id="media_wrap">
		Media
		</div>
	</div>
	</div> <!-- fin contenidos -->
	</div> <!-- fin principal -->
	
	<div id="secundario">
	<div id="noticias">
		<div id="noticias_wrap">
		Noticias
		</div>
	</div>
	
	<div id="informacion">
		<div id="info_wrap">
		Información
		</div>
	</div>
	
	<div id="hipervinculos">
	Hipervínculos
	</div>
	</div> <!-- fin secundario -->
	
	<div id="footer">
		<div id="footer_wrap">
		Footer
		</div>
	</div> <!-- fin footer -->
	
</div> <!-- fin contenedor -->

</body> 
</html>



Mapa divs Index.png