Manual de Imagen

para Sitios de Internet

del Gobierno Federal
El presente manual ha sido elaborada por el Sistema Internet de la Presidencia de la
Coordinación de Comunicación Social de Presidencia de la República.

La información original contenida en el presente documento es propiedad del Sistema

Internet de la Presidencia y la misma se encuentra disponible bajo una licencia Creative
Commons BY-NC-ND 2.5 México.

Algunos Derechos Reservados.

Sistema Internet de la Presidencia.
México, 2007.
 Manual de Imagen
para Sitios de Internet
del Gobierno Federal
 índice

Introducción Níveles de Navegación pág. 6

Menú Principal
Elementos fijos pág. 1 Sub-Menús
Encabezado o Header Breadcrumb
Ejemplo Navegación
Menú Principal
Pie o Footer Zonas de Contenido pág. 8

Zonas de Contenido pág. 3 Uso de Micrositios pág. 8

(página principal)
Intranets y Sistemas pág. 8
Zona Central o Principal de Gestión Internos
Zona Secundaria
Zona Flexibles
Manejo de Documentos pág. 8
y Formatos Relacionados
Zona de Banners
Banners y su Interacción con Uso de Flash
los Menús Secundarios Formatos de Audio y Video
Manejo de Menús Secundarios Formatos de Texto

Uso de Plantillas para Organismos pág. 11

Uso de Color y Tipografía pág. 5 descentralizados y Empresas de
Participación Estatal
 Introducción

En los últimos años, el nivel en el que se encuentra el Gobierno Electrónico en México, en relación con otros Países, ha caído significativamente. Estudios del
Banco Mundial, de la Organización de las Naciones Unidas y de algunos Centros de Investigación como la Brown Univeristy dan claras muestras de esta
situación.

Tan sólo en un año, México cayó más de treinta posiciones en la escala realizada por el Center of Public Policy de la Brown University, debido básicamente a
que otros Países han avanzado a pasos agigantados en el desarrollo del E-Gobierno.

Tomando en cuenta estos factores y las observaciones realizadas por estas Entidades a nivel global. Como primer punto recomiendan contar con una única
Imagen Institucional para todos los Sitios de Gobierno, para lograr consistencia y facilitar la navegación a los visitantes de los Portales de la Admnistración
Pública Federal, el Sistema Internet de la Presidencia, desarrolló una serie de plantillas Web, sumamente flexibles, útiles y de fácil implementación para los
diferentes sectores del Gobierno Federal.

Cada elemento que conforma dichas plantillas está dispuesto con objetivos específicos. La modificación de los parámetros que se describen a continuación
provocaría una percepción errónea del mensaje y afectaría en forma negativa la Imagen Global que se desea transmitir a los usuarios de los Sitios de Internet
Gubernamentales.

El objetivo de este Manual es posicionar la Imagen Institucional de la Administración 2006-2012 y de esta forma darle personalidad al Gobierno en un medio
electrónico tan importante como lo es Internet.
1
Elementos Fijos
Estos elementos tienen por objetivo: crear consistencia y homogeneidad para lograr en el usuario una percepción de familiaridad al ingresar a cualquier Sitio Web del Gobierno
Federal pues generan un principio de orden que se refleja en la disposición de los elementos que auxiliarán al usuario durante su navegación en el Portal.
Existen 3 elementos o zonas que deben respetarse por completo en cuanto a diseño, tamaño y contenido. Se les llama elementos fijos porque deberán mantenerse en todo
momento durante la navegación del Sitio.

Encabezado Firma Institucional. Logotipo “México”.

