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

750px

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
  • Header tipografía.png

    Header

  • Footer tipografía.png

    Footer

  • Tipografía: Arial
  • Color: #C2D7EF
  • Noticias tipografía.png

    Noticias

  • Navegación inferior tipografía.png

    Navegación inferior

  • Tipografía: Trebuchet MS, bold
  • Color: (Barra de navegación) #C2D7EF
  • Color: (Títulos navegación inferior) #C2D7EF
  • Barra de nav tipografía.png

    Barra de navegación

  • Titulos tipografía.png

    Títulos navegación inferior

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.

  • Neutro

  • Hoover

  • 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ón2.png

    Neutro

  • Barra de navegación2 hoover.png

    Hoover

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

  • Neutro

  • Hoover

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

  • Neutro

  • Hoover

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

  • Neutro

  • Hoover

  • 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 lateral.png

    Neutro

  • Botón lateral hoover.png

    Hoover

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

  • Hoover1 fotografía.png

    Neutro

  • Hoover fotografía.png

    Hoover

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

  • Neutro

  • Hoover

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)

  • Alumni home - University of Oxford

  • Conference Oxford - the conference marketing office for Oxford University

  • DARS

  • Oxford Humanities Division

  • Homepage - University of Oxford.jpg

  • Oxford University Research Archive

  • OU Endowment Management University of Oxford

  • Oxford Martin School University

  • Oxford Spin-out Equity Management

  • Oxford Supercomputing Centre

  • Oxford Thinking The Campaign

  • Oxford Today

  • Oxford University AUA Branch — Department of Experimental Psychology.jpg

    Oxford Department of Experimental Psychology

  • Oxford Language Centre

  • Oxford Parks

  • Oxford University Press

  • Oxford Student Union

  • Oxford Staff Gateway

  • Oxford The Careers Service

  • Oxford Newcomers Club

  • Oxford Images

  • Oxford Webauth Index

  • Registrar UAS Home

  • Oxford Christ Church

  • Oxford University Club

  • Learning Institude

  • Wytham Woods


Colores azul híbridos (7)

  • Bodleian Digital Library

  • IT services

  • IT Support Staff Services

  • Oxford Sparks

  • Oxford University ICT Forum

  • Oxford Summer Schools

  • Web Learn


Colores diferentes de azul (12)

  • Oxford Botanic Garden

  • Oxford Harcourt Arboretum

  • Mathematical, Physical and Life Sciences Division

  • Medical Sciences Division

  • Museum of the History of Science

  • Museum of Natural History

  • Oxford Playhouse Theatre

  • Oxford Sports

  • Oxford Bate Collection

  • Oxford, Pitt Rivers Museum

  • Social Sciences Division

  • The Ashmolean Museum

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

  • Logo home Oxford sitio 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

  • Martin School

  • Humanities

  • DARS

  • IT Services

  • Newcomers Club

  • Experimental psychology

  • Oxford research archive

  • Oxford thinking

  • academic administration

  • Acces Guide

  • administration and services

  • Alumni

  • Staff Gateway

  • University and diversity

  • Oxford Today

  • Webauth

  • Isis Innovation

  • Oxford Parks

Colores diferentes de azul

  • Ashmolean museum

  • Bate Colecction

  • Bodleian library

  • Christ church

  • Oxford playhouse

  • WebLearn

  • ICT Forum

  • Museum of history

  • Night Line

  • Matemathical, physical and life sciences

  • Social science

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:

  • Alumni horizontal

  • Alumni vertical

  • Martin School horizontal

  • Martin School vertical

  • Oxford Thinking horizontal

  • Oxford Thinking vertical

  • Oxford today horizontal

  • Oxford today vertical

  • Oxford Sparks horizontal


  • Header:

  • Alumni

  • Martin School

  • Oxford Today

  • Oxford Thinking

  • Oxford Sparks


  • Footer:

  • Alumni

  • Martin School

  • Oxford Today

  • Oxford Thinking

  • Oxford Sparks

Comparación de estilos tipográficos

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

  • Arial 12px #fff

  • Georgia 20px #002048

  • Arial 12px #fff

  • Arial 12px #fff

  • Arial Mayúscula 14px #fff

  • Arial Mayúscula 14px #fff

  • Arial Mayúscula 14px #fff

  • Georgia 16px #6c6e70

  • Georgia 25px #002048


  • Open Sans Regular 13px #08c

  • Open Sans Regular 13px #fff

  • 'OpenSansRegular' mayúscula 13px fff.png

    Open Sans Regular 13px #fff

  • Open Sans Regular 13px #333

  • Open Sans Regular 18px inherit

  • Open Sans Regular 24px #fff

  • Open Sans Regular 50px inherit


  • Verdana 0,9em #0F0F0F

  • Verdana 0,9 #fff

  • Verdana 1em #476A8F

  • Verdana 1,1em #002d62

  • Verdana 1,1em #fff

  • Georgia 1,2em #333

  • Verdana 70% Bold

  • TrebuchetMS 2.8em #fff


  • Arial 11px #fff

  • Arial 14px #fff

  • Arial 18px #fff

  • Trebuchet MS 13px #000

  • Trebuchet MS 14px #000

  • Trebuchet MS 14px fff.png #fff

  • Trebuchet MS 15px #000


  • Arial 10px #333

  • Arial 13px #333

  • Arial 14px #fff

  • Arial 15px #fff

  • Gill Sans 18px #fff

  • Gill Sans 18px light #0064c5

  • Gill sans 22px light #004b8c

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

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


500px
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.
Obtenido de «https://wiki.ead.pucv.cl/index.php?title=Caso_de_estudio:_Universidad_de_Oxford&oldid=242541»
  • Creative Commons Con Atribución y Compartir Igual 3.0
  • Powered by MediaWiki
  • Powered by Semantic MediaWiki