IdGraf - IPN 2012 (Web)

INSTITUTO POLITÉCNICO NACIONAL
MANUAL DE IDENTIDAD GRÁFICA

PORTAL WEB INSTITUCIONAL 2012
México D.F., 2012

Versión 1.0
ÍNDICE
Acerca de éste documento 3

Racional creativo 4
Colores 5
Tipografía 6
Proporciones 7
Elementos Generales 13
Módulos de Contenido 24
INSTITUTO POLITÉCNICO NACIONAL 2

ACERCA DE ESTE DOCUMENTO
El Manual de Identidad Web del Instituto Politécnico Nacional tiene

la finalidad de proveer de lineamientos para agencias, diseñadores
y desarrolladores que se vean involucrados en la manutención y
crecimiento de la plataforma web con base en el estilo gráfico
propuesto para el rediseño 2012 del portal institucional y plantillas
para sitios de la red que de éste deriven.
Conservar unidad gráfica es de suma importancia para el Instituto

Politécnico Nacional, dando mensaje a la comunidad y sociedad en
general de ser una entidad que se rige por normas y valores estruc-
turados y sólidos. Siendo consistente con la confianza que en ésta
institución se deposita en el desarrollo tecnológico de vanguardia.
El éxito de una unidad gráfica depende de la participación de la
comunidad involucrada.
En este documento se exponen los elementos de reticula, colores,

tipografía y recomendaciones de uso que servirán como distintivo
de identidad.
La generación de nuevos componentes basados en este docu-
mento serán sujetos a consideración y aprobación de la comuni-
dad de desarrollo.
Éste documento tiene validez para todos los sitios de la red del
Instituto Politécnico Nacional siempre y cuando el Portal Institucio-
nal conserve los elementos aquí descritos como eje central.

RACIONAL CREATIVO
El desarrollo de interfases gráficas derivadas de un metodología

permite el desarrollo de propuestas a partir de una estructura de
información; donde en primer instancia se organizan los contenidos
que serán entregados a las diversas audiencias receptoras a través
de diagramas de Arquitectura de Información. Una jerarquización
de elementos a desplegar dentro de cada página es derivada de la
diagramación de Esqueletos de Diseño (Wireframes) que permiten
al emisor y receptor localizar dentro de cada composición los
principales elementos del mensaje, y de manera secundaria toda
aquella información que complemente su experiencia.*
La Identidad Gráfica Institucional es sin duda el punto de partida

para retomar los lineamientos tipográficos y estéticos y compositi-
vos para continuar en una experiencia unitaria hacia otros dispositi-
vos, la presencia uniformada.
La conjugación de los elementos anteriormente descritos establece

la tipografía, gama de colores y elementos a integrar dentro de las
propuestas gráficas. El objetivo de este rediseño es proponer
nuevas estructuras donde por medio del manejo de elementos de
diseño se pudiera crear un dinamismo en la información y una *Ver documentación de arquitectura de
jerarquización de elementos con fines mercadológicos que con- información generada para este proyecto.
trastarán con las versiones anteriores del portal y que por medio de
estos recursos atraerán la atención de un público joven, enaltenci-
endo los logros y valores del Instituto.

COLORES
A partir de el color Guinda institucio-

R: 109 G: 26 B: 66 #6D1A42 nal (Pantone 222C), se generó una
gama de colores añadiendo colores
R: 54 G: 53 B: 84 #363554 incluyendo complementarios, neutros
y contrastantes.
R: 221 G: 221 B: 226 #DDDDE2 Los colores complementarios le dan

sobriedad institucional al sitio.
R: 242 G: 242 B: 240 #F2F0F0 Los colores contrastantes dan dina-
mismo y frescura a elementos a
R: 255 G: 255 B: 255 #FFFFFF resaltar.
Los colores neutros dan soporte y

R: 255 G: 153 B: 51 #FF9933 descanso visual para promover la
lectura.
R: 222 G: 219 B: 204 #DEDBCC La descripción del color está expre-
sada en código hexagecimal y su
R: 0 G: 0 B: 0 #000000 equivalente en mezcla RGB para su
utilización en HTML's

TIPOGRAFÍA
Helvética Regular
Utilizada en el lema del logotipo
Aa Bc Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Institucional
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Familia tipográfica desarrollada por
0 1 2 3 4 5 6 7 8 9 0 @ ¿? ¡! “” , . - * & % $
Max Miedinger en 1957 para la
fundición de tipografías Haas'sche
Schriftgießerei (también conocida
como "Haas") de Basilea, Suiza.
Helvetica Italic
La familia tipográfica se caracteriza
Aa Bc Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn por carecer de remates de termi-
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz nación (san serif). Su principal utilidad
0 1 2 3 4 5 6 7 8 9 0 @ ¿? ¡! “” , . - * & % $ es en titulares. A puntajes muy peque-
ños puede presentar problemas de
legibilidad, por lo que el puntaje
mínimo recomendado es de 10px. La
familia se acerca a los tipos Clarendon
Helvética Bold como equivalentes con serif, sin
Aa Bc Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn embargo las características ópticas de
la fuente se prestan para que la familia
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz no sea combinada.
0 1 2 3 4 5 6 7 8 9 0 @ ¿? ¡! “” , . - * & % $

