Autor:

Mtro. Marco Antonio Sierra Gallardo

Ilustradores:
L.D.C.G. Angie Fernndez Olimn
L.D.C.G. Omar Crdenas Lpez
Jos Gerardo Garca Mercado
Primera edicin, 2014
Derechos reservados 2014 Universidad de Guadalajara
Coordinacin General de Tecnologas de Informacin
Av. Jurez 976, Piso 2, Col. Centro, C.P. 44100
Guadalajara, Jalisco, Mxico
ISBN: 978-607-450-932-8
Hecho en Mxico

Identidad grfica para

el Web
Consolidar una identidad grfica comn en los sitios web es uno de
los objetivos esenciales en el Modelo Web. Con el uso sistematizado
de elementos grficos tales como imgenes, colores, retculas y
tipografa se busca obtener una presentacin agradable y ayudar a
la difusin efectiva de las ideas e informacin a las personas que
utilizan los sitios web universitarios.
El empleo de una identidad grfica consistente ayuda a entender la
estructura y organizacin de una institucin.

Si utilizamos una analoga deportiva es como el caso de un equipo

de futbol: cada integrante del equipo, jugadores, cuerpo tcnico y
asistentes viste de forma que es fcil identificar cul es su funcin en
el equipo.
Para alcanzar estos objetivos se defini una estrategia a seguir que
consiste en el uso de una retcula de composicin comn para todos
los sitios web y con el uso de una gama cromtica es identificada
cada dependencia, sistema educativo y centro universitario.

Gua de estilo para sitios web 2014

Ubicacin del tema DRUDG 7

El tema que se emplea en los sitios web universitarios viene incluido en la copia de distribucin para los sitios web universitarios. Los archivos
que componen el tema DRUDG 7 se encuentran ubicados en el siguiente directorio donde se encuentra instalado Drupal:
/sites/all/themes/drudg7.
Para conocer ms acerca del tema en Omega 3, https://drupal.org/node/1768696
14

Gua de estilo para sitios web 2014

Estructura de la pgina de
DRUDG 7
Por defecto Drupal 7 tiene 3 secciones principales que se llaman
Encabezado, Contenido y Pie de pgina, cada una de ellas tiene
zonas que a su vez contienen regiones en donde se puede colocar el
contenido.
A continuacin se explica el uso de cada una de ellas.

Seccin Encabezado
Zona User
Regin User Bar First.
#region-user-bar-first , 8 columnas
Para uso exclusivo del escudo y leyenda de la Universidad de
Guadalajara.
Regin User Bar Second
#region-user-bar-second , 4 columnas
Para uso exclusivo del buscador del sitio.

Zona Men
Regin Men
#region-menu , 12 columnas
Para uso exclusivo del men principal del sitio web.

Zona Header
Regin Header First
#region-header-first , 6 columnas
Pueden colocarse bloques que se muestran antes del contenido
principal, pero que slo abarquen la mitad de la pantalla.
Regin Header Second
#region- header-second, 6 columnas
Pueden colocarse bloques que se muestran antes del contenido
principal, pero que slo abarquen la mitad de la pantalla.

Zona Branding
Regin Branding
#region-branding , 12 columnas
Para uso exclusivo del encabezado principal del sitio web.

15

Gua de estilo para sitios web 2014

Seccin Contenido

Seccin Pie de Pagina

Zona Preface

Zona Footer

Regin Preface First

#region-preface-first , 12 columnas
Pueden colocarse bloques que se muestran antes del contenido
principal.

Zona Content
Regin Sidebar First
#region-sidebar-first , 3 columnas
Pueden colocarse bloques que se mostrarn en la columna
izquierda, como fotografas o contenido multimedia
Regin Contenido
#region-content , 6 columnas
Pueden colocarse bloques que se mostrarn antes del
contenido principal de la pgina.
Regin Sidebar Second
#region-sidebar-second , 3 columnas
Pueden colocarse bloques que se mostrarn en la columna derecha,
como mens y anuncios.
16

