Caso de estudio: Universidad de Oxford
Título | Caso de estudio: Universidad de Oxford |
---|---|
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 |
Alumno(s) | Juan Antonio Godoy |
Profesor | Katherine Exss |
Tabla de Contenidos
Sitio Oficial Universidad de Oxford
Comparación Wireframe - Interfaz
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.
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.
- 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.
- 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 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.
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:
- 1. Staff (http://www.ox.ac.uk/staff/index.html)
- 2. Alumni (https://www.alumni.ox.ac.uk/)
- 3. Oxford Martin School (http://www.oxfordmartin.ox.ac.uk/)
- 4. The Campaign (http://www.campaign.ox.ac.uk/)
- 5. Oxford Today (https://www.oxfordtoday.ox.ac.uk/
- 6. Oxford Sparks (http://www.oxfordsparks.net/)
División académica
Departamento:
- 7. Humanities (http://www.humanities.ox.ac.uk/)
- American Institute, Rothermere (http://www.rai.ox.ac.uk/)
- Classics, Faculty of (http://www.classics.ox.ac.uk/)
- Drawing and Fine Art, Ruskin School of (http://www.ruskin-sch.ox.ac.uk/)
- English Language and Literature, Faculty of (http://www.english.ox.ac.uk/)
- History of Art Department (http://www.hoa.ox.ac.uk/)
- History, Faculty of (http://www.history.ox.ac.uk/)
- Linguistics, Philology & Phonetics, Faculty of (http://www.ling-phil.ox.ac.uk/index.php?section=1)
- Medieval and Modern Languages, Faculty of (http://www.mod-langs.ox.ac.uk/)
- Music, Faculty of (http://www.music.ox.ac.uk/)
- Oriental Studies, Faculty of (http://www.orinst.ox.ac.uk/)
- Philosophy, Faculty of (http://www.philosophy.ox.ac.uk/)
- Theology and Religion, Faculty of (http://www.theology.ox.ac.uk/)
- Voltaire Foundation (http://www.voltaire.ox.ac.uk/www_vf/default.ssi)
Departamento:
- 8. Mathematical, physical, and Lifes sciences (http://www.mpls.ox.ac.uk/)
- Begbroke Science Park (http://www.begbroke.ox.ac.uk/)
- Chemistry, Department of (http://www.chem.ox.ac.uk/)
- Computer Science, Department of (http://www.cs.ox.ac.uk/)
- e-Research Centre, Oxford (http://www.oerc.ox.ac.uk/)
- Earth Sciences, Department of (http://www.earth.ox.ac.uk/)
- Engineering Science, Department of (http://www.eng.ox.ac.uk/)
- Life Sciences Interface Doctoral Training Centre (http://www.lsi.ox.ac.uk/)
- Materials, Department of (http://www.materials.ox.ac.uk/)
- Mathematical Institute (http://www.maths.ox.ac.uk/)
- Physics, Department of (http://www2.physics.ox.ac.uk/)
- Plant Sciences, Department of (http://www.plants.ox.ac.uk/plants/)
- Statistics, Department of (http://www.stats.ox.ac.uk/)
- Zoology, Department of (http://www.zoo.ox.ac.uk/)
Departamento:
- 9. Medical Science (http://www.medsci.ox.ac.uk/graduateschool)
- Anaesthetics, Nuffield Department of (http://www.nda.ox.ac.uk/)
- Biochemistry, Department of (http://www.bioch.ox.ac.uk/)
- Cardiovascular Medicine, Division of (http://www.cardiov.ox.ac.uk/)
- Clinical Laboratory Sciences, Nuffield Division of (http://www.ndcls.ox.ac.uk/home)
- Clinical Medicine, Nuffield Department of (http://www.ndm.ox.ac.uk/home)
- Clinical Neurology, Department of (http://www.clneuro.ox.ac.uk/)
- Clinical Neurosciences, Nuffield Department of(http://www.ndcn.ox.ac.uk/)
- Clinical Pharmacology (http://www.oncology.ox.ac.uk/)
- Diabetes, Endocrinology & Metabolism, Oxford Centre for - OCDEM (http://www.ocdem.ox.ac.uk/home)
- Experimental Psychology, Department of (http://www.psy.ox.ac.uk/)
- Functional Magnetic Resonance Imaging of the Brain, Oxford Centre for - FMRIB (http://www.fmrib.ox.ac.uk/)
- Human Genetics, Wellcome Trust Centre for (http://www.well.ox.ac.uk/home)
- Investigative Medicine Division (http://www.imd.ox.ac.uk/home)
- Medical Oncology (http://www.oncology.ox.ac.uk/)
- Medicine, Radcliffe Department of (http://www.rdm.ox.ac.uk/home)
- Molecular Medicine, Weatherall Institute of (http://www.imm.ox.ac.uk/)
- Obstetrics and Gynaecology, Nuffield Department of (http://www.obs-gyn.ox.ac.uk/)
- Oncology, Department of (http://www.oncology.ox.ac.uk/)
- Ophthalmology, Nuffield Laboratory of (http://www.eye.ox.ac.uk/)
- Orthopaedics, Rheumatology and Musculoskeletal Sciences, Nuffield Department of (http://www.ndorms.ox.ac.uk/)
- Paediatrics, Department of (http://www.paediatrics.ox.ac.uk/)
- Pathology, Sir William Dunn School of (http://www.path.ox.ac.uk/)
- Pharmacology, Department of (http://www.pharm.ox.ac.uk/)
- Physiology, Anatomy & Genetics, Department of (http://www.dpag.ox.ac.uk/)
- Primary Care Health Sciences, Department of (http://www.phc.ox.ac.uk/)
- Psychiatry, Department of (http://www.psych.ox.ac.uk/)
- Public Health, Department of (http://www.dph.ox.ac.uk/)
- Radiation Oncology and Biology, Gray Institute for (http://www.rob.ox.ac.uk/)
- Surgical Sciences, Nuffield Department of (http://www.nds.ox.ac.uk/)
Departamento:
- 10. Social Science (http://www.socsci.ox.ac.uk/)
- Anthropology and Museum Ethnography, School of (http://www.anthro.ox.ac.uk/)
- Archaeology, School of (http://www.arch.ox.ac.uk/)
- Blavatnik School of Government (http://www.bsg.ox.ac.uk/)
- Business School, Saïd (http://www.sbs.ox.ac.uk/Pages/default.aspx)
- Economics, Department of (http://www.economics.ox.ac.uk/)
- Education, Department of (http://www.education.ox.ac.uk/)
- Geography and the Environment, School of (http://www.geog.ox.ac.uk/)
- Interdisciplinary Area Studies, School of (http://www.area-studies.ox.ac.uk/)
- International Development, Department of (Queen Elizabeth House) (http://www.qeh.ox.ac.uk/)
- Internet Institute, Oxford (http://www.oii.ox.ac.uk/)
- Law, Faculty of (http://www.law.ox.ac.uk/)
- Oxford Martin School (http://www.oxfordmartin.ox.ac.uk/)
- Oxford-Man Institute of Quantitative Finance (http://www.oxford-man.ox.ac.uk/)
- Politics and International Relations, Department of (http://www.politics.ox.ac.uk/)
- Smith School of Enterprise and the Environment (http://www.smithschool.ox.ac.uk/)
- Sociology, Department of (http://www.sociology.ox.ac.uk/)
De la “A” a la “Z”, por orden alfabético
Departamentos:
- 1. Administration and services (http://www.admin.ox.ac.uk/)
- 2. Ashmolean Museum of art and archaeology (http://www.ashmus.ox.ac.uk/)
- 3. Bate collection (http://www.bate.ox.ac.uk/)
- 4. Bodleian digital library systems and services (http://www.bodleian.ox.ac.uk/bdlss)
- 5. Botanic garden (http://www.botanic-garden.ox.ac.uk/)
- 6. BSP helpdesk - webauth (https://webauth.ox.ac.uk/)
- 7. Burton Tyler studio – oxford playhouse (http://www.oxfordplayhouse.com/)
- 8. Carrers service (http://www.careers.ox.ac.uk/)
- 9. Childcare service (http://www.oxforduniversitystores.co.uk/)
- 10. Christ church (http://www.chch.ox.ac.uk/)
- 11. Club, university (http://www.club.ox.ac.uk/)
- 12. Colleges - Weblearn (https://weblearn.ox.ac.uk/portal)
- 13. Conference Oxford (http://www.conference-oxford.com/)
- 14. Development and alumni relations system (https://www.darscentral.ox.ac.uk/)
- 15. Department of experimental psychology (http://www.psy.ox.ac.uk/aua)
- 16. Harcourt arboretum (http://www.harcourt-arboretum.ox.ac.uk/)
- 17. History of science (http://www.mhs.ox.ac.uk/)
- 18. ICT fórum (http://www.ictf.ox.ac.uk/)
- 19. Images, university of Oxford (http://www.universityofoxfordimages.com/index.asp)
- 20. It services (http://www.it.ox.ac.uk/)
- 21. It support staff services (http://www.oucs.ox.ac.uk/its3/)
- 22. Lenguage centre (http://www.lang.ox.ac.uk/)
- 23. Learning institute (http://www.learning.ox.ac.uk/)
- 24. Museum of natural history (http://www.oum.ox.ac.uk/)
- 25. Newcomers Club (http://www.newcomers.ox.ac.uk/)
- 26. Nightline (http://users.ox.ac.uk/~nightln/)
- 27. Ora –Oxford U. research archive (http://ora.ouls.ox.ac.uk/)
- 28. Oxfors supercomputing centre (http://www.osc.ox.ac.uk/)
- 29. Oxford spin-out equity managment (http://www.osem.ox.ac.uk/)
- 30. oxford science park (http://www.oxfordsp.com/)
- 31. Oxford endowment managment (http://www.ouem.co.uk/)
- 32. Oxford university press (http://ukcatalogue.oup.com/)
- 33. Oxford student unión (http://www.ousu.org/)
- 34. Parks, university (http://www.parks.ox.ac.uk/)
- 35. Pitt rivers museum (http://www.prm.ox.ac.uk/)
- 36. Sport (http://www.sport.ox.ac.uk/)
- 37. University and college unión (http://www.oxforducu.org.uk/)
- 38. Unique summer school (http://www.uniq.ox.ac.uk/)
- 39. UNISON (http://users.ox.ac.uk/~unison/)
- 40. Wytham Woods (http://www.wytham.ox.ac.uk/index.php)
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)
- Oxford University AUA Branch — Department of Experimental Psychology.jpg
Oxford Department of Experimental Psychology
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
Hasta dos Columnas
Hasta tres Columnas
Hasta cuatro Columnas
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.
- 1. Alumni (https://www.alumni.ox.ac.uk/)
- 2. Oxford Martin School (http://www.oxfordmartin.ox.ac.uk/)
- 'OpenSansRegular' mayúscula 13px fff.png
Open Sans Regular 13px #fff
- 3. The Campaign (http://www.campaign.ox.ac.uk/)
- 4. Oxford Today (https://www.oxfordtoday.ox.ac.uk/
- 5. Oxford Sparks (http://www.oxfordsparks.net/)
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".
- 1. Alumni (https://www.alumni.ox.ac.uk/)
- 2. Oxford Martin School (http://www.oxfordmartin.ox.ac.uk/)
- 3. The Campaign (http://www.campaign.ox.ac.uk/)
- 4. Oxford Today (https://www.oxfordtoday.ox.ac.uk/)
- 5. Oxford Sparks (http://www.oxfordsparks.net/)
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.