Manual de diseño web Sitio web UC

Texto completo

(1)

Manual de diseño web

Sitio web UC

Versión preliminar

Preparado por la Dirección Web UC

Vicerrectoría de Comunicaciones y Educación Continua Enero 2014

(2)

Contenido

 

Capítulo 1: elementos inamovibles ... 3 

01 Resolución ... 5 

02 Marca del browser o navegador ... 6 

03 Uso del header UC ... 7 

Zona de marca UC ... 8 

Zona de marca logo ... 9 

Barra de menú UC 1 ... 10 

Agrupaciones orientadas al usuario externo ... 11 

Agrupaciones orientadas al usuario interno ... 16 

Barra de menú UC 2 ... 17 

04 Uso del footer UC ... 18 

05 Paleta de colores ... 20 

06 Estilo fotográfico ... 21 

Formatos de fotos ... 21 

Estilos de fotos ... 21 

Ejemplos de fotografías usadas en la web UC ... 22 

Copyright de las fotografías ... 27 

07 Uso de marca UC para dispositivos móviles ... 28

 

 

 

Anexo: Autorización de uso de imagen 

 

(3)

Capítulo 1: elementos inamovibles

En el presente capítulo se da cuenta de una serie de lineamientos considerados obligatorios y que  corresponden a criterios que deberán ser cumplidos exhaustivamente por quienes desarrollen  sitios web y contenidos móviles para proyectos adheridos a la marca UC. Tal como se explicitó  anteriormente, su incumplimiento puede radicar en la no incorporación del sitio a la red UC y, por  lo tanto, su retiro de la web.    Se consideran como sitios web adheridos a la marca UC todos aquellos que se encuentren bajo  el dominio uc.cl o que pertenezcan a:  ‐ Unidades académicas  ‐ Unidades administrativas  ‐ Unidades de servicio  ‐ Facultades, escuelas e institutos  ‐ Programas de pregrado  ‐ Programas de postgrado  ‐ Programas de postítulo  ‐ Programas de doctorado  ‐ Programas de Educación Continua  ‐ Programas de investigación  ‐ Centros de investigación  No se consideran como parte de la marca UC aquellas organizaciones o departamentos que se  encuentren en la categoría de organizaciones vinculadas, es decir:  ‐ Red de Salud UC  ‐ Duoc UC  ‐ Fundación de Vida Rural UC  ‐ Canal 13  ‐ DICTUC 

(4)

‐ Fundación Copec UC  ‐ Empresas UC  ‐ Iglesia  Se consideran como elementos obligatorios los temas referidos a:  1. Resolución  2. Uso de la marca en el browser o navegador  3. Uso del  Header UC  4. Uso de menú UC  5. Paleta de colores UC  6. Uso del Footer  7. Uso de logo UC para dispositivos móviles       

(5)

01 Resolución

 

Se establece como normativa el formato de pantalla (resolución) estándar 1024 px X 768 px,  centrado, para todos los diseños de interfaces de webs adheridas a la UC.  

(6)

02 Marca del browser o navegador

La marca debe aparecer en el marco superior de la página, a manera de cabecera, en  mayúsculas, tal como se encuentra en la figura. 

(7)

03 Uso del header UC

Se considera obligatorio el uso del HEADER UC en todas las webs adheridas al sitio de la UC.  El Header UC en la zona superior se compone de cuatro elementos:  Zona de marca UC  Zona de marca  Barra de menú UC 1  Barra de menú UC 2 

(8)

Zona de marca UC

  Se caracteriza por tener el logo de la universidad, sobre fondo azul #2f549e y se ubica al costado  izquierdo de la pantalla.  La zona de marca UC mide 140 px de alto y 200 px de ancho y debe mantener esas medidas.  Dicha zona debe vincular a www.uc.cl 

(9)

Zona de marca

Se considera zona de marca a la zona donde va el nombre de la facultad, escuela, centro o  programa que acompaña a la marca UC, tal como se muestra en la figura.  Esta zona mide 764 px de ancho y 67 px de alto.  El diseño del logo de cada facultad deberá ser desarrollado por el Departamento de Diseño  Corporativo UC a cargo de Soledad Hola. 

(10)

Barra de menú UC 1

Se considera barra de menú UC a la barra que acompaña al logo y va en el extremo superior de la  página a la derecha de la zona de marca, tal como se muestra en la figura.  Esta barra mide 724 px de ancho y 25 px de alto y dispone de 2 zonas:   Agrupaciones orientadas al usuario externo   Agrupaciones orientadas al usuario interno 

(11)

Agrupaciones orientadas al usuario externo

  Son 5 categorías que enlazan a informaciones de interés para un usuario externo a la comunidad UC.  La Universidad Despliega un submenú con enlaces a una serie de informaciones sobre la universidad. El submenú  es:  Nombre de

 