ó Header.
El Encabezado se construye a partir
de la Firma Institucional, que funge
como el elemento más importante
de esta sección. Esta zona está
constituida por cuatro elementos
principales: Firma Institucional,
Logotipo “México”, Barra de
Herramientas de opciones comunes
a todas las Secretarías de Estado y
PGR y el Buscador, los demás
elementos visuales, que componen el
encabezado, están diseñados para
armonizar y enmarcar.
Debe colocarse en su versión completa, de acuerdo al
Manual de Identidad del Gobierno Federal, en la esquina
superior izquierda, en formato gif o jpg, con una medida
de 195 px de ancho por 130 px de altura.
Inicio Mapa de Sitio
www.secretaria.gob.mx
El logotipo deberá ser tomado directamente del Manual para
preservar las características tipográficas que se le han asignado,
y no tratar de reescribirlo con la fuente Eureka Sans. Se colocará
en la esquina superior derecha para señalar al usuario el País al
que pertenece el Sitio al que ha ingresado, el color de fondo
debe ser el color institucional, asignado en el Manual de Identidad
a cada Dependencia.
Buscar en el Sitio
Contacto English
Ir

A continuación se detalla cada uno Barra de Herramientas. Buscador.

de estos elementos.
Su función es brindar a los usuarios las mismas opciones de navegación presentes Debe ser colocado en la esquina superior
en todas las páginas de las Secretarias de Estado y PGR. Se compone de: Inicio, derecha, abajo del logotipo de “México”,
Mapa de Sitio, Contacto, Opciones de Idioma y Preguntas Frecuentes. No tal como aparece en la ilustración.
deberán agregarse más opciones al menú, ya que está destinado, únicamente, a
contar con elementos comunes de navegación para todos los Sitios Web del Para comprobar el correcto despliegue y
Gobierno Federal. funcionamiento de la casilla de búsqueda
es necesario realizar pruebas en diferentes
La sección superior de la Barra de Herramientas debe conservar el diseño tal navegadores.
como aparece en la plantilla seleccionada y quedar libre de elementos como
fotografías, banners o vínculos.
 2
Menú Principal
Como su nombre lo indica, el Menú Pricnipal, es el de mayor jerarquía
para los Sitios Web del Gobierno Federal. Se compone de los temas centrales
de cada Secretaría, por lo que debe hacerse un esfuerzo especial en la
elección y organización de los contenidos de este menú. Se recomienda
que no exceda de diez elementos y que se agrupen los contenidos de
forma lógica y útil, pensando en todo momento en satisfacer las
necesidades de los ciudadanos que visiten el Sitio.

Se coloca del lado izquierdo de la página en las variaciones de color que

le fueron asignadas a la Dependencia, en algunos casos podrá ser
utilizado en escala de grises. La decisión para la opción de color parte
de lograr un buen contraste visual entre fondo y texto.
Las opciones del Menú deberán escribirse en altas (mayúsculas) para
favorecer la lectura y darle la importancia que el menú requiere. Los
títulos deben ser cortos y describir de forma concreta el contenido de
esa sección.
Construimos Sitios para el Ciudadano, esa es la prioridad, por tal motivo
se debe evitar el uso de títulos técnicos que confundan al Ciudadano
promedio.

Pie o Footer
Ubicado en la parte inferior del Sitio Web, contiene la dirección física
de la Dependencia, teléfonos, dirección electrónica de contacto y
políticas de privacidad.
3
Zonas de Contenido (página principal)
Están construidas para que cada Dependencia defina su contenido a partir de su estrategia de comunicación, su buen manejo definirá el éxito del Portal.
Cada zona cuenta con un tamaño fijo e inalterable con el propósito de mantener el balance visual y la efectividad en la transmisión de los mensajes emitidos
por cada área. Existen cuatro zonas y están construidas a partir de jerarquías visuales propias de cualquier Sitio Web:

Zona Central o Principal

Es el eje central del Sitio. Contiene el servicio más importante que la Dependencia
ofrece al ciudadano. En este apartado deberá colocarse el mensaje central que
requiera dar a conocer la Dependencia. Dicho mensaje se adecuará a las necesidades
de comunicación fundamentales de la Entidad, por ejemplo, un programa o un
conjunto de programas sociales en el caso de SEDESOL, SAGARPA o SRA, una Sala
de Prensa en el Caso de Presidencia, un acceso a contenidos por tipo de audiencia
en el caso de SEGOB, etc.

Zona Secundaria
Esta zona es de gran importancia. Sirve para dar fuerza y soporte al eje principal
en la Estrategia de Comunicación de cada Secretaría. En este espacio deben
colocarse los contenidos que provoquen interés en el visitante recurrente del
Portal.