Proporciones

SITIO INSTITUCIONAL
PROPORCIONES
Se toma como base el diseño a una

resolución de 1024 x 768 pixeles,
considerando como área crítica de
diseño un área de 950 x 600 pixeles.
El área crítica comprende los elemen-

tos comprendidos al desplegar una
pantalla a primer vistazo, restando
elementos como interfaz del
600
programa de exploración y barras de
desplazamiento.
950

SITIO INSTITUCIONAL
PROPORCIONES
El primer segmento de la página

principal surge a partir de las dimen-
siones de la inserción de video
(widescreen) con controles de naveg-
ación para dimensiones totales de
640 x 360 pixeles, la segunda
columna es resultado del área
restante para completar el ancho de
área crítica
La segunda región se deriva de una

retícula de cuatro columnas respecto
al área crítica
La tercer región divide en cinco

columnas la zona de categorización
de servicios

SITIO INSTITUCIONAL
PROPORCIONES
El primer segmento de la página

principal surge a partir de las dimen-
siones de la inserción de video
(widescreen) con controles de naveg-
ación para dimensiones totales de
640 x 360 pixeles, la segunda
columna es resultado del área
restante para completar el ancho de
área crítica
La segunda región se deriva de una

retícula de cuatro columnas respecto
al área crítica
La tercer región divide en cinco

columnas la zona de categorización
de servicios

SITIO INSTITUCIONAL
PROPORCIONES
A partir de las dimensiones de la

imagen centrales del home, derivan
los tamaños de las imágenes subse-
cuentes escalando a proporción

SITIO INSTITUCIONAL
PROPORCIONES
Las páginas interiores basan su

diseño a partir de una retícula de 4
columnas de donde se crean módu-
los sumando cuartos, de modo que
éstos puedan ensamblar combinando
elementos según la funcionalidad y
jerarquía lo demande.

Elementos generales

SITIO INSTITUCIONAL
CABECERA
Alto total
160px
Ancho total
100%
Zona de identidad
Ancho: 930px
Alto:99px
Color de fondo: #6d1a42
Logotipo
Característica: Imagen PNG
Ancho: 60px
Alto: 99px
Título
Característica: Texto de sistema
Fuente: Helvética
Puntaje: 18px
Color: #FFFFFF
Variación: Uppercase
Subtítulo
Tamaño: 14px

SITIO INSTITUCIONAL
MENÚ AUXILIAR
Contenedor
Alto: 30px
Color de fondo: #ddddde
Texto
Fuente: Helvética
Puntaje: 11px
Color: #363654
Padding derecho: 10px
Padding izquierdo: 10px
Estado Over
Borde superior
Alto de borde: 2px
Color de borde: #ff9933
Estado Seleccionado
Borde superior
Alto de borde: 2px
Color de borde: #6d1a42

SITIO INSTITUCIONAL
MENÚ PRINCIPAL
Contenedor
Alto: 31 px
Borde inferior
Alto de borde: 1px
Color de borde: #f9f8f8
Listado
Alto: 30 px
Borde inferior
Alto de borde: 1px
Color de borde: #dfdede
Vínculo
Fuente: Helvética
Puntaje: 14px
Color: #363654
Padding derecho: 14px
Padding izquierdo: 14px
Estado Over
Borde inferior
Alto: 3px
Color de borde: #ff9933
Estado Seleccionado
Borde inferior
Alto: 3px
Color de borde: #6d1a42

SITIO INSTITUCIONAL
MENÚ DE SERVICIOS
Contenedor General
Altura mínima: 260 px
Contenedor de Agrupación
Ancho: 185 px
Color de fondo: #f9f8f8
Márgen derecho: 1px
Vínculo Título de sección

Fuente: Helvética
Puntaje: 13px
Color: #FFF
Padding: 10px
Borde izquierdo ancho: 10px
Boder izquierdo color: #FF9933
Vínculo Título de sección

seleccionado
Borde izquierdo ancho: 10px
Boder izquierdo color: #FF9933

SITIO INSTITUCIONAL
MENÚ DE SERVICIOS
Elemento Listado
Fuente: Helvética
Puntaje: 12px
Color: #363554
Padding inferior: 7px
Padding superior: 7px
Borde inferior alto: 1px
Borde inferior estilo: punteado
Boder izquierdo color: #CCC
Más información
Fuente: Helvética
Puntaje: 11px
Color: #6d1a42
Alineación: Derecha