Regin Footer First

#region-footer-first , 12 columnas
Pueden colocarse bloques que se mostrarn despus del contenido
principal.
Regin Footer Second
#region-footer-second , 12 columnas
Este espacio est reservado para mostrar la firma del sitio web, con
los datos de la dependencia, los mens primarios y secundarios y
la informacin de crditos y polticas del sitio.

Gua de estilo para sitios web 2014

Uso del escudo

El escudo de la Universidad de Guadalajara es el elemento ms importante dentro del diseo de los sitios web universitarios por este motivo
su uso debe ser cuidado, para no debilitar la imagen de la institucin.
Para su uso se tendr en cuenta las disposiciones que estn descritas en el Manual de Identidad Institucional disponible en http://www.
identidadinstitucional.udg.mx
En la plantilla del tema DRUDG 7, el escudo siempre estar presente en el encabezado del sitio y en la firma del sitio y no podr ser sustituido
o combinado con otro smbolo o logotipo. Estas son sus caractersticas:

En el encabezado

Es el primer uso visible del escudo en el sitio web, ubicado en la parte

superior derecha. En Drupal 7 el archivo est en la regin User Bar
First y se puede encontrar en el bloque bloque_logo_udg.
Se muestra el escudo a color con el texto Universidad de Guadalajara
y la leyenda Red Universitaria de Jalisco en altas y bajas justificada
al centro; deber mostrarse sobre fondo blanco.
Sus dimensiones son 350 x 82 pixeles.

18

En la firma del sitio

En la parte inferior de la pgina se incluye la informacin de contacto

institucional de la dependencia, que se emplea como identificacin y
modo de contacto con la dependencia. El uso del escudo es en grises,
con la leyenda Red Universitaria de Jalisco en altas y bajas justificada
a la izquierda; la informacin que debe incluirse es la siguiente:
Nombre completo de la dependencia o centro
universitario al que est adscrita la entidad que firma el sitio web.
Nombre completo de la dependencia que firma el sitio web
Nombre de la subdependencia o departamento (si es el caso)
Direccin, nmero, colonia, cdigo postal, ciudad, estado y pas.
Telfono de contacto: Lada internacional +
(Clave lada de ciudad) + telfono + extensin.
Ejemplo: 01 (52) 33 3134 2221 extensin 00000

Gua de estilo para sitios web 2014

Tipografa
Asegurarse que la informacin sea legible debe ser uno de los
objetivos de cualquier sitio web universitario. Debido a que los
visitantes del sitio leern la informacin en una pantalla se tendr
que tomar algunas consideraciones para hacer ms cmoda la
experiencia.

Ttulo nivel 1 (H1)

Debe tenerse en cuenta que del formato que tenga el documento

web depender la forma en que los sistemas informticos
como por ejemplo los motores de bsqueda interpreten y valoren
la informacin; es por este motivo que se recomienda el uso de
etiquetas HTML para determinar la jerarqua del texto.

Ttulo nivel 2 (H2)

Los sitios web universitarios debern emplear los siguientes estilos

para el texto en la pgina web.

Ttulo nivel 3 (H3)

Prrafos y listas
Fuentes: Open sans, Lucida grande, Tahoma, Verdana, Arial, sansserif
Tamao: 13px
Altura de lnea: 1.6em

Prrafo texto pequeo permitido

Fuentes: Open sans, Lucida grande, Tahoma, Verdana, Arial, sansserif
Tamao: 11px
Altura de lnea: 1.6em
20

Fuentes: Noticia Text, serif

Tamao: 30px
Altura de lnea: 1.2em

Fuentes: Noticia Text, serif

Tamao: 27px
Altura de lnea: 1.2em

Fuentes: Noticia Text, serif

Tamao: 22px
Altura de lnea: 1.2em

Ttulo nivel 4 (H4)

