Caso de estudio:Harvard
| Título | Caso de estudio: Harvard |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Período | 2013-2013 |
| Asignatura | Construcción de Diseño Gráfico 4, |
| Del Curso | Construcción 4º 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) | Gabriela Pérez |
| Profesor | Katherine Exss |
Presentación
El presente caso de estudio se enfoca en el sitio web de la Universidad de Harvard http:http://www.harvard.edu/. El análisis comprende observaciones, relaciones mediante la comparación, identificación de las estructuras básicas (diagramación, estilos, tipografía, identidad, etc) adoptadas por el metasitio en sus distintos vínculos presentados.
Elementos estructurales del sitio
El sitio web de la Universidad de Harvard se organiza en base a una diagramación que permite reunir los elementos en un centro; debemos inicialmente realizar scroll para acceder a lo que se va mostrando en el cuerpo del sitio, ya que la página de inicio es bastante amplia, de manera que va revelando breves descripciones de las distintas temáticas, que pueden ser revisadas en detalle al hacer clic en los elementos dispuestos (flechas o iconos a modo de links) para ampliar la información. La forma de recorrer el sitio se genera en 3 niveles de navegación disponibles en el header.
Home del sitio
Grilla de contenidos, medidas y estructura del sitio
Grilla de contenidos del sitio
Grilla de medidas del homepage
Grilla de medidas del header
Grilla de medidas del footer
La composición que respecta al sitio trata con un espacio de 3 columnas en el centro del sitio, con márgenes a los lados, pero no así de manera superior e inferior de la página. Estas columnas internas contienen información de tipo Noticias, que constantemente se ven actualizadas, incluso es posible ir de manera manual filtrando la búsqueda, por tipo de Canal informativo. El uso de diversos elementos que abarcan la interacción por parte del usuario, se integran al sitio en cada dimensión de contenidos posible; usando fotografías o datos y su unión en distintas formas y secuencias de visualización. De este modo,las herramientas visuales, la diagramación al centro, disposición de contenidos en columnas, son algo común en sus sitios interiores o subsitios.
La navegación del sitio ofrece el acceso a los contenidos bajo estos 3 niveles o menús mencionados antes:
- Barra de navegación rápida o alternativa
- Barra de navegación primaria
- Barra de navegación secundaria
Cada barra de manera individual, representa mediante su tamaño la respectiva diferenciación.
Ubicada en el borde superior de la pantalla,tiene 8 accesos posibles de recorrer; conjuntamente, cada uno de estos elementos de esta barra de navegación, muestran a un costado del sitio, noticias actualizadas y en su parte inferior un recuadro de redes sociales con comentarios recientes y un historial de ellos.
Se tiene 8 áreas u opciones que definen este menú:
- Apply: nos dirige a Admissions & Aid que es parte del menú de navegación primaria del sitio. Este acceso presenta información acerca de la admisión, ayudas estudiantiles, ofertas de estudios (escuelas de postgrados), programas MBA y Doctorados y los links hacia las distintas facultades de la universidad. En si, se puede decir que la presencia de esta barra en la parte superior inicial del sitio facilita un acceso más rápido a todo lo que el sitio contiene, antes de navegar por las barras siguientes de manera manual independiente.
- Faculty: presenta enlaces referidos a los profesores de la Universidad de Harvard. Se pueden realizar búsquedas por profesor mediante el ingreso de nombre y apellido del docente; además muestra un listado de links que accesan a informaciones detalladas que incumben al alumno como profesorado. Hay links que dirigen por Unidad académica, facilitando que la búsqueda se de a través de links directos que contienen los distintos departamentos relacionados a lo que se quiere consultar.
- Staff: se puede realizar búsquedas por personal o Staff perteneciente a la universidad, ingresando el nombre y apellido al igual que en Faculty. Los links presentados varían ahora solo en los contenidos a los cuales redirigen que son ahora con la temática de Recursos Humanos, Empleabilidad, Directorio, Seguridad, Desarrollo e investigación, entre otras, separadas aún estas listas de búsqueda por carrera o Facultad.
- Students: en este caso, se presenta una barra para suscribirse vía e-mail al diario Harvard Gazette que es un boletín de noticias de la universidad dirigido a sus estudiantes. La información a modo de listas de links por facultad, es netamente respecto a intereses estudiantiles, esto es: Calendario académico, Apoyos estudiantiles, Publicaciones, Oficinas de interés, Programas de estudios, etc.
- Alumni: nos redirige a un sitio totalmente diferente a los anteriores en cuanto a la organización de sus contenidos. Cambia la diagramación y hay ciertos elementos dinámicos que se van presentando. Hay un nuevo menú desplegable que aborda distintas temáticas: Eventos, Noticias, Contacto, Ayuda, Historias, Acerca de Alumni, Ser voluntario, Dar un regalo, etc. Entre otras cosas, en el cuerpo del sitio se va mostrando información textual, noticias; permite conectar a través de redes sociales. Los elementos como el footer y header han cambiado, pero mantienen la identidad inicial del sitio (color y formas).
- Parents: la información referida en este punto esta dirigida a los padres de estudiantes de Harvard. Abarca al igual que los links anteriores información por facultad.
- Visitors: esta dirigida a informar acerca de tours o visitas a la universidad por particulares; entregando un calendario,mapas,instrucciones,preguntas frecuentes para orientar a quien este interesado. El modo de visualizar esto es también diferente a las demás opciones disponibles en esta primera barra de navegación, ya que cambia la diagramación, facilita un nuevo menú de navegación interior en este ítem, guardando el mismo diseño de header (que sólo cambia la orientación del logo de la universidad) y footer que la página principal de la universidad.
- Media: los contenidos aquí expuestos, se hallan dirigidos a personas o profesionales interesados en el quehacer de Harvard,con el propósito de entregar información mediante documentos, fotografías, audiovisual, requeridas por áreas. Se facilita la documentación o recursos a los periodistas o personas y se entregan las formas de contacto posibles para ello.
Contenidos algunas secciones menú rápido (Visitors, Apply, Alumni y Media)
Visitors
Apply
Alumni
Media
Cambios en header y footer secciones menú navegación rápida
La barra de navegación primaria comprende dentro del sitio los accesos a las distintas vías de información o contenidos de la universidad de Harvard y en detalle en la categoría Schools los sitios interiores que se analizarán en este trabajo, acorde a sus relaciones, elementos, estructuras con respecto al sitio inicial harvard.edu.
Esta barra de menú nos permite entonces, visualizar su contenido a través de un título por categoría, con su respectivo menú desplegable. La categorías son: About Harvard, Admission & Aid, Schools ( que es lo que se comparará con su sitio inicial) y Resources & Offices.
Hover sobre menú
Esta barra contiene la navegación centrada en obtener información de tipo publicaciones oficiales de la vida universitaria (Harvard Gazette), datos acerca de eventos, obtener vías de comunicación con la universidad ya sea para asuntos de Admisión así como también para visitar el lugar mediante tours que ofrece la institución (mails, teléfonos, conexión con redes sociales, etc). La incorporación de la categoría Give en esta barra trata de donaciones en dinero así como especies, que quieran particulares hacer entrega a Harvard y alguna de sus facultades, con fines de investigación y financiamiento de proyectos innovadores.
Elementos composicionales del sitio principal
La estructuración del sitio mediante columnas, en este caso, aporta una organización más fluida a través de la grilla, sin concentrar grandes cantidades de textos o datos de una misma índole, apartados o ajustados a un sólo lugar. La disposición de los distintos objetos o componentes textuales y visuales varía en estos espacios otorgados, hay más posibilidades de moverse dentro de la diagramación.
El sitio de esta universidad concentra en el cuerpo central de la grilla 3 formas de clasificación de la información, que pueden nombrarse como:
- Composición Básica: elementos como el header, body y footer
- Composición gráfica: estilo tipográfico que define títulos, subtítulos y cuerpos de texto continuo.
- Composición visual / interactiva: utilización de fotografías, vídeos dispuestos de forma dinámica o fija.
Header y menús de navegación del sitio principal
Footer del sitio
Elemento dinámico con imagen e información: slider
Recuadro con información de los eventos y link para ampliar lectura
Barra canales de información Harvard
Recuadro por canal de información
Barra de despliegue para ver más registro o publicaciones por canal
Color en borde que representa el canal o tipo de publicación
Recuadro dinámico para visualizar actualizaciones o publicaciones relacionadas a través de redes sociales (Twitter y Facebook)
Recuadro de suscripción a Harvard Gazette (boletín noticias universitarias) y links a sitios web sociales.
Colores e identidad gráfica
Paleta de colores
La universidad guarda ciertos criterios de utilización de colores como sello, que responde a la imagen que quieren dar con respecto a las otras instituciones educativas del mundo. El color representativo que utiliza el sitio harvard.edu es Crimson, un tono rojizo que además es utilizado con otras características o aplica similitudes, por sus sitios alojados como Facultades; estas hacen uso de este color en sus composiciones de página, lo adoptan como estilo y a partir de él lo conjugan con otros para diferenciar una escuela de otra.
Otro color que los sitios analizados tienen en común con el home de su página principal, es el gris en distintas tonalidades. Este sin embargo no está estrictamente regido en su utilización, sino que fue observado en este análisis como un color recurrente para los fondos del cuerpo principal de algunos de los subsitios, o al menos llega a ser un color en gran parte utilizado para las barras de menús de navegación, en degrade o con ciertas luminosidades.
Iconos o imagen corporativa
La universidad como institución se rige en el lema implantado en su escudo o logo que dice Veritas, palabra que proviene del latín y que significa Verdad.
Como característica directa de un sitio con otro, respecto a las 9 distintas facultades o escuelas y sus 3 centros de investigación, se observa que poseen un escudo de carrera, diseñado siguiendo la base que se presenta en el header y logo de la universidad.
Los escudos siguen un estilo de dibujo casi medieval o antiguo, con iconografías simples o figuras casi geometrizadas; pero siempre cuidando el fondo de color rojo; las tipografías son blancas con un leve borde negro. Se mantiene además el lema en cada uno de ellos.
Escudo Escuela de Educación Harvard
Escudo Escuela Government Kennedy de Harvard
Escudo Escuela de Salud Pública
Escudo College Harvard
Escudo Escuela de Diseño Harvard
Escudo Escuela Divinity Harvard
Escudo Escuela de Extensión Harvard
Escudo Escuela de Graduados en Artes y Ciencias
Escudo Escuela de Negocios Harvard
Escudo Escuela de Leyes Harvard
Escudo Escuela de Ingeniería y Ciencias Aplicadas Harvard
Escudo Escuela de Medicina Harvard
Escudo Instituto de Estudios Avanzados Radcliffe
Escudo Escuela Dental Harvard
Interfaces de los sitios alojados en metasitio
La Universidad de Harvard es una institución privada, que ofrece 9 facultades junto a diversos programas de estudios, asociados a las ciencias, educación, artes, ingeniería, leyes, salud e instituciones referidas a temas especifícos o de investigación.
Las distintas facultades contemplan un sitio que da a conocer los planes de estudios, noticias relevantes, información académica y datos de interés tanto para alumnos propios de dichas carreras así como para posibles postulantes o usuario en general.
El estilo de sus interfaces toma como referencia para la construcción de su identidad el metasitio que los alberga en algunos casos; salvo facultades que irrumpen este principio, que toman partido por otro diseño y paleta de colores, manteniendo únicamente el color institucional general,el escudo y algunos estilos tipográficos.
La equivalencia entre un sitio y otro entonces varía, se puede identificar como cualidades composicionales que se siguen como regla en casi todos los sitios, el de contener la información en un centro, dejando amplios bordes laterales y pocos márgenes superiores e inferiores.
Los contenidos alojados en columnas, que también se mantienen en un rango entre 1 a 4, destacan en que la información se va desplegando de manera fluida y ajustable (para fotografías, títulos,textos), ya sea por las distintas divisiones o espacios de márgenes interiores empleados.
Los errores o más bien problemas visuales en los que cae el sitio inicial que aloja a estos subsitios, es el uso elevado de links con diferentes títulos o nombres que dirigen a un mismo campo de información; datos redundantes a la vista quizás, pero que en ocasiones sirven de guía en la navegación de un sitio a otro.
Home Escuela de Negocios
Home College Harvard
Home Continuing School
Home Escuela Medicina Dental
- Diseñohome1-07.png
Home Escuela de Diseño
Home Divinity School
Home Escuela de Educación
Home Escuela de Ingeniería
Home Facultad de Artes y Ciencias
Home Kennedy Institute Government
Home Escuela de Graduados Artes y Ciencias
Home Escuela de Leyes
Home Escuela de Medicina
Home Escuela de Salud Pública
Home Instituto Radcliffe
Relaciones y diferenciaciones entre los sitios internos
Cada sitio que pertenece al metasitio harvard.edu, tiene un tratado distinto del tema color, fondo y diagramación. Si bien hay elementos coincidentes que permiten visualizar una coherencia identitaria respecto al sitio que lo contiene, como son el color propio de la universidad (rojo), el planteamiento en el header del escudo por facultad, tonalidades grises de background y para barras de navegación; hay algunos sitios como el de Divinity School, Facultad Dental, Escuela de Diseño, Escuela de Ingeniería que plantean una nueva utilización de ciertos elementos, como el tratamiento del color y las fotografías o elementos en gran parte dinámicos (sliders,carrusels,etc).
Las diagramaciones siguen en todos los sitios un ajuste centrado para alojar el contenido o cuerpo de información. Las variaciones de estas diagramaciones están entonces en este cuerpo interior centrado, llegando a utilizar hasta 3 columnas o una sola de gran tamaño.
Todos los sitios hacen uso de elementos dinámicos, ya sea para visualizar fotografías o links de acceso a otros sitios. El cambio de estos elementos es bastante variable de un sitio a otro, pero la ubicación se fija en la parte superior central de casi todos los que utilizan este recurso.
El footer también es un elemento cambiante, respecto a su color y tamaño. La ubicación usual esta determinada en la parte inferior de la grilla, pero hay algunos sitios que lo mantienen fijo en la pantalla, siguiendo la navegación cuando se presenta scroll. El contenido dispuesto en ellos da referencia a las direcciones, medios de contacto, redes sociales y links internos de interés. Algunos footer hacen uso excesivo de los links, como es el caso de la Facultad de Leyes, donde el footer da cabida a este tipo de enlaces por sobre mostrar ubicaciones o replicar el menú principal abajo. Otros tratan de ser muy minimalistas en este punto integrando dos o tres links a lo más como es el caso del footer de la Escuela de Medicina o de la Escuela de Negocios.
Elementos visuales de los sitios interiores
Escuela de Negocios
http://www.hbs.edu/Pages/default.aspx
La Escuela de Negocios de la Universidad de Harvard, hace uso de distintas herramientas de tipo visual, para mostrar información que va cambiando con la acción directa del usuario sobre los objetos dinámicos o bien información textual que surge de un despliegue, avanzar por flechas, interacciones mediante botones, etc.
Su sitio tiene un estilo minimalista, con uso de slideshow para mostrar información e imágenes que a la vez permiten interactuar y acceder a información más ampliada al cliquear ciertos iconos o botones. La mayoría de los elementos tienen estados, un estado On y Off, lo que puede verse y no verse, tras realizar o no la interacción con el objeto.
Los colores que priman son tonos muy sólidos; desde colores rosados, calipsos, verdes, aguamarinas, anaranjados para los fondos de parte del sitio, siempre mezclado con otro que lo atenúa (blancos, grises, celestes, etc), lo que hace que no sea molesto a la vista.
El menú de navegación sigue la ubicación del metasitio, en el header, de manera que se presentan 3 menús también, uno de navegación rápida, otro de navegación principal y uno de navegación secundaria.
El header conserva los colores institucionales que tiene la universidad, claramente las tipografías integran otro estilo distinto al sitio de harvard.edu.
Home del sitio Escuela de Negocios
Header del sitio
Elemento dinámico home Escuela de Negocios
Botones o indicador secuencia elemento dinámico o slider
Footer del sitio
Herramienta de navegación guiada para recordar (Breadcrumbs)
Mapa del sitio desplegable
Página tipo al ingresar a menú Faculty & Research
Página tipo al hacer clic sobre categoría MBA en menú
Calendario tipo del sitio de Escuela de Negocios
Grilla página tipo
Grilla página tipo forma 2
College Harvard
http://www.college.harvard.edu/icb/icb.do
El College de Harvard tiene un diseño minimalista en cuanto a diagramación, se guía por dos columnas de textos, sin abusar de elementos dinámicos. Va presentando fotografías cuando cambiamos de sección del menú. El menú varía si se compara con el metasitio, ya que se ve ahora desplazado a un costado de la página, como barra que se desplega.
El fondo del sitio utiliza un tono grisáceo oscuro, tomando los patrones de color de la institución. Hay tonos amarillos utilizados también; las tipografías son blancas y de tamaños reducidos, salvo los títulos que destacan entre los cuerpos de texto. Las fotografías que se exponen,se extienden bajo el header, usando el espacio central superior,si se usan más abajo en las secciones de noticias o datos, se muestran miniaturas o iconografías.
El footer es apenas una línea de texto en la parte inferior, no contiene enlaces a otras secciones. El sitio en general con este diseño, es limpio y amplio a la vista, por los espacios libres que quedan desde el centro a los costados del sitio.
Home del sitio
Header del sitio con logo más buscador y links
Barra de menú
Despliegue de menú hacia abajo y cambio de color
Footer del sitio
Grilla del sitio página tipo
Division of Continuing Education
Acceder a este sitio, trae la particularidad de sentirse como en un anuncio a pantalla completa en un comienzo; esto porque el homepage de la División de Continuación de Estudios tiene un inicio que se ajusta a la pantalla y como imagen general para el fondo, tiene un aspecto poco trabajo inicialmente, luego al acceder a los links que se hallan al centro de esta imagen,podemos acceder a distintos departamentos relacionados.
Los enlaces dirigen a una página más estructurada y que toma en cuenta algunos de los estándares de color o línea gráfica del metasitio, igualmente integrando el color celeste para el menú y detalles de bordes.
Este enlace hace uso de divisiones de información mediante la grilla.
Header del sitio
Home Continuing School
Body con links que redirigen a otros sitios
Página tipo al hacer clic a uno de los links
Footer del sitio principal
Footer del sitio linkeado
Grilla página tipo
Escuela Dental
El sitio de la escuela Dental rompe con el parámetro de colores base, llegando a usar colores crema en el fondo, tonalidades suaves en las barra de menú. Una mezcla de colores que van desde un rojo profundo en el header con una tipografía más grande comparada con la del sitio inicial, luego la presencia de 3 menús de navegación, dos horizontales y otro vertical lateral a modo de barra desplegable.
Uno de los menús de tipo horizontal usa tonos morados y azulados y la barra lateral colores celestes y cremas. El otro se acoge al header, ya que se ubica dentro de él y los títulos de sus secciones son de color blanco. Hay poca claridad o identidad finalmente, ya que tiene muchos colores un poco dispares entre sí, poco combinables a la vista.
Los elementos visuales utilizados son sliders e iconografías con formas de escudos para llegar a los sitios institucionales que corresponden a esas imágenes.
En cuanto a diagramación utiliza una grilla de 3 columnas,donde la primera ocupa el espacio del menú lateral, la segunda es la principal para exponer el contenido de manera centrada en el sitio y la tercera columna sería a veces ocupada como elemento guía de los enlaces o links, ya que presenta los siguiente ítems de la opción del menú cliqueado.
Header del sitio
Menú secundario lateral
Menú móvil que muestra demás itéms
Menú principal
Menú alternativo en header
Buscador tipo y conexión con redes sociales
Links iconográficos a otros sitios internos universidad
Footer del sitio
Grilla página tipo del sitio
Escuela de Diseño
Los elementos que acompañan el diseño de este sitio son en su mayoría dinámicos, con efectos visuales, cambios de estados (hover) al posarse sobre ellos. En sí, el sitio de esta escuela es uno de los más diferentes en relación con las otras facultades, lo que indica también en cierta medida, un cuidado de individualidad tomado por la escuela de diseño para diferenciarse del resto que sigue la línea más formal y con un trato distinto de los objetos visuales. Algunos objetos no se hallan fijos en una ubicación, sino que siguen el recorrido del scroll a través de la pantalla; esto sucede con el header inferior y otras iconografías del sitio, que se va manteniendo al realizar scroll.
El fondo gris que se observa en la mayoria de los subsitios, se ve remplazado aquí por grandes fotografías que se extienden por todo el fondo.
- Menuescueladiseño.png
Barra de menú
- Headerbajodiseño.png
Tipo de header inicial
Barra alternativa de navegación dinámica
- Footerdiseño.png
Footer sitio
Información en pantalla una columna
Página tipo del sitio
Hover sobre título
- Paginatipodiseño-07.png
Extensión de la página
- Grilladiseño1-07.png
Grilla página tipo del sitio
Harvard Divinity School
Esta escuela trata las artes religiosas. En su contexto, el home se basa en el uso de colores suaves como celestes y ocres. El escudo de la institución no es utilizado, sin embargo se usa una imagen de fondo con éste pero con opacidad. El título del header es grande y toma el color rojo institucional. El menú despliega su contenido al posarse sobre él, además de presentar links de acceso rápido sobre el header. La visualización general de la plantilla consta de una imagen principal cambiante o fija y bajo esta se divide el contenido en 3 columnas, siendo las laterales para información adicional, links o noticias en breve. La columna central ocupa mayor espacialidad, por ello su contenido es esencialmente texto continuo.
Si bien la cabecera no usa el escudo de la escuela, el footer lo utiliza pero sin los colores rojos, sin que a todo color (verde,azul,blanco y rojo). El contenido del footer es reducido, hay accesos directos para Login, para volver al sitio de Harvard inicial y otras secciones de interés, además de datos de contacto y ubicación.
En este elemento se hace frecuente el uso de la iconografía de redes sociales, siempre agrupada a uno de los lados del footer.
Header sitio
Buscador
Barra de navegación primaria
Modalidad slider para visualizar fotografías e información linkeable
Visualización menú desplegable
Links a modo recuadros
Footer sitio
Grilla página tipo del sitio
Facultad de Educación
Este sitio tiene congruencias de estilo con lo que se refieren a elementos base como el header en cuanto a identidad visual. Los colores de fondo ahora se reducen a blanco sobre el cual las columnas son las que intervienen dando otro color (tonos grises, rojos oscuros). El sitio es limpio visualmente, no distrae y sus elementos tales como titulaciones, links, recuadros, imágenes tienen una marca de diseño detrás. Las tipografías utilizadas en el cuerpo de texto, son en 3 tamaños notables,una para títulos principales tipo 16pt aprox. que se destaca por el color rojizo,otra secundaria para subtítulos tipo 14pt aprox. y textos 10pt aprox. con un color gris. Los links o enlaces dentro del sitio son remarcados al posicionarse sobre ellos, por ende esta acción nos asegura que tales títulos o secciones nos redirigen a más información.
El menú de navegación tiene una barra principal bajo el header, que al ingresar a una categoría , traslada el menú a un costado, como lista de siguientes ítems a revisar.
Como los demás sitios, también ocupa sliders o herramientas para visualizar contenidos que esperan la interacción con el usuario o bien se mueven desde un inicio, pudiendo controlar esto también.
El buscador esta presente en la mayoría de los header de cada subsitio, algunas veces desciende en la navegación con scroll o se repite más abajo del contenido inicial.
Hay 3 secciones evidentes de navegación central en el body del homepage de educación, estas son : acceso a aplicaciones o redes sociales, revisar calendario de eventos e ingresar a noticias actualizadas.
El footer es breve y contiene los accesos a sitios relacionados y un acceso directo al sitio principal de Harvard.
Header Escuela de Educación
Ingreso a menú
Fotografías dinámicas con información
Recuadro de links
Visualización noticias y calendario
Footer sitio
Grilla página tipo del sitio
Facultad de Ingeniería y Ciencias Aplicadas
Los colores utilizados en esta carrera son sólidos y ocupa algunos degradé en el header y menú principal. Conserva el uso de escudo y tonos institucionales. Los tonos amarillos, rojos y gris, en contraste con las tipografías en color blanco y otra gama de grises más claros,son visualmente agradables a la vista. La información se concentra en una grilla de 3 columnas centrales principales; de forma superior se halla un espacio destinado a modo de menú alternativo que contiene links por sección: Académico, Acerca de, Facultad e Investigación, Noticias y Eventos y Administración. Estas separaciones por categorías de datos, están aplicadas en parte al contenido central donde también se destacan noticias y otros datos de interés.
El menú en amarillo contiene información esencialmente dirigida a los alumnos de la facultad y los potenciales estudiantes.Tiene accesos a Alumni, Facultad y Docentes.
Al ingresar a alguno de los títulos de cualquiera de los dos menús, estos despliegan la información correspondiente hacia abajo al centro del body. Esta información esta generalmente respaldada por muchos links al interior, remarcados por un color y subrayado rojo.
El footer es breve y contiene links hacia Mapa del Sitio, Directorio, Volver a Harvard.edu, Medios de contacto, Ubicación, Redes sociales.
Header Escuela de Ingeniería
Menú secundario
Recuadro de menú a través de links
Buscador del sitio
Calendario de eventos del sitio
Recuadro de datos
Recuadro de datos de interés
Estilo de los links
Menú desplegado
Barra de links inferior
Slideshow para información y fotografías
Estilo de noticias área ingeniería
Footer del sitio
Facultad de Artes y Ciencias
http://www.fas.harvard.edu/home/
La navegación se presenta como una barra lateral y horizontal bajo el header; de este modo al acceder a uno de sus títulos o nombres de categoría en el menú horizontal, se genera un cambio de posición de la barra lateral, ya que sube un poco acercándose al menú horizontal y desplazando el contenido más al centro, al igual que las fotografías.
No hace uso excesivo de imágenes móviles o elementos emergentes que distraigan. En general, el uso de colores esta basado netamente en el sitio principal que lo contiene, abarcando desde el color Crimson para destacar al hacer hover, en los enlaces y algunos títulos; y también el gris institucional para los textos, barras, títulos generales de algunas secciones.
Es bastante limpio en cuanto a disposición de elementos, basando su grilla en dos columnas desiguales, una que presenta la barra lateral de navegación y la otra columna más ancha para información que se entrega como texto.
El footer consta de una línea, es breve pero consistente en lo que es la totalidad del sitio. Entrega la información y enlaces necesarios.
Header del sitio
Barra de menú navegación principal
Estilo de noticias del sitio
Anuncios tipo
Menú secundario desplegable
Links rápidos y noticias
Footer del sitio
Instituto Kennedy Government
Este sitio trata de uno de los 3 institutos presentes en Harvard. El Harvard Kennedy School, es una escuela respaldada por el gobierno que se basa en el estudio de políticas públicas y estudios avanzados en la materia de asuntos nacionales e internacionales.
El diseño sigue la línea de colores basicos más la integración de otros propios dentro de los elementos compositivos de la página (sliders, fotos, textos, recuadros, barras de menú, etc).
La vista principal del Home es sencilla y se basa en mostrar poca información, sólo se detalla más al ir ingresando al menú propio con sus categorías o los recuadros presentes en las 4 columnas que emplea de grilla.
El menú de navegación rápida se da ahora en el costado izquierdo con forma de barra desplegable o con hover que muestra el índice de subítems.
El footer es pequeño, sencillo y no tiene links externos, sólo 4 enlaces dentro del mismo sitio.
Header del sitio
Barra de menú navegación principal
Barra menú secundario
Submenú con links
Links a redes sociales
Estilo de algunos links
Menú desplegado
Estilo anuncios
Estilo slideshow
Estilo noticias
Footer del sitio
Facultad de Graduados Artes y Ciencias
Header del sitio
Barra de menú navegación principal
Estilo noticias
Barra de acceso y búsqueda rápida
Footer del sitio
Nueva alternativa de menú al acceder a sección menú principal
Menú secundario
Estilo menú noticias
Estilo slideshow
Estilo noticias
Eventos y otros anuncios
Facultad de Leyes
http://www.law.harvard.edu/index.html
Header del sitio
Barra de menú navegación principal
Barra y fotografías dinámicas de noticias
Barra de acceso y búsqueda rápida
Recuadro de links a noticias
Footer del sitio
Menú principal desplegado
Menú principal 2da parte desplegado
Ingreso a sección del menú
Menú tipo al ingresar a secciones de menú principal
Estilo de los links
Facultad de Medicina
Header del sitio
Barra de menú navegación rápida
Menú principal
Estilo slideshow para visualizar información y fotos
Menú desplegado
Hover sobre menú
Estilo noticias
Vista otras instituciones medicina
Calendario eventos
Links a videos
Galería multimedia
Footer
Facultad de Salud Pública
Header del sitio
Menú desplegable y hover
Elemento dinámico para fotografías e información
Vista elemento hover
Cambio de colores header y elemento dinámico
- Pestañanoticiasinfo.png
Pestaña para abrir información diversa
Menú desplegado de sección
Estilo noticias
Calendario de eventos y noticias
Footer del sitio
Header al elegir opción Alumni en menú
Menú dentro de opción Alumni
Menú desplegable Alumni
Instituto Radcliffe
http://www.radcliffe.harvard.edu/
Header del sitio
Menú principal
Despliegue menú
Elemento dinámico por cada imagen
Elemento dinámico con información a modo de links
Estilo de noticias
Vista sección videos y conexión redes sociales
Footer con accesos a distintos links
Menú que se desplaza en la barra
Menú eventos
Estilo links
Estilo texto
Estilo texto 2
Relaciones de gráfica y estructuración con el sitio que los contiene
Headers facultades o subsitios
Los headers en cada sitio mantienen el estado de aparecer al nivel superior centrado de la grilla; en excepciones como la Escuela de Diseño el Header esta en el lugar casi del footer de la pantalla, siempre visible a medida que avanzamos y no tiene una relación de escudos como los demás sitios que presentan en su logo el escudo de su facultad.Los colores son variados para este elemento, hay una gran mayoría que tiene como color base el blanco, gris o rojo. En si, la mayoría de estos elementos tienen 3 niveles de navegación en sus barras de menú, que por lo general están en el header. Los tamaños y estilos tipográficos cambian de un sitio a otro. La orientación de los escudos o logos en su mayoría se presenta a la izquierda de la pantalla.
Comparación general headers
Header sitio
Header College
Header Facultad de Leyes
Header Instituto Kennedy Government
Header Divinity School
Header Instituto Radcliffe
Header Facultad de Salud Pública
- Headerbajodiseño.png
Header Facultad de Diseño
Header Facultad dental
Header Facultad de Ingeniería y Ciencias aplicadas
Header Facultad de Graduados Harvard
Header Facultad de Graduados Ciencias y Artes
Header Facultad de Negocios
Header Facultad Continuación de estudios
Menús Facultades o subsitios
Las barras de menú por facultad cambian notablemente respecto a su forma de uso, ya sean con infomación de categorías desplegables o hacer clic para acceder a otra lista o submenú interno por categoría. Estas categorías se tratan en su orientación casi siempre en el centro superior cercano al header o sobre él. Las maneras de navegación proponen esto que el sitio inicial harvard.edu tiene, 3 niveles de navegación (alternativa,primaria y secundaria). La barra alternativa de menú es en los casos que la trabajan una opción de navegar directo a ciertos enlaces o contenidos o a veces trata de información especifíca como mapas de sitios, direcciones,acceso login,etc.
La barra primaria contiene las temáticas más importantes del sitio.La mayoría son desplegables o con accesos a otros sitios relacionados a un determinado tema.
La barra secundaria son los menús que se disponen bajo o al costado de la barra primaria y estos abarcarían links a otros sitios relacionados a temas de tipo académico o de intéres más personal a miembros de la facultad.
Menú College
Menú escuela de Negocios
Menú escuela de Negocios 2
Menú Facultad Artes y Ciencias
Menú Facultad de Educación
Menú Graduados Harvard
Menú Facultad Ingeniería y Ciencias Aplicadas
Menú alternativo Escuela Dental
Menú secundario escuela Dental
Menú principal escuela Dental
- Menuescueladiseño.png
Menú principal escuela Diseño
Menú principal Divinity School
Menú principal Kennedy School
Menú secundario Kennedy School
Menú principal escuela de Leyes
Menú principal escuela de Medicina
Menú Instituto Radcliffe
Menú Facultad Salud Pública
Footer College
Footer Continuing School
Footer Escuela de Negocios
Footer Facultad Artes y Ciencias
Footer Escuela de Educación
Footer Facultad de Graduados
Footer Facultad de Ingeniería
Footer Facultad Dental
- Footerdiseño.png
Footer Facultad de Diseño
Footer Divinity School
Footer Government School
Footer Facultad de Leyes
Footer Facultad de Medicina
Footer Instituto Radcliffe
Footer Facultad de Salud Pública
Conclusiones y evaluación finales
El sitio de la Universidad de Harvard aloja contenidos competentes al ámbito educacional e investigación en sus distintas ramas o áreas. Este hecho hace necesario albergar infinidad de contenidos por Facultades, que en este caso representan el motivo de estudio, y que son definidos aquí como Subsitios o Sitios interiores al principal, capaces de dirigirnos a información específica o por secciones. La cualidad de Universidad le confiere un nivel de organización de contenidos superior, por la presencia de cerca de 14 áreas o instituciones que componen el estudio.
Actualmente, los metasitios (sitios que contienen a otros sitios) en internet requieren un orden, legibilidad y visibilidad de la información entregada, ya que el usuario que accede a ellos cuenta con que estos cumplan con la necesidad de su búsqueda y lleguen a solucionar dudas diferentes que puedan surgir en la navegación.
El metasitio de Harvard y sus facultades como sitios internos que lo conforman, han creado una correcta identidad visual de lo que quieren mostrar. Hay una organización visual y de estructuración, desde el inicio, al ingresar al sitio principal harvard.edu, hasta acceder a sus distintos enlaces por facultad.
La creación y utilización de normas gráficas en sus subsitios, contempla un sello, que visualmente permiten al usuario acceder y no sentirse perdido dentro de cada catalogación.
Algunos aspectos deficientes, se hallan en el uso excesivo de enlaces que tienen algunas páginas de textos y contenidos del sitio principal y algunos subsitios. Sin embargo hay subsitios muy limpios en cuanto a diseño y diagramación.
La incorporación de elementos visuales que ayuden en la comprensión, dinamismo, interacción usuario - objeto, han facilitado en gran parte de los sitios la creación de una grilla casi común que se va repitiendo a lo largo de los sitios interiores.
La navegación se detecta en 3 niveles posibles, según el requerimiento del usuario, hay navegación guiada sólo por links directos o de acceso rápido, que no requieren mayor etiquetación y están las barras de navegación principal y secundaria para guiar en profundidad a los contenidos esenciales de cada sitio. Esta forma de habilitar el recorrido del usuario por el sitio, mediante capas de información por así decirlo, son de gran ayuda y en el caso de estudio están dirigidas según la necesidad o requerimiento del visitante.(visita rápida, pausada, investigativa por el sitio)
La adaptación de una grilla que va desde 1 a 4 columnas, permite ir visualizando la información de manera cómoda, tal que no afecta mucho al pasar de un sitio a otro, salvo excepciones de sitios como el de la Escuela de Diseño en donde los elementos utilizados son en su mayoría dinámicos y a gran tamaño.Deja de guiarse por el estándar de colores que se tenía desde un comienzo, desaparecen ciertos elementos de navegación fundamentales o cambian de posición (header que pasa al footer), lo que tiende en un comienzo a despistar o confundir a quien busca ubicarse al llegar a un lugar nuevo.
Así, todos los componentes propios tanto del sitio como sus subsitios, están íntimamente ligados en el caso de harvard.edu, aunque la institución dicte un ejemplo o modelo de sitio inicial a seguir, sus sucesores o sitios internos, logran captar lo propio a rescatar de eso, esto es lograr identificarse o guardar relación con un determinado color, estilo tipográfico o algo que guía la lectura - recorrido del visitante del sitio.
La experiencia inicial de evaluación y recorrido por el sitio y sus albergados fue difícil de definir, puesto se presentaban tantas cosas, tanta información fluyendo que era imposible evaluar todo de inmediato. Al desmenuzar el tema por sus distintos componentes y su manera estructural de grilla, fue posible ir acercándose a lo que anteriormente fue revisado.