SITIO INSTITUCIONAL
PIÉ DE PÁGINA
Sitios de interés Título

Fuente: Helvética
Puntaje: 14px
Color: #363554
Sitios de interés Imagen

Característica: Imagen JPG, PNG o GIF
Tamaño: 148px x 53 px
Márgen Derecho : 5px
División
Borde Inferior alto: 1px
Borde Inferior color: #DFDEDE
Borde Superior alto: 1px
Borde Superior color: #F9F8F8
Medios Sociales
Fuente: Helvética
Puntaje: 14px
Color: #363554
Padding: 10px
Alineación: derecha
Fondo color: #FFF
Medios Sociales Imágen

Tamaño: 32px x 32px
Márgen derecho: 5px

SITIO INSTITUCIONAL
PIÉ DE PÁGINA
Widget de traducción título

Fuente: Helvética
Peso: Bold
Puntaje: 18px
Color: #363554
Widget de traducción área

Ancho: 200px
Alto: 65px
MENÚ PIÉ DE PÁGINA

Fuente: Helvética
Puntaje: 11px
Color: #6d1a42
Padding: 15px
Botón Directorio de sitios, Botón

Transparencia
Fuente: Helvética
Puntaje: 11px
Color: #FFFFFF
Padding: 15px
Fondo color: #6D1A42
Borde izquerdo ancho: 10px;
Borde Izquierdo color: #FF9933

SITIO INSTITUCIONAL
PIÉ DE PÁGINA
Instituto título
Fuente: Helvética
Puntaje: 14px
Color: #6d1a42
Legales
Fuente: Helvética
Puntaje: 11px
Color: #666666

SITIO DE DEPENDENCIA
CABECERA
Alto total
124px
Zona de identidad
Ancho: 930px
Alto:63px
Logotipo
Ancho: 40px
Alto: 63px
Título
Fuente: Helvética
Puntaje: 12px
Color: #FFFFFF
Variación: Uppercase
Subtítulo
Puntaje: 10px
Título Dependencia
Fuente: Helvética
Puntaje: 22px
Color: #FF9933

SITIO DE DEPENDENCIA
MENÚ LATERAL
Contenedor
Ancho: 185px
Menú elemento
Fuente: Helvética
Puntaje: 12px
Color: #363554
Borde superior ancho: 1px;
Borde superior color: #CCCCCC
Borde inferior ancho: 1px;
Borde inferior color: #FFFFFF
Menú over
Color: #6d1a42
Fondo color: #FFFFFF
Menú seleccionado
Color: #6d1a42
Fondo color: #dddde2

Módulos de contenido

SITIO INSTITUCIONAL
PÁGINA DE INICIO
Carrusel de imágenes
El fin principal de éste módulo es de
divulgación y difusión de actividades
Politécnicas en el desarrollo científico,
tecnológico y de investigación, así como
logros. Los mensajes son dirigidos al
público en general, a la prensa y a
despertar el interés de atracción de
talento para formar parte del Instituto. El
detalle de estos contenidos aterrizará en
notas desglosadas en el portal de
Comunicación.
Un usuario promedio no pasará más de

10 segundos en la página principal por lo
que no se recomienda exceder 5 notas
en este espacio.

SITIO INSTITUCIONAL
PÁGINA DE INICIO
Carrusel de imágenes
Característica: Imagen PNG, JPG, GIF o
insersión de video*
Ancho: 640px
Alto: 360px
*Con video insertado no se mostrará
zona de descripción
Zona de descripción
Ancho: 640px
Alto: 125px
Zona de descripción Título
Fuente: Helvética
Puntaje: 22px
Color: #FF9933
Zona de descripción Contenido
Fuente: Helvética
Puntaje: 14px
Color: #FFFFFF
Zona de descripción Leer más
Fuente: Helvética
Puntaje: 11px
Color: #FFFFFF
Padding izquierdo y derecho: 15px
Padding superior e inferior: 10px
Fondo color: #6d1a42

SITIO INSTITUCIONAL
PÁGINA DE INICIO
Escaparate de sección
La finalidad de este módulo es promover
contenidos dentro del mismo portal
institucional, ya sea por la actualización
de contenido o relevancia del mismo.
Contará con título, una vista miniatura así
como una breve descripción de la
dependencia u oferta y una serie de
vínculos (opcionales) que lleven al detalle
de contenido expuesto.

SITIO INSTITUCIONAL
PÁGINA DE INICIO
Escaparate de sección
Ancho: 290px
Alto: 360px
Escaparate Títuo
Ancho: 130px
Alto: 50px
Fuente: Helvética
Puntaje: 18px
Color: #FFFFFF
Escaparate Vista miniatura

