TítuloCaso de estudio: Universidad de Oxford
Tipo de ProyectoProyecto de Taller
Período2013-2013
AsignaturaConstrucción de Diseño Gráfico 4,
Del CursoConstrucción 4º DG 2013,
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)Juan Antonio Godoy
ProfesorKatherine Exss

Sitio Oficial Universidad de Oxford

(http://www.ox.ac.uk/)

Comparación Wireframe - Interfaz

Sitio Oficial.jpg

Se decide graficar el Wireframe de la Home con el objetivo de observar la estructura de diagramación sin tener que atenerse a los elementos gráficos ni la capa emocional del sitio.

Barras de navegación

Archivo:Barras de Navegación Oxford.jpg

Este mapa de navegación afirma la existencia de las dos barras de navegación más influyentes en el sitio. La primera es la que está presente a penas se accede a la Home. La segunda está presente como "navegación inferior" justo debajo de la barra primera, sin embargo, también adquiere el rol y el diseño de barra de navegación una vez se da el paso siguiente desde la Home. El mapa da cuenta de cómo estas dos barras están conectadas. Algunos enlaces de la barra primera re-direccionan hacia los rótulos de la barra de navegación secundaria. Los enlaces que no muestran conectividad generalmente se atienen a re-direccionar a un sitio aparte (sub-sitios), como por ejemplo: Oxford Sparks, The Campaign y Oxford Today, que son en sí mismos los tres rótulos de tres sub-sitios diferentes. De esta manera se puede observar el ancho de las barras, el contenido de relevo en sus rótulos, su jerarquía, su profundidad y la conectividad entre ellas para denotar primeras conclusiones.

Estilos tipográficos

Son extraídos los estilos tipográficos de la Home. El color oficial del sitio Oxford University es el azul "Pantone 282" o #002147, como puede respaldarse aquí: http://en.wikipedia.org/wiki/Oxford_Blue_(colour)

Elementos de interacción

En estos elementos figuran botones, menús desplegables, barras de navegación, etc. Todo aquello potencialmente susceptible a un "hoover" o un "click".

Esta barra está presente en la Home y es el primer elemento de interacción cuando se accede al sitio.

Esta barra aparece una vez nos adentramos en profundidad en el sitio. Es más importante que la barra principal, en el sentido de que articula más páginas, más enlaces y más información. En la home esta barra se observa como parte de la navegación inferior, pero sin tener la cualidad de barra en su interface.

Aparece cuando se navega la barra secundaria. Se ubica al lado izquierdo del sitio y contiene los mismos rótulos que el menú desplegable de la barra secundaria.

La navegación inferior hace referencia al sector inferior de la "página de inicio". Se hace llamar navegación para dar cuenta de que ésta luego estará presente como barra, a medida que se profundiza en el sitio.

Los Quick links se hallan en el buscador como referencia de información. Cumplen el rol de ayuda para quien requiera de un índice en su búsqueda.

Este botón es también un ícono de ayuda y se ubica en la parte lateral superior-derecha del sitio. El hoover que se aplica en el botón despliega la pregunta: "Any questions?". Si hacemos "click" nos redirecciona a un menú de "consulta avanzada".

Este botón está presente en la Home. Se ubica en la parte superior derecha de la única fotografía de muestra. Su función es mostrar todas las fotografías del "Homepage".

El buscador de la Home tiene una capacidad de filtro entre "personas" y "páginas", además de ofrecer los "Quick links" como índice, por lo que facilita cualquier tipo de búsqueda.

Se puede ver que en el sitio hay ausencia de Banners. Por otro lado los botones tampoco abundan. Esto da cuenta de la simplicidad con que se pretende mostrar el sitio, limpio y sin ruidos.

Meta-Sitios: "Enlaces"

Se requiere, en un primer paso, graficar la cantidad de Sub-sitios que se derivan desde la Home, con el fin de identificar cuantitativamente un panorama de estudio, y, en base éste, recopilar los ejemplos necesarios para realizar el análisis del sitio completo. El extracto de sub-sitios se organiza en dos grupos; el primero hace referencia a los sub-sitios presentes en la Home o “página de inicio”. Este primer grupo contiene un sub-grupo, el cual está determinado por una división de “departamentos” estipulada por la misma Universidad: (1) Humanities, (2) Matemathical, physical and life sciences, (3) Medical science y (4) Social science. Cada departamento, además, contiene los sub-sitios de sus respectivas facultades. El segundo grupo da cuenta de todos los demás sub-sitios en orden alfabético, recopilados desde este link: http://www.ox.ac.uk/divisions/department_az.html.

Presentes en la Home

Departamentos:

División académica

Departamento:

Departamento:

Departamento:

Departamento:

De la “A” a la “Z”, por orden alfabético

Departamentos:


Meta-Sitios: “División por colores de interface”

Se conforman tres categorías de 46 sub-sitios (descontando las facultades de la división académica) por colores en la interface. Este primer ejercicio da cuenta de cómo se estructura la equivalencia gráfica en la escala cromática (a caso el parámetro más visible) que rige la identidad del sitio. Como puede inferirse desde la “página de inicio”, el color azul es el que predomina como ley, por lo que, tomando este parámetro como base de comparación, se decide cuantificar el número de casos que siguen esta ley o que difieren.

Colores azul (27)


Colores azul híbridos (7)


Colores diferentes de azul (12)

Puede concluirse que la cantidad de interfaces de Color azul es mayor. Esto permite aseverar que la ley gráfica (cromática) se condice con los parámetros del sitio oficial y, por tanto, la identidad es importante. A su vez, dentro de los ejemplos escogidos, las interfaces diferentes de azul tienen cabida. Naturalmente, éstas pertenecen a sitios cuya personalización es necesaria para otorgar un sello de distinción. Sitios mayores como el departamento de ciencias sociales, el departamento de matemáticas, los deportes en Oxford y algunos museos, dan muestras de implementar una ley de ruptura con el fin de lograr cierta autonomía.


Meta-Sitios:"División por número de columnas"

Se escogen 7 ejemplos de diagramación de Sub-sitios que puedan aseverar la variedad de parámetros y el desplante de la identidad del sitio oficial. Se observa la división de columnas en la grilla de cada uno de estos ejemplos, y se categorizan en cuanto al número de columnas halladas.

Una Columna

Wireframes meta-sitios.jpg

Hasta dos Columnas

Wireframes meta-sitios2.jpg
Wireframes meta-sitios3.jpg

Hasta tres Columnas

Wireframes meta-sitios6.jpg
Wireframes meta-sitios7.jpg

Hasta cuatro Columnas

Wireframes meta-sitios4.jpg
Wireframes meta-sitios5.jpg

El panorama muestra que las grillas van desde 1 hasta 4 columnas en la diagramación.


Logo Oficial


Meta-Logos: "Por colores"

Se pretende hacer un ejercicio análogo al de las interfaces. Los logos son un tópico aparte pues dependiendo del meta-sitio y el contenido de la información que represente, tendrá sus diferencias.

Colores azul

Colores diferentes de azul

Análisis de identidad

Este ejercicio tiene como fin verificar el grado de identidad entre los sub-sitios del sitio oficial. Para esto, se aplicará un método de comparación: Son escogidos 5 Sub-sitios diferentes para establecer agrupaciones donde, identificando los elementos visuales, los estilos tipográficos y los elementos de interacción, se definirán las conclusiones correspondientes.

Elementos visuales

Los elementos visuales hacen referencia a los elementos más visibles de cada Sub-sitio; a saber: Barras de navegación, Header y Footer. La idea es tener un primer parámetro de comparación visual.



Comparación de estilos tipográficos

Los estilos dan cuenta de la tipografía, el tamaño y el color, en ese orden.





Comparación de elementos de interacción

Se comparan los elementos de navegación de cada Sub-sitio y, a su vez, se establece una comparación en presencia del "hoover".

Archivo:Barras de Navegación alumni.jpg
Boton.jpg
Footeroxford.jpg
Fotografiaoxford.jpg


Barra vertt.jpg
Privacyy.jpg
Bannners.png


Barraa vert.jpg
Buscadorss.jpg
Buscadorss2.jpg


Barra nav.jpg
Buscadors.jpg
Bannerrs.png


Archivo:Barras de Navegación alumni.jpg
Boton.jpg
Buscadorem.jpg
Bannnerrs.png

Conclusiones del análisis de identidad