ítem Enlace Ventana

Historia http://www.uc.cl/es/la‐universidad/historia Misma ventana

Rectoría http://rectoria.uc.cl/ Nueva ventana

Autoridades http://www.uc.cl/es/la‐universidad/autoridades Misma ventana Secretaría

 

General

http://www.uc.cl/webpuc/site/launiversidad/autoridades/secre

 

tariageneral/

Nueva ventana

Pastoral UC http://www.pastoraluc.cl/web/index/ Nueva ventana Nueva 

Evangelización

 

http://observatorionuevaevangelizacion.uc.cl/wp/ Nueva ventana Organización http://www.uc.cl/es/la‐universidad/organizacion Misma ventana Principios

 

UC

http://www.uc.cl/webpuc/site/launiversidad/autoridades/secre

 

tariageneral/pdf/reglamentos/declaraciondeprincipios.pdf

Misma ventana

Estatutos UC

 

   http://www.uc.cl/images/pdf/estatutos_generales.pdf Nueva ventana

Hechos y

 

cifras http://www.uc.cl/es/la‐universidad/campus Misma ventana Premios  Nacionales

 

http://www.uc.cl/es/la‐universidad/premios‐nacionales Misma ventana Noticias UC http://www.uc.cl/index.php?option=com_content&view=categ

 

ory&id=1&Itemid=147&lang=es Misma ventana

(12)

Mecesup

 

http://mecesup.uc.cl/ Misma ventana

(13)

Facultades Despliega un submenú con enlaces a las webs de las facultades de la UC. Todas las páginas deben  abrir en ventana nueva. En el caso de las facultades que tengan escuelas, hacer un submenú con  los enlaces respectivos, como se observa en la imagen:        Nombre de ítem Enlace Facultad de Agronomía e Ingeniería

 

Forestal http://www.uc.cl/agronomia/ Facultad de Arquitectura, Diseño y

 

Estudios Urbanos

 

  ‐ Escuela de Arquitectura   ‐ Escuela de Diseño   ‐ Instituto de Estudios Urbanos http://fadeu.puc.cl/ http://arquitectura.uc.cl/

 

  http://diseno.uc.cl/

 

  http://www.estudiosurbanos.uc.cl/ Facultad de Artes

 

 ‐ Escuela de Arte ‐  Escuela de Teatro ‐  Instituto de Música http://www.uc.cl/artes/ http://escuelaarte.uc.cl/

 

http://teatro.uc.cl/

 

http://musica.uc.cl/ Facultad de Ciencias Biológicas http://www.bio.puc.cl/

(14)

Facultad de Ciencias Económicas y

 

Administrativas

 

 ‐ Escuela de Administración

 

 ‐ Instituto de Economía

 

http://www.faceapuc.cl/ http://escueladeadministracion.uc.cl/

 

http://www.economia.puc.cl/ Facultad de Ciencias Sociales

 

 ‐ Escuela de Psicología ‐  Escuela de Trabajo Social ‐  Instituto de Sociología http://www.uc.cl/es/facultades/ciencias‐sociales http://psicologia.uc.cl/

 

http://www6.uc.cl/trabajosocial/site/edic/base/port/in icio.php

 

http://www7.uc.cl/sociologia/

 

Facultad de Comunicaciones http://comunicaciones.uc.cl/ Facultad de Letras http://www.uc.cl/letras/ Facultad de Derecho http://derecho.uc.cl/ Facultad de Educación http://educacion.uc.cl/ Facultad de Filosofía

 

‐ Instituto de Filosofía ‐ Instituto de Estética http://www.uc.cl/es/facultades/filosofia http://filosofia.uc.cl/

 

http://estetica.uc.cl/ Facultad de Física http://fisica.uc.cl/ Facultad de Historia, Geografía y Ciencia Política

 

 ‐ Instituto de Historia  ‐ Instituto de Geografía ‐  Instituto de Ciencia Política   http://www.uc.cl/historiageografiaycienciapolitica/ http://historia.uc.cl/

 

http://www.geo.puc.cl/

 

http://www.cienciapolitica.uc.cl/ Facultad de Ingeniería ‐  Escuela de Construcción Civil ‐  Escuela de Ingeniería http://www.uc.cl/es/facultades/ingenieria http://www7.uc.cl/construc_civil/site/edic/base/port/i nicio.html

 

http://www.ing.puc.cl/ Facultad de Matemática http://www.mat.puc.cl/ Facultad de Medicina

 

‐ Escuela de Enfermería ‐ Escuela de Medicina http://www.facultadmedicinauc.cl/ http://enfermeria.uc.cl/

 