Ancho: 160px
Alto: 90px
Escaparate Contenido
Fuente: Helvética
Puntaje: 12px
Color: #333333

SITIO INSTITUCIONAL
PÁGINA DE INICIO
Escaparate Vínculos
Puntaje: 12px
Color: #6d1a42
Borde inferior ancho: 1px
Borde inferior color: #CCCCCC
Escaparate Leer más

Fuente: Helvética
Puntaje: 11px
Color: #FFFFFF
Borde izquerdo ancho: 10px

SITIO INSTITUCIONAL
PÁGINA DE INICIO
Proporciones
Ancho: 235px
Agenda Politécnica Título

Puntaje: 14px
Color: #FFFFFF
Borde izquerdo ancho: 10px
Agenda Politécnica Etiquetas

Puntaje: 10px
Color: #6d1a42
Alineación: derecha
Agenda Politécnica Fechas
Día:
Puntaje: 18px
Color: #FF9933
Mes, Año:
Puntaje: 12px
Color: #FF9933
Agenda Politécnica Evento
Puntaje: 13px
Color: #363554
Peso: Bold
Agenda Politécnica Consulta
Puntaje: 12px
Color: #363554
Agenda Politécnica Agenda
Puntaje: 18px

SITIO INSTITUCIONAL
PÁGINA DE INICIO
Zona de Noticias
Su finalidad es difundir actividades,
convocatorias, eventos internos y comu-
nicados dirigidos a la comunidad Politéc-
nica. El detalle de estas notas radicará en
páginas de contenido dentro del portal
de Comunicación. Por omisión se
desplegarán 3 notas, pudiendo estas
crecer en triadas.
Noticia imagen
Ancho: 210px
Alto: 118px
Noticia título
Fuente: Helvética
Puntaje: 14px
Color: #363554
Noticia contenido:
Fuente: Helvética
Puntaje: 12px
Color: #666666
Noticia vínculo
Fuente: Helvética
Puntaje: 10px
Color: #6d1a42

SITIO INSTITUCIONAL
MÓDULO 1a
Uso
Cabecera de subhome, cumple la
finalidad de describir la dependencia u
oferta de un modo general acompañado
de una imagen representativa del tipo de
actividad que se imparte o desempeña o
el perfil de la audiencia a la cuál va
dirigido, cuenta con liga única a sitio de
dependencia, que ofrecerá más infor-
mación
Proporciones
Ancho: 930px
Imágen
Ancho: 370px
Alto: 208px
Color de fondo en rebase: #363554
Título
Fuente: Helvética
Peso: Bold
Puntaje: 24px
Color: #FF9933

SITIO INSTITUCIONAL
MÓDULO 1a
Contenido
Puntaje: 13px
Color: #dddde2
Leer más
Fuente: Helvética
Puntaje: 11px
Color: #363554
Fondo color: #dedbcc

SITIO INSTITUCIONAL
MÓDULO 1a Variación
Uso
Cabecera de subhome que incluye en su
descripción vínculos a material comple-
mentario o accesos directos a dependen-
cias relevantes
Listado
Ancho: 175px
Fuente: Helvética
Puntaje: 13px
Color: #FFFFFF
Borde inferior color: #dddde2

SITIO INSTITUCIONAL
MÓDULO 1b
Uso
Módulo dentro del cuerpo de contenido
que destaca en alta importancia una
dependencia, u oferta. Cuenta con
descripción breve y liga a leer más.
Proporciones
Ancho: 930px
Color de fondo: #363554
Imágen
Ancho: 370px
Alto: 208px
Color de fondo en rebase: #6d1a42
Título
Fuente: Helvética
Peso: Bold
Puntaje: 24px
Color: #FFFFFF
Contenido
Puntaje: 12px
Color: #dddde2

SITIO INSTITUCIONAL
MÓDULO 1c
Uso
Módulo de contenido cuyo uso contem-
pla listados de vínculos cuyo número y
nombre sea basto. Los vínculos contarán
categorías de segmentación y se acomo-
darán en dos columnas. Un breve texto
introductorio se mostrará al inicio del
módulo junto con vínculo a leer más
información.
Proporciones
Ancho: 930px
Color de fondo: #FFFFFF
Título
Fuente: Helvética
Peso: Bold
Puntaje: 24px
Color: #363554
Contenido
Puntaje: 12px
Color: #cccccc

SITIO INSTITUCIONAL
MÓDULO 1c
Subtítulo
Fuente: Helvética
Peso: Bold
Puntaje: 18px
Color: #363554
Vínculos
Puntaje: 12px
Color: #6d1a42
Borde inferior color: #cccccc

