Ipn Manual Identidad 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
Racional creativo
Colores
Tipografía
Proporciones
Elementos Generales
Módulos de Contenido
3
4
5
6
7
13
24
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.
3

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
jerarquización de elementos con fines mercadológicos que con-
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.
*Ver documentación de arquitectura de
información generada para este proyecto.
4

COLORES
A partir de el color Guinda institucio-
nal (Pantone 222C), se generó una
gama de colores añadiendo colores
incluyendo complementarios, neutros
y contrastantes.
Los colores complementarios le dan
sobriedad institucional al sitio.
Los colores contrastantes dan dina-
mismo y frescura a elementos a
resaltar.
Los colores neutros dan soporte y
descanso visual para promover la
lectura.
La descripción del color está expre-
sada en código hexagecimal y su
equivalente en mezcla RGB para su
utilización en HTML's
#6D1A42
#363554
#DDDDE2
#F2F0F0
#FFFFFF
#FF9933
#DEDBCC
#000000
R: 109 G: 26 B: 66
R: 54 G: 53 B: 84
R: 221 G: 221 B: 226
R: 242 G: 242 B: 240
R: 255 G: 255 B: 255
R: 255 G: 153 B: 51
R: 222 G: 219 B: 204
R: 0 G: 0 B: 0
5

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

Proporciones
7

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
programa de exploración y barras de
desplazamiento.
8
950
600

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
9

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
10

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
11

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

Elementos generales
13

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
14

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
15

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
16

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
17

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
18

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
19

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
20

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

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
22

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
23

Módulos de contenido
24

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

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
26

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

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
28

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
28

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
30

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
31

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
32

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

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
34

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
35

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
36

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
37

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
38

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
39

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
40

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
41

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
42

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
43

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
44

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
45

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
46

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
47

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
48

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

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
50

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
51

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
52

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
53

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
54

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
55

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
56

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
57

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
58

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
59

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

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
61

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

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
63

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
64

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
65

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
66

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
67

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
68

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

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
70

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
71

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

Ipn Manual Identidad web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Ipn Manual Identidad web

Similar a Ipn Manual Identidad web (20)

Más de Luis Francisco Reyes Aceves

Más de Luis Francisco Reyes Aceves (20)

Último

Último (20)

Ipn Manual Identidad web