Zonas Flexibles
Zonas destinadas a ser apoyo a la comunicación. Son elementos dinámicos y de
oportunidad que le dan frescura a nuestro Sitio. Por ejemplo, menús secundarios,
encuestas, ligas a otros Sitios. Como su nombre lo indica, son áreas con gran
flexibilidad que ocupan un lugar importante dentro de la Página Principal del Sitio
Web Gubernamental. El buen manejo de esta zona da como resultado la cohesión de
todos los elementos de la Página de Inicio.

Zona de Banners
Conocemos como Banner a un elemento visualmente
atrayente, colocado generalmente en las páginas de inicio
de los Sitios Web, su función es promocionar algún tema
o programa específico de temporalidad definida.
La dimensión de los Banners para las plantillas del
Gobierno Federal será de 130 x 65 pixeles.
En el caso de las Secretarías de Estado, podrán descargar
los Banners obligatorios desde el Sitio Web del SIP,
www.sip.gob.mx.
Los Banners y su Interacción con
los menús secundarios
Ante la limitante en el número de banners para la
página principal existe como alternativa el uso
del Menú Secundario de Enlaces o Ligas.
Este Menú está destinado para listar los enlaces
a Sitios relacionados con el Portal de la Dependencia,
y se encuentra del lado Izquierdo bajo el Menú
Principal. Este Menú no es obligatorio pero es útil
para los Sitios que solían tener gran cantidad de
banners en la página principal.
4
Manejo de Menús Secundarios
Los Menús Secundarios son un importante
recurso para el manejo de los mensajes que
se ofrecen en la página principal. Cabe
señalar que al llamarles “secundarios” no
estamos degradando a estos elementos, al
contrario, la eficacia en su acomodo da
soporte y fuerza al mensaje que buscan dar
las Dependencias de la APF. En esta zona
podemos encontrar secciones como: Temas
de Interés, Información por Segmento de la
Población, Ligas, entre otros.

Un buen manejo de Banners en nuestro Sitio Web será un

factor esencial para la aplicación de la estrategia de
comunicación de cada Secretaría, además su implementación
dará frescura a la Página Principal, sin embargo abusar de
este recurso puede afectar de forma negativa la comuni-
cación con el usuario.

Las plantillas para las Dependencias del Gobierno Federal

están diseñadas para que el uso de esta herramienta no
afecte el mensaje principal que ofrece la Institución. En
las plantillas se ofrecen dos opciones para estos
elementos: 4 ó 5 Banners para uso de la Entidad.

Para las Cabezas de Sector existen dos Banners de uso

obligatorio: www.presidencia.gob.mx y www.gob.mx.
Los demás espacios se utilizarán según la Dependencia crea
conveniente.
5

Uso de Color Tipografía

El uso del color está definido en el Manual de Existen criterios claros para el uso de la tipografía, éstos deberán respetarse en todos los apartados y secciones del
Identidad Institucional del Gobierno Federal, que Portal, ya que permiten a los usuarios identificar con claridad y rápidez los títulos, subtítulos y contenidos publicados.
entregó la Presidencia de la República a cada
Dependencia.

La Imagen Institucional ofrece colores

sólidos, así como sus variaciones en porcen- La tipografía
tajes de tonalidades del color principal para institucional (Eureka Sans)
las distintas zonas que componen las plantillas. Sólo debe utilizarse en textos que
Se recomienda apoyarse con tonos grises para sean imágenes.
combinar. Queda prohibido cualquier tipo de
sombra, difuminados y uso de curvas en el Títulos
diseño ya que estos recursos rompen con los Fuente: Verdana
objetivos de la imagen. Tamaño: 14 px
Estilo: Bold
Color: institucional o un porcentaje
del mismo, cuidando la legibilidad.

Subtítulos
90% 75% Fuente: Verdana
Tamaño: 12 px
Estilo: Bold
Color: institucional o un porcentaje
50% 30%
del mismo, cuidando la legibilidad

Contenidos
Fuente: Verdana
Tamaño: 11 px
Estilo: Normal
Color: #666666
 6