SITIO INSTITUCIONAL
MÓDULO 1d1
Uso
Cabecera de Subhome de dependencia.
Descripción de la dependencia cátedra o
misión. Datos de contacto de la depen-
dencia con vínculo a correo. Imagen
representativa de actividad relativa a la
cátedra o perfil de la audiencia.
Imagen independiente central, utilizada
cuando no se cuente con posibilidad de
editar la imágen.
Proporciones
Ancho: 930px
Imágen
Ancho: 370px
Alto: 208px
Título
Fuente: Helvética
Peso: Bold
Puntaje: 24px
Color: #FF9933
Contenido
Puntaje: 13px
Color: #dddde2

SITIO INSTITUCIONAL
MÓDULO 1d1
Área responsable
Ancho: 235px
Color de fondo: #dddde2
Título de dependencia
Fuente: Helvética
Peso: Bold
Puntaje: 18px
Color: #363554
Contenido
Puntaje: 12px
Color: #666666
Vínculo
Fuente: Helvética
Puntaje: 11px
Color: #FFFFFF
Fondo color: #363554

SITIO INSTITUCIONAL
MÓDULO 1d1 Integrada
Uso
Imagen central integrada, utilizada
cuando los conocimientos de edición
permitan integrar la imágen con el color
de fondo.
Imágen
Ancho: 370px
Alto: 208px

SITIO INSTITUCIONAL
MÓDULO 1d2
Uso
Imagen Lateral Izquierda, utilizada
cuando la orientación de la imágen o
relevancia conduzca visualmente la
lectura de la imágen izquierda de forma
harmónica.
Imágen
Ancho: 370px
Alto: 208px

SITIO INSTITUCIONAL
MÓDULO 1d3
Uso
Título de la dependencia. Datos de
contacto de la dependencia con vínculo a
correo. Imagen representativa de activi-
dad relativa a la cátedra o perfil de la
audiencia.
Imagen Central extendida, utilizada
cuando la dependencia no cuente con
texto descriptivo, y además cuente con
una imágen extendida de mayor impacto
visual, además de logotipo representa-
tivo.
Imágen
Ancho: 695px
Alto: 208px
Logotipo (logosímbolo)
Característica: Imagen JPG, GIF o PNG
Ancho: 80px
Alto: 80px
Título
Peso: Bold
Puntaje: 24px
Color: #FF9933
Tagline
Puntaje: 13px
Color: #FFFFFF

SITIO INSTITUCIONAL
MÓDULO 1d3
Uso
Módulo de ancho completo de pantalla
acompañado de imagen utilizado para
aviso o evento importante colocado en la
parte superior de la pantalla. Puede estar
acompañado de una fecha.
Proporciones
Ancho: 930px
Imágen
Ancho: 235px
Alto: 132px
Título
Fuente: Helvética
Peso: Bold
Puntaje: 24px
Color: #6d1a42
Contenido
Puntaje: 12px
Color: #666666
Fecha
Puntaje: 18px
Color: #FF9933
Fecha mes, año
Puntaje: 12px
Color: #FF9933

SITIO INSTITUCIONAL
MÓDULO 1j
Uso
Módulo de ancho completo e imagen
vertical utilizado en la retícula de
acomodo de la sección "acerca de IPN".
Imágen al costado izquierdo.
Proporciones
Ancho: 930px
Imágen
Ancho: 235px
Alto: 272px
Título
Fuente: Helvética
Peso: Bold
Puntaje: 24px
Color: #363554
Contenido
Puntaje: 12px
Color: #666666

SITIO INSTITUCIONAL
MÓDULO 1l
Uso
Módulo de ancho completo e imagen
Imágen al costado derecho.
Proporciones
Ancho: 930px
Imágen
Ancho: 235px
Alto: 272px
Título
Fuente: Helvética
Peso: Bold
Puntaje: 24px
Color: #363554
Contenido
Puntaje: 12px
Color: #666666

SITIO INSTITUCIONAL
MÓDULO 1t
Uso
Título para conjunto de ligas relacionadas
Proporciones
Ancho: 930px
Título
Fuente: Helvética
Peso: Bold
Puntaje: 22px
Color: #FF9933

SITIO INSTITUCIONAL
MÓDULO 2a
Uso
Módulo de contenido cuyo uso contem-
pla listados de vínculos cuyo número y
nombre sea basto. Los vínculos se
acomodarán en tres columnas. Un breve
texto introductorio se mostrará al inicio
del módulo junto con vínculo a leer más
información. Va relacionado general-
mente con la ficha de una dependencia.
Proporciones
Ancho: 685px
Título
Fuente: Helvética
Peso: Bold
Puntaje: 24px
Color: #363554
Contenido
Puntaje: 12px
Color: #cccccc
Vínculos
Puntaje: 12px
Color: #6d1a42

