Manual Diseño Web 2014 c1

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
Manual de diseño UC web
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

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

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.
Visualización ilustrativa para medida estándar (1024 x 768px).
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.
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
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
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.
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
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 Enlace Ventana

ítem
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 http://www.uc.cl/webpuc/site/launiversidad/autoridades/secre Nueva ventana

General tariageneral/
Pastoral UC http://www.pastoraluc.cl/web/index/ Nueva ventana
Nueva http://observatorionuevaevangelizacion.uc.cl/wp/ Nueva ventana

Evangelización
Organización http://www.uc.cl/es/la‐universidad/organizacion Misma ventana
Principios http://www.uc.cl/webpuc/site/launiversidad/autoridades/secre Misma ventana

UC tariageneral/pdf/reglamentos/declaraciondeprincipios.pdf
Estatutos UC http://www.uc.cl/images/pdf/estatutos_generales.pdf Nueva ventana
Hechos y http://www.uc.cl/es/la‐universidad/campus Misma ventana

cifras
Premios http://www.uc.cl/es/la‐universidad/premios‐nacionales Misma ventana

Nacionales
Noticias UC http://www.uc.cl/index.php?option=com_content&view=categ Misma ventana

ory&id=1&Itemid=147&lang=es
Mecesup http://mecesup.uc.cl/ Misma ventana
Prospectus http://www7.uc.cl/english/prospectus/ Misma ventana

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 http://www.uc.cl/agronomia/
Forestal
Facultad de Arquitectura, Diseño y http://fadeu.puc.cl/
Estudios Urbanos
‐ Escuela de Arquitectura http://arquitectura.uc.cl/
http://diseno.uc.cl/
‐ Escuela de Diseño
http://www.estudiosurbanos.uc.cl/
‐ Instituto de Estudios Urbanos
Facultad de Artes http://www.uc.cl/artes/
‐ Escuela de Arte http://escuelaarte.uc.cl/
‐ Escuela de Teatro http://teatro.uc.cl/
‐ Instituto de Música http://musica.uc.cl/
Facultad de Ciencias Biológicas http://www.bio.puc.cl/
Facultad de Ciencias Económicas y http://www.faceapuc.cl/
Administrativas
‐ Escuela de Administración http://escueladeadministracion.uc.cl/
http://www.economia.puc.cl/
‐ Instituto de Economía
Facultad de Ciencias Sociales http://www.uc.cl/es/facultades/ciencias‐sociales
‐ Escuela de Psicología http://psicologia.uc.cl/
‐ Escuela de Trabajo Social http://www6.uc.cl/trabajosocial/site/edic/base/port/in
icio.php
‐ Instituto de Sociología 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 http://www.uc.cl/es/facultades/filosofia
‐ Instituto de Filosofía http://filosofia.uc.cl/
‐ Instituto de Estética http://estetica.uc.cl/
Facultad de Física http://fisica.uc.cl/
Facultad de Historia, Geografía y Ciencia http://www.uc.cl/historiageografiaycienciapolitica/
Política
‐ Instituto de Historia http://historia.uc.cl/
http://www.geo.puc.cl/
‐ Instituto de Geografía
http://www.cienciapolitica.uc.cl/
‐ Instituto de Ciencia Política
Facultad de Ingeniería http://www.uc.cl/es/facultades/ingenieria
‐ Escuela de Construcción Civil http://www7.uc.cl/construc_civil/site/edic/base/port/i
nicio.html
‐ Escuela de Ingeniería http://www.ing.puc.cl/
Facultad de Matemática http://www.mat.puc.cl/
Facultad de Medicina http://www.facultadmedicinauc.cl/
‐ Escuela de Enfermería http://enfermeria.uc.cl/
‐ Escuela de Medicina 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/
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.
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.
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.
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:

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

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.
Ejemplos de fotografías usadas en la web UC

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.
Ejemplo de fotos que NO se deben usar

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.
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:
Anexo: autorización de uso de imagen
PONTIFICIA UNIVERSIDAD CATÓLICA DE CHILE

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.
Datos de quien autoriza:
Fecha :
Nombre :
Rut :
Teléfono :
Firma :
AV. LIB. BERNARDO O'HIGGINS 340 , T E L É F O N O 23542777 , w w w u c . c l , S A N T I A G O ‐ C H I L E

Manual Diseño Web 2014 c1

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Manual Diseño Web 2014 c1

Transféré par

Droits d'auteur :

Formats disponibles

Manual de diseño web

Preparado por la Dirección Web UC

Capítulo 1: elementos inamovibles

02 Marca del browser o navegador

03 Uso del header UC

Agrupaciones orientadas al usuario externo

Nombre de 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 http://www.uc.cl/webpuc/site/launiversidad/autoridades/secre Nueva ventana

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

Nueva http://observatorionuevaevangelizacion.uc.cl/wp/ Nueva ventana

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

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

Hechos y http://www.uc.cl/es/la‐universidad/campus Misma ventana

Premios http://www.uc.cl/es/la‐universidad/premios‐nacionales Misma ventana

Noticias UC http://www.uc.cl/index.php?option=com_content&view=categ Misma ventana

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

Prospectus http://www7.uc.cl/english/prospectus/ Misma ventana

Agrupaciones orientadas al usuario interno

04 Uso del footer UC

2. Políticas de privacidad y mapa del sitio

3. Optimización para navegadores

Ejemplos de fotografías usadas en la web UC

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

Ejemplo de fotos que NO se deben usar

Copyright de las fotografías

07 Uso de marca UC para dispositivos móviles

PONTIFICIA UNIVERSIDAD CATÓLICA DE CHILE

AV. LIB. BERNARDO O'HIGGINS 340 , T E L É F O N O 23542777 , w w w u c . c l , S A N T I A G O ‐ C H I L E

Vous aimerez peut-être aussi