Caso de estudio: Universidad de Oxford

De Casiopea



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
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

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)

  • Tipografía: Verdana
  • Color: #FFF
  • Tipografía: Arial
  • Color: #C2D7EF
  • Tipografía: Trebuchet MS, bold
  • Color: (Barra de navegación) #C2D7EF
  • Color: (Títulos navegación inferior) #C2D7EF

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".

  • Barra de navegación principal:

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

  • Barra de navegación secundaria:

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.

  • Barra de navegación vertical:

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.

  • Navegación inferior:

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.

  • Buscador: Quick links:

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.

  • Botón lateral: preguntas:

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".

  • Botón Fotografías: Información

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".

  • Buscador:

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.

  • Las interfaces de color azul corresponden a todas aquellas que se rigen por este color y sus diferentes escalas.
  • Las interfaces de azul híbridas corresponden a todas aquellas que muestren ribetes de azul y colores misceláneos.
  • Las interfaces de colores diferentes de azul son aquellas que dan cuenta de una identidad más personal y fuera del parámetro gráfico del sitio oficial.

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.

  • Barras de navegación:


  • Header:


  • Footer:

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".

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


Boton.jpg
Buscadorem.jpg
Bannnerrs.png

Conclusiones del análisis de identidad

  • 1. Los 5 Sub-sitios derivados desde la Home se estrcuturan de forma diferente en cuanto a la diagramación. Sin embargo, mantienen elementos Estándar, como lo son las "barras de navegación" presentes en el Header de cada Sub-sitio, y a excepción de Oxford Sparks, todos los demás presentan una barra de navegación secundaria, de forma vertical.
  • 2. la personalización de cada sub-sitio se denota con sólo observar las diferencias en los "elementos visuales" de la interface: Header, Footer y barras de navegación. Sin embargo, el Logo se halla, en todos los casos, al lado izquierdo del encabezado. Además el color azul, aunque a diferentes escalas, se presenta de manera transversal en el estudio.
  • 3. Los estilos tipográficos difieren bastante en cuanto a fuentes y tamaños, sin embargo el color pasa a ser un elemento neutro. El blanco, el negro y el azul son colores iterativos en todos los casos.
  • 4. Los elementos de interacción difieren bastante en cuanto al diseño. El aspecto del "hoover" cambia colores con gradiente, subraya, muestra relieve de un fondo o cambia drásticamente a un color parecido o semejante. Estas decisiones gráficas comienzan a evidenciar la idea de un propósito de personalización para cada sub-sitio.
  • 5. Como el Sitio oficial representa a la Universidad, los parámetros de diseño se fundamentan en ciertas reglas. El color azul representa la lealtad, la confianza, la sabiduría, la inteligencia, la fe y la verdad. Y el azul oscuro representa conocimiento e integridad. Es por esta razón que este color refleja de buena manera los intereses de una Universidad de prestigio. Otro color muy presente en los 5 casos de sub-sitio es el naranja, ya fuera en el "hoover" o como parte de la tipografía. Y cabe destacar que el naranja representa el entusiasmo, la felicidad, la atracción, la creatividad, la determinación, el éxito, el ánimo y el estímulo. Es un color que encaja muy bien con la gente joven, por lo que es muy recomendable para comunicar con ellos.