Niveles de Navegación
Uno de los aspectos más importantes en la homologación de los Sitios Web es la navegación. Las ventajas que obtenemos al contar con una navegación común y sencilla
está en mejorar significativamente la experiencia del usuario, al crearle un sentido de familiaridad en la manera en que se desenvuelve a lo largo de todos los Sitios Web
de Gobierno.

La navegación en base a niveles simples funciona muy bien para Portales con gran cantidad de información como los del Gobierno Federal.

Existen tres zonas que nos ayudan a conservar estos Níveles de Navegación

Submenú
Se encuentra colocado en la columna derecha
Menú principal
a la misma altura del Menú Principal. Su
Se encuentra abajo de la firma de la Depen-
característica esencial está en cambiar sus
dencia en la parte izquierda de nuestro Sitio,
elementos según la sección en la que se
no cambia durante la navegación.
encuentre el usuario.

Breadcrumb
Otro elemento importante para la navegación,
por niveles simples, es el Breadcrumb que se
encuentra justo encima de nuestros conteni-
dos en las páginas internas y funciona como
un minimapa que indica al usuario en que
parte del Portal se encuentra ubicado.
7
Ejemplo de la Navegación por Niveles Simples
Supongamos que queremos conocer los datos de algún Funcionario Público. Tendríamos que dirigirnos a la sección de “Directorio” dentro del submenú “Quiénes Somos”
para poder hacerlo debemos escalar tres niveles: Quiénes Somos - Directorio - Funcionario.

1 2 3

Seleccionamos la Opción Del lado derecho, se habilitará el Si se opta por la sección de Directorio, ésta quedará habilitada y se
“Quiénes Somos” (Menú Principal) submenú correspondiente a dicha mostrarán en el submenú las opciones específicas de dicha sección, que
sección, con las opciones específicas podrían ser: las áreas de la Dependencia, el listado de Funcionarios o
Al entrar a la sección, el Menú Princi- de “Quiénes Somos”: Historia, cualquier forma de organización de contenidos que se haya elegido.
pal, encabezado y footer quedarán en Estructura y Directorio.
la misma posición y con los mismos
contenidos, la opción del menú
seleccionado se mostrará en otro
color.

Es importante señalar, que es indispensable, que todos los Sitios Web de la APF cuenten con esquemas de navegación idénticos para evitar confundir al usuario y lograr una
homologación total, por tal motivo cualquier otro tipo de navegación, como los menús desplegables, queda prohibido dentro de los Sitios de Gobierno.