SITIO INSTITUCIONAL
MÓDULO 2b
Uso
Módulo descriptivo de oferta o depen-
dencia de jerarquía secundaria (relevante
para la audiencia pero no es la oferta
principal). Posee vínculos. Relacionado
generalmente con la ficha de una depen-
dencia.
Proporciones
Ancho: 685px
Imágen
Ancho: 235px
Alto: 272px
Título
Peso: Bold
Puntaje: 24px
Color: #363554
Contenido
Ancho: 200px
Puntaje: 12px
Color: #666666

SITIO INSTITUCIONAL
Vínculos
Ancho: 175px
Puntaje: 12px
Color: #6d1a42

SITIO INSTITUCIONAL
MÓDULO 2d
Uso
Módulo descriptivo de oferta o depen-
dencia de jerarquía secundaria (relevante
para la audiencia pero no es la oferta
principal). Posee vínculos. Se utiliza
cuando el módulo 2b le antecede.
Proporciones
Ancho: 685px
Imágen
Ancho: 235px
Alto: 272px
Título
Peso: Bold
Puntaje: 24px
Color: #363554
Contenido
Ancho: 200px
Puntaje: 12px
Color: #666666

SITIO INSTITUCIONAL
MÓDULO 2e
Uso
Título para conjunto de ligas relacionadas
pertenecientes a una dependencia
específica. La ficha de la dependencia
estará siempre vinculada.
Proporciones
Ancho: 685px
Título
Fuente: Helvética
Peso: Bold
Puntaje: 22px
Color: #FF9933
Descripción
Fuente: Helvética
Puntaje: 14px
Color: #dddde2

SITIO INSTITUCIONAL
MÓDULO 2f
Uso
Módulo utilizado en la retícula de
Complemento de contenido dividiendo
temas relacionados (Acción vs creador).
Acompañado de módulo 2b o 2h y/o
cuando haya tonos guindas o azules a
los costados.
Proporciones
Ancho: 685px
Color de fondo: #dedbcc
Título
Fuente: Helvética
Peso: Bold
Puntaje: 24px
Color: #363554
Descripción
Fuente: Helvética
Puntaje: 12px
Color: #666666

SITIO INSTITUCIONAL
MÓDULO 2g
Uso
Complemento de contenido dividiendo
temas relacionados (Acción vs creador).
Acompañado de módulo 2b o 2h y/o
cuando haya tonos beige o guindas a los
costados.
Proporciones
Ancho: 685px
Título
Fuente: Helvética
Peso: Bold
Puntaje: 24px
Color: #363554
Descripción
Fuente: Helvética
Puntaje: 12px
Color: #666666

SITIO INSTITUCIONAL
MÓDULO 2h
Uso
Su uso es posterior a un módulo 2b para
dar dinamismo visual al acomodo
fotográfico
Proporciones
Ancho: 685px
Imágen
Ancho: 235px
Alto: 272px
Título
Fuente: Helvética
Peso: Bold
Puntaje: 24px
Color: #363554
Contenido
Puntaje: 12px
Color: #666666

SITIO INSTITUCIONAL
MÓDULO 2i
Uso
Módulo de proporción media sin padding
para la inserción de contenido multimedia
libre
Proporciones
Ancho: 685px

SITIO INSTITUCIONAL
MÓDULO 2j
Uso
Módulo utilizado solamente en "acerca
de IPN", uso de tamaños imágenes y
tipografía orientado a enumerar caracter-
ísticas especiales.
Proporciones
Ancho: 685px
Columna de Imágen
Ancho: 235px
Título 1
Fuente: Helvética
Peso: Bold
Puntaje: 90px
Color: #363554
Título 2
Puntaje: 28px
Contenido
Fuente: Georgia
Peso: Bold
Puntaje: 13px
Color: #666666
Numeración color: #363554

SITIO INSTITUCIONAL
MÓDULO 2k
Uso
Módulo de ancho medio e imagen
Imágen al costado izquierdo. Utilizado
posterior a una región blanca.
Proporciones
Ancho: 685px
Imágen
Ancho: 235px
Alto: 272px
Título
Fuente: Helvética
Peso: Bold
Puntaje: 24px
Color: #363554
Contenido
Puntaje: 12px
Color: #666666

SITIO INSTITUCIONAL
MÓDULO 3a
Uso
Módulo utilizado para referirse a una
dependencia. La imagen a utilizar es una
vista previa del sitio destino, el logotipo
de la dependencia o una imagen que la
represente. Situada del lado derecho de
la composición acompañada general-
mente de un listado de oferta académica
o actividades de la misma.
Proporciones
Ancho: 235px
Imágen
Ancho: 210px
Alto: 118px
Título
Fuente: Helvética
Peso: Bold
Puntaje:13px
Color: #363554