http://medicina.uc.cl/ Facultad de Química http://www.quimica.uc.cl/ Facultad de Teología http://www.uc.cl/teologia/ Sede regional Villarrica http://villarrica.uc.cl/

(15)

College UC  http://college.uc.cl/  Organizaciones vinculadas Enlaza a una página con información sobre organizaciones vinculadas. El enlace va a  http://www.uc.cl/es/organizaciones‐vinculadas en la misma ventana.  Bibliotecas Enlaza la página de la Biblioteca, disponible en  http://sibuc.uc.cl/sibuc/site/edic/base/port/inicio.php en ventana nueva.  English Enlaza a la versión en inglés en ventana nueva. 

(16)

Agrupaciones orientadas al usuario interno

Son 2 categorías que enlazan a informaciones de interés para un usuario interno a la comunidad  UC.  Mi Portal UC Enlaza al acceso a la Intranet, Mi Portal UC, disponible en  https://sso.uc.cl/cas/login?service=https://portaluc.puc.cl/uPortal/Login. El enlace debe abrir en  la misma ventana.  Correo UC

Enlaza directamente al correo UC, disponible en https://webaccess.uc.cl/ . El enlace debe abrir en la  misma ventana. 

(17)

Barra de menú UC 2

Se caracteriza por ubicarse debajo de la zona de logo y contiene el menú principal de la escuela,  facultad, centro, instituto o programa, tal como se ve en la figura:    El contenido del menú queda a criterio del usuario, pero DEBE aplicarse con las medidas de 724px  de ancho y 25 px de alto.

(18)

04 Uso del footer UC

  Se ubica al final de la página, justo debajo del fin de los contenidos, tal como se ve en la figura:       

(19)

El footer mide 982 px de ancho y 76 px de alto y se trata de una franja gris color #a2a2a2, con  tipografía Verdana, tamaño 10, en color #FFFFFF.  El footer incluye tres tipos de contenidos:  1. Dirección y teléfonos Incluye la dirección de la facultad o unidad y el teléfono de su mesa central. La dirección es de la  facultad o la unidad, no es la de la universidad.  2. Políticas de privacidad y mapa del sitio

Las políticas de privacidad direccionan a la url http://www.uc.cl/es/politicas‐de‐privacidad donde  se encentran descritas las políticas de privacidad comunes a todos los sitios asociados a la marca  UC. El vínculo debe abrir en la misma ventana.  El mapa del sitio está referido a un html que contenga un mapa con todas las secciones relativas al  sitio con que se trabaja. El vínculo debe abrir en la misma ventana.  3. Optimización para navegadores Se encuentra dentro de lo sugerido para las webs asociadas a la marca UC y se trata de una tercera  línea de texto donde se destaque él o los navegadores para los cuales ha sido diseñado el sitio en  su visualización óptima. Se sugiere no incluir dentro de esos navegadores a Internet Explorer  versión 6, ya que esta versión ha sido descontinuada  por el mismo fabricante. 

(20)

05 Paleta de colores

La paleta de colores de la web UC se basa en los equivalentes en RGB de la paleta de colores  asociados a la marca. 

En orden de jerarquía dentro de una página el uso de colores es el siguiente: 

 

Jerarquía  Color  Código html Color resultante

1º   blanco  #FFFFFF 2º   azul  #3D7EDB 3º   azul claro  #C5D7EB 3º   amarillo  #FCD900 4º   gris  #555555 5º   negro  #000000  

No se permite el uso de colores que no se encuentren contenidos en la paleta antes 

descrita. 

 

Nota: El actual sitio web UC fue hecho conforme a un manual de estilo anterior, por 

tanto, la paleta de colores que se utilizó es diferente. No obstante, todos los sitios nuevos 

deberán hacerse conforme al lineamiento actualizado.   

Ejemplo: 

 

 

 

(21)

06 Estilo fotográfico

Formatos de fotos

Cabe destacar que las fotografías web deben presentarse en formatos JPG, GIF o PNG en calidad  media a alta, privilegiando la calidad y procurando que tengan un peso aceptable para un rápido  despliegue en la web. Se considera como peso aceptable aquel que permita el despliegue de las  fotografías en menos de 3 segundos. 

Estilos de fotos

En cuanto al estilo fotográfico, las fotos deben cumplir las siguientes especificaciones:  ‐ Las fotografías deben verse luminosas, nítidas, con colores puros.  ‐ En aquellos casos en que las fotografías muestren personas, se debe transmitir una idea de  “vínculo o conexión”: los personajes deben interactuar entre sí o con el espectador a través  de la mirada. Las personas se deben mostrar sonriendo, divertidas, cercanas, alegres.  ‐ Privilegiar las tomas espontáneas y evitar las composiciones forzadas, con el  objetivo de transmitir frescura y naturalidad.  ‐ Los conceptos transmitidos deben estar alineados con los atributos de marca.  ‐ Las fotografías deben mostrar situaciones, escenarios y personajes creíbles. 