Zonas de Contenido
Esta zona es exclusiva para el cuerpo del contenido de cada
sección. Queda prohibida la implementación de menús,
banners y de todo tipo de elementos ajenos a esta área.
Durante el recorrido de este Manual se hace una descripción
detallada de las zonas adecuadas para el manejo de estos
elementos. De igual forma deben respetarse las
dimensiones de la zona de contenido que se encuentra fija
en toda la navegación de nuestros Portales. Para el manejo de
información con otro diseño se recomienda hacer una
evaluación sobre la posibilidad de crear un micrositio.
8
Uso de Micrositios
La implementación de micrositios dentro del Portal debe pasar por un estricto proceso de evaluación sobre
las ventajas y desventajas que le traería a nuestro Sitio, ya que el exceso de estas herramientas puede causar
confusión y problemas de navegacion para los usuarios.
Los Requisitos que debe cumplir una sección para convertirse en un micrositio son:
Que la información sea temporal, es decir, con un periodo de vida limitado, que sea de gran interés para
los visitantes y, en consencuencia, requieran dirigir toda su atención a un tema en específico.
Que contemos con la suficiente información para que sea atractivo. Si no existe un micrositio
robusto el usuario se desmotivará y saldrá de nuestro Portal; por último, que la información contenida
dentro de éste, no encaje en ninguna de las secciones actuales del Sitio Web Principal.
Intranets y Sistemas de Gestión Internos
Para el manejo de los sistemas internos de las dependencias deben seguirse los mismos lineamientos de
diseño en cuanto a color y concepto, con la gran diferencia de que deberá respetarse el desarrollo tecnológico
que se haya construido, es decir, se privilegiará, hasta donde sea posible, la adaptación de las aplicaciones a
Intranets en la parte visual, sin que impacte significativamente en el desarrollo de código fuente nuevo. Se
utilizará la Imagen Institucional en su totalidad únicamente en el desarrollo de sistemas nuevos.
Manejo de Documentos y Formatos Relacionados
Uso de Flash
Las plantillas para Sitios Web del Gobierno Federal están diseñadas para trabajar con la estrategia de
comunicación de cada Secretaría como eje del Portal y el manejo de sus zonas de trabajo son
determinantes en la respuesta del usuario. Necesitamos contar con elementos comunes y de fácil acceso
con la intención de llegar a los ciudadanos mexicanos y extranjeros en cualquier zona del País y en
cualquier rincón del mundo, por tal motivo queda prohibido el uso de herramientas en Flash y gif animados
en la Página Principal.
La forma en que organizamos los contenidos por medio de jerarquías es única y está exclusivamente
definida por el uso de las zonas de información. El uso de Flash y otras herramientas queda limitado
a secciones y audiencias específicas del Sitio.
9
Formatos de Audio y Video
Existen diversos elementos que deben considerarse al
momento de elegir un formato de audio o video para ser
incluido en un Sitio Web del Gobierno Federal.
Entre los principales destacan:
Compatibilidad
Tamaño de los archivos
Calidad de Audio / Video
Facilidad de Edición
Si se cuenta con el software o las herramientas necesarias
para su creación/edición.
Si se requieren programas especiales del lado del
usuario (plug-ins) para que puedan ser visualizados /
escuchados.
La premisa básica que debe tomarse en cuenta, es que el
contenido o la información debe de ser accesible para el
mayor número de visitantes, sin importar el formato, es
decir, se recomienda siempre utilizar cuando menos dos
opciones distintas para publicar contenido multimedia.
Adoptar estas medidas nos garantiza que dicha información
será vista por el mayor número de personas.
Estadísticamente se sabe que en México el 96% de los visitantes utilizan Microsoft Windows como sistema
operativo para navegar en Internet y que Microsoft Internet Explorer en sus distintas versiones lo utiliza el
90% de los internautas. Por ello, se recomienda que se cuente, en la medida de lo posible, con formatos:
WMV (Windows Media Video) para el contenido en video, y WMA (Windows Media Audio) para el contenido
en audio. Ambos formatos tienen una calidad aceptable y una compresión que les permite ser utilizados
en Web sin demasiadas complicaciones.
Adicionalmente, se recomienda contar con formatos de audio y video secundarios, pues facilitan visualizar
y escuchar el contenido de forma adecuada.
La tecnología Adobe Flash comienza a ser ampliamente utilizada (según cifras de la compañia, más de
500 millones de computadoras conectadas a Internet cuentan con este programa o su Plug-in instalado),
debido a su buen formato y a una excelente compresión, con lo que se puede tener información
multimedia de gran calidad con un bajo peso en Kb, lo que facilita su intercambio. Dicha tecnología se
utiliza principalmente para transmitir video vía Web, por lo que se recomienda utilizar archivos en
formato FLV (Flash Video) como opción secundaria. En caso de no contar con las herramientas necesarias
para generar videos en Flash, se puede optar por la tecnología Apple Quicktime, utilizada por el 1.4% de
usuarios de Internet en México, que tiene acceso a equipos Apple/Macintosh, la primera minoría de
sistemas operativos.
En relación a tecnologías secundarias para archivos de audio, se recomienda el MP3. Dicho formato se ha
hecho muy popular al contar con reproductores personales en amplios sectores de la sociedad. Así
mismo, el MP3 es uno de los formatos favoritos para la presentación de Podcasts, (archivo de audio que
es distribuido por medio de un canal RSS o Feed) herramienta cada vez más utilizada para el manejo de
noticias que se ofrecen desde los Sitios Gubernamentales alrededor del mundo.
 10