SITIO INSTITUCIONAL
MÓDULO 3b
Uso
Acceso directo a contenido relacionado
dentro del mismo portal, su utilidad
generalmente es en la parte final de la
página alternando con el módulo 3c. La
imagen será alusiva a la actividad o tema
de la página destino.
Proporciones
Ancho: 235px
Color de fondo: #363554
Imágen
Ancho: 235px
Alto: 208px
Título
Fuente: Helvética
Peso: Bold
Puntaje:18px
Color: #FFFFFF

SITIO INSTITUCIONAL
MÓDULO 3b
Contenido
Fuente: Helvética
Puntaje:12px
Color: #dddde2
Vínculos
Fuente: Helvética
Puntaje: 11px
Color: #363554

SITIO INSTITUCIONAL
MÓDULO 3c
Uso
página alternando con el módulo 3b. La
imagen será alusiva a la actividad o tema
de la página destino. La imagen puede ir
en la parte inferior o superior según se
requiera
Proporciones
Ancho: 235px
Imágen
Ancho: 235px
Alto: 208px
Título
Fuente: Helvética
Peso: Bold
Puntaje:18px
Color: #FFFFFF

SITIO INSTITUCIONAL
MÓDULO 3c
Contenido
Fuente: Helvética
Puntaje:12px
Color: #dddde2
Vínculos
Fuente: Helvética
Puntaje: 11px
Color: #363554

SITIO INSTITUCIONAL
MÓDULO 3d
Uso
Módulo de acceso directo a portal
externo o liga interna, cuando posea
información que exceda un módulo 3b o
3c pero no cuente aún con suficiente
información para llenar un módulo 2b.
Proporciones
Ancho: 235px
Título
Fuente: Helvética
Peso: Bold
Puntaje:18px
Color: #FFFFFF
Contenido
Puntaje:12px
Color: #dddde2
Vínculos
Puntaje: 11px
Color: #363554

SITIO INSTITUCIONAL
MÓDULO 3e
Uso
página alternando con el módulo 3b y 3c
como una tercera opción para dinamismo
de gama cromática. La imagen será
alusiva a la actividad o tema de la página
destino.
Proporciones
Ancho: 235px
Imágen
Ancho: 235px
Alto: 208px
Título
Fuente: Helvética
Peso: Bold
Puntaje:18px
Color: #363554

SITIO INSTITUCIONAL
MÓDULO 4a v1
Uso
Módulo con dos segmentos de vínculos,
de los cuales uno de ellos contendrá
textos cortos mientras el otro podrá tener
textos un poco mas extensos pero
reducidos en opciones. Se acompaña de
dos módulos de tipo 3, generalmente en
el final de la página
Proporciones
Ancho: 440px
Título
Fuente: Helvética
Peso: Bold
Puntaje:18px
Color: #FFFFFF
Contenido
Puntaje:12px
Color: #666666

SITIO INSTITUCIONAL
MÓDULO 4a v1
Vínculos tipo1
Puntaje: 12px
Color: #6d1a42
Vínculos tipo 2
Ancho: 175px
Fuente: Helvética
Puntaje: 13px
Color: #FFFFFF
Borde inferior color: #dddde2

SITIO INSTITUCIONAL
MÓDULO 4a v2
Uso
Listado de accesos directos agrupados
en un módulo con imagen ilustrativa. Se
acompaña de dos módulos de tipo 3,
generalmente en el final de la página. La
imágen puede ir del lado izquierdo o
derecho según se requiera, la liga de “ver
más” es opcional.
Proporciones
Ancho: 440px
Imágen
Ancho: 235px
Alto: 272px
Título
Fuente: Helvética
Peso: Bold
Puntaje:18px
Color: #FFFFFF
Vínculos
Puntaje: 12px
Color: #6d1a42

SITIO INSTITUCIONAL
MÓDULO 5a
Uso
Elemento de listado de vínculos a sitios y
páginas de la red del Politécnico agrupa-
das por categorías. Incluyen breve
descripción, de oferta, misión u activi-
dad, acompañado de vista miniatura de
sitio destino o imagen representativa de
la actividad desarrollada. Pueden estar
precedidas del título de la categoría.
Los vínculos harán referencia al URL
destino, enfocandose en el dominio, pero
excluyendo la ruta completa con fines de
presentación, mas no de funcionalidad.
Proporciones
Ancho: 460px
Imágen
Ancho: 210px
Alto: 118px
Vínculos
Fuente: Helvética
Puntaje: 10px
Color: #363554
Padding: 10px