(22)
(23)
(24)
(25)

Las fotografías NO deben cumplir los siguientes parámetros:

‐ El uso de personajes que no interactúen entre sí o dirijan la mirada fuera de cámara. Se  debe generar complicidad y un vínculo con el receptor.  ‐ Las fotografías oscuras o lúgubres.  ‐ Filtros, bicromías, recortes, velos sobre la totalidad de las fotografías o virados sobre el  color de las imágenes.  ‐ Personajes que tengan una actitud indiferente o extrema: euforia, tristeza,  agresividad, violencia, etc.  ‐ Fotografías que transmitan la idea de caos o cansancio.  ‐ Imágenes recortadas sobre fondos gráficos.  ‐ Fotografías en blanco y negro.  ‐ Abuso de las tomas cenitales o de las deformaciones logradas con lentes del tipo “ojo de  pez”.  ‐ Uso de fotografías multitudinarias a fin de transmitir una idea de contacto cercano y  personalizado. 

(26)
(27)

Copyright de las fotografías

Los derechos de publicación de las fotografías que se despliegan tanto en la web corporativa  como en las webs adheridas a la marca UC deben pertenecer a las unidades que desarrollen las  mencionadas webs, es decir, no se permite el uso de fotografías cuyos derechos pertenezcan a  terceras personas y no hayan sido autorizadas para su uso. El incurrir en esta práctica es  considerado ilegal y viola los derechos de autor de las obras utilizadas.  Además, toda persona que aparezca en una fotografía, tanto en entorno privado como público,  debe autorizar el uso de su imagen en plataformas web. Con este propósito se adjunta en el  presente manual el documento de “Autorización de uso de imagen” (disponible en Anexos) que  deberán firmar todas las personas que salgan en las fotografías desplegadas en la web UC y en sus  webs asociadas. La firma y archivo de los documentos de autorización de uso de imagen serán de  responsabilidad exclusiva de las unidades desarrolladoras de las webs. Por su parte, la Dirección  Web UC, dependiente de la Vicerrectoría de Comunicaciones, podrá solicitar dichos documentos  para su revisión, cuando lo estime así conveniente. 

(28)

 

07 Uso de marca UC para dispositivos móviles

  El uso de la marca UC en dispositivos móviles deberá ajustarse a lo señalado en el Manual de Uso  de la Marca UC definido por la Dirección de Diseño y Marketing de la universidad.  Todo nuevo logo o ícono para dispositivos móviles, en cualquiera de los sistemas operativos  definidos actualmente en el mercado, deberá ser conceptualizado y diseñado por la Dirección de  Diseño de la universidad.  Ejemplo de uso de marca como ícono  Ejemplo de uso de marca como app en el itunes App Store: 

(29)
(30)

P

O N T I F I C I A

U

N I V E R S I D A D

C

A T Ó L I C A D E

C

H I L E

En  Santiago  de  Chile,  por  medio  del  presente  instrumento  el  suscrito, 

   _,  (representado  en  este  acto  por 

   _) manifiesto mi voluntad de participar en la  producción  del  proyecto/programa  “    ”    realizado  por  la  Vicerrectoría de Comunicaciones y Educación Continua UC, en adelante también la  Vicerrectoría,  por sí  o a través de los terceros que estime del caso. 

Con motivo de la referida participación, autorizo y acepto que se grabe y utilice mi imagen  en  video,  se  me  fotografíe  y  se  registre  mi  voz,  declarando  que  la  Productora  será  el  dueño  exclusivo  por  el  máximo  de  protección  legal  de  dichas  imágenes,  fotografías y  declaraciones,  pudiendo  publicarlas,  grabarlas,  producirlas,  reproducirlas,  editarlas,  adaptarlas,  ejecutarlas  públicamente, transmitirlas y retransmitirlas, en Chile y el extranjero.  Lo anterior tiene como única limitación que el material a que se refiere este documento,  sólo podrá ser utilizado para el proyecto/programa “  ”,  de  manera que cualquier uso distinto requerirá autorización.  Por los derechos antes indicados no se generará  ningún tipo de pago o contraprestación.  Lo anteriormente declarado, es aceptado por la Vicerrectoría a través de su representante. 

(31)

Datos de quien autoriza:  Fecha  :     Nombre  :     Rut  :     Teléfono  :     Firma  :    

Figure

Actualización...

Referencias

Actualización...