Universidad de Costa Rica Sede de Occidente Departamento de Filosofía, Artes y Letras Sección de Artes Plásticas
Memoria de Seminario de Graduación “Diseño de línea gráfica y sitio web de la Sede de Occidente de la Universidad de Costa Rica”
Seminario de Graduación para optar al grado de Licenciatura en Artes Plásticas con énfasis en Diseño Gráfico
Fernández Álvarez, Paúl Vicente
A52083
Herrera Jinesta, Kimberly
A52746
Montero Morales, Heyner Mauricio
A23250
Segura Méndez, Marco Alberto
A24816
San Ramón, Alajuela 2011
Capítulo 1. Introducción
1.1. Justificación……………………...………………………………………….……….1 1.2. Planteamiento del problema………..………………………………....…………..3 1.3. Objetivos………………………………...……………………………….…………..3 1.3.1. Objetivo general………………………………………………….....…….3 1.3.2. Objetivos específicos…………….……………………………………….3 1.4. Descripción del proyecto…………………………………………………….……..4 1.5. Antecedentes…………………………………………………………………….….5 1.5.1. Antecedentes teóricos…………………………………………..………..5 1.5.2. Antecedentes prácticos……………….………………………….……..10 1.5.2.1. Ranking web de universidades………..………………..…..10 1.5.2.2. Sitio web de la Universidad de Costa Rica…………....…..23 1.5.2.3. Sitio web de la Sede de Occidente de la Universidad de Costa Rica…………………………………………………25 1.6. Marco teórico
………………………………………………………..……..…27
1.6.1. Teoría del diseño
………………………………………….………….27
1.6.2. Diseño gráfico …………………….………….…………………..……28 1.6.2.1. El lenguaje visual del diseño gráfico
…………………….32
1.6.3. Diseño web……………..………………………………..….…...……....33 1.6.3.1 Reglas heurísticas de usabilidad…………………….………41 1.7. Metodología………………..………………………….………..……….….……...46 1.7.1. Investigación …….………………………………………………..……..46
I
1.7.2. Identificador gráfico
...…………………………………….…………..46
1.7.3. Manual de identidad visual
…………………………………………..49
1.7.4. Página web …………………………………………………………….50
Capítulo 2. Antecedentes y organización jerárquica de la Universidad de Costa Rica, Sede de Occidente 2.1. Misión y visión de la Sede de Occidente de la Universidad de Costa Rica
………………………………………………………………….….……53
2.2. Recinto Carlos Monge Alfaro 2.3. Recinto de Grecia
…………………………………….….……...54
…………………………………..……………..….….……55
2.4. Organización jerárquica
……………………………………...………….……58
Capítulo 3. Identificador y libro de marca para la Sede de Occidente Universidad de Costa Rica, 3.1. Identificador gráfico 3.1.1. Concepto
…………………………………………………..………74 ………………………………………………….………….74
3.1.2. Proceso creativo 3.2. Manual de identidad visual
…………………………………………..…….…..77 …………………………….………………………83
3.2.1. Antecedentes del libro de marca 3.2.2. Propósito del libro de marca
…………………………………..84
……………………………………....84
II
3.2.3. Importancia de un libro de marca
…………………………..…..…..84
3.3. Manual de identidad visual para la Sede de Occidente, Universidad de Costa Rica …………………………………………………………………………….………85 3.3.1. Contenido del manual……….………………………………...………..86
Capítulo 4. Estructura base del sitio web de la Universidad de Costa Rica, Sede de Occidente 4.1. Lineamientos para la construcción de un sitio web de la Sede de Occidente ……..………………………………………………………………………………..……88 4.2. Descripción de bocetos para las secciones del sitio web
….……….…….90
Capítulo 5. Conclusiones 5.1. Investigación
…………………………..…………………………………..……99
5.2. Producción gráfica
…………………………………………….…………..…100
5.2.1. Identificador gráfico 5.2.2. Libro de marca 5.2.3. Página web
…………………………...…………….………101
………………………………….………….…...….102
……………………………….…….………..………..…102
Anexos ………………………………………………….……………………….…..103 Bibliografía
……………………………………..……………………………..……149
III
Índice de Figuras
•
Universidad de Sao Paulo, Brasil……………………………………….…….1
•
Harvard University, Estados Unidos de América………………………..…..2
•
University of Washington, Estados Unidos de América……….………...….3
•
Stanford University, Estados Unidos de América………………..…..…..….4
•
Cornell University, Estados Unidos de América……………………….…….5
•
University of Cambridge, Estados Unidos de America…………...……...…6
•
Universidad Federal de Santa Catarina, Brasil……………..………….....…7
•
Maulaza Azad National Institute of Technology Bopal, India………………8
•
Universidad de Brasilia……….………………………………………….……..9
•
Universidad de Costa Rica…………………………………………….….…..10
•
Universidad de Costa Rica, Sede de Occidente…………………….….…..11
•
Secuencia del proceso comunicacional…………………………..….….…..12
•
El lenguaje visual del diseño gráfico………………………………….……...13
•
Principios universales de diseño…………………………..……………..…..14
•
Diagrama en escalera……………………………………………….….……..15
•
El diagrama en árbol…………………………………………………….….…16
•
El diagrama en red……………………………………………………….……17
•
El color…………………………………………………………………....…….18
•
Esquema de las fases de desarrollo de proyecto (logotipo)…………......19
•
Esquema de las fases de desarrollo de proyecto (libro de marca)….…..20
•
Esquema de las fases de desarrollo de proyecto (página web)……...….21
IV
•
Organigrama de la Sede de Occidente, Universidad de Costa Rica …….22
•
Búho empleado para identificación de la Sede de Occidente de la Universidad de Costa Rica desde los primeros años en que la Sede comenzó su funcionamiento …………………………………………..23
•
Tipografía empleada en el nuevo identificador gráfico………………...…24
•
Búbo virginianus (búho grande)…………………..……………………...….25
•
Estilización del identificador para la Sede de Occidente…………….....…26
•
Fusión de las dos propuestas finales del identificador gráfico………..….27
•
Dibujo estructural del identificador gráfico……………………………….…28
•
Tamaño mínimo de impresión………………………………………….....…29
•
Uso de color en el identificador gráfico……………………………..……....30
•
Ejemplo de selector de color con los rangos RGB, CMYK y #.…………..31
•
Estructura de retícula del manual de identidad visual……………….….…32
•
Ventana principal del nuevo sitio web………………………………….……33
•
Ventana misión y visión………………………………………………………..34
•
Ventana Acción Social………………………………………….…………......35
•
Ventana Servicios……………………………………………………….……..36
•
Mapa del Sitio…………………………………………………………….…....37
•
Galería……….……………………………………………………….………....38
V
Capítulo 1. Introducción 1.1 Justificación Hoy en día el uso de la herramienta web es el medio más común de comunicación y promoción a nivel global, su acceso es libre y fácil. Se ha convertido en la vía más rápida para obtener información y es comúnmente muy utilizado por instituciones, empresas, organizaciones y personas para dar a conocer funciones, productos o servicios. Este recurso ha ganado gran popularidad, en especial en el público joven como una fuente importante de conocimiento, interacción social y entretenimiento. Está perpetuamente evolucionando de acuerdo a las necesidades de sus usuarios y su demanda está siempre en aumento. Al respecto Luciano Polo detalla sobre el origen de la red mundial: “El World Wide Web o WWW, por su nombre en inglés, (en español: Red de amplitud mundial) fue creado alrededor de 1989 por el inglés Tim Berners-Lee y el belga Robert Cailliau, pero fue hasta el 30 de abril de 1993, que la CERN (Conseil Européen pour la Recherche Nucléaire, Consejo Europeo para la Investigación Nuclear ahora con el nombre oficial de Organización Europea para la Investigación Nuclear) ubicada en Ginebra, Suiza, anunció que la web sería gratuita para todos, sin ningún tipo de honorarios”. (Polo,Luciano, 2003, Articulo web)
En la actualidad es indispensable contar con un sitio web que mantenga los criterios de funcionalidad, navegación y diseño, por los cuales, los usuarios tengan un acceso ágil, fluído y atractivo a su necesidad. Debe siempre cumplir y adecuarse a los requerimientos y expectativas que busca el visitante. Es una herramienta con la cual se garantiza un alcance inmediato al público nacional e internacional además de dar a conocer, de forma fácil y práctica, lo que requiera una entidad o empresa, funcionando al mismo tiempo como la cara de presentación y de información para la misma.
1
Esta tesis se orienta hacia el desarrollo de un nuevo sitio web universario, por tanto, una página web de un centro de enseñanza superior que, más que ayudar a promocionar la institución, necesita brindar la información necesaria tanto para los funcionarios y alumnos que son parte del centro educativo, como para cualquier persona que lo requiera. Por esto se debe buscar la manera de facilitar una información clara y directa para los usuarios. La Sede de Occidente, Universidad de Costa Rica cuenta ya con un sitio web donde los estudiantes pueden obtener información sobre procesos tales como matrícula, actividades y carreras, así como realizar consultas diversas. La Universidad de Costa Rica como ente vital de la educación superior del país, tiene la obligación de facilitar y aportar diversos tipos de
información que el
estudiantado, docentes, investigadores, administrativos, extranjeros o público en general requieren. En el medio contemporáneo, los sitios electrónicos son herramientas fundamentales de reconocimiento internacional. Su accesibilidad a cualquier hora durante todo año lo hace un instrumento de consulta indispensable, su perfeccionamiento hacia una mayor interactividad con el usuario, transforma la red en la vía de divulgación y promoción más efectiva. Debido a los constantes cambios y maneras como percibimos el mundo, los sitios web sufren diferentes evoluciones, para adaptarse a la necesidad y gustos de los usuarios. Por esta razón, es necesario que el sitio web de la Sede de Occidente, Universidad de Costa Rica evolucione de acuerdo con las tendencias contemporáneas de diseño y tecnologías de punta.
2
1.2 Planteamiento del problema Este proyecto nace a partir de la necesidad de una reestructuración y cambio de imagen del sitio web de la Sede de Occidente de la Universidad de Costa Rica, de acuerdo a las tendencias y requerimientos que exige un sitio web de vanguardia.
1.3. Objetivos
1.3.1. Objetivo general: Desarrollar una propuesta de libro de marca y renovar el diseño del sitio web de la Sede de Occidente de la Universidad de Costa Rica, con el fin de brindar lineamientos de diseño institucional.
1.3 .2. Objetivos específicos: Investigar los principales antecedentes y organización jerárquica de la Sede de Occidente de la Universidad de Costa Rica, para organizar de la mejor manera el nuevo contenido del sitio. Crear un libro de marca para el uso adecuado del sitio web de la Sede de Occidente, así como sus aplicaciones y recomendaciones. Diseñar el identificador y la estructura base para el sitio web de la Sede de Occidente para unificar y actualizar la imagen existente desde su fundación.
3
1.4. Descripción del proyecto Se creará un
logotipo, manual de identidad visual y nuevo sitio web de la
Universidad de Costa Rica Sede de Occidente, con el fin de reforzar la imagen gráfica de la institución. El identificador visual (logotipo), tendrá como base, el logotipo utilizado en los inicios de la sede, el cual consistía en un búho adornado con elementos referentes a la educación. Mediante la estilización se buscará minimizar el uso de ornamentos y establecer una figura icónica, que describa con un solo elemento, el discurso planteado desde los inicios de la Sede de Occidente. Mediante la creación del manual de identidad visual, se establecerán los lineamientos necesarios para la óptima utilización del logotipo y demás elementos gráficos (material impreso y digital). Se desarrollará un nuevo sitio web, que sea un portal donde el internauta esté al tanto de actividades y noticias que se presentan en la zona de Occidente. Es fundamental tomar en cuenta el orden por medio de una estructura adecuada de los elementos tipográficos así como de las imágenes o íconos utilizados, para que puedan llevar al visitante hasta la información que necesita, y a la vez, que le sea más fácil adquirirla y comprenderla. Al respecto Campbell y Dabbs lo analizan en la siguiente cita: “…El principal objetivo de una estructura de navegación es permitir una usabilidad óptima. Eso significa que los visitantes deben poder orientarse y localizar contenidos específicos rápida y fácilmente en la página. Asimismo deben de ser capaces de distinguir en todo momento un área de contenido de otra.” (Dabbs, Cambell, 2005: p. 208)
4
El sitio web actual (http://www.so.ucr.ac.cr) se fortalecerá con una interface más atractiva, debido a que la actual contiene un exceso de información que se torna no visible al internauta. Esto se solucionará con la jerarquización de la información y desarrollo de una retícula, que le permita la buena distribución de los elementos, según su relevancia. Dentro de los puntos primordiales para la construcción y diseño del sitio web, se encuentra la organización jerárquica de la información para acceder fácil y ordenadamente a la página web. Campbell y Dabbs afirman al respecto: “La mayoría de internautas desean encontrar lo que busca en un sitio rápidamente y todo lo que se lo impida resultará frustrante. La usabilidad es probablemente el primer factor del éxito de un sitio web.” (Dabbs, Cambell, 2005: p. 208)
1.5 Antecedentes
1.5.1 Antecedentes teóricos
A continuación se menciona una lista de documentos útiles para el presente proyecto, referentes a diseño de sitios web, tales como libros, artículos de revistas y tesis los mismos son antecedentes fundamentales para el presente proyecto de seminario de graduación. María Gabriela Bogarín Benavides, Sitio Web del Instituto Nacional de Biodiversidad (INBio) para Niños y Niñas (2006). Esta tesis consiste en el desarrollo del sitio web para esta institución. Su fin es el de educar y concientizar al público infantil, enfocado en un contenido apropiado para la edad. Así como facilitar su uso y atracción, basándose en el análisis de pruebas de navegabilidad
5
y de reacción psicológica a los estímulos necesarios para una adecuada interacción web en esta población. La tesis de Johan Quirós Barrantes, Danny Barrantes Acuña, Carolina Parra Thompson, Steven Guzmán Pérez, Denis Cambronero Kikisch, de la Universidad de Costa Rica, denominada Estación Experimental Agrícola Fabio Baudrit Moreno (2004). Se fundamenta en el sitio web que documenta información sobre los diferentes proyectos que se desarrollan en la Estación. Contiene información pertinente para investigadores, estudiantes y público en general, basando su contenido en una estructura jerárquica de información, garantizando el orden lógico de la misma. En la página inicial del sitio se encuentra el gráfico animado de un irrigador de suelos, que representa su hilo conductor. En las páginas secundarias, el mismo es representado por líneas paralelas que forman figuras tubulares que la recorren. Éstas se extienden a lo largo del contenido de cada sección, haciendo alusión a los conductos que transportan el agua. Karen Salas Rodríguez, Diseño de línea gráfica y sitio web para la Asociación para el Desarrollo de la Cultura y el Ambiente de la Región Huetar Norte. (2009). Este proyecto está dirigido a la renovación y proyección de la Asociación para el Desarrollo de la Cultura y el Ambiente de la Región Huetar Norte (ADECA), mediante un sistema de identificación gráfica, con el objetivo de ayudar a la promoción y divulgación de la misma. Además de fomentar actividades culturales que enriquezcan el desarrollo de la región y ayuden a preservar su identidad sin dejar de lado la protección del ambiente, apoyando y promoviendo movimientos, actividades o proyectos de conservación de la naturaleza. El resultado es un manual de identidad y la propuesta de un sitio web para la asociación.
6
Gabriela Guevara Mora ¿Qué se necesita para crear un sitio web?. (2005). Revista InterSedes, vol. 6, Nº 11, p. 87-98. Este artículo propone las etapas necesarias para la creación de un sitio web, como la nueva herramienta de hacer negocios. De modo que pueda ser utilizado de manera competitiva, en el fortalecimiento de la comunicación con los usuarios y ayude a la organización a incrementar su valor operativo a largo plazo. Jakob Nielsen, Usabilidad: sus leyes y excepciones. Revista One Click, año 1, Nº 4, pp. 10-11. El autor en este artículo expone diez leyes que se basan en la usabilidad, tomando en cuenta la simplicidad y la objetividad como atributos obligatorios de un sitio web, pero a su vez aclarando los casos que pueden pasar por alto en sus reglas, basadas en la arquitectura y uso de la información. Raúl de Oliveira, Construyendo páginas. Revista One Click, año 1, Nº 30, pp. 2223. En este artículo el autor da consejos al lector sobre utilidades, aplicaciones y estructuras básicas, que se deben tomar en cuenta al platear la elaboración de un sitio web. Así como recomendaciones generales para que el usuario se sienta cómodo navegando por la página y encuentre la manera rápida e intuitiva de buscar información. Como parte de la investigación para el presente proyecto de seminario final de graduación Diseño del sitio web de la Sede de Occidente de la Universidad de Costa Rica se enuncia la siguiente lista de material de referencia teórica, base para el proyecto. Rodolfo Fuentes, La práctica del diseño gráfico. (2005). Este libro es un debate sobre los diferentes elementos metodológicos, aplicados al diseño gráfico desde la perspectiva de la práctica. Haciendo énfasis en la diferencia entre el método y la técnica, en donde pensar, planear y hacer son procesos individuales que se deben
7
tener en cuenta para un proceso creativo funcional. Norberto Chávez, Introducción Zimmermann Asociados S.L. (1993). Explica el proceso de diseño mediante una metodología racional y analítica que lleva a una consecución sólida y eficaz del producto final, vinculando al diseño gráfico como tecnología productiva, intervención innovadora y proceso de reproducción cultural. Norberto Chávez, La imagen corporativa. (2001). En este libro se describe el proceso de creación y desarrollo de la imagen corporativa, iconos y logotipia dejando claro los conceptos como color, forma, estructura y tipografía, con el fin de poder elaborar un manual de identidad visual. Jorge Frascara, Diseño gráfico y comunicación. (1994). Libro que destaca los factores clave que envuelven al diseño gráfico. Muestra paso a paso, aquellos factores como desarrollo, comunicación, tecnología y logística, áreas de práctica profesional, elementos y sistemas que dan como resultado un adecuado desenlace a un proyecto de diseño, es una guía muy útil y práctica para diseñadores. D.A. Dondis, La sintaxis de la imagen. (2002). Aborda la lectura de la imagen gráfica como lenguaje, enfoca los factores de comunicación visual así como técnicas visuales y anatomía de la imagen. Es un libro dirigido a diseñadores que muestra las estrategias de comunicación propias del campo y define los criterios, con los cuales, se debe desarrollar un adecuado proyecto de diseño. Dabbs Alistair y Campbell Alastair, Biblia del diseñador digital. (2005). En el libro el autor plantea los estándares y directrices de la buena práctica profesional del diseño y la producción digital, además de los procedimientos para gestionar fuentes, imágenes, animaciones, maquetas, pruebas y páginas web.
8
Veruschka Götz, Retículas para Internet y otros soportes digitales. (2002). Profundiza de una manera teórico-práctica el uso adecuado y creación de retículas, sus elementos y aplicaciones. Tomando en cuenta todos los componentes, tanto para el diseño en pantalla, como para los sustratos impresos y cómo pueden ser aplicados creativa e innovadoramente. Trata temas como tipografías, color, diagramación, cómo estructurar un concepto, distribución en pantalla, entre otros. Jakob Nielsen y Hoa Loranger, en el libro Usabilidad. Prioridad en el diseño Web [Prioritizing Web usability]. (2006), abordan el concepto de usabilidad como tal (la usabilidad es un atributo relacionado con la facilidad de uso), además de brindar recomendaciones para construir un sitio web funcional. Entre los temas importantes que señala este libro para la construcción de un sitio web están: tipografía y legibilidad, escritura para la web, navegación y arquitectura y la experiencia del usuario en la web. Pablo Vázquez, Creación de sitios web. (2006).Este libro está dirigido a quienes deseen iniciarse en el desarrollo de sitios web, así como a usuarios intermedios para ayudar a adquirir una visión total del proceso de producción, conociendo y aplicando herramientas variadas. Profundiza en el uso adecuado de programas para la edición HTML, animación digital, base de datos, alojamiento de sitios y estructuración de páginas.
9
1.5.2 Antecedentes Prácticos 1.5.2.1 Ranking web de universidades El ranking web de universidades se publica desde el año 2004, con una periodicidad semestral (enero y julio) y cubre más de 20.000 instituciones de educación superior de todo el mundo. Se adhiere formal y explícitamente a todas las propuestas enunciadas en el documento Berlin Principles of Higher Education Institutions. El objetivo del ranking es la continua mejora y refinamiento de las metodologías utilizadas de acuerdo a un grupo de principios de buenas prácticas web acordadas en este documento. Para este proyecto es necesario elaborar un estudio de algunos sitios web universitarios a nivel mundial, tomados del ranking mundial de páginas web universitarias. Esto con el fin de encontrar factores de diseño, navegabilidad y estructura aplicados a sitios de este tipo, según el criterio de usabilidad y estética, De la misma forma se evalúan aquellas propuestas que no cumplen con los factores necesarios para tal fin. Esto dará un punto de partida para el desarrollo de la nueva propuesta de sitio web de la Sede de Occidente de la Universidad de Costa Rica. Las universidades elegidas están en las primeras diez posiciones del ranking, tanto latinoamericano, como mundial.
10
Universidad de Sao Paulo, Brasil (http://www4.usp.br/index.php/home) El diseño de la página web de esta universidad posee gran parte de los criterios fundamentales para la creación de sitios, es una página clara y ordenada; la retícula es modular por lo que se puede ver un mayor orden y la vez es una página poco compleja, lo que permite navegar en ella con mayor facilidad. El diseño, los colores y la tipografía se mantienen en cada una de las páginas que se visitan lo que logra visualizar criterios de unidad en cada una de ellas. El inicio está presente en cada una de las páginas, lo que permite con facilidad retornar al mismo. El menú está colocado en forma vertical al principio de la página, definiendo cada etapa con un color naranja y cada subdivisión desplegada en la parte inferior. Se considera más apropiado el menú desplegable ya que no satura tanto la página y a la vez es fácil ingresar a donde se requiera. Las animaciones existentes son cambiantes, se cargan de manera eficiente lo que llama la atención al visitante. La animación de un globo terráqueo indica la posición de la universidad en el mundo. La utilización de elementos de diseño como la claridad, el orden y unidad serán tomados en cuenta para el desarrollo del nuevo sitio web de la Sede de Occidente de la Universidad de Costa Rica.
11
Figura 1: Universidad de Sao Paulo, Brasil. Tomado del sitio http://www4.usp.br/index.php/home
Harvard University, Estados Unidos de America. (http://www.harvard.edu) En el diseño del sitio web de la Universidad de Harvard predomina el color negro como fondo, lo que brinda neutralidad a su contenido, a esto se le agregan líneas y segmentos rojos que son parte de su escudo. Los tonos combinan armoniosamente para dar la sensación de seriedad y formalidad que se espera de una universidad prestigiosa. Todo eso rompe con la línea gráfica de otros sitios web de diferentes universidades de prestigio, donde predominan colores blancos o claros de fondo (ejemplos de esto: University of Wisconsin–Madison, http://www.wisc.edu/. Cornell University, http://www.cornell.edu/). Además este sito cuenta con imágenes ricas en composición y forma que viene a reforzar el diseño y estructura formal del sitio.
12
La estructura se compone por una barra principal en la parte superior, donde al posicionarse sobre ella se extiende una barra con las diferentes escuelas, oficinas y demás departamentos de la universidad, lo que le da orden y sentido a la estructura del sitio, además de ahorrar grandes cantidades de espacio. En la página principal se encuentra un apartado con noticias que cada cierto tiempo cambia, ahorrando de esta manera espacio en la página inicial y dándole la opción al usuario de seleccionar aquellas noticias que son de su interés. Al lado izquierdo, cuenta con otra barra que permite acceder a las diferentes páginas donde la universidad se promociona y participa a nivel mundial. La navegación es fluida gracias a la barra superior que prevalece durante la navegación del sitio principal, ésta le permite moverse rápidamente alrededor de toda la página. Cuenta con una estructura estándar para el resto de secciones con un marco rojo alrededor de la información y una barra del mismo color al lado izquierdo que señala la ubicación al usuario. Por otro lado, las escuelas cuentan con un sitio web propio, por lo que la página principal ofrece diferentes enlaces para acceder a ellos, pero en cada una se encuentra un diseño diferente, que no tiene relación con la línea grafica base. Esta página se destaca por su color y distribución de elementos en su composición. La utilización de imágenes acompañando el texto hace de ella una página visualmente muy atractiva. Estas características serán tomadas en cuenta en el diseño de nuestra propuesta web.
13
Figura 2: Harvard University, Estados Unidos de América. Tomada del sitio http://www.harvard.edu
University of Washington, Estados Unidos de América. (http://www.washington.edu) La Universidad de Washington presenta un sitio muy limpio, lo que facilita la navegación del usuario gracias a un elemento de flash que muestra una serie de diferentes encabezados y nos lleva al menú inicial. Se complementa con el resto de la información debido a varios enlaces hacia páginas secundarias, debajo de estos enlaces se observa una pequeña reseña de la misma. En cuanto a su estructura, ésta se encuentra muy ordenada gracias a que el inicio de la página cuenta con enlaces hacia diferentes secciones de interés y una animación flash que informa sobre las principales noticias o secciones. En la parte baja se encuentran los demás enlaces que dirigen hacia otros puntos como blogs, mapas y otros sitios. Esta estructura, que permanece constante a lo largo de las demás páginas resulta fácil navegar a través del sitio de una forma ordenada y
14
secuencial. El identificador de la página es la letra “W”, colocada en la esquina superior izquierda de la página, una mayúscula que la mayor parte del tiempo permanece de color blanco sobre un fondo de color púrpura. De igual forma la página usa ese fondo púrpura, añadiéndole un recuadro blanco o negro según sea el caso, para colocar la información y fotografías, por lo que no pierde legibilidad. La galería es dinámica y funcional, cualidades a desarrollar en el sitio web de la Sede de Occidente.
Figura 3: University of Washington, Estados Unidos de América. Tomado del sitio http://www.washington.edu
Stanford University, Estados Unidos de América (http://www.stanford.edu) La página web de esta universidad mantiene una marcada línea de diseño en todas sus secciones, prevalece el concepto sobrio y sencillo que remarca un adecuado carácter institucional. Además de apegarse a la simpleza en la
15
navegación, ofrece un fácil manejo de la información al usuario. Se maneja una reducida paleta de color, uno oscuro y uno claro, además del color negro para las tipografías que muestran información y el color blanco de fondo, todo esto ayuda a mantener ese carácter de institución seria que quiere ser transmitido. Además omiten casi por completo el uso de animaciones y objetos en moviendo, color y forma, aunque con esto no se pierde el atractivo de la página. Esta página muestra la importancia de la utilización de colores institucionales, y la limpieza que genera el trabajar con una paleta reducida. Este punto importante se tomara en cuenta más adelante a la hora de seleccionar la paleta de color para la página web de la Sede de Occidente. La barra de navegación se ubica horizontalmente en la parte superior y permanece siempre visible en todas sus secciones, guiando al usuario en todo momento. Además de manejar poca cantidad de vínculos secundarios, los cuales son de cadenas cortas, lo que significa que llevan a la información solicitada directamente. No hay que explorar gran parte del sitio para poder encontrar lo que se busca, la parte informativa es fluida y concreta. En algunos apartados de escuelas y sectores independientes se puede encontrar una diferencia en la línea de diseño, pero de igual manera mantienen los mismos patrones de estilo y sobriedad con que cuenta la página principal.
16
Figura 4: Stanford University, Estados Unidos de America. Tomada del sitio http://www.stanford.edu
Cornell University, Estados Unidos de América (http://www.cornell.edu) Esta página web maneja mucho en común con la anterior, el diseño es simple y sobrio, de fácil navegación y prevalece un adecuado acceso a la información. Mantiene la misma línea de diseño en todo el sitio, siendo este muy agradable y formal, lo que la vuelve una página atractiva y sencilla de explorar para sus visitantes. En esta página se maneja una limitada paleta de color, blanco para los sectores de fondo y negro para el texto de carácter informativo. Se maneja poco la animación y los elementos cambiantes, sin embargo cuenta con una animación bajo la barra de navegación, la cual va mostrando imágenes del campus y de las actividades que ahí se generan. Lo peculiar de esta animación es que ciertos objetos se salen del cuadro destinado a las fotografías, como una forma creativa de romper la monotonía estructural y le ayuda al sitio ser más atractivo.
17
La barra de navegación se ubica en la parte superior y en forma horizontal, esta puede ser siempre accesada desde cualquier punto de la página. La información es muy sencilla y de poco volumen, ayudando así a que el usuario no pierda tiempo leyendo información innecesaria. Además mantiene pocos vínculos, lo que facilita la navegabilidad del usuario.
Figura 5: Cornell University, Estados Unidos de America. Tomada del sitio http://www.cornell.edu
University of Cambridge, Estados Unidos de América http://www.cam.ac.uk/ Para esta página se analizan criterios inadecuados de diseño para un sitio web ya que en ella se pueden observar problemas con el uso de los elementos y el manejo de la información. Además la manera en que los vínculos están dispuestos, sin jerarquía, la vuelven muy confusa. No cuenta con una barra de navegación explícita, no hay diferencia entre una sección y otra aunque cambien los menús en cada una de ellas, esto definitivamente va a perder al usuario y a dificultar la búsqueda de información.
18
Cuenta con pocos colores, y no maneja animaciones. El color blanco es el dominante y llena la página de espacios vacíos, además la tipografía es pequeña, lo que ayuda a que estos vacíos se formen. La página es larga, por lo que no se adecua a la pantalla completamente, necesita una barra de desplazamiento. El desperdicio de espacio sin elementos la vuelve no sólo aburrida sino también complicada y de poco valor estético para el usuario.
Figura 6: University of Cambridge, Estados Unidos de America. Tomada del sitio http://www.cam.ac.uk/
19
Universidad Federal de Santa Catarina, Brasil (http://www.ufsc.br) La página de la Universidad de Santa Catarina presenta un diseño muy cargado, por lo que no se puede distinguir una jerarquía de la información. No existe un punto de inicio ni un reposo para que el visitante continúe navegando. En el diseño de la página principal está el nombre de la universidad, el cual, es difícil de comprender debido a que está sobre un fondo muy saturado que limita su legibilidad. El logo de la universidad está colocado sobre un motivo de los cincuenta años, lo que también hace que sea poco legible. El menú es extenso, pues al entrar en cada una de las ventanas cambia su diseño radicalmente y pierde unidad. En la ventana del menú no se puede regresar al inicio. Las tipografías en general son muy pequeñas lo que produce un problema de lectura para muchos usuarios.
Figura 7: Universidad Federal de Santa Catarina, Brasil. Tomada del sitio http://www.ufsc.br
20
Maulaza Azad National Institute of Technology Bopal, India. (http://www.manit.ac.in) El sitio web de Maulaza Azad National Institute of Techology Bhopal está diseñado a partir de una retícula muy estática, en la cual ubicamos un banner de la universidad en la parte superior, todo el tiempo. Dicho banner posee el logo de la universidad, sin embargo, la resolución de este no es el adecuado por lo que pierde notoriamente su legibilidad. En el centro del banner ubicamos el nombre de la universidad sin mayor interés por su diseño y su presentación. El sitio cuenta con un menú superior, el cual es desplegable y realizado con base en flash, lo que le impide al navegador interactuar con el mismo, además limita la información encontrada por medio de los buscadores. A la izquierda tenemos un menú rotatorio que dificulta su navegación, ya que los enlaces no se mantienen estáticos y hay que esperar que vuelva a aparecer para acceder a las otras partes del sitio. En general, no hay una gran preocupación por la parte estética del sitio, se nota una intención de desarrollar un espacio para compartir la información con el público. Sin embargo, no se le prestó demasiada atención a la parte gráfica, posiblemente no hubo intervención de un profesional en el campo, para el desarrollo óptimo del mismo.
21
Figura 8: Maulaza Azad National Institute of Technology Bopal, India. Tomado del sitio http://www.manit.ac.in
Universidad de Brasilia http://www.unb.br/exaluno La página web de la universidad de Brasilia cuenta con una retícula ordenada que se divide en un menú colocado en forma horizontal en la parte superior, seguido en forma descendente por el logotipo, que se presenta de manera clara y persistente a lo largo de la navegación. Seguido esta el menú principal de la página, el cual se mantiene siempre en la misma posición lo que permite regresar con facilidad a la página de inicio, o a cualquier otra, sin perder al visitante. Luego se encuentra una imagen del menú que varía según donde el internauta se localiza reforzando la idea de la información. La estructura de este sitio es: de vínculos, logotipo de la universidad, menú principal, imagen representativa y contenido de la página. Todo esto se presenta de una manera clara y ordenada que le da limpieza, calidad y unidad al diseño, los
22
colores y la tipografía son persistentes a través de la visita. En este sitio las noticias se colocaron en una subdivisión o vínculo en el menú principal, lo que logra que la página de inicio no se sature y a la vez las personas puedan ingresar a ellas con facilidad. A pesar de que es una página donde el color predominante es el blanco, los pocos colores que se emplean están acorde con el logotipo, lo que refuerza la imagen grafica de la institución.
Figura 9: Universidad de Brasilia Tomado del sitio http://www.unb.br/exaluno
1.5.2.2. Sitio de la Universidad de Costa Rica http://www.ucr.ac.cr/ Acorde a la investigación de diseño y navegabilidad de páginas web universitarias del ranking de sitios web universitarios, se puede indicar que la Universidad de Costa Rica, cuenta con uno de los sitios web mejor diseñados de latinoamérica, debido a los siguientes factores:
23
Identificador visual: “El escudo de la Universidad de Costa Rica es el símbolo más importante de su identidad. Es un legado histórico que retoma los símbolos de la Universidad de Santo Tomás, primera universidad de Costa Rica y refleja los más altos ideales de la UCR.” (Manual de identidad de la Universidad de Costa Rica. Pag 9).
El componente icónico (escudo) y el anagrama (tipografía), están muy bien ligados y diseñados, esto permite una fácil lectura del mismo, y a la vez genera, solidez en la identidad de la institución a la que se representa. Estructura: La estructura web, es consistente, esto debido a la globalidad del diseño en todas sus ventanas (secciones), además, se logra mostrar cantidad de información, sin saturar y entorpecer la estética de la interface. Navegación: Si hay una estructura web consistente, habrá simultáneamente una navegación fluida. La estructura lineal de la página web de la Universidad de Costa Rica, propicia un recorrido ordenado en todas sus secciones, ya que podemos ingresar a cualquier parte del sitio y al mismo tiempo, tener noción de donde nos encontramos. Además la navegación es rápida, esto permite que el internauta no se canse y abandone el sitio.
24
Figura 10: Universidad de Costa Rica, tomado del sitio http://www.ucr.ac.cr/
1.5.2.3. Sitio de la Universidad de Costa Rica, Sede de Occidente http://www.so.ucr.ac.cr/ La página de la Sede de Occidente de la Universidad de Costa Rica necesita manejar mucha información por lo tanto es normal que tenga muchos enlaces a diversos sitios, sin embargo esto dificulta su orden y la facilidad de lectura para el usuario, pose un menú que está presente en la mayoría de sus páginas pero al no actualizarse constantemente envía al usuario a páginas en construcción, enlaces repetidos o paginas desactualizadas, esto provoca desorientación en el usuario. Por lo tanto es necesario eliminar el exceso de enlaces y ordenar de manera más clara e intuitiva los accesos.
25
Además es necesario crear una retícula que sea consistente en su sitio, ya que actualmente las noticias y las actividades se muestran en la misma página lo que aumenta innecesariamente el texto al que se tiene que enfrentar el usuario. También es preciso crear una plantilla general para que los sitios de la universidad posean el mismo hilo conductor y de esta forma dar una imagen más seria e institucional.
Figura 11: Universidad de Costa Rica, Sede de Occidente. Tomado del sitio http://www.so.ucr.ac.cr
26
1.6 Marco teórico 1.6.1 Teoría del diseño El diseño como tal, es una reacción inherente del ser humano, es la búsqueda de cómo establecer un orden en las formas dentro de un espacio. Así pues es fácil encontrar “diseño” en diferentes elementos de la naturaleza como por ejemplo en el pelaje de un animal ó las formas de las plantas, como también en las acciones cotidianas, donde aplicamos diseño inconscientemente como por ejemplo, a la hora de servir comida en un plato, como explica Fuentes: “El diseño como entidad, en estado puro, no existe. De hecho, es una actividad casi exclusivamente humana y al igual que la técnica no se conoce en el resto de las manifestaciones de la naturaleza, con la excepción de algunas especies de primates avanzados”. (Fuentes. 2005: p.27)
La composición es un factor fundamental de todo diseño, es la pieza básica de estructura, en la cual se decide el orden y posición, tanto de elementos visuales (fotografías, ilustraciones, formas, etc.) como de textos. Con esta se busca reforzar el mensaje a transmitir en un proyecto. La composición también tiene una función estética, es la que da fluidez, lectura y enriquece el factor visual del diseño. Ésta puede provocar sentimientos y reacciones en el receptor, que a manera intencional pueden ser utilizados acorde con determinados objetivos de comunicación o de mensajes a transmitir. “El proceso de composición es el paso más importante en la resolución del problema visual. Los resultados de las decisiones compositivas marcan el propósito y el significado de la declaración visual y tiene fuertes implicaciones sobre lo que recibe el espectador” (Dondis, 2002: p.33)
27
El equilibrio es el que da lugar al balance de la forma y la estructura dentro de una composición, se basa en un centro de gravedad en medio de dos o más cuerpos y es percibida mediante la percepción visual. Al respecto Dondis explica: “… su importancia primordial se basa en el funcionamiento de la percepción humana y en la intensa necesidad de equilibrio, que se manifiesta tanto en el diseño como en la reacción ante una declaración visual.” (Dondis, 2002: p.131)
Su opuesto es la inestabilidad la que implica una ausencia de equilibrio que da la sensación de caída y peso. Tensión es una forma de romper el aparente equilibrio de una forma, cuando su eje central varía y el balance del elemento cambia. Ésta también se logra con la irregularidad de la forma, su posición en el diseño y con respecto a su relación con otros elementos. Esto ayuda al predominio compositivo y la evocación de sentimientos o reacciones que centran la atención visual en el diseño, y por ende, asegura la transmisión del mensaje. “Tanto para el emisor como para el receptor de la información visual, la falta de equilibrio y regularidad es un factor desorientador. En otras palabras, es el medio visual más eficaz para crear un efecto en respuesta al propósito del mensaje, efecto que tiene un potencial económico y directo en la transmisión de la información visual.” (Dondis. 2002; p.38)
1.6.2. Diseño gráfico De acuerdo con Jorge Frascara: “Diseño gráfico, visto como actividad, es la acción de concebir, programar, proyectar y realizar comunicaciones visuales, producidas en general por medios industriales y
28
destinadas a transmitir mensajes específicos a grupos determinados.” (Frascara. 1994: p.19)
La actividad del diseño gráfico ha tomado mayor auge en la actualidad debido a la necesidad de representar, promocionar y comunicar lo que una empresa, institución o persona requiere. Para esta área, la simplicidad es un recurso primordial utilizado en el diseño de vanguardia, cuyo objetivo es representar una idea, elemento o situación de manera que sea de fácil asimilación para receptor. Esto es, omitir aquellos elementos que puedan interferir y no aporten un valor primordial al discurso que se quiere comunicar, concluyendo así en un mensaje claro y preciso que además contribuye con la limpieza y estética del diseño. Esto es fundamental en el desarrollo de proyectos para logotipia e imagen corporativa, pero además es de vital importancia en cualquier proyecto de diseño que desee mantener un adecuado factor comunicacional. “El orden contribuye considerablemente a la síntesis visual de la simplicidad, técnica visual que impone el carácter directo y simple de la forma elemental, libre de complicaciones o elaboraciones secundarias. La formulación opuesta es la complejidad, que implica una complicación visual debido a la presencia de numerosas unidades y fuerzas elementales, que da lugar a un difícil proceso de organización del significado”. (Dondis. 1994: p.133)
La comunicación visual se puede representar ya sea
por imagen, texto o la
combinación de ambas, es la columna vertebral de todo diseño; No contar con un adecuado canal o código puede provocar esterilidad, ambigüedad o nulidad de la interpretación visual que interfiere directamente con la idea de funcionalidad. Jorge Franscara indica que: “La comunicación es la razón de ser del diseño gráfico y representa el origen y el objetivo de todo trabajo.” (Frascara 1994: p.61)
29
Para que su objetivo llegue a desenvolverse de una manera correcta se deben mantener procesos comunicacionales que definan tanto el mensaje expuesto como la respuesta o efecto que tiene en el pĂşblico receptor, asegurando asĂ la compresiĂłn de la idea a comunicar. Observamos el siguiente cuadro donde se esquematizan las pautas que se deben tomar en cuenta para un adecuado proceso comunicacional.
30
Secuencia del proceso comunicacional:
Figura 12. Secuencia del proceso comunicacional. (Frascara 1994: p. 67)
31
1.6.2.1. El lenguaje visual del diseño gráfico En este otro cuadro se observan los elementos que conforman el lenguaje visual:
Figura 13. El lenguaje visual del diseño gráfico. (Frascara 1994: p. 91)
Estructura: La estructura es la base para todo diseño, es una guía que permite ordenar y agrupar los elementos de la composición de manera que tengan un orden u objetivo determinado. Rodolfo Fuentes menciona al respecto que:
32
“El diseño gráfico basa su sentido en la generación de estructuras, ritmos, apoyos y espacios abiertos.” (Fuentes 2005: p.61)
La estructura no tiene que limitarse a un espacio de trabajo, ya que las figuras pueden salirse del sustrato, creando sensaciones de continuidad, expansión y dinamismo de las formas, influyendo a los demás elementos visibles.
1.6.3 Diseño web La usabilidad es un atributo relacionado con la facilidad de uso. Más específicamente, se refiere a la rapidez con que se puede aprender a utilizar un medio, la eficiencia al utilizarlo, cuán memorable es y su gusto para los usuarios. Si una característica no se puede utilizar o no se utiliza, es como si no existiera. Usabilidad es sinónimo de utilidad de un sitio para sus usuarios, dicho concepto fue creado por Jakob Nielsen en 1994. Lo que plantea Nielsen, es reducir el número de clics para llegar a una información determinada. La simplicidad y objetividad son atributos obligatorios de un sitio que obedezca a las reglas de usabilidad. Para este autor tres directrices de usabilidad son: “1. Diga a los usuarios donde han llegado y como pueden moverse hacia otras partes del sitio. Nombre de la compañía o logotipo. Un enlace directo a la página principal. Un buscador. 2. Oriente al usuario hacia el resto del sitio, si el sitio cuenta con una arquitectura de la información jerárquica, la mejor manera de hacerlo es con un sendero de migajas de pan…
33
3. No dé por supuesto que los usuarios han seguido una ruta detallada para llegar a la pagina actual…” (Nielsen, Loranger 2006: p.47)
El término “navegación” se usa para definir la estructura de los menús y los enlaces que se emplean en una página web con el fin de ayudar al usuario a moverse por ella. El principal objetivo de una estructura de navegación es permitir una usabilidad óptima. Eso significa que los visitantes deben poder orientarse y localizar contenidos específicos rápida y fácilmente en la página. Asimismo deben ser capaces de distinguir en todo momento un área de contenido de otra. Al respecto Nielsen puntualiza: “Los sitios web mal diseñados hacen algo más que ralentizar al usuario: pueden realmente disuadirle de utilizar el sitio… Con un diseño empático, la gente encuentra y maneja la información sin esfuerzo. Las etiquetas, la distribución y la relación entre las distintas páginas están representadas claramente. Un buen diseño de navegación muestra donde se está, donde están situadas las cosas y como conseguir lo que se necesita de forma metódica.” (Nielsen, Loranger, 2006: p.173)
La estructura se refiere a la manera más eficiente de representar gráficamente una página web, y la forma más acertada de lograrlo es por medio de un mapa de sitio. Puede mostrar la interacción de todas las partes (secciones) que la conforman y su relación con la página inicial. Su utilidad se basa en la comprobación de un adecuado funcionamiento de navegación, esto con el fin de saber si al usuario se le facilita el acceso entre secciones, ya sea ésta una estructura lineal, de nido, escalera u otra. Para lograr una estructura sólida de un sitio web, es fundamental crear una jerarquía de las secciones e información que se implementa. Lidwell, Holden y Butler indican: “Aumentar la visibilidad de las relaciones jerárquicas dentro de un sistema constituye uno de los modos más eficaces de aumentar los conocimientos sobre ese sistema.
34
Algunos ejemplos de jerarquías visibles son los resúmenes de libros, los menús de software de múltiples niveles y los diagramas de clasificación... Los elementos superordinados reciben el nombre de elementos <<padre>>, mientras que a los elementos subordinados se les conoce como elementos <<hijo>>. Existen tres modos básicos de representar visualmente las jerarquías: en árbol, nido y escalera.” (Lidwell, Holden, y Butler, 2008: p. 104)
Algunos de los tipos de jerarquías de información y estructuras son los siguientes:
Figura 14. Principios universales de diseño. (Lidwell, Holden, y Butler, 2008: p.105)
35
Una adecuada distribución de la información propicia una navegación estable y genera interés en el usuario, como afirma Nielsen: “Una arquitectura de la información apropiada hace que la gente se sienta cómoda para explorar y con la confianza de que podrán volver fácilmente a páginas previamente vistas.” (Nielsen, Loranger 2006: p.173)
La diagramación de flujo es de suma importancia para que el diseñador desarrolle una estructura de flujo conveniente, para presentar el tipo de información de la manera más ordenada posible, según las necesidades de los usuarios, para determinar cómo distribuir el texto, las imágenes y tener claro el número de páginas necesarias. Según Götz el diagrama de flujo comprende: “imágenes en miniatura que ilustran la secuencia, los vínculos y el espacio destinado a la información…
Mediante la generación de diagramas de flujo, el
diseñador digital puede realizar un seguimiento del contenido insertado y de su distribución en las distintas páginas. Las páginas con más y menos información constituyen la base del sistema organizativo de los elementos: la retícula.” (Götz, 2002:p.78)
Analizando el contenido y la función del sitio web se puede definir cuál es el tipo de diagrama más apropiado, sea el diagrama en escalera, el diagrama en árbol o el diagrama en red. Un diagrama en escalera es un tipo de estructura utilizada en programas educativos, para solicitudes de datos personales y comercio electrónico ya que permite guiar al usuario a través de la información de manera lineal. “El diagrama en escalera se construye (peldaño a peldaño), empezando por la página de inicio. El usuario únicamente puede seguir una ruta predefinida, sin posibilidad de decidir
libremente qué
información desea visualizar.” (Götz,
36
2002:p.79)
Figura 15. Diagrama en escalera (Götz, 2002:p.79)
El diagrama en árbol se utiliza cuando se le agrega a la información primaria la secundaria, o se maneja la información en temas y subtemas. A la hora de aplicar este tipo de estructura, hay que tomar en cuenta la cantidad de páginas secundarias y la información de las mismas, para no saturar la página con información innecesaria. Götz de nuevo agrega que: “El diagrama en árbol permite distribuir jerárquicamente la información en las ramas primarias y secundarias.” (Götz, 2002:p.80)
37
Figura 16. El diagrama en árbol (Götz, 2002:p.81)
El diagrama en red le da la oportunidad al internauta de navegar libremente por la información de forma fácil y rápida de la manera que le plazca y pueda regresar a la página de inicio sin dificultad. El problema de esta estructura es que el usuario puede extraviarse en la navegación, lo que es perjudicial, pero se puede evitar incorporando símbolos que le ayuden. Al respecto Götz se refiere: “El Diagrama en red es el más abierto de todos los diagramas ya que ofrece al usuario la oportunidad de moverse directamente de una a otra página… El menú se presenta en todas las páginas, de modo que sea posible saltar directamente de una a otra… El uso de un diagrama de flujo permite ofrecer una visión general de la navegación y comprobar la lógica de la estructura global de la retícula.” (Götz, 2002:p.81)
38
Figura 17. El diagrama en red (Götz, 2002:p.83)
Al momento de hablar de la estructura de una página web hay que tener en cuenta algunos elementos como: el ritmo, la uniformidad, el color y la tipografía, aspectos esenciales que ayudan al navegante a comprender el sitio. Sobre el color, se indica que si no se toma en cuenta este aspecto se puede cometer el error de colocar elementos con tonos muy similares o con un porcentaje muy cercano, lo que provocaría que los elementos se pierdan con el fondo y el problema de diseño sea significativo. Götz plantea que: “El fondo de la pantalla suele ser la superficie de color más extensa, por lo que el color aplicado debe elegirse con sumo cuidado. Cada color posee una personalidad que conviene tener en cuenta a la hora de combinarlo con los colores de otros elementos de diseño, como pueden ser la tipografía y los logotipos.” (Götz, 2002:p.48)
39
Figura 18. El color (Götz, 2002:p.48)
La selección de los colores es un tema de gran importancia a la hora de crear un diseño ya que cada color tiene sus significados y es una herramienta importante para comunicar lo que se desea de manera más eficiente. “Según Goethe, es posible diferenciar ente colores pasivos y estimulantes: el amarillo, el naranja, el rojo, por ejemplo, son colores activos; por otra parte el azul, el verde y el morado son pasivos… La percepción de un color como activo o como pasivo o negativo depende del humor de cada uno, de la experiencia subjetiva y del trasfondo cultural del receptor.” (Götz, 2002:p.48)
Los colores cambian de significado según el contexto cultural de cada región, por lo que se debe analizar cuidadosamente la zona en que se trabaja. Las distintas culturas asignan significados diferentes a los colores. Todo diseñador debe tener en cuenta tales connotaciones específicas a la hora de seleccionar los colores. Además se debe tomar en cuenta el público meta al que va dirigida la página web, para tomar la decisión cromática adecuada. Las tipografías con serifas es, decir, con pequeños adornos ubicados generalmente en los extremos de las líneas de los caracteres tipográficos, se utilizan principalmente en periódicos, pero no son adecuadas para la pantalla, ya
40
que tienden a dificultar la lectura. Sobre todo en los textos largos, pues sus tipos de letra se distorsionan y transmiten sensación de desorden. Las tipografías de palo seco, es decir que su diseño es limpio y simple poseen un grosor uniforme, en pantalla transmite la impresión de mayor nitidez. Son letras sin terminaciones como lo dice su nombre, pero sí se presenta problema en las letras de contorno redondeado. “Es imprescindible analizar cada tipografía atendiendo a su legibilidad en pantalla. Sin embargo, como regla general, puede afirmarse que, en soportes digitales, las tipografías con remates resultan menos legibles que las tipografías de palo seco.” (Götz, 2002:p.52)
Es importante tomar en cuenta las tipografías más adecuadas, ya que lo que se busca es llevar la información al usuario de la manera más eficiente y tomando en consideración elementos como la tipografía, es más fácil cumplir con el objetivo comunicacional. Veruschka indica sobre este aspecto: “En los casos en que sea inevitable utilizar una tipografía con estilo, por ejemplo para un logotipo, debe aplicarse con un cuerpo de letra lo suficientemente grande, que garantice su correcta visualización.” (Götz, 2002:p.53)
1.6.3.1 Reglas heurísticas de usabilidad “heurístico, ca. (Del gr. ερίσκειν, hallar, inventar, y ético). adj. Perteneciente o relativo a la heurística. // f. Técnica de la indagación y del descubrimiento. // f. Busca o investigación de documentos o fuentes históricas. // f. En algunas ciencias, manera de buscar la solución de un problema mediante métodos
no
rigurosos,
como
por
tanteo,
reglas
empíricas,
etc”.
http://www.rae.es/rae.html (Diccionario de la Real Academia Española)
41
La heurística, también conocida o denomidada principio heurístico o criterio heurístico, trata de aplicar normas conversacionales a la interacción entre una persona y un sistema, su objetivo es intentar crear un puente comunicacional en el que tanto la persona como el sistema se entiendan y trabajen juntos para alcanzar un determinado objetivo. Estas reglas generales son utilizadas como punto de partida para la creación de una lista puntual con la cual evaluar la naturaleza y tipo de interface desde la planificación de un proyecto de un sitio web, ayudando de esta manera en varios aspectos como lo son guiar al diseñador durante el proceso de diseño, identificar problemas en las interfaces de usuario comprobando que las reglas de usabilidad se respeten, poder explicar los problemas de usabilidad observados e identificar las pautas sobre por qué los usuarios cometen determinados errores. La evaluación heúrística por criterios es la realizada a partir de principios establecidos por la disciplina de la IPO/HCI (Interacción Persona-Ordenador / Human-Computer interaction). Esta evaluación detecta aproximadamente el 42% de los problemas graves de diseño y el 32% de los problemas menores. Al respecto Jakob Nielsen identificó y estudió doscientos cuarenta y nueve problemas de usabilidad y a partir de ellos diseñó lo que denominó las “reglas generales” para identificar los posibles problemas de usabilidad: “Visibilidad del estado del sistema El usuario siempre debe de saber exactamente qué es lo que el sistema está haciendo. En sitios web esto se puede lograr informándole al usuario dónde se encuentra, siempre. Uno de los mayores problemas para los usuarios al navegar por la red es la desorientación. Es vital asegurar una consistencia de todo el sitio web. Otro aspecto no menos importante, es ofrecer al usuario una permanente retroalimentación a las acciones que este realice en cada página web. Esto puede lograrse con efectos tan sutiles como el efecto “hover” de las hojas de estilo (CSS)
42
sobre los hipervínculos, o efectos tan sofisticados como el uso de applets de java. Similitud entre el sistema y el mundo real El sistema debe de hablar el lenguaje del usuario, Las frases, palabras y conceptos deben de ser familiares para el usuario. Además, se deberá de seguir las convenciones usadas en el mundo real, haciendo que la información aparezca en un orden lógico y natural. Control por parte del usuario y libertad Los usuarios frecuentemente eligen funciones por error y necesitarán de “salidas de emergencia” claramente marcadas. Se debe de proveeer al visitante al sitio el contar con funciones para deshacer y rehacer las acciones que haya realizado. Consistencia y cumplimiento de estándares Los usuarios no tienen porque preguntarse si distintas palabras, situaciones o acciones significan lo mismo. Hay que seguir las convenciones de las plataformas en las que se está desplegando el sitio web. Preferir los estilos por default de botones, barras de scroll, etc. provistas por la plataforma. El cumplimiento con las recomendaciones emitidas por el W3C (World Wide Web Consortium) referentes tecnologías web (HTML, CSS, XML,etc.) aseguran en muchos casos una portabilidad absoluta del sitio web. Existen una gran cantidad de herramientas (validadores) que permiten verificar si un sitio web cumple con las especificaciones del W3C. Sea cuidadoso cuando desarrolle sitios con múltiples páginas especialmente
aquellos
desarrollados
por grupos
de
desarrolladores. Es
importante usar de manera consistente el fraseo, imágenes y fuentes a través del sitio para dar la imagen de consistencia. El uso de hojas de estilo facilitan mantener la consistencia del diseño gráfico del sitio. Desarrolle un plan claro en donde se defina claramente el estilo y layout del sitio web. Prevención de errores Aún mejor que el desarrollar buenos mensajes de error es tener un diseño cuidadoso que eviten la ocurrencia de errores. Hay que asegurarse de que las instrucciones estén escritas de una manera clara y que estás sean desplegadas de
43
manera conveniente, evitando cualquier tipo de contaminación visual. Si se requiere el llenado de un formulario con campos obligatorios, destáquelos por sobre el resto de las entradas. Es muy conveniente hacer una validación de la forma antes de enviarla al servidor (esto se puede hacer fácilmente con Javascript). Preferencia al reconocimiento frente a la memorización Haga que los objetos, acciones y opciones sean visibles. El usuario no tiene porque recordar información de una parte de un diálogo a otra parte. Las instrucciones de uso del sistema deben de ser visibles y accesibles cuando el usuario lo considere necesario. Tenga mecanismos de búsqueda. Cualquier sitio de más de 200 páginas necesita acceso directo por contenido, no espere que el usuario entienda y navegue hasta encontrar lo que busca. Flexibilidad y eficiencia de uso Los aceleradores –invisibles para el usuario novato – pueden hacer más rápida la interacción para el usuario experto. El sistema debe de tratar eficientemente tanto a los usuarios expertos como inexpertos. Para lograr esto, es conveniente permitir a los usuarios que personalicen ciertas acciones frecuentes (un ejemplo de esto es la opción “1-Click” de Amazon que ofrece a los compradores habituales el pasar directamente a la confirmación de la venta, sin realizar el procedimiento estándar de facturación). Los sitios web se deben de cargar lo más rápidamente posible, independientemente del tipo de conexión a la red utilizado por el usuario. Prioritice el uso de HTML y el reuso de imágenes en el sitio web. Estética y diseño minimalista Los diálogos no deben de contener información que sea irrelevante o que rara vez sea de utilidad. Cada información extra en un diálogo compite con unidades relevantes de información y disminuye su visibilidad relativa. Se recomienda reducir el número de imágenes al mínimo. Hay que recordar que cada imágen implica una descarga desde el servidor, y esto en conexiones lentas puede ser un problema serio. Es altamente recomendable que la información más importante sea colocada en la parte superior de la página, pues está es la región que siempre es visible en el navegador.
44
Ayuda para que el usuario reconozca, diagnostique y se recupere de los errores Los mensajes de error deben de ser expresados en un lenguaje claro (sin ambivalencias),
indicando
exactamente
el
problema,
y
proveyendo
constructivamente de una solución. Los mensajes de error pueden ayudar a restablecer la confianza en el sitio web. Haga uso del mensaje default de error que ofrecen los servidores web, el cual usted puede personalizar. Ayuda y documentación Lo más probable es que lo mejor sería que un sistema no requiriera de documentación, pero generalmente se requiere de documentación y una opción de ayuda en línea. Cualquier información debe de ser fácil de buscar, y debe de estar orientada a las acciones del usuario. En cuanto un sitio web ofrezca alguna característica fuera de la norma, o ligeramente complicada, será necesario prestar ayuda y dar documentación a los usuarios. Tómese el tiempo de desarrollar un sistema de ayuda que dé auxilio relevante cuando el usuario lo requiera”. Tomado
del
sitio:
http://ingridnf.wordpress.com/2007/02/11/heuristica-de-
usabilidad-de-nielsen/
A partir de estas reglas y de los criterios evaluados en un análisis heurístico, se puede pretender que un proyecto de página web cumpla con todas las espectativas y normas de usabilidad, asegurando entonces la fiabilidad de que un sitio web sea completamente amigable con el usuario, siendo esto la parte fundamental para llegar a la mayor cantidad de usuarios posible y que éstos van a obtener lo que buscan de la manera más práctica posible.
45
1.7 Metodología 1.7.1. Investigación La recopilación de datos se da a partir de búsquedas de libros, tesis, revistas, artículos en línea, referentes a la creación y producción de sitios web, así como sobre la teoría de diseño. El proyecto se basa en los criterios más acertados y funcionales, tanto sobre la estructuración de la información, como la usabilidad y la navegación. 1.7.2. Identificador gráfico El siguiente esquema nos formula la metodología a seguir para la elaboración de un adecuado identificador gráfico.
46
Figura 19. Esquema de las fases de desarrollo de proyecto (logotipo).
Pasos del proceso creativo Proceso de investigaciรณn y exploraciรณn para designar el elemento (componente icรณnico) idรณneo que represente la instituciรณn. En este caso se estudian los
47
elementos identificadores más apropiados se inició posteriormente con la elaboración de bocetos tanto manuales como digitales y las pruebas de color, con el fin de seleccionar los elementos de diseño más apropiados para el logotipo de la Sede de Occidente. Imagen conceptual – bocetos manuales Mediante la ejecución de bocetos manuales, se procede a desarrollar una solución gráfica fresca y contemporánea que se integre adecuadamente a la ya establecida firma de la Universidad de Costa Rica, basados en la simpleza y la estética que requiere cualquier identificador con un adecuado grado comunicacional. Bocetos digitales Los bocetos digitales tienen lugar luego de una elección de bocetos manuales, los cuales deben mantener los atributos adecuados en función de las normativas propias de un identificador. El proceso consiste en trasladar, por medio de un software especializado (Adobe Illustrator), los bocetos a un formato digital (vectores), sobre los cuales se experimenta con las modificaciones de posición, proporción, simplificación y lectura de los mismos (fase blanco y negro). Tratamiento de color Dentro de los procedimientos para la creación y diseño de un logotipo, se debe tener presente el uso del blanco y negro como colores base para la construcción del mismo. No se involucran otros colores debido al tratamiento monocromo, pues proporciona fuerza y estabilidad al componente icónico, así como al anagrama (tipografía),
esto en cuanto a cuestiones de composición, legibilidad y
funcionalidad se refiere.
48
Una vez que el identificador gráfico cumple con los requerimientos en su versión monocromática (negro), se procedió a la inclusión de color. Además se aplicó el mismo a las estructuras base. 1.7.3. Manual de Identidad Visual Se implementó el siguiente esquema para la definición y creación del libro de marca para la Sede de Occidente de la Universidad de Costa Rica.
Figura 20. Esquema de las fases de desarrollo de proyecto (libro de marca).
49
Una vez con el identificador definitivo (a color), se procedió con la creación del manual del sistema de identificación visual. Esta es una herramienta de orientación y consulta sobre el uso adecuado de los símbolos y elementos gráficos que representan a la institución. Éste manual se compone de aspectos concernientes al uso correcto del identificador y sus aplicaciones, tales como: elementos de identidad visual: elementos visuales principales, logotipo, isotipo, fonotipo, áreas de protección, tamaño mínimo de impresión, usos sobre fondos, tipografía, color, dibujo estructural, usos incorrectos, ubicaciones de logo, gráficos, tramas visuales, y retículas. Para su creación se deciden los aspectos que involucran el uso del identificador, mediante un proceso de selección que mantenga los criterios y funciones más adecuados para sus aplicaciones. Esto es, el diseño y estructura de todos los elementos anteriores que conforman, el identificador dándole seguimiento a los juicios estéticos y funcionales que deben ser tomados en cuenta para su objetiva y acertada elaboración.
1.7.4. Página Web Para la creación de la propuesta del nuevo sitio web de la Universidad de Costa Rica, Sede de Occidente, se sigue una serie de pasos indispensables para el desarrollo de una página web funcional y estéticamente agradable.
50
Figura 21. Esquema de las fases de desarrollo de proyecto (página web).
Retículas preliminares: Se crearon bocetos de la estructura de navegación así como la distribución y selección de la información que se incluye. Estructura de la página: Se debió esbozar la estructura de la pantalla y el contenido de cada nivel, organizando la navegación, las imágenes y el texto de manera uniforme para lograr unidad a lo largo del sitio durante la navegación.
51
Luego se seleccionó el diagrama de flujo más conveniente para desplegar la información. Elementos visuales: Fotografías del recinto (instalaciones, personal, actividades); animaciones: intercambio de imagen (rollover, por su nombre en inglés), presentación de diapositivas (slideshow por su nombre en inglés) e introducciones. Diseño de la interface gráfica: Organización de la información y elección de imágenes. Selección de elementos de navegación y gráficos (animaciones, interactividad y diagramación). Ensamblaje del sitio web: Montaje de las diferentes secciones, pruebas de navegabilidad y funcionalidad. Verificación de las secciones, tiempo de descarga y usabilidad. Redacción de la memoria de seminario de graduación.
52
Capítulo 2. Antecedentes y organización jerárquica de la Universidad de Costa Rica, Sede de Occidente. Para el desarrollo del proyecto se compiló información acerca de la Sede de Occidente de la Universidad de Costa Rica, con el fin de comprender su organización jerárquica, antecedentes, historia de la sede e información general. Esta será de utilidad para comprender las necesidades de la institución y el carácter que tendrá que mostrar la línea gráfica y el sitio web. La información se recopiló con base a documentos de la sede, información encontrada en el sitio actual, e información reunida a través de las oficinas administrativas de la universidad. 2.1. Misión y visión de la Sede de Occidente de la Universidad de Costa Rica Misión Generar las transformaciones que la sociedad requiere para alcanzar un desarrollo integral, basado en el respeto a las diferencias ideológicas y culturales, la justicia social y el mejoramiento de la calidad de vida, mediante la formación de profesionales humanistas y la acción conjunta de la docencia, investigación, acción social, servicios estudiantiles y administración, desde la región occidental del país.
53
Visión La Sede de Occidente con base en la vocación y experiencia de desarrollo universitario, mantendrá y desempeñará un papel protagónico en el campo de la educación superior, mediante la auto evaluación constante, para proponer con innovación y compromiso social las transformaciones que demanda la sociedad, al formar profesionales con excelencia académica y humanista que favorezcan la inclusión social, la equidad y la justicia.
2.2. Recinto Carlos Monge Alfaro El recinto Carlos Monge Alfaro nace tras la idea en el Segundo Congreso Universitario en 1966, de crear recintos universitarios fuera de la ciudad de San José. El señor Carlos Monge Alfaro integró una comisión junto con el Dr. Alfonso Carro, el Dr. Claudio Gutiérrez y el Prof. Ovidio Soto para convertir dicha idea en una realidad. En el año 1967 se recomienda bajo un informe presentado al Consejo Universitario la creación de cuatro recintos universitarios y el señor Arnulfo Carmona Benavides, en aquella época diputado por San Ramón, lo da a conocer al Concejo Municipal de San Ramón. El Concejo Municipal de San Ramón donó el edificio que fue el Palacio Municipal y un presupuesto de 800.000,00 colones. El sábado 20 de abril de 1968, luego de una corta sesión del Consejo Universitario en la ciudad de San Ramón, el entonces rector, Prof. Carlos Monge Alfaro, dio por inaugurado el primer Centro Universitario Regional en el país.
54
Se inicia la actividad académica en el nuevo espacio universitario el día lunes 22 de abril de 1968, con la primera lección siendo el Lic. Sergio Salas Durán quien la imparte. Se inicia con un total de 186 alumnos y trece asignaturas a cargo de ocho profesores: Dr. Jorge Blanco, Lic. Luis Alberto Monge Q., Lic. Fernando Leal, Lic. Sergio Salas, Prof. Luis Armando Ugalde, Prof. Arturo Agüero, Prof. Gonzalo Soto y Lic. Jorge Chávez. Se aprobó el 8 de marzo de 1971 el Reglamento de los Centros Universitarios Regionales, que define los propósitos y el funcionamiento de un centro regional A principios de 1975 se fusionan los recintos de la Universidad Nacional y Universidad de Costa Rica que se encontraban el la comunidad de San Ramón y así, a partir de entonces, se nombra Centro Universitario de Occidente. Entre 1975 y 1977 se crean los Recintos de Puntarenas y Grecia, los cuales cuentan con una orientación académica según la región a la que pertenecen, Puntarenas hacia las ciencias del mar y Grecia en las áreas agrícolas. Fuente: Página web de la Universidad de Costa Rica sede de Occidente. (http://www.so.ucr.ac.cr/) (Consultado el 14 de enero del 2010 a las 3:00 p.m.)
2.3. Recinto de Grecia (Tacares de Grecia, prov. de Alajuela) El Recinto Universitario de Grecia es una unidad académica administrativa del Centro Regional de Occidente (Sede de Occidente), que responde a la política de descentralización formulada en el Plan Nacional de Educación Superior, pretendiendo identificarse con su área de influencia atendiendo a sus necesidades.
55
El día 14 de marzo de 1977 se iniciaron las lecciones en lo que ahora se denomina Recinto de Grecia bajo la coordinación del Lic. Luis Armando Ugalde quien estuvo hasta 1978, luego la Profesora María de los Ángeles Sancho Barquero hasta 1985. Se pensaba que este centro de enseñanza superior estaba orientado a
la
atención de las ciencias agropecuarias, pero en realidad no se perfiló un plan de desarrollo que detallara el camino a seguir, que marcara los objetivos de la institución. La historia del Recinto de Grecia se puede dividir en tres etapas: - 1977. Apertura del Recinto. Se ofrecen los estudios generales, cursos de servicio y cursos de capacitación para personal en servicio de I y II ciclos de la educación general básica. - 1978, en ese momento el grupo de estudiantes que iniciaron los estudios de agronomía resultaban muy heterogéneos, por lo que se emprendió una labor de guía académica. Durante el primer periodo lectivo de 1978 se ofrecieron los tres primeros cursos de la carrera de agronomía. El edificio en general se encontraba en muy mal estado, no contaba con una vía de acceso a las instalaciones lo que dificultaba el ingreso. No se podía utilizar uno de los edificios de las instalaciones pues estaba bajo la administración de la Diócesis de Alajuela, que amenazaba con ocupar este pabellón, si el Gobierno no pagaba la deuda que mantenía con la iglesia.
56
Se disponía de tres aulas, una biblioteca, una sala de profesores, un laboratorio de química, una sala para la coordinación y servicios secretariales, un salón de actos, una cancha deportiva y un salón de vigilancia. El personal administrativo comprendía una secretaria, una oficinista, una asistente de biblioteca, un auxiliar de laboratorio, dos guardas y dos conserjes. En esta etapa se dieron muchos cambios significativos tanto en infraestructura como en el cambio académico y culmina a principios de 1981. - 1981. Disminuye la descentralización administrativa y se establece una separación entre la actividad administrativa y la dirección académica. Se gradúan los primeros laboratoristas químicos y los primeros ingenieros agrónomos y luego se congela la carrera de Agronomía. El 21 de setiembre de 1983, se sustituye el nombre de División de Grecia por el de Recinto de Grecia. En 1985 se emplea el término “director” para referirse al órgano superior del Recinto, en lugar de “coordinador” que se utilizaba hasta el momento.
57
2.4. Organizaci贸n jer谩rquica
Figura 22. Organigrama de la Universidad de Costa Rica Sede de Occidente, tomada del sitio: (http://www.so.ucr.ac.cr/Institucion/Organigrama.htm)
58
La Sede de Occidente, Universidad de Costa Rica se divide en cinco grandes departamentos: Ciencias Naturales, Ciencias Sociales, Educación y Filosofía, Artes y Letras y la Coordinación del Sistema de Educación General. También se conforman las coordinaciones generales de Acción Social, Docencia, Investigación, Vida Estudiantil y Administración.
Coordinación de Acción Social La Coordinación de Acción Social impulsa un proceso académico de vinculación permanente, con el fin de articular el conocimiento que la institución genera con las necesidades y experiencias de la sociedad costarricense. Está conformada por tres secciones, a saber: Trabajo Comunal Universitario, Extensión Docente y Extensión Cultural, cada una de ellas está bajo la responsabilidad de un encargado(a). El Trabajo Comunal Universitario permite que estudiantes y académicos(as) realicen actividades interdisciplinarias como forma de vinculación dinámica y crítica con los diferentes sectores de la comunidad. La Sección de Extensión Docente, mediante sus actividades, proyectos y programas canaliza la capacidad académica de la Universidad, trasladando al sector externo actividades educativas de difusión de conocimiento, actualización y capacitación de recursos humanos y servicios especiales de asesoría o laboratorio.
59
La Sección de Extensión Cultural, propicia un terreno adecuado para el rescate y revitalización de patrimonio cultural costarricense. Para ello, promueve, coordina, ejecuta y supervisa proyectos de las diversas instancias universitarias y de la comunidad, que efectúan producción artística o rescate cultural. Dicha sección cuenta en la actualidad con más de dieciocho proyectos culturales, tales como grupos de bailes folklóricos, popular, teatro, cine comunal, literatura, eventos musicales de la Etapa Básica de Música, banda, orquesta de guitarras, grupos de música clásica, popular, fusión o experimental, el Museo Regional de San Ramón, la Sala de Exposiciones Temporales (SET), la Sala de Historia Natural, Poemas Gráficos y Programa de radio de Occidente. Esta Coordinación cuenta con la Comisión de Acción Social, integrada por el coordinador(a) mismo, los directores y directoras de Departamento de la Sede, el Coordinador(a) del Sistema de Educación General y la representación estudiantil. Una de las funciones principales de esta Comisión es programar, analizar, controlar y evaluar la formulación y ejecución de programas y proyectos de Acción Social y elevar sus dictámenes a la Dirección de la Sede, para el trámite respectivo ante la Vicerrectoría de Acción Social. Cuenta también con un Consejo Asesor, conformado por el Coordinador(a) de Acción Social y las (los) encargadas(os) de Sección (Trabajo Comunal Universitario, Extensión Docente y Extensión Cultural). Una de las finalidades primordiales de este Consejo es elaborar un plan anual de actividades que apoye y fortalezca los diferentes proyectos vigentes.
60
Coordinación de Docencia La Coordinación de Docencia vela por el adecuado desarrollo de los programas y proyectos docentes y por la consecución de los recursos humanos y la infraestructura que ellos requieran. Cuenta con la Comisión de Docencia, conformada por el Coordinador, los Directores(as) de Departamento de Sede, el Coordinador(a) del Sistema de Educación General y la representación estudiantil. Cuenta también con la Comisión de Evaluación. Entre otras, le corresponde las siguientes actividades:
•
Procurar que la labor docente en la Sede se lleve a cabo en forma eficiente y actualizada, en unidad de propósitos con la investigación.
•
Ejercer vigilancia para que los cursos universitarios presten siempre especial cuidado a la vinculación de los conocimientos universales con la realidad regional y nacional, desarrollando en el estudiante una capacidad de análisis y de críticas que le permita aplicar creativamente los conocimientos adquiridos.
•
Supervisar los diversos planes de estudio de la Sede con el propósito de coordinarlos en lo posible y adaptarlos a las necesidades de interés regional.
•
Dirigir todo tipo de actividades relacionadas con la guía académica.
61
Coordinación de Investigación La Coordinación de Investigación es la instancia encargada de estimular, generar y coordinar los procesos de investigación en la Sede de Occidente. Se encarga de asesorar en la gestión de proyectos, actividades y programas de investigación, y vela por el buen funcionamiento de ellos. Asimismo, se ocupa de dar a conocer la producción de conocimiento generado por los proyectos, actividades y programas de investigación. En la Coordinación de Investigación funcionan las siguientes comisiones e instancias institucionales que se ocupan de la gestión de la investigación: Comisión de Investigación: está integrada por los directores (as) de los departamentos de la Sede: Departamento de Ciencias de la Educación, Departamento de Ciencias Sociales, Departamento de Filosofía, Artes y Letras, y Departamento de Ciencias Naturales; así como por el Coordinador(a) de Investigación. La dirige este último (a). Su objetivo es apoyar a los proyectos, actividades y programas, velando por su adecuado funcionamiento, así como asignar equitativamente los recursos institucionales. Comisión de Trabajos Finales de Graduación: está conformada por cada uno de los coordinadores (as) de carreras propias que cuentan con el grado de licenciatura y por el coordinador (a) de Investigación. La dirige este último (a). Su misión es conocer, valorar y aprobar las propuestas de Trabajos Finales de Graduación de estas carreras con licenciatura propia, así como aprobar la integración de los respectivos tribunales examinadores de los Trabajos Finales de Graduación. Comisión Editorial: está compuesta por un o una representante de los cuatro Departamentos de la Sede y por el Coordinador (a) de Investigación. La dirige este
62
último (a). Su función es valorar y aprobar las propuestas de publicaciones de la Sede de Occidente, tanto para la Revista Pensamiento Actual, como para la Colección Memoria Colectiva. Asimismo, se encarga de dictaminar acerca de obras didácticas y profesionales. Consejo Asesor de la Reserva Biológica Alberto Manuel Brenes: está integrado por el Coordinador (a) de Investigación, quien lo preside, el Director(a) de la Reserva Biológica Alberto Manuel Brenes, un (a) representante de la Vicerrectoría de Investigación, el Director(a) del Departamento de Ciencias Naturales y el Encargado de la Sección de Biología. Su función es promover y aprobar los diferentes programas o planes operativos que se realicen para el manejo de la Reserva; fijar las cuotas para el uso de las instalaciones y demás; y decidir acerca de la distribución de los recursos económicos, así como las mejoras que se deben impulsar en sus instalaciones. Los
Consejos
científicos:
existen
cuatro
consejos
científicos,
uno
por
departamento: el Consejo Científico del Departamento de Ciencias Naturales, el Consejo Científico del Departamento de Ciencias Sociales, el Consejo Científico del Departamento de Filosofía, Artes y Letras, y el Consejo Científico del Departamento de Ciencias de la Educación. Están integrados cada uno por tres miembros nombrados por la Asamblea de Sede y su función es evaluar, sugerir recomendaciones y aprobar los proyectos, actividades y programas de investigación. Asimismo, deben darles seguimiento y evaluar los informes parciales y finales de los mismos. Los programas de investigación: existen cuatro programas, a saber, Programa de investigaciones del bosque premontano, No. 540-95-901, La Educación y sus perspectivas en la Región de Occidente de Costa Rica, No.540-A3-91, Desarrollo Regional, No. 540-A3-908, e Historial local, patrimonio cultural e identidades de la Región Occidental Central de Costa Rica, No. 540-A4-910. Se organiza cada uno
63
por medio de un Consejo Asesor compuesto por los investigadores que tienen proyectos activos dentro del Programa. Cada Programa es coordinado por un investigador nombrado por el Consejo Asesor. El objetivo de los Programas es articular la investigación en áreas temáticas y promocionar, incentivar y proyectar la investigación que realizan los proyectos inscritos, así como motivar la creación de nuevos proyectos de investigación. Los proyectos de investigación: son las instancias que desarrollan problemáticas de investigación presentadas por los (as) docentes de la Sede. Se articulan a los programas de investigación y su ejecución es periódica. Bibliotecas Arturo Agüero Chaves y del Recinto de Grecia: son las encargadas de ofrecer documentación y servicios de información y referencia a los investigadores, docentes, estudiantes y administrativos de la Sede de Occidente. Su acervo bibliográfico supera los 128 mil volúmenes. Comisión de Asuntos Internacionales: es la instancia encargada de velar por el establecimiento de convenios internacionales de la Sede con universidades del exterior. Asimismo se encarga de informar sobre las existencias y las gestiones e becas en el exterior.
Coordinación de Vida Estudiantil La Coordinación de Vida Estudiantil orienta su accionar en función del bienestar integral del estudiante durante los procesos de ingreso, permanencia y graduación. Se organiza en servicios administrativos cuyos encargados(as) atienden las áreas de: Salud, Información y Divulgación, Servicios Complementarios, Registro,
64
Deportes y Recreación, Orientación, Psicología, Trabajo Social, Casa Infantil, Actividades Culturales y Becas. Trabaja por medio de Comisiones, presididas por el Coordinador General: La Comisión de Vida Estudiantil, en la que participan los encargados(as) de los servicios administrativos y un (a) representante estudiantil. La Comisión de Becas, con el Encargado (a) de Becas, de Trabajo Social y un(a) representante estudiantil. La Comisión de Atención Integral de Residencias, con los Encargados de Servicios Complementarios, el Coordinador de la Comisión de Atención Integral y un representante estudian. La dinámica y proyección de los distintos servicios se articula en cuatro programas fundamentales, a saber: El Programa de Apoyo Socioeconómico, Programa de Salud Integral, Programa Deportivo-Recreativo y Artístico- Cultural y Programa de Fortalecimiento
Académico.
Estos
programas
albergan
una
serie
de
Subprogramas, Proyectos y Actividades en beneficio, especialmente de la comunidad estudiantil. Coordinación de Administración La Coordinación de Administración es la instancia que vela para asegurar a la comunidad
universitaria
de
la
Sede,
los
procedimientos
administrativos
adecuados, servicios generales eficientes, el control presupuestario requerido y la mejor utilización posible de los recursos. Se
organiza
por
medio
de
cinco
secciones
administrativas:
personal,
65
publicaciones, suministros, financiera y servicios generales. Cada sección administrativa tiene un encargado y regula su trabajo por medio de los reglamentos de la institución, así como por las normas internas aprobadas en primera instancia por el Consejo de Sede, y en última instancia por la Asamblea de Sede.
Fuente: Plan de desarrollo estratégico de la Sede de Occidente 2008 -2012 / Aprobado en la Asamblea de Sede N 477 del 10 de Octubre de 2007/ Elaborado con la asesoría de la Oficina de Planificación Universitaria.
CESIS (Centro de Servicios Informáticos de la Sede) Nace bajo la misión de: “Promover, orientar, apoyar y realizar la trasferencia, adaptación, generación, difusión y aplicación de la Informática y las Telemáticas, como tecnología, en función de las actividades sustantivas y de apoyo de la Sede de Occidente”. La visión del CESIS es: Ser la oficina de la Sede de Occidente en el campo de las Tecnologías de Información y Comunicación, los servicios y aplicaciones institucionales que potencien a la institución hacia una posición de vanguardia y excelencia, en los campos de la docencia, investigación, y acción social.
66
Sus objetivos son: Brindar asesoría, divulgación y capacitación en la tecnología de la Informática. Desarrollar, expandir y mantener la plataforma de comunicaciones de que dispone la Sede de Occidente. Desarrollar Sistemas de Informática de tipo institucional, para atender las necesidades de información de múltiples usuarios, teniendo como meta su integración en el sistema de información de la Universidad de Costa Rica y de la Sede de Occidente. Procurar el buen funcionamiento del equipo informático. Optimizar el funcionamiento de los Laboratorios de Informática. La Ciudad Universitaria Carlos Monge Alfaro está ubicada en San Ramón de Alajuela, a 59 km de San José y es el recinto más extenso de la Universidad de Costa Rica. Cuenta con una población de más de 1.600 estudiantes. Fuente: Plan de desarrollo estratégico de la sede de occidente 2008 -2012 / Aprobado en la Asamblea de Sede N 477 del 10 de Octubre de 2007/ Elaborado con la asesoría de la Oficina de Planificación Universitaria.
Oficina de divulgación e información de la Sede de Occidente (ODISEO) Es el ente encargado de apoyar, en materia de comunicación y divulgación, a la comunidad universitaria de la Sede de Occidente, con el objetivo de difundir a nivel regional y nacional el trabajo desarrollado por las diferentes instancias de
67
este centro de estudios. Actividades que desarrolla y servicios que ofrece a la comunidad universitaria: - Cobertura de actividades institucionales - Envío de boletines de prensa - Trámite de publicidad institucional en medios regionales y nacionales - Atención de periodistas - Producción de reportajes
para el Suplemento Crisol y la Revista Presencia
Universitaria - Producción de artículos para página web - Actualización de actividades para página web - Envío digital de agenda de actividades - Supervisión de la imagen gráfica institucional - Realización de productos radiofónicos - Archivo digital de fotografías - Gestión de la Tienda Línea U Sede de Occidente - Diseño de material gráfico Servicios de la Universidad de Costa Rica, Sede de Occidente Los servicios que ofrece la Universidad de Costa Rica son muchos y de gran importancia para la comunidad estudiantil, entre ellos: Apoyo financiero a estudiantes que participen en actividades académicas. Cuenta con una oficina de becas que se encarga de tramitar las solicitudes presentadas por los estudiantes, con el fin de ayudarse en la realización de una carrera universitaria, según las condiciones económicas de cada uno de ellos y solicitudes de beca de estímulo a aquellos estudiantes de excelencia académica, por
68
participación activa en la Asociación de Estudiantes, grupos culturales y deportivos, solicitudes transporte, reubicación geográfica, traslado de expediente y préstamos de dinero. Beneficios Complementarios (becas mayores de 5): Alimentación, Préstamo de Libros, Gastos de Salud, Reubicación geográfica y transporte, Programa de Residencias Estudiantiles, Préstamo de dinero a largo y corto plazo. Cuenta con servicio de biblioteca que se brinda a estudiantes de la UCR, profesores, administrativos y estudiantes del Colegio Científico. La universidad cuenta con el Centro Infantil Ermelinda Mora (CILEM) es un proyecto que vincula la docencia, investigación y acción social, brinda un servicio especializado a la comunidad universitaria y a la región en el área de la educación preescolar. Se atienden niños y niñas de trabajadores, estudiantes universitarios y personas de la comunidad. Servicio de Alimentación brinda subvención en el precio del almuerzo y la merienda
a
los
estudiantes
que
tienen
limitados
recursos
económicos
dependiendo de la categoría de beca. El coro Universitario es una agrupación integrada por estudiantes de diversas carreras y su objetivo fundamental es ofrecer a los mismos un espacio de formación artístico musical, que complemente integralmente su crecimiento humano y profesional. Deportes y Recreación, dirige y evalúa las actividades recreativas y deportivas
69
internas y externas para los estudiantes de la Sede de Occidente. La Sede de Occidente cuenta con cancha de fútbol playa, pista de atletismo, cancha de fútbol y gimnasio. Asistencia de Orientación brinda atención profesional en las áreas académica y vocacional, con equipos interdisciplinarios, en proyectos dirigidos al desarrollo personal del estudiante y apoya actividades relacionadas con la información y divulgación de la Universidad de Costa Rica, en los colegios de la zona. Servicio de Psicología, da apoyo psicológico a los estudiantes que lo solicitan a nivel clínico y a nivel académico. También desarrolla proyectos y actividades cuyo eje principal es el desarrollo humano, en el área formativa. Oficina de Registro e Información, planifica y coordina en la institución, el proceso de admisión y de matrícula y las aulas y laboratorios de cursos programados. Administra y mantiene el sistema de información que da apoyo a los procesos de admisión, permanencia y graduación. Además, resguarda y actualiza la información académica de los estudiantes. La Sede de Occidente cuenta con residencias estudiantiles que es un Beneficio Complementario del Sistema de Atención Socioeconómica, dirigido a brindar alojamiento a estudiantes nacionales de buen rendimiento académico y limitados recursos económicos, que provienen de zonas alejadas. Servicio de Salud, realiza actividades de información y orientación de los diferentes temas relacionados con la salud de los(as) estudiantes. El servicio de Trabajo Social participa en equipos interdisciplinarios desarrollando actividades como talleres y charlas que benefician tanto al sector estudiantil como
70
a la comunidad entre muchas otras funciones. Programas de Voluntariado, incentiva la solidaridad social entre los y las universitarias, involucrándolas de forma voluntaria y flexible a proyectos que se convierten en una alternativa para su tiempo libre y, a la vez, les permite acercarse y sensibilizarse con problemas nacionales, regionales y comunales, aportando soluciones concretas.
Carreras que ofrece la Sede de Occidente en el 2011 Recinto Carlos Monge Alfaro
•
Bachillerato y Licenciatura en Derecho (Bachillerato y Licenciatura desconcentrados)
•
Bachillerato y Licenciatura en la Enseñanza de la Matemática (Bachillerato y Licenciatura desconcentrados. Salida lateral al Profesorado)
•
Bachillerato y Licenciatura en Dirección de Empresas (Bachillerato y Licenciatura desconcentrados)
•
Licenciatura en Ingeniería Industrial (Bachillerato y Licenciatura desconcentrados)
•
Bachillerato en Informática Empresarial
•
Bachillerato en la Enseñanza del Castellano y la Literatura
•
Bachillerato en la Enseñanza de los Estudios Sociales
•
Bachillerato y Licenciatura en la Enseñanza del Inglés
•
Bachillerato en Ciencias de la Educación Primaria
•
Bachillerato en Ciencias de la Educación Preescolar
•
Bachillerato y Licenciatura en Trabajo Social
•
Bachillerato en Ciencias de la Educación Primaria con concentración en
71
Inglés •
Bachillerato en Ciencias de la Educación Preescolar con concentración en Inglés
•
Bachillerato y Licenciatura en Artes Plásticas con énfasis en diseño gráfico (Bachillerato y Licenciatura desconcentrados)
•
Bachillerato y Licenciatura en Artes Plásticas con énfasis en diseño pictórico (Bachillerato y Licenciatura desconcentrados)
•
Bachillerato y Licenciatura en Psicología (Bachillerato y Licenciatura desconcentrados)
•
Bachillerato en Gestión de los Recursos Naturales
•
Licenciatura en Enfermería (Bachillerato y Licenciatura desconcentrados)
•
Bachillerato en la Enseñanza de la Música (Bachillerato desconcentrado)
•
Bachillerato y Licenciatura en Orientación (Bachillerato y Licenciatura desconcentrados)
•
Bachillerato en Bibliotecología con énfasis en Bibliotecas Educativas (Bachillerato desconcentrado)
•
Licenciatura en Ciencias de la Educación con énfasis en Administración de la Educación (Licenciatura desconcentrada)
•
Licenciatura en Educación Primaria (Licenciatura desconcentrada)
•
Licenciatura en Educación Preescolar (Licenciatura desconcentrada)
•
Licenciatura en Informática Educativa (Convenio UNED-UCR)
•
Bachillerato en Manejo de Recursos Naturales (Convenio UNED-UCR)
Recinto Universitario de Grecia •
Bachillerato en Informática Empresarial
•
Bachillerato en Laboratorista Químico
•
Bachillerato y Licenciatura en Trabajo Social
•
Bachillerato y Licenciatura en la Enseñanza de la Matemática (Bachillerato
72
y Licenciatura desconcentrados. Salida lateral al Profesorado) •
Bachillerato en la Enseñanza del Castellano y la Literatura
•
Bachillerato Economía Agrícola y Agronegocios (Bachillerato desconcentrado) Bachillerato Enseñanza de las Ciencias Naturales (Bachillerato
•
desconcentrado) Bachillerato en Turismo Ecológico y Licenciatura en Gestión Ecoturística
•
(Bachillerato y Licenciatura desconcentrados) Programas de Posgrado de la Sede de Occidente
•
Maestría Académica en Desarrollo Sostenible con énfasis en conservación
•
Maestría Académica en la Enseñanza del Castellano y Literatura
•
Maestría en Psicopedagogía (Convenio UNED-UCR)
•
Maestría en Administración con énfasis en gerencia estratégica (Convenio UNEDUCR) Toda la información recopilada acerca de la idiosincrasia y del engranaje de la Sede de Occidente, Universidad de Costa Rica, ha sido material clave para la arquitectura de información y diseño del sitio web.
Capítulo 3. Identificador y libro de marca para la Universidad de
73
Costa Rica, Sede de Occidente 3.1. El identificador gráfico “Las Instancias de identificación, análisis e investigación, proporcionan un repertorio de elementos desordenados que es necesario clasificar y evaluar de acuerdo con su pertinencia con el enfoque del proyecto.“ (Fuentes. 2005: p. 59)
Como lo dice Rodolfo Fuentes, es necesaria una previa investigación que nos permita recopilar los elementos fundamentales para el inicio un proyecto creativo. Esta información debe ser analizada, estudiada e interpretada con el fin de obtener un diseño de calidad, en este caso un
identificador que cumpla
plenamente con su función de representar una institución de educación superior. La necesidad de una imagen gráfica que represente la institución nace de la ausencia de la misma, ya que hasta el momento, la Sede de Occidente ha usado la imagen de la Sede Rodrigo Facio, omitiendo la importancia de contar con una propia.
3.1.1. Concepto Para la concepción del nuevo identificador gráfico se retoma la imagen del búho, ícono que fue usado en los primeros años desde la fundación de la Sede de Occidente de la Universidad de Costa Rica en la década de los setenta y se dejo de utilizar en los años noventa. Este símbolo fue perdiendo presencia con el transcurso del tiempo, pero aun así continuó apareciendo en ciertos casos como en ferias y actividades concernientes a esta ciudad universitaria o para material promocional en fechas importantes como aniversarios en las consecuentes décadas, incluso fue utilizado en aplicaciones recientes como en carpetas y otros
74
materiales de divulgación.
“La figura del búho como símbolo de sabiduría ha llegado hasta nuestros días de la mano de la Filosofía y la Literatura.” (Barja, 2010).
Para los pueblos indígenas de Perú, el búho fue venerado como una de las criaturas que servían a los chamanes en su viaje al mundo sobrenatural (sagrado). En la antigua Grecia, a estas aves se les dio un nuevo significado, asociándolas con el conocimiento y la cultura. Relacionada en la figura de Palas Atenea, diosa de la sabiduría y del conocimiento, representada con una lechuza como su fiel compañera.
Fuente:
http://www.suite101.net/content/el-buho-simbolo-de-saber-
a24421. Roma hereda esta diosa con el nombre de Minerva y la representa, igualmente, acompañada con la figura de una lechuza. En poemas y leyendas actores como Nicholas de Guildford relacionan al búho con la inteligencia y la sabiduría, un ejemplo es su poema “El búho y el ruiseñor”. “…el poema atribuido a Nicholas de Guildford “El búho y el ruiseñor” (“The owl and the nightingale”) donde el búho tiene las características humanas de la sabiduría y el conocimiento: “¿Por qué me critican por mi conocimiento, mi inteligencia y mi poder? Porque soy sabio, sin duda alguna, y sé todo lo que está por venir...” (Barja, 2010).
El búho se retomó como punto de partida o referencia para el proceso creativo, adecuándolo a un entorno más contemporáneo en cuanto a diseño se refiere. Con
75
él se buscó dar una identidad más sólida a la Sede de Occidente de la Universidad de Costa Rica, acentuando ese concepto que se vino manejando desde su fundación. La Sede de Occidente utilizó el búho como un distintivo visual durante sus primeros años y se dejado de utilizar a finales de los años noventa, esta imagen era acompañada por varios símbolos referentes a la educación. Tal es el caso del búho mismo, como ave representativa del conocimiento y sabiduría por las antiguas civilizaciones, el birrete que lleva puesto, la antorcha que tiene dentro de su pecho y el libro debajo de él, todos símbolos del saber. Además con sus alas se forman dos siluetas, una masculina y otra femenina, estas buscan representar la diversidad de género y la igualdad educacional que ha caracterizado la sede desde sus inicios. Este búho aún es usado en algunos materiales de divulgación dirigidos al público, tales como afiches y desplegables. Este emblema nació a partir de un concurso que invitaba al estudiantado a crear una imagen para la sede, sin embargo el emblema ganador fue usado por corto tiempo y luego fue desechado. (Fuente: entrevista realizada a M.L. Oscar Montanaro Meza, profesor de literatura pensionado de la Universidad de Costa Rica, Sede de Occidente).
76
Figura 23. Búho empleado para identificación de la Sede de Occidente de la Universidad de Costa Rica desde los primeros años en que la Sede comenzó su funcionamiento.
3.1.2. Proceso creativo Fue de gran importancia llevar a cabo un proceso creativo el cual consiste en la elaboración de bocetos hechos a mano de las primeras ideas que se tengan del diseño a realizar y llevar las que se consideren apropiadas a un formato digital para proceder a seleccionar la que se considere mejor. “El boceto es la representación más fiel posible de una o más ideas respecto al proyecto en marcha. Realizar un buen boceto de un objeto gráfico, bi o tridimensional, requiere, además de un adecuado nivel de equipamiento tecnológico, una dosis considerable de artesanía, de manualidad.” (Fuentes. 2005: p.69)
Como en todo proceso para la creación de un diseño, en este caso para un identificador gráfico, se comenzó con la generación de diferentes bocetos e ideas,
77
las cuales pasaron por un estudio de funcionalidad que permitió seleccionar aquellas que pudieron ser trabajadas para su posible uso. Al retomar el ícono del búho, como estilización, fue necesario, simplificarlo a sus rasgos básicos sin perder su esencia. Estos rangos, son aquellos que permiten su identificación, como especie de ave que. Sea fácilmente reconocible como tal. Para su elaboración no se concentró la atención en una especie específica de búho, sino que se buscaron aquellos rasgos generales y muy característicos de esta familia de aves que permiten concebirlo, a un grado icónico que represente una especie y no como un espécimen de determinado género o variedad, con esto se buscó no limitarse a un patrón específico de clase ya que es poco funcional ya que los rasgos terminan siendo estrechamente similares. Tipografía: Para la selección de tipografía (fonotipo del identificador) se aplicó el criterio de integración sobre la parte icónica (isotipo), es decir, que se lograra un conjunto visual armónico en el cual ambas partes se integraran como un todo, manejando un discurso gráfico similar y estético en las dos secciones del identificador gráfico. Se seleccionó el tipo de letra Trajan Pro, Regular, Bold ya que su estructura es limpia y de fácil lectura esto permite que la misma se complementa de gran forma con el dinamismo del elemento grafico.
Trajan Pro, Regular, Bold Figura 24. Tipografía empleada en el nuevo identificador gráfico.
78
Estilización Al usar un elemento real como es el búho, es necesario recurrir a la estilización para simplificar sus formas y estructura, con el fin de que el público lo pueda percibir de manera clara y natural sin la necesidad de mostrar todos los elementos de que lo conforman. Cabe mencionar que la presente estilización tomó como base la forma clásica de búho que se conoce popularmente, es decir no se tomó ninguna especie en específico como base para la creación del mismo. El componente icónico se basó en una forma genérica de búho, para
una
decodificación óptima del isotipo (elemento grafico del logotipo).
Figura 25.Izq. Bubo virginianus (búho grande). Especie común en toda América.
Figura 26. Der. Estilización del identificador para la Sede de Occidente
Una vez con algunas ideas elegidas, se procedió a trabajar las propuestas para encontrar la adecuada estilización que cumpliera con los factores antes descritos. Este proceso se trabajó solamente en negro sobre fondo blanco, ya que primero debe ser perfectamente funcional en su versión monocromo antes de aplicar color.
79
Después de una segunda selección, se comenzaron a trabajar dos propuestas, que terminaron cumpliendo con las expectativas de una adecuada estilización para el uso en un identificador gráfico. De ambas se escogen los elementos más fuertes y de esta manera se ensambla una nueva propuesta donde se crea una estilización con carácter institucional pero adoptando formas dinámicas que interactúan con el espacio negativo y el texto del logotipo.
Propuesta 1
Propuesta 2
Figura 27. Fusión de las dos propuestas finales del identificador gráfico.
Estructura: Para que el identificador gráfico o logotipo mantuviera siempre su proporción sin alteraciones, se creó una relación de tamaños de acuerdo a los componentes del
79
mismo. A esto se le denomina dibujo estructural y tiene como meta, brindar a la persona que pueda tener a cargo el uso del identificador para cualquier aplicación, una guía de las proporciones que debe siempre mantener.
Figura 28. Dibujo estructural del identificador gráfico.
Generalmente estas proporciones se dan en razones de “X“ y “Y“ cuando se trata de imagen para un solo uso. En este caso sin embargo sólo se utilizó la “X”. Debía a que no se pueden dar medidas específicas para las dimensiones, ya que el identificador será usado en múltiples tamaños y aplicaciones. Por tanto, la proporción para este identificador sería 21x de alto y 15x de ancho, donde “x” equivale al grosor del pico del búho. Tamaño mínimo de impresión: Esto se refiere al tamaño mínimo en que el identificador puede ser impreso sin
80
perder su legibilidad, ofreciendo el rango de tamaño mínimo para su uso en aplicaciones pequeñas tales como tarjetas de presentación o lapiceros.
Figura 29. Tamaño mínimo de impresión.
Este tamaño se consiguió luego de hacer múltiples pruebas, tanto de impresión como de consulta a diferentes personas, incluyendo profesionales de diseño. Para el identificador gráfico de la Sede de Occidente de la Universidad de Costa, el tamaño mínimo de impresión se sitúa en 1,2 cm de alto. Color La selección del color se basa en la paleta principal de la Universidad de Costa Rica. Se eligió así el color celeste, uno de los colores institucionales primarios, en la escala Pantone (escala internacional de color) con el código: Pantone 2985 U.
81
Figura 30. Uso de color en el identificador gráfico.
Los colores utilizados se dieron en rangos de proporción de tinta “CMYK“ y “RGB“ (por sus siglas en inglés) Cian, Magenta, Amarillo y Negro (colores pigmento para impresión, cuatricromía), Rojo, Verde y Azul (colores luz, para su uso en pantalla). Estos rangos se dan para facilitar la búsqueda de color, ya que puede haber software desactualizado en cuanto a listas Pantone. Además para agilizar el proceso teniendo los rangos de color específicos para ser introducidos en el selector de color, sin necesidad de buscar el Pantone. También se da el color en Hexadecimal (código de seis dígitos en lenguaje hexadecimal) y con este se pueden obtener ambos rangos, tanto el “CMYK” como el “RGB“.
82
Figura 31. Ejemplo de selector de color con los rangos RGB, CMYK y #.
3.2. Manual de identidad visual El manual de identidad visual, es una herramienta que brinda los lineamientos de diseño institucional para el uso correcto del logotipo y sus diferentes aplicaciones para representar de la mejor manera a la Sede de Occidente, Universidad de Costa Rica. Es necesario que estos lineamientos sean respetados para lograr una identidad y reconocimiento visual de la institución, así como presentar una imagen sólida y diferenciadora. Esta guía recupera y da nueva vida a un elemento gráfico tradicional de la Sede de Occidente: el búho componente icónico usado desde los inicios de la Sede de Occidente, que se había dejado de utilizar a finales de los años noventa. A su vez, incluye otros elementos que permiten que la comunicación institucional se
83
realice correctamente y con unidad. 3.2.1. Antecedentes del Libro de Marca No se registran antecedentes formales de manuales de identidad, a nivel de Sede de Occidente. Sin embargo, se determina como antecedente el manual de identidad, desarrollado en la Ciudad Universitaria Rodrigo Facio para la Universidad de Costa Rica, el cual fue solicitado en el mes de septiembre del año 2002 por el Consejo Universitario y el cual se encuentra hoy inscrito en el Registro Nacional. 3.2.2. Propósito del Libro de Marca Este documento tiene como objetivo ofrecer una guía práctica para presentar visualmente la imagen de la Sede de Occidente, Universidad de Costa Rica, con el fin de representar los valores característicos de la sede y mantener una imagen estructurada, sólida y única de la universidad todo el tiempo.
Las pautas establecidas en este manual tienen como meta, ser una guía para todos los encargados del manipular la imagen institucional de la Sede de Occidente, evitando así el uso inadecuado de la línea gráfica de la institución. 3.2.3. Importancia de un libro de marca Aplicar las normativas de manera correcta, tal y como lo establece el libro de marca, garantizará una imagen coherente y sólida de la institución reforzando así la imagen que se desea reflejar.
84
3.3. Proceso de elaboración del Manual de identidad visual para Universidad de Costa Rica, Sede de Occidente Al iniciar el proceso de creación del manual, se creó una retícula conformada por dos columnas que ayudé en la organización de los elementos y en el contenido del manual, el título y la numeración en la parte superior que permitió localizar con facilidad la información requerida y un cintillo (franja de color) bajo la numeración con el título de lo que contiene la pagina.
Figura 32. Estructura de retícula del manual de identidad visual.
Tanto para el contenido del manual de identidad como para la imagen del mismo, se utilizó, como punto de partida el nuevo identificador gráfico (logotipo) de la Sede de Occidente Universidad de Costa Rica, ya que es el elemento gráfico que identifica a la institución.
85
La imagen del manual también fue inspirada en el logotipo y en sus colores, creando un cintillo o banda que incorpora parte de la cara del búho y este se repite en todo el documento y utilizando el color celeste para dar aun más unidad al documento.
3.3.1 Contenido del manual Dibujo estructural El dibujo estructural es el responsable de establecer las medidas del logotipo y establecer el margen de respeto que se debe de mantener cuando se utilice. Tamaño mínimo de impresión El tamaño mínimo de impresión ha sido creado para establecer y comprobar cuál es el tamaño mínimo en que se puede imprimir el logo ya que al utilizarlo en una medida menor a la establecida se perjudica la legibilidad. Logo contra fondo Logo contra fondo se refiere a la manera como se ve el logo en positivo y en negativo, utilizando tanto fondos claros como oscuros y restringiendo aquellos en los que puede perder legibilidad. Tipografías Establecer cuáles son las tipografías que se deben de utilizar en la institución al crear cualquier material grafico, permite dar unidad a la imagen de la universidad
86
y evitar la utilización de diversas tipografías que no estén acordes con la imagen grafica. Usos incorrectos Se refiere al establecimiento de cuáles son los usos incorrectos del logotipo. Esto es de gran importancia ya que se dan con suma frecuencia y al especificarlos en el manual, se evita la mala manipulación del mismo y sirve de guía al momento de utilizarlo. Papelería La papelería es parte fundamental de una institución por lo que es importante que cuente con calidad grafica y unidad visual con la imagen de la institución por lo mismo se crea una serie de diseños en los que se incluyen hoja carta, sobre, tarjetas de presentación, facturas y formularios entre otros. Material divulgativo Se refiere a la aplicación de la imagen a elementos de divulgación tales como banners, afiches, entre otros que pueden ser utilizados para cuando sean necesarios. Página web La existencia de una página web es primordial para la institución, de ahí la importancia en cuanto a calidad de diseño y establecimiento de normas que salvaguarden su apariencia, evitando así la mala manipulación de los elementos gráficos que perjudiquen su imagen.
87
Capítulo 4. Estructura base del sitio web de la Sede de Occidente de la Universidad de Costa Rica 4.1. Lineamientos para la construcción de un sitio web de la Universidad de Costa Rica El sitio web que se propuso en el presente seminario de graduación fue diseñado siguiendo los lineamientos dispuestos por la Oficina de Divulgación e Información de la Sede Rodrigo Facio de la Universidad de Costa Rica. Estos
lineamientos establecen las diversas normativas a cumplir para lo
construcción y publicación de los portales universitarios. Dentro de esas normativas están:
•
Los sitios web de la Universidad de Costa Rica deben ser cuidadosos en la escritura de sus textos, éstos deben presentarse con ortografía correcta y lenguaje apropiado que refleje el nivel de educación superior.
•
El título en la barra del navegador de cada página debe de describir al sitio (por ejemplo, poner el nombre completo de la unidad a la que corresponde).
•
Todo sitio que tenga instalaciones físicas, debe contener una imagen de alguna edificación o lugar representativo del campus o de la unidad a la que pertenece el web.
•
Todo sitio debe de desplegar el nombre completo de la institución utilizando la firma oficial de la Universidad de Costa Rica, el cual a su vez funciona como un enlace al sitio principal de la UCR:
88
http://www.ucr.ac.cr
•
Todo sitio debe de tener el mensaje de “copyright” derechos reservados Universidad de Costa Rica y el año en curso.
•
Es importante asumir el punto de vista del estudiante o el usuario meta de un sitio mientras se diseña: Se debe de suministrar información relevante y que aproveche las características únicas de Internet, como lo es el acceder remotamente a información o funcionalidades, para evitarle al usuario la necesidad de trasladarse físicamente a la Universidad para evacuar posibles consultas o realizar tareas.
•
Desde cualquier página debe de ser posible regresar a otras del sitio por medio de enlaces (no debe de haber “callejones sin salida”).
•
El sitio no debe de abrumar al usuario con información y enlaces. Para que una persona encuentre fácilmente la información, esta no debe de estar dispersa sin lógica por toda la pantalla: debe agruparse de manera razonable y verse ordenada, lo cual facilita la labor del ojo y la interpretación de los datos.
•
Se debe de evitar que el usuario tenga que hacer “scroll” horizontal. Para esto es importante no agrupar elementos de ancho estático que abarquen demasiado espacio horizontal, y diseñar el contenido de manera que se ajuste a tamaños diversos de pantalla, en cierta medida, lo que se conoce como diseño líquido (“fluid” o “liquid layout”).
•
Óptimamente, todo sitio debe de verse bien en una resolución de 1024x768 pixeles. Es deseable que se le dé soporte a la resolución de 800x600, al menos permitiendo que el contenido sea accesible bajo esta, si bien el sitio puede perder
89
sus características de diseño. Recopilado del Manual de Estándares de Desarrollo de Sitios Web UCR. (Aguilar, Rojas, Zeledón, 2010: pp. 04-07.)
El sitio toma estas directrices basadas en principios de orden, usabilidad, limpieza visual, y calidad gráfica, implementándolas en su elaboración.
4.2. Descripción de bocetos para las secciones del sitio web Como punto de partida para la página web se crea una plantilla que sigue los lineamientos establecidos por la Universidad de Costa Rica para la creación de sitios para sus sedes. Para la construcción del nuevo sitio web se creó una retícula que consiste en un banner superior, es decir un encabezado que contiene tanto el logo de la Universidad de Costa Rica así como el de la Sede de Occidente, tomando como base el empleado en la página de la Sede Central, esto permite tener un fácil acceso a las páginas de inicio de ambas sedes. Para el diseño del nuevo sitio, se planteó una estructura en la cual se redujo la cantidad de información a únicamente aquella relevante que el usuario pueda necesitar, se unificó el diseño de las diferentes secciones tomando en cuenta tanto colores institucionales como elementos visuales, lo que reafirma la coherencia tanto estética-conceptual como institucional. Todos los factores tomados en cuenta para esta reestructuración visual y funcional se fundamentan en criterios propios del campo de la producción de sitios web y medios interactivos, además de prácticas propias del diseño gráfico
90
de vanguardia; estos criterios nos ayudaron a entender mejor cuales principios técnicos y funcionales aplican directamente sobre la construcción de páginas web y a como aplicarlos satisfactoriamente. Tomando en cuenta los resultados del análisis heurístico aplicado al anterior sitio web, el cual deja en evidencia las deficiencias presentes en él como lo son el exceso de información, dificultad en la navegación por complejidad de menú y falta de coherencia visual/estructural, el pobre o no adecuado diseño del sitio, entre otras, damos nuestra propuesta, que busca presisamente corregir estos errores, dando fe de que estas correcciones son satisfactorias y muy necesarias para el adecuado uso y fin de un sitio web para este tipo de institución educativa. Para los cambios apicados al sito web se tomaron siempre en cuenta las pautas de funcionalidad, navegabiliad y usabiliad descritas con anterioridad en este documento, entre estos cambios se pueden citar: un adecuado menú de navegación y una estructura coherente y amigable con el internauta, la reducción de la información innecesaria y en muchos casos muy extensa y un rediseño de interface más apegado a las prácticas de vanguardia del diseño gráfico y web. Estas mejoras son necesarias y muy válidas de acuerdo a los lineamientos indispensables en cuanto al adecuado uso de un sitio web, nuestra propuesta por tanto supera en funcionalidad y diseño a su antesesora (anterior página web de la Sede de Occidente de la Universidad de Costa Rica), y por tanto, dará mayores beneficios en el cumplimiento de las metas propuestas en el uso de un sitio web acorde a las necesidades de los usuarios.
91
Página de inicio En la parte superior del diseño se ubica un cintillo con celeste (#41b2f2) en gradiente a azul (#204d6f), con una curva ascendente simétrica. En este cintillo se ubica la firma oficial de la Universidad de Costa Rica a la izquierda en posición horizontal con color blanco, (Esta firma posee un enlace hacia la pagina principal de la Universidad de Costa Rica) A su derecha el nuevo logotipo para la Sede de Carlos Monge Alfaro. El borde inferior del cintillo tiene una línea blanca que delimita el contenido de la página.
Figura 33. Ventana principal del nuevo sitio web.
Al lado izquierdo de la página, se encuentra una barra de búsqueda que ayuda al usuario a encontrar la información correspondiente de una forma directa. Debajo de
esta
barra
se
encuentra
un
menú
vertical
desplegable,
con
los
correspondientes enlaces a páginas dentro del sitio.
92
En el centro de la página aparece una fotografía y un resumen de la noticia que el usuario ha podido seleccionar en la parte inferior, y a la derecha de la página encontramos una botonera con accesos directos a otras secciones importantes que la universidad pone a disposición del usuario. Debajo de esta sección central, se encuentra un menú con noticias, fotografías y actividades. Al posicionarse sobre este menú, la noticia de la parte central de la página cambia a la solicitada. Al final de la página encontramos la leyenda “Universidad de Costa Rica / Sede de Occidente / Copyright © 2011. Todos los Derechos Reservados”, además de los números de teléfono de la Sede de Occidente. Los enlaces En este apartado se detallan algunos de los enlaces que aparecen en el menú desplegable a los que está ligado el sitio web de la Sede de Occidente. El menú principal se conserva a la izquierda todo el tiempo, además la página cuenta con “migas de pan” que son indicadores en la parte superior que funcionan como botones y permiten a usuario mantenerse informado a cada momento de su ubicación en el sitio. Estas dos características son implementadas en cada uno de los enlaces. Misión y Visión En esta ventana se presenta de manera clara, la misión y visión de la institución, cada una acompañada por una imagen
93
Figura 34. Ventana Misión y Visión
Coordinaciones Esta ventana explica de manera clara, en qué consiste cada uno de las Coordinaciones, cuáles son sus metas y qué proyecto tienen en su momento. Por la extensión del material, se deja como machote la página de la Coordinación de Acción Social como futura referencia para montar las ventanas de las otras Coordinaciones.
94
Figura 35. Ventana Acción Social.
Servicios Esta ventana enlista los servicios que la Sede de Occidente aporta, tanto a los estudiantes como a la comunidad. Aquellos servicios que cuenten con página propia, serán enlazados desde aquí por medio de la apertura de una nueva ventana.
95
Figura 36. Ventana Servicios.
Mapa del sitio Esta ventana servirá para que el usuario conozca de manera clara y ordenada la estructuración del sitio, facilitando la navegación en el mismo. Esta sección se encuentra
estructurada
de
la
siguiente
forma:
Inicio,
Coordinaciones
(Administración, Acción Social, Vida estudiantil, Investigación y Cesis), Institución (Reseña Histórica, Misión y Visión, Galería y Organigrama), Mapa de Carreras (Carreras abiertas en la sede), Enlaces (Museo, Reserva, Bosque Demostrativo, Feria Vocacional, Laboratorio de Matemática y Colegio Científico), Servicios (Estudiantes: AESO, Registro, Sistema de Becas, Residencias, Transporte,
96
Comedor, Orientación, Salud, Biblioteca, Laboratorios, Psicología, Intercambios, Casa Infantil y Deportes y Recreación. Comunidad: Trabajo Social, Grupos Culturales,
Consultoría
Jurídica,
Cursos
Libres),
Contáctenos
(Directorio
Telefónico, Consultas), Actividades, Noticias y Sub menús.
Figura 37. Mapa del Sitio.
Galería La galería del sitio web de la Sede de Occidente de la Universidad de Costa Rica, contará con un menú al lado izquierdo que permite al usuario seleccionar la fotografía que desee observar de una manera dinámica e intuitiva, El usuario puede observar múltiples fotografías de las instalaciones, así como de las actividades que se desarrollan en ellos.
97
Figura 38. GalerĂa.
98
Capitulo 5. Conclusiones
Con este proyecto se desarrolló una propuesta de libro de marca y se renovó el diseño del sitio web de la Sede de Occidente de la Universidad de Costa Rica, brindando lineamientos de diseño institucional. Todos los objetivos se cumplieron satisfactoriamente y a continuación se resumen brevemente.
5.1. Investigación Mediante el planteamiento de una metodología apoyada teóricamente en los fundamentos de investigación que plantean autores como Rodolfo Fuentes y Norberto Chávez, se realizó una investigación que recaudó la información sobre parámetros estructurales de sitios web, conociendo sobre estructuras adecuadas para los portales universitarios y tomando como base los sitios web universitarios de mayor calidad, así como los criterios acertados sobre y usabilidad, navegabilidad, contenido y estructuración del sitio. Para la propuesta del identificador visual se llevo a cabo una investigación sobre los antecedentes de la Sede de Occidente, así como su estructura organizacional, funcionamiento, misión, visión e historia de su creación con el fin de crear una base conceptual para la interpretación gráfica. Se efectuó un estudio sobre proyectos similares y material bibliográfico referente a temas de diseño gráfico y creación de páginas web, con el fin de contar con las pautas necesarias para la elaboración del portal universitario y la representación
99
gráfica de la Sede. La consulta a autores como Rodolfo Fuentes y Jorge Frascara fue recurrente, debido a la gran experiencia con la que cuentan estos profesionales sobre principios básicos del diseño y prácticas del mismo, otros autores como Dabbs y Campbell fueron consultados sobre el diseño digital, estructura y navegación, por ser profesionales especializados en este campo. Además, se consultaron proyectos de graduación como el de Karen Salas (2009) titulado “Diseño de línea gráfica y sitio web para la Asociación para el Desarrollo de la Cultura y el Ambiente de la Región Huetar Norte” y el de María Gabriela Bogarín (2006) titulado “Sitio Web del Instituto Nacional de Biodiversidad (INBio) para Niños y Niñas. San José, Costa Rica: Universidad de Costa Rica”, como referencia a los aspectos de funcionalidad y usabilidad, que son parte del proceso creativo y de estructuración del sitio web. Además, estos proyectos respaldan la importancia de una funcionalidad práctica y una clara navegación en los medios de comunicación electrónicos. Todo lo que se plantea y se desarrolla durante este proyecto, cuenta con un respaldo teórico-práctico por parte de diferentes autores destacados en el estudio sobre teorías del color, lineamientos sobre tipografía, imagen corporativa, diseño digital y web entre otros, además de la información obtenida en sitios electrónicos con el fin de sustentar y ejemplificar procedimientos. Algunos de los autores consultados son: Rodolfo Fuentes, Jorge Frascara, Dabbs y Campbell entre otros.
5.2. Producción gráfica Una vez recaudada toda la información necesaria sobre la institución, y elementos representativos a destacar de la misma, se procedió a evaluar los datos con el fin
100
de obtener un elemento distintivo para la representación gráfica de la Sede de Occidente. 5.2.1. Identificador gráfico El proceso de producción iconográfico fue cuidadosamente elaborado, al igual que las otras etapas del proyecto. Durante esta etapa se buscó la estilización mediante bocetos manuales del búho, ave escogida por representar a la Sede de Occidente, debido a su simbolismo icónico y al significado histórico para la institución. Se procedió a evaluar las características físicas más destacables del ave para su interpretación gráfica ya que es prioridad su rápido reconocimiento a pesar de su estilización, siempre buscando resaltar los elementos positivos que este simboliza. Se desarrollaron varios bocetos con características similares con el fin de seleccionar la figura a trabajar, resolviendo al final fusionar dos de las propuestas finales con el fin de fortalecer la estilización y al mismo tiempo limpiar sus formas para proporcionarles alta legibilidad. Sus formas son circulares en su mayoría, aportando fluidez y dinamismo, por esta razón durante la elección de la tipografía que se usó en el logo, se procuró mantener un estilo de letra que mantenga la coherencia con las formas redondeadas, ya que estas proporcionan alta legibilidad. También se buscó tipografía con serifas que ayuden con la lectura del logotipo y para mantener unidad con la imagen de la Institución en su totalidad. Por estos motivos, se usó la tipografía Trajan Pro, por cumplir las especificaciones
101
antes mencionadas. Esta tipografía fue levemente modificada al aumentar su altura para mejorar su percepción y la relación con el identificador, el cual tiene una forma elevada. Después de definir la estructura del identificador y la tipografía a utilizar se procedió con pruebas de color donde se decidió por el celeste pantone 2985U, color institucional. 5.2.2. Libro de marca Una vez definido el identificador gráfico de la Sede de Occidente, Universidad de Costa Rica, se procedió a crear los lineamientos necesarios para las aplicaciones del logotipo tanto en los medios impresos como digitales, incluyendo el sitio web, por medio de un libro de marca. En este manual se especifican los usos del identificador como lo son color, texturas, formas, área de respeto, usos en fondos, usos incorrectos, tamaño mínimo de impresión, entre otros. También aporta aplicaciones del identificador gráfico para el uso en carpetas, camisetas, papelería, portadas de CD, artículos publicitarios y otros, lo que refuerza la imagen de la institución. La función de este libro de marca es dar las herramientas necesarias y lineamientos con que debe contar una imagen institucional para así crear unidad y permitir el manejo adecuado del logo y sus aplicaciones en el futuro, como así también evitar manipulaciones o usos inadecuados del mismo. 5.2.3. Página web Para el desarrollo de este sitio, se investigó sobre criterios contemporáneos en el
102
diseño web tales como usabilidad, navegabilidad, estilo y funcionalidad que ofrecen diversos autores. Además se indagó el ranking web de universidades buscando los criterios que hacen de una página universitaria, un sitio que verdaderamente promocione y represente a la institución y a la vez informe al usuario. Con esta base, se aplicaron criterios de diseño y función de las páginas web que se encuentran en los primeros lugares a nivel mundial. La propuesta de diseño del nuevo sitio web de la Sede de Occidente de la Universidad de Costa Rica, se realizó acorde a la necesidad de renovar la imagen actual de la página web. En principio se pensó diseñar simplemente las ventanas principales del sitio en un software de diseño, pero el proyecto evolucionó para concluir con el montaje completo de la página web en un programa novedoso y de acceso libre llamado Joomla, este se puede descargar gratis desde http://www.joomlaspanish.org/. Se debe tener claro, que este trabajo se basa específicamente en el desarrollo de la línea gráfica de la Sede de Occidente, Universidad de Costa Rica, proponiendo a su vez, el diseño de un nuevo sitio web, que represente la institución desde una perspectiva eficiente, en cuanto a navegación y nivel estético. Por la extensión del proyecto y la cantidad de enlaces que requiere, este se limita a las principales ventanas como son la de inicio, las coordinaciones, mapa del sitio, carreras, institución, servicios y contacto, pero además los submenús que derivan de ellas. También se crearon plantillas para las demás secciones como las actividades y noticias para su posterior continuación. Estas secciones que no son incluidas en el proyecto de rediseño, cuentan con un enlace en el sitio el cual lleva a ellas. Esta condición es temporal, ya que deben también encajar en la nueva imagen de la Sede de Occidente lo antes posible.
103
Se concluye que se ha logrado cumplir puntualmente con los objetivos establecidos para este proyecto, logrando así darle una imagen fresca y contemporánea a la Sede de Occidente de la Universidad de Costa Rica, institución que participa activamente en el desarrollo de la comunidad y que brinda una función indispensable en la mejora de la misma. Resultados de los principales puntos del análisis heurístico Al realizar un análisis heurístico basado en la guía del autor Daniel Torres Burriel se extraen las siguientes conclusiones con lo que respecta a la propuesta del sitio web de este seminario de graduación: Heurísticos generales: La nueva página cuenta con objetivos bien definidos lo que permite que el contenido y los servicios estén acorde a ellos. Presenta claramente los servicios y contenido de la página y el diseño general está orientado de buena manera a los lectores. El sitio cuenta con un diseño coherente y estable que se manifiesta a través de toda la navegación. Es indispensable que éste permanezca en constante renovación de la información para que el usuario cuente con la información más reciente. Identidad e Información: Como parte importante del diseño, se buscó realzar la imagen institucional de la universidad por lo que, tanto el logotipo, como sus colores y tipografías son utilizados para lograr cumplir el objetivo de representar la institución. La misión y visión de la Sede de Occidente, Universidad de Costa Rica así como los contactos de la misma están al alcance de los usuarios.
104
Lenguaje y redacción: El lenguaje es comprensible para los usuarios, la información que se suministra es clara y concisa. Se utilizaron cajas de texto cortas para que el usuario no se sature de información y se mantenga interesado el mayor tiempo posible. Rotulado: El diseño como punto fundamental de la página buscó una organización gráfica e informativa, clara y bien definida. Los títulos son bien definidos y estudiados según la información.
Estructura y navegación: La estructura y navegación son elementos muy estudiados a la hora de realizar este sitio web por lo que se puede decir que es un sitio en el que el internauta puede navegar con seguridad y ubicación en todo momento..
Layout de la página: En esta página la información es colocada de forma jerárquica comenzando en la página de inicio con el menú, noticias e identificación de la institución, además se hace una selección minuciosa de la información para no saturar al internauta. Cuenta también con una buena distribución de los elementos gráficos y tipográficos creando espacios de descanso y de fácil identificación de contenido. Elementos multimedia:
105
En esta nueva página web el diseño es punto fundamental por lo que las imágenes son de gran calidad y cuentan con la resolución y medidas requeridas. Accesibilidad: La tipografía, medida de la página, compatibilidad con los distintos navegadores son elementos que se tomaron en cuenta a la hora de construir este sitio web.
Control y retroalimentación: El menú facilita la navegación del usuario, marcando claramente la sección en que se encuentra, así como garantizando acceso a las demás secciones de una manera fácil. El uso de “migas de pan” permite al usuario mantener una navegación fluida y lo mantiene siempre enterado de su posición en el sitio con respecto a las demás secciones.
106
Anexos Bocetos preliminares
107
Bocetos Tipogrรกficos
108
109
Bocetos estructuras para el sitio web
110
Libro de Marca
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
Herramienta de anĂĄlisis heurĂstico Preguntas del test:
141
142
143
144
145
146
147
148
Bibliografía Libros Chavez, Norberto, Introducción Zimmermann Asociados S.L. Editorial Gustavo Gili S.A. Barcelona, 1993. Chávez, Norberto. La imagen corporativa, Editorial Gili S.A. Barcelona 2001. Dabbs, Alistair y Campbell, Alastair. Biblia del diseñador digital. Editorial Tashen, Barcelona, 2005. Dondis, D.A. La sintaxis de la imagen. Editorial Gustavo Gili S.A., Barcelona 2002. Frascara, Jorge. Diseño gráfico y comunicación. Ediciones Infinito. Buenos Aires, 1994. Fuentes, Rodolfo. La práctica del diseño gráfico. Editorial Paidos, Buenos Aires, 2005. Götz, Veruschka (2002). Retículas para Internet y otros soportes digitales. Editorial Index Book. Lidwell, William, Holden, Kritina y Butler, Jill. Principios universales de diseño. Editorial Blume. Barcelona, 2008. Nielsen, Jakob y Loranger, Hoa. Usabilidad. Prioridad en el diseño Web [Prioritizing Web usability]. Editorial New Riders Press, Berkeley CA, 2006. Vázquez, Pablo. Creación de Sitios Web. MP Ediciones S.A., Buenos Aires, 2006.
149
Wassily Kandinsky. Punto y línea sobre el plano. Editorial Labor S.A., Barcelona, 1993.
Tesis Barrantes Acuña, Danny, Cambronero Kikisch, Denis, Guzmán Pérez, Steven, Parra Thompson, Carolina, Quirós Barrantes, Johan (2004). Universidad de Costa Rica. Estación Experimental Agrícola Fabio Baudrit Moreno. San José, Costa Rica: Universidad de Costa Rica. Bogarín Benavides, María Gabriela (2006). Sitio Web del Instituto Nacional de Biodiversidad (INBio) para Niños y Niñas. San José, Costa Rica: Universidad de Costa Rica. Salas Rodríguez, Karen (2009). Diseño de línea gráfica y sitio web para la Asociación para el Desarrollo de la Cultura y el Ambiente de la Región Huetar Norte. Alajuela, Costa Rica: Universidad de Costa Rica.
Revistas Guevara Mora, Gabriela. ¿Qué se necesita para crear un sitio web? Revista InterSedes, vol. 6, Nº 11, p. 87-98. Nielsen, Jacob, Usabilidad: sus leyes y excepciones. Revista One Click, año 1, Nº 4, p. 10-11.
150
Raúl de Oliveira, Construyendo páginas. Revista One Click, año 1, Nº 30, p. 2223. Referencias web Berners-Lee [et al] Architecture of the World Wide Web, Volume One. Version 2004 1215.W3C (December 15, 2004). Sun Microsystems, Inc. Recuperado de http://www.w3.org/TR/webarch/ (consultado el día 22 de junio del 2010) Documento web. Berlin Principles on Ranking of Higher Education Institutions http://www.che.de/downloads/Berlin_Principles_IREG_534.pdf,
recuperado
de:
http://www.webometrics.info/index_es.html
Jakob, Nielsen (2007) Heurística de usabilidad de Nielsen.Recuperado de http://ingridnf.wordpress.com/2007/02/11/heuristica-de-usabilidad-de-nielsen/
Página web del Instituto nacional de Tecnología Maulaza Azad. Bopal, India. (http://www.manit.ac.in) (consultado el día 23 de julio del 2010) Página web de la Universidad de Brasilia. (http://www.unb.br/exaluno) (consultado el día 21 de junio del 2010) Página
web
de
la
Universidad
de
Buenos
Aires,
Argentina.
(http://www.uba.ar/homepage.php) (consultado el día 22 de junio del 2010) Página web de la Universidad de Cambridge, Estados Unidos de América. (http://www.cambridge.edu) (consultado el día 22 de junio del 2010)
151
Página
web
de
la
Universidad
Cornell,
Estados
Unidos
de
América.
(http://www.cornell.edu) (consultado el día 20 de junio del 2010) Página
web
de
la
Universidad
de
Costa
Rica,
Sede
de
Occidente.
(http://www.so.ucr.ac.cr) (consultado el día 21 de junio del 2010) Página
web
de
la
Universidad
Federal
de
Santa
Catarina,
Brasil
(http://www.ufsc.br) (consultado el día 23 de junio del 2010) Página web de la Universidad de Harvard, Estados Unidos de America. (http://www.harverd.edu) (consultado el día 24 de junio del 2010) Página web de la Universidad Oeste de Paraná, Brasil (http://www.unioeste.br/) (consultado el día 24 de junio del 2010) Página web de la Universidad de Sao Paulo, Brasil (http://www4.usp.br/index.php/home) (consultado el día 21 de junio del 2010) Página web de la Universidad de Stanford, Estados Unidos de América. (http://www.stanford.edu) (consultado el día 24 de junio del 2010) Página web de la Universidad de Talca, Chile (http://www.utalca.cl/link.cgi/) (consultado el día 28 de junio del 2010) Página web de la Universidad de
Washington, Estados Unidos de América.
(http://www.washington.edu) (consultado el día 19 de junio del 2010) Polo, Luciano (2003) World Wide Web Technology Architecture: A Conceptual Analysis. Recuperado de http://newdevices.com/publicaciones/www/ch01.html
152
(consultado el día 21 de junio del 2010) Real Academia Española Recuperado de: http://buscon.rae.es/draeI/SrvltConsulta?TIPO_BUS=3&LEMA=heur%EDstico
153