SITIO INSTITUCIONAL
MÓDULO 5a
Título
Fuente: Helvética
Peso: Bold
Puntaje: 16px
Color: #363554
Contenido
Puntaje: 12px
Color: #666666

SITIO INSTITUCIONAL
MÓDULO 5b
Uso
Elemento dentro del listado de vínculos a
sitios que destaca por su contenido y se
sitúa al final de la lista del lado derecho.
El elemento se distingue en color y en
tamaño de imagen. Puede incluir ligas
dentro del cuerpo de texto con referencia
a ofertas o servicios específcos.
Proporciones
Ancho: 460px
Imágen
Ancho: 235px
Alto: 132px
Título
Fuente: Helvética
Peso: Bold
Puntaje: 16px
Color: #363554
Contenido
Puntaje: 12px
Color: #666666

SITIO INSTITUCIONAL
MÓDULO 5b
Uso
Elementos destacados dentro de listado
de vínculos. Representan ligas dirigidas a
la misma audiencia pero con mayor
mayor importancia colocados en pares a
modo de cierre de listado. Las imágenes
alternan de posición respecto al listado
completo y contrapuestas entre sí.
Proporciones
Ancho: 460px c/u
Imágen
Ancho: 235px
Alto: 132px
Título
Fuente: Helvética
Peso: Bold
Puntaje: 16px
Color: #FFFFFF
Contenido
Puntaje: 12px
Color: #dddde2

SITIO INSTITUCIONAL
MÓDULO 5b
Vínculos
Fuente: Helvética
Puntaje: 10px
Color: #363554
Padding: 10px


IdGraf - IPN 2012 (Web)

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

IdGraf - IPN 2012 (Web)

Cargado por

Copyright:

Formatos disponibles

INSTITUTO POLITÉCNICO NACIONAL

MANUAL DE IDENTIDAD GRÁFICA

México D.F., 2012

Acerca de éste documento 3

INSTITUTO POLITÉCNICO NACIONAL 2

El Manual de Identidad Web del Instituto Politécnico Nacional tiene

Conservar unidad gráfica es de suma importancia para el Instituto

En este documento se exponen los elementos de reticula, colores,

INSTITUTO POLITÉCNICO NACIONAL 3

El desarrollo de interfases gráficas derivadas de un metodología

La Identidad Gráfica Institucional es sin duda el punto de partida

La conjugación de los elementos anteriormente descritos establece

INSTITUTO POLITÉCNICO NACIONAL 4

A partir de el color Guinda institucio-

R: 221 G: 221 B: 226 #DDDDE2 Los colores complementarios le dan

Los colores neutros dan soporte y

INSTITUTO POLITÉCNICO NACIONAL 5

INSTITUTO POLITÉCNICO NACIONAL 6

INSTITUTO POLITÉCNICO NACIONAL 7

Se toma como base el diseño a una

El área crítica comprende los elemen-

INSTITUTO POLITÉCNICO NACIONAL 8

El primer segmento de la página

La segunda región se deriva de una

La tercer región divide en cinco

INSTITUTO POLITÉCNICO NACIONAL 9

El primer segmento de la página

La segunda región se deriva de una

La tercer región divide en cinco

INSTITUTO POLITÉCNICO NACIONAL 10

A partir de las dimensiones de la

INSTITUTO POLITÉCNICO NACIONAL 11

Las páginas interiores basan su

INSTITUTO POLITÉCNICO NACIONAL 12

INSTITUTO POLITÉCNICO NACIONAL 13

INSTITUTO POLITÉCNICO NACIONAL 14

INSTITUTO POLITÉCNICO NACIONAL 15

INSTITUTO POLITÉCNICO NACIONAL 16

Vínculo Título de sección

Vínculo Título de sección

INSTITUTO POLITÉCNICO NACIONAL 17

INSTITUTO POLITÉCNICO NACIONAL 18

Sitios de interés Título

Sitios de interés Imagen

Medios Sociales Imágen

INSTITUTO POLITÉCNICO NACIONAL 19

Widget de traducción título

Widget de traducción área

MENÚ PIÉ DE PÁGINA

Botón Directorio de sitios, Botón

INSTITUTO POLITÉCNICO NACIONAL 20

INSTITUTO POLITÉCNICO NACIONAL 21

INSTITUTO POLITÉCNICO NACIONAL 22

INSTITUTO POLITÉCNICO NACIONAL 23

INSTITUTO POLITÉCNICO NACIONAL 24

Un usuario promedio no pasará más de

INSTITUTO POLITÉCNICO NACIONAL 25

INSTITUTO POLITÉCNICO NACIONAL 26

INSTITUTO POLITÉCNICO NACIONAL 27

Escaparate Vista miniatura

INSTITUTO POLITÉCNICO NACIONAL 28

Escaparate Leer más