Fuentes: Open sans, Lucida grande, Tahoma, Verdana, Arial,
sans-serif
Tamao: 18px
Altura de lnea: 1.6em

Gua de estilo para sitios web 2014

Ttulo nivel 5 (H5)

Fuentes: Open sans, Lucida grande,
Tahoma, Verdana, Arial, sans-serif
Tamao: 14px
Altura de lnea: 1.6em

Noticia Text

Sans-serif

Open sans

Ttulo nivel 6 (H6)

Fuentes: Open sans, Lucida grande,
Tahoma, Verdana, Arial, sans-serif
Tamao: 13px
Altura de lnea: 1.6em

Lucida grande

Encabezado del sitio

Tahoma
Fuentes: Open sans, Lucida grande,
Tahoma, Verdana, Arial, sans-serif
Tamao: 36px
Verdana

Arial

21

Gua de estilo para sitios web 2014

Banners
Utilizados para la promocin de servicios, actividades prximas,
secciones u otros sitios de inters, los banners pueden ser utilizados
en diferentes partes del sitio.
Debido a que los banners pueden ser compartidos entre los sitios
web universitarios se definieron los siguientes tipos de banner:

Minibanner

Anuncios de tipo carrusel

Evitar

Slideshow
Medidas: 960 x 190 pixeles
Ubicacin: Contenido.
Bloque que lo muestra: Slideshow > Slideshow Principal.
Observaciones: Este tipo de anuncio permite agregar un rengln
de texto que se muestra en la parte de abajo del anuncio. Tambin
se escala dependiendo del espacio disponible.

Anuncios de tipo fijo

Banner
Medidas: 260 x 90 pixeles
Ubicacin: Regiones Sidebar Second y Footer First.
Bloque que lo muestra: Banner > Banner lateral derecho y
Banner inferior.

22

Medidas: 110 x 38 pixeles

Ubicacin: Regiones Sidebar Second.
Bloque que lo muestra: Banner > Bloque Mini banner.

Agregar anuncios en la zona de encabezado.

Uso innecesario del escudo oficial en el
banner para evitar su repeticin.
Modificar las dimensiones de los banners.
Emplear imgenes sin tener derechos de uso.

Gua de estilo para sitios web 2014

Crditos
Mtro. Itzcatl Tonatiuh Bravo Padilla
Rector General
Dr. Miguel ngel Navarro Navarro
Vicerrector Ejecutivo
Dr. Luis Alberto Gutierrez Daz de Len
Coordinador General de Tecnologas de Informacin

Modelo Web de la Universidad de Guadalajara

Mtro. Jos Gpe. Morales Montelongo
Coordinador de Desarrollo
Mtra. Beatriz Veliz Plascencia
Jefa de la Unidad de Desarrollo y Apoyo a Sistemas de Gestin
LDCG Felipe Neville Calixto
Diseo y diagramacin
Mtro. Marco Antonio Sierra Gallardo
Arquitectura de informacin y documentacin del Modelo
Lic. Juan de Len Torres
Desarrollo
Lic. Oscar Daniel Alvarado Delgado
Desarrollo
Lic. Gustavo Adolfo Ogas vila
Desarrollo
LDCG Omar Crdenas Lpez
Diseo
LDI Silvana Cecilia Soffchi Marchini
Diseo
LDCG Angie Fernndez Olimn
Diseo
32

Contenidos
Mtro. Marco Antonio Sierra Gallardo
Ing. Luz Mara Virgen Aguilar
Revisin de estilo

Diseo editorial
LDCG Angie Fernndez Olimn
Diseo y diagramacin
Jos Gerardo Garca Mercado
Diseo
LDCG Omar Crdenas Lpez
Diseo

Gua de Estilo para Sitios Web Universitarios 2014

se termin de editar en enero de 2014
en los talleres de
Moti Soluciones impresas S. A. de C. V.
Calle 8 No. 2566
Zona Industrial, Guadalajara, Jalisco, Mxico.