Formatos de Texto
Generalmente en los Sitios Web Gubernamentales se requiere contar con documentos adicionales o material de apoyo que reafirme o proporcione mayor información sobre
una nota en formato HTML. Existe una gran diversidad de formatos de texto, aunque no todos son totalmente estándares.

Los formatos que se crean a través de la Suite Microsoft Office: Word, Excel, PowerPoint, etc., requieren que el usuario cuente con un visualizador o con la misma Suite de Office,
para accesar a ellos. Por esta razón se recomienda utilizar formatos estándar, que no necesiten aplicaciones adicionales que tengan costo para los visitantes del Sitio.

Estos son algunos formatos recomendables:

PDF (Portable Document Format)

Es un formato ampliamente utilizado a nivel mundial, ya que permite contar con documentos en formato original (tamaño y tipo de letra definidos, gráficas, imágenes,
colores), con un nivel de compresión aceptable, que permite generar documentos extensos de unos cuantos Kb.

FLASH PAPER
Es una aplicación de la empresa Adobe, que genera documentos portables, de manera similar al formato PDF, pero con la ventaja de mostrar los archivos directamente en el
navegador cuando no requieren bajarse a la PC. Es sumamente eficiente, ya que su descarga es paulatina, por lo que no se requiere bajar todo el contenido del documento
para poderlo ver.

RTF
Adicionalmente al uso de tecnología PDF o Flash Paper (o ambas), se recomienda utilizar un formato de texto simple, para poder contar con una opción que sea accesible para
la mayoría de los visitantes al Sitio. El RTF o formato de texto enriquecido, permite mantener el estilo de un documento sin requerir una aplicación o software específico para
abrirlo. Dicho formato puede visualizarse directamente desde el navegador o utilizando una aplicación de texto simple.

5mb Cuando un documento es demasiado pesado (mayor a 5 Mb) recomendamos que se divida por secciones o capítulos en archivos
individuales y con un peso menor ( 1 Mb o menos por archivo).

Recordemos que un 27% de la Población utiliza conexiones dial-up para accesar a Internet; en la medida en la que nuestros
1mb recursos tengan un peso adecuado para todo el espectro de usuarios, nuestros Sitios serán más éxitosos y visitados.
11
Uso de Plantillas para Organismos descentralizados y Empresas de Participación Estatal

Existen 3 plantillas para los Organismos Descentralizados y Empresas de Participación Estatal que trabajan de igual forma que las destinadas a las Secretarías de Estado
y Procuraduría General de la República, aunque con algunas diferencias en su construcción, con la finalidad de facilitar el manejo de la Imagen Institucional y no afectar
en el posicionamiento dirigido a su Sector.

Las diferencias básicas consisten en la ubicación del logotipo del Organismo o Empresa Paraestatal. Se ha colocado un espacio con fondo blanco dentro de las platillas
en la esquina superior izquierda, para facilitar la inclusión de logos, de cualquier tamaño, forma y color.

Adicionalmente, en la esquina superior del lado derecho, deberá colocarse el logo de la Cabeza de Sector a la que pertenece dicho Organismo o Empresa, como se ve en la
aplicación vertical que se detalla en el Manual de Identidad. En caso de no contar con Cabeza de Sector deberá respetarse la posición del Escudo Nacional y se continuará la
barra de herramientas sustituyendo las siglas y el cuadro de color.
 Contacto
Director General
Andrés Gómez Herrera
andres.gomez@sip.gob.mx

Director de Investigación, Estrategia y Vinculación

Luis Antonio Delgado Barraza
luis.delgado@sip.gob.mx

Director de Arte y Diseño

Miguel Ángel Chávez Contreras
miguelangel.chavez@sip.gob.mx

Subdirectora de Contenido e Información

Monserrat Barrera Tapia
monserrat.barrera@sip.gob.mx

Sistema Internet de la Presidencia

Descarga las plantillas y otros materiales del sitio www.sip.gob.mx.

Solicita tu clave de acceso a la dirección de correo imagen@sip.gob.mx

o comunícate al (55) 2789 1500.

Teléfono: 2789 1500 ext. 3469

imagen@sip.gob.mx
www.sip.gob.mx
www.presidencia